{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "time-input",
  "title": "Time Input",
  "description": "One highlight glides between hours, minutes and AM/PM as you move.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.2",
    "@ui-sdk/react@0.1.0-beta.2"
  ],
  "registryDependencies": [
    "@keyframery/motion"
  ],
  "files": [
    {
      "path": "registry/components/keyframery/primitives/time-input.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/time-input`: same parts, same props. Swap the import and keep your code.\n   This file adds motion only. Colours, radii, shadows and spacing stay yours.\n\n   Glide: one highlight sits under the segment with focus and glides to the next segment as focus\n   moves, typed or tabbed. It is the root's `before:`; give it your own colour and radius with\n   `before:` classes on TimeInput. */\n\nimport { TimeInput as TimeInputRoot, TimeInputSegment as TimeInputSegmentPart } from \"@ui-sdk/react/time-input\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/time-input\"\n\nfunction TimeInput({ className, children, ...props }: React.ComponentProps<typeof TimeInputRoot>) {\n  return (\n    <TimeInputRoot\n      className={cn(\n        \"relative isolate [anchor-scope:--kf-seg,--kf-seg-rest]\",\n        \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:content-[''] before:[position-anchor:--kf-seg]\",\n        \"before:bg-[color-mix(in_oklch,currentColor_9%,transparent)]\",\n        \"before:top-[anchor(--kf-seg_top,anchor(--kf-seg-rest_top))] before:right-[anchor(--kf-seg_right,anchor(--kf-seg-rest_right))]\",\n        \"before:bottom-[anchor(--kf-seg_bottom,anchor(--kf-seg-rest_bottom))] before:left-[anchor(--kf-seg_left,anchor(--kf-seg-rest_left))]\",\n        \"before:[transition:top_calc(280ms*var(--kf-speed,1))_var(--ease-spring),right_calc(280ms*var(--kf-speed,1))_var(--ease-spring),bottom_calc(280ms*var(--kf-speed,1))_var(--ease-spring),left_calc(280ms*var(--kf-speed,1))_var(--ease-spring),opacity_calc(160ms*var(--kf-speed,1))_var(--ease-house)]\",\n        \"has-[input:focus]:before:opacity-100 motion-reduce:before:[transition:none]!\",\n        className,\n      )}\n      {...props}\n    >\n      {children ??\n        ((state) =>\n          state.segments.map((segment) => <TimeInputSegment key={segment.key} segment={segment} />))}\n    </TimeInputRoot>\n  )\n}\n\n/* The segment with focus names itself as the highlight's anchor. The first segment is a resting\n   anchor: focus passes through \"nothing focused\" for a moment as it moves between segments, and\n   without somewhere to rest the highlight would jump instead of gliding. */\nfunction TimeInputSegment({ className, ...props }: React.ComponentProps<typeof TimeInputSegmentPart>) {\n  return <TimeInputSegmentPart className={cn(\n        \"first:[anchor-name:--kf-seg-rest] focus:[anchor-name:--kf-seg] first:focus:[anchor-name:--kf-seg,--kf-seg-rest]\",\n        className,\n      )} {...props} />\n}\n\nexport { TimeInput, TimeInputSegment }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/time-input.tsx"
    },
    {
      "path": "registry/components/keyframery/time-input.tsx",
      "content": "\"use client\"\n\n/* Styled time input: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n  TimeInput as TimeInputPrimitive,\n  TimeInputSegment as TimeInputSegmentPrimitive,\n  createTimeInputController,\n} from \"@/components/keyframery/primitives/time-input\"\nimport { cn } from \"@/lib/utils\"\n\n/* The field look, as in Input: one hairline variable that hover, focus and invalid change. */\nconst fieldBox =\n  \"rounded-[10px] bg-background text-[13px] \" +\n  \"[--field-line:rgb(0_0_0/0.09)] dark:[--field-line:rgb(255_255_255/0.1)] \" +\n  \"shadow-[0_0_0_1px_var(--field-line),0_1px_2px_rgb(0_0_0/0.05)] dark:shadow-[0_0_0_1px_var(--field-line)] \" +\n  \"transition-[box-shadow,background-color] duration-[calc(150ms*var(--kf-speed,1))] ease-house motion-reduce:transition-none! \" +\n  \"hover:[--field-line:rgb(0_0_0/0.16)] dark:hover:[--field-line:rgb(255_255_255/0.18)]\"\n\n/* The field. The ring follows whichever segment has focus; invalid wins over focus. */\nfunction TimeInput({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof TimeInputPrimitive>) {\n  return (\n    <TimeInputPrimitive\n      className={cn(\n        fieldBox,\n        \"inline-flex h-9 w-fit min-w-0 cursor-text items-center px-2 text-foreground tabular-nums\",\n        \"has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-ring/25 has-[input:focus-visible]:[--field-line:var(--ring)] dark:has-[input:focus-visible]:[--field-line:var(--ring)]\",\n        \"data-invalid:ring-destructive/25! data-invalid:[--field-line:var(--destructive)]!\",\n        \"data-readonly:bg-muted/50\",\n        /* The highlight the primitive glides under the focused segment. */\n        \"before:rounded-[6px] before:bg-accent\",\n        \"data-disabled:cursor-not-allowed data-disabled:bg-muted data-disabled:text-muted-foreground data-disabled:[--field-line:rgb(0_0_0/0.06)] dark:data-disabled:[--field-line:rgb(255_255_255/0.06)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children ??\n        ((state) =>\n          state.segments.map((segment) => (\n            <TimeInputSegment key={segment.key} segment={segment} />\n          )))}\n    </TimeInputPrimitive>\n  )\n}\n\n/* A segment sizes to its text. The one with focus sits on the accent tile the primitive glides\n   between segments, and an empty one shows its placeholder in a quieter colour. */\nfunction TimeInputSegment({\n  className,\n  ...props\n}: React.ComponentProps<typeof TimeInputSegmentPrimitive>) {\n  return (\n    <TimeInputSegmentPrimitive\n      className={cn(\n        \"h-6 rounded-[6px] bg-transparent px-[3px] text-center text-[13px] leading-none font-medium text-foreground tabular-nums outline-none\",\n        \"[field-sizing:content] caret-transparent selection:bg-transparent\",\n        /* Room for the full number even while empty, so the field keeps its width. */\n        \"data-[type=day]:min-w-[calc(2ch+6px)] data-[type=month]:min-w-[calc(2ch+6px)] data-[type=hour]:min-w-[calc(2ch+6px)] data-[type=minute]:min-w-[calc(2ch+6px)] data-[type=second]:min-w-[calc(2ch+6px)]\",\n        \"data-[type=year]:min-w-[calc(4ch+6px)] data-[type=dayPeriod]:min-w-[calc(2.2em+6px)]\",\n        \"transition-colors duration-[calc(150ms*var(--kf-speed,1))] motion-reduce:transition-none! focus:text-accent-foreground\",\n        \"placeholder:text-muted-foreground/70 data-empty:text-muted-foreground/70\",\n        \"data-[type=literal]:flex data-[type=literal]:items-center data-[type=literal]:px-px data-[type=literal]:font-normal data-[type=literal]:text-muted-foreground/70\",\n        \"data-[type=dayPeriod]:ml-1 data-[type=dayPeriod]:uppercase\",\n        \"data-invalid:not-data-[type=literal]:text-destructive\",\n        \"data-disabled:pointer-events-none data-disabled:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { TimeInput, TimeInputSegment, createTimeInputController }\n",
      "type": "registry:component",
      "target": "components/keyframery/time-input.tsx"
    }
  ],
  "type": "registry:component"
}