{
  "name": "cron-expression-builder",
  "type": "registry:ui",
  "registryDependencies": [
    "label",
    "select"
  ],
  "files": [
    {
      "type": "registry:ui",
      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Label } from '@/components/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\n\ntype CronValue = {\n  minute: string\n  hour: string\n  dayOfMonth: string\n  month: string\n  dayOfWeek: string\n}\n\ntype CronExpressionBuilderProps = {\n  value?: CronValue\n  onChange?: (value: CronValue & { expression: string; human: string }) => void\n}\n\nconst DOW = [\n  { value: '*', label: 'Any day' },\n  { value: '1', label: 'Monday' },\n  { value: '2', label: 'Tuesday' },\n  { value: '3', label: 'Wednesday' },\n  { value: '4', label: 'Thursday' },\n  { value: '5', label: 'Friday' },\n  { value: '6', label: 'Saturday' },\n  { value: '0', label: 'Sunday' },\n]\n\nconst defaultValue: CronValue = {\n  minute: '0',\n  hour: '9',\n  dayOfMonth: '*',\n  month: '*',\n  dayOfWeek: '1',\n}\n\nconst range = (max: number, pad = false) =>\n  Array.from({ length: max }, (_, i) => ({\n    value: String(i),\n    label: pad ? String(i).padStart(2, '0') : String(i),\n  }))\n\nfunction toHuman(value: CronValue) {\n  const day = DOW.find((item) => item.value === value.dayOfWeek)?.label ?? 'Custom day'\n  return `Runs at ${value.hour.padStart(2, '0')}:${value.minute.padStart(2, '0')} on ${day}`\n}\n\nexport function CronExpressionBuilder({\n  value = defaultValue,\n  onChange,\n}: CronExpressionBuilderProps) {\n  const [state, setState] = React.useState<CronValue>(value)\n\n  const setField = (key: keyof CronValue, next: string) => {\n    setState((prev) => {\n      const updated = { ...prev, [key]: next }\n      const expression = `${updated.minute} ${updated.hour} ${updated.dayOfMonth} ${updated.month} ${updated.dayOfWeek}`\n      onChange?.({ ...updated, expression, human: toHuman(updated) })\n      return updated\n    })\n  }\n\n  const expression = `${state.minute} ${state.hour} ${state.dayOfMonth} ${state.month} ${state.dayOfWeek}`\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"grid gap-3 md:grid-cols-3\">\n        <div className=\"space-y-1\">\n          <Label>Minute</Label>\n          <Select value={state.minute} onValueChange={(v) => setField('minute', v)}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {range(60, true).map((option) => (\n                <SelectItem key={option.value} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"space-y-1\">\n          <Label>Hour</Label>\n          <Select value={state.hour} onValueChange={(v) => setField('hour', v)}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {range(24, true).map((option) => (\n                <SelectItem key={option.value} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"space-y-1\">\n          <Label>Day of Week</Label>\n          <Select value={state.dayOfWeek} onValueChange={(v) => setField('dayOfWeek', v)}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {DOW.map((option) => (\n                <SelectItem key={option.value} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <div className=\"rounded border p-3 text-sm\">\n        <div className=\"font-medium\">Cron: {expression}</div>\n        <div className=\"text-muted-foreground\">{toHuman(state)}</div>\n      </div>\n    </div>\n  )\n}\n",
      "path": "ui/cron-expression-builder.tsx",
      "target": "components/ui/cron-expression-builder.tsx"
    }
  ]
}