{
  "name": "tsf-time-field",
  "type": "registry:ui",
  "registryDependencies": [
    "field",
    "select",
    "time",
    "tsf-form-context"
  ],
  "files": [
    {
      "path": "./items/tanstack-form/time-field/component.tsx",
      "type": "registry:ui",
      "target": "./components/ui/shuip/tanstack-form/time-field.tsx",
      "content": "'use client';\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\nimport { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';\nimport { HOUR_OPTIONS, isHourDisabled, isMinuteDisabled, joinTime, MINUTE_OPTIONS, splitTime } from '@/lib/time';\n\nexport interface TimeFieldProps {\n  label?: string;\n  description?: string;\n  min?: string;\n  max?: string;\n  disabled?: boolean;\n  fieldProps?: React.ComponentProps<typeof Field>;\n}\n\nexport function TimeField({ label, description, min, max, disabled, fieldProps }: TimeFieldProps) {\n  const field = useFieldContext<string>();\n  const { isValid, errors } = field.state.meta;\n  const { hour, minute } = splitTime(field.state.value ?? '');\n  const bounds = { min, max };\n\n  return (\n    <Field className='gap-2' data-invalid={!isValid} {...fieldProps}>\n      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}\n      <div className='flex items-center gap-2'>\n        <Select value={hour} onValueChange={(h) => field.handleChange(joinTime(h, minute))} disabled={disabled}>\n          <SelectTrigger id={field.name} aria-invalid={!isValid} className='w-full'>\n            <SelectValue placeholder='HH' />\n          </SelectTrigger>\n          <SelectContent>\n            {HOUR_OPTIONS.map((h) => (\n              <SelectItem key={h} value={h} disabled={isHourDisabled(h, bounds)}>\n                {h}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <span className='text-muted-foreground'>:</span>\n        <Select value={minute} onValueChange={(m) => field.handleChange(joinTime(hour, m))} disabled={disabled}>\n          <SelectTrigger aria-invalid={!isValid} className='w-full'>\n            <SelectValue placeholder='mm' />\n          </SelectTrigger>\n          <SelectContent>\n            {MINUTE_OPTIONS.map((m) => (\n              <SelectItem key={m} value={m} disabled={isMinuteDisabled(m, hour, bounds)}>\n                {m}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n      {!isValid && (\n        <FieldError\n          className='text-xs text-left'\n          errors={errors.map((error) => ({ message: typeof error === 'string' ? error : error?.message }))}\n        />\n      )}\n      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}\n    </Field>\n  );\n}\n"
    }
  ],
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}