{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-countdown",
  "type": "registry:component",
  "title": "Countdown",
  "description": "A remaining duration as clock text",
  "author": "sudo-kw <https://github.com/sudo-kw>",
  "dependencies": [
    "@gpuix/native@0.11.0",
    "@gpuix/react@0.11.0",
    "effect@4.1.2"
  ],
  "registryDependencies": [
    "https://gpuixui.sudokw.com/gpuix-tokens.json",
    "https://gpuixui.sudokw.com/gpuix-tw.json"
  ],
  "files": [
    {
      "path": "packages/components/src/countdown.tsx",
      "target": "@ui/gpuixui/components/countdown.tsx",
      "type": "registry:component",
      "content": "/** @jsxImportSource @gpuix/react */\nimport type { Props } from \"@gpuix/react\";\nimport {\n  mergeStyles,\n  resolveStyle,\n  type StateStyle,\n} from \"@gpuix/react/floating\";\nimport { COUNTDOWN, cn } from \"../tw/index.js\";\nimport { formatCountdown, readableRemaining } from \"./countdown/logic.js\";\nimport { recipeStyle } from \"./internal/recipe.js\";\nimport { useTheme } from \"./internal/theme.js\";\n\nexport interface CountdownProps extends Omit<Props, \"children\" | \"style\"> {\n  readonly remainingMs: number;\n\n  readonly label?: string;\n\n  readonly showDays?: boolean;\n\n  readonly className?: string;\n\n  readonly style?: StateStyle<CountdownState>;\n}\n\nexport interface CountdownState {\n  readonly remainingMs: number;\n  readonly expired: boolean;\n}\n\nexport const Countdown = ({\n  remainingMs,\n  label,\n  showDays = false,\n  className,\n  style,\n  ...rest\n}: CountdownProps) => {\n  const theme = useTheme();\n  const remaining = readableRemaining(remainingMs);\n  const expired = remaining <= 0;\n\n  return (\n    <text\n      {...(label === undefined ? {} : { \"aria-label\": label })}\n      {...rest}\n      style={mergeStyles(\n        mergeStyles(recipeStyle(cn(COUNTDOWN, className), theme), {\n          color: expired\n            ? theme.colors.mutedForeground\n            : theme.colors.foreground,\n        }),\n        resolveStyle(style, { remainingMs: remaining, expired }),\n      )}\n    >\n      {formatCountdown(remaining, { showDays })}\n    </text>\n  );\n};\n\nexport const countdownMeta = {\n  name: \"Countdown\",\n  tier: 2,\n  status: \"done\",\n  gpuixSupport: \"yes\",\n  limitations: [\n    \"display-only: the application ticks with Effect Clock and passes remainingMs; the component owns no timer\",\n    \"a remaining time the clock cannot read (NaN, an infinity) is no time left: it renders 00:00 in the expired role\",\n    \"fixed locale-free clock format; days are 24-hour units, not calendar days\",\n    \"the runtime announces no live region (no aria-live), so the label names the text rather than pushing changes\",\n  ],\n  docs: \"docs/countdown.mdx\",\n  example: \"examples/countdown.example.tsx\",\n  testFile: \"src/behaviour/countdown.test.tsx\",\n} as const;\n"
    },
    {
      "path": "packages/components/src/countdown/logic.ts",
      "target": "@ui/gpuixui/components/countdown/logic.ts",
      "type": "registry:lib",
      "content": "export interface CountdownParts {\n  readonly days: number;\n  readonly hours: number;\n  readonly minutes: number;\n  readonly seconds: number;\n}\n\nconst SECONDS_PER_MINUTE = 60;\nconst SECONDS_PER_HOUR = 60 * SECONDS_PER_MINUTE;\nconst SECONDS_PER_DAY = 24 * SECONDS_PER_HOUR;\n\nexport const readableRemaining = (remainingMs: number): number =>\n  Number.isFinite(remainingMs) ? Math.max(0, remainingMs) : 0;\n\nconst wholeSeconds = (remainingMs: number): number =>\n  Math.floor(readableRemaining(remainingMs) / 1000);\n\nexport const breakdown = (remainingMs: number): CountdownParts => {\n  const total = wholeSeconds(remainingMs);\n  return {\n    days: Math.floor(total / SECONDS_PER_DAY),\n    hours: Math.floor((total % SECONDS_PER_DAY) / SECONDS_PER_HOUR),\n    minutes: Math.floor((total % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE),\n    seconds: total % SECONDS_PER_MINUTE,\n  };\n};\n\nconst pad = (value: number): string =>\n  value < 10 ? `0${value}` : String(value);\n\nexport const formatCountdown = (\n  remainingMs: number,\n  options: { readonly showDays?: boolean } = {},\n): string => {\n  const total = wholeSeconds(remainingMs);\n  const { days, minutes, seconds } = breakdown(remainingMs);\n\n  if (options.showDays === true && days > 0) {\n    const hours = Math.floor((total % SECONDS_PER_DAY) / SECONDS_PER_HOUR);\n    return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;\n  }\n  if (total >= SECONDS_PER_HOUR) {\n    return `${pad(Math.floor(total / SECONDS_PER_HOUR))}:${pad(minutes)}:${pad(seconds)}`;\n  }\n  return `${pad(minutes)}:${pad(seconds)}`;\n};\n"
    },
    {
      "path": "packages/components/src/internal/recipe.ts",
      "target": "@ui/gpuixui/components/internal/recipe.ts",
      "type": "registry:lib",
      "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport { createRecipeCache } from \"../../tw/index.js\";\nimport type { Theme } from \"./theme.js\";\n\nexport const recipeStyle: (recipe: string, theme: Theme) => StyleDesc =\n  createRecipeCache(512);\n"
    },
    {
      "path": "packages/components/src/internal/theme.ts",
      "target": "@ui/gpuixui/components/internal/theme.ts",
      "type": "registry:lib",
      "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport * as Schema from \"effect/Schema\";\nimport {\n  alpha,\n  avatarPixels,\n  avatarSize,\n  brandTextOn,\n  controlFocusRing,\n  controlHeight,\n  controlPaddingX,\n  currentPlatform,\n  darkTheme,\n  disabledAction,\n  disabledOpacity,\n  elevationShadow,\n  filledHover,\n  filledPressed,\n  findHighlight,\n  focusRing,\n  keyboardFocusRing,\n  lightTheme,\n  nativeTextTheme,\n  pointerWash,\n  selectionOn,\n  statusTone,\n  syntaxColors,\n  targetSize,\n  textStyle,\n  type BoxShadow,\n  type ElevationLevel,\n  type FindHighlightSource,\n  type NativeTextFill,\n  type PlatformName,\n  type PointerWashSurface,\n  type StatusTone,\n  type SyntaxColors,\n  type SyntaxRole,\n  type TextRole,\n  type Theme,\n  type ThemeColors,\n} from \"../../tokens/index.js\";\n\nexport {\n  alpha,\n  avatarPixels,\n  avatarSize,\n  controlFocusRing,\n  controlHeight,\n  controlPaddingX,\n  currentPlatform,\n  darkTheme,\n  disabledAction,\n  disabledOpacity,\n  elevationShadow,\n  filledHover,\n  filledPressed,\n  findHighlight,\n  focusRing,\n  keyboardFocusRing,\n  lightTheme,\n  nativeTextTheme,\n  statusTone,\n  syntaxColors,\n  targetSize,\n  textStyle,\n};\nexport type {\n  BoxShadow,\n  ElevationLevel,\n  FindHighlightSource,\n  NativeTextFill,\n  PlatformName,\n  StatusTone,\n  SyntaxColors,\n  SyntaxRole,\n  TextRole,\n  Theme,\n};\nexport { ThemeProvider, useTheme } from \"../../tokens/react.js\";\n\nexport const keyboardRing = (theme: Theme, invalid = false): StyleDesc =>\n  controlFocusRing(theme, { invalid }) ?? {};\n\nexport interface ControlRingState {\n  readonly disabled?: boolean;\n\n  readonly invalid?: boolean;\n}\n\nexport const controlRing = (\n  theme: Theme,\n  state: ControlRingState = {},\n): StyleDesc => controlFocusRing(theme, state) ?? {};\n\nexport const pressWash = (theme: Theme, replaced: PointerWashSurface): string =>\n  pointerWash(theme, \"active\", replaced) ?? theme.colors.active;\n\nexport const selectionWash = (theme: Theme): StyleDesc => ({\n  selectionColor: theme.colors.selection,\n});\n\nexport const keepContent: StyleDesc = { keyboardFocusDim: false };\n\nexport const disabledFade = (\n  disabled: boolean,\n): { readonly opacity: number } | undefined =>\n  disabled ? { opacity: disabledOpacity } : undefined;\n\nconst Tones = Schema.Literals([\"info\", \"success\", \"warning\", \"danger\"]);\n\nexport type Tone = typeof Tones.Type;\n\nexport const toneOf = (value: unknown): Tone =>\n  Schema.is(Tones)(value) ? value : \"info\";\n\nexport interface ToneStyle {\n  readonly fg: string;\n  readonly bg: string;\n  readonly border: string;\n}\n\nconst TOKEN_TONE: Readonly<Record<Tone, StatusTone>> = {\n  info: \"info\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"destructive\",\n};\n\nexport const tone = (theme: Theme, value: Tone): ToneStyle => {\n  const { background, border, foreground } = statusTone(\n    theme,\n    TOKEN_TONE[value],\n  );\n  return { bg: background, border, fg: foreground };\n};\n\nconst softRoles: Readonly<Record<Tone, keyof ThemeColors>> = {\n  info: \"infoSoft\",\n  success: \"successSoft\",\n  warning: \"warningSoft\",\n  danger: \"destructiveSoft\",\n};\n\nexport const messageLink = (theme: Theme, value: Tone): string =>\n  brandTextOn(theme, softRoles[value]);\n\nexport const messageSelection = (theme: Theme, value: Tone): string =>\n  selectionOn(theme, softRoles[value]);\n\nexport const toneSurface = (theme: Theme, value: Tone): StyleDesc => {\n  const { bg, border, fg } = tone(theme, value);\n  return {\n    backgroundColor: bg,\n    color: fg,\n    borderWidth: theme.borderWidth.thin,\n    borderColor: border,\n  };\n};\n"
    }
  ],
  "docs": "[Countdown](https://gpuixui.sudokw.com/components/countdown) — These are GPUix native components: the files render through GPUix's reconciler against `@gpuix/react`, not the DOM, and need the per-platform `@gpuix/native` binding. The CLI installs the `@gpuixui/*` runtime the components import as registry items, so the copied tree resolves on its own; wrap it in `ThemeProvider` before it renders.",
  "meta": {
    "url": "/components/countdown",
    "kind": "component",
    "runtime": "gpuix",
    "registry": "gpuixui"
  }
}