{
  "name": "time-picker-placeholder-demo",
  "type": "registry:example",
  "registryDependencies": [
    "time-picker"
  ],
  "files": [
    {
      "path": "examples/time-picker-placeholder-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  TimePicker,\n  TimePickerContent,\n  TimePickerHour,\n  TimePickerInput,\n  TimePickerInputGroup,\n  TimePickerLabel,\n  TimePickerMinute,\n  TimePickerPeriod,\n  TimePickerSeparator,\n  TimePickerTrigger,\n} from \"@/registry/bases/radix/ui/time-picker\";\n\nexport default function TimePickerPlaceholderDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <TimePicker className=\"w-[280px]\" segmentPlaceholder=\"--\">\n        <TimePickerLabel>Default (--)</TimePickerLabel>\n        <TimePickerInputGroup>\n          <TimePickerInput segment=\"hour\" />\n          <TimePickerSeparator />\n          <TimePickerInput segment=\"minute\" />\n          <TimePickerInput segment=\"period\" />\n          <TimePickerTrigger />\n        </TimePickerInputGroup>\n        <TimePickerContent>\n          <TimePickerHour />\n          <TimePickerMinute />\n          <TimePickerPeriod />\n        </TimePickerContent>\n      </TimePicker>\n\n      <TimePicker\n        className=\"w-[280px]\"\n        segmentPlaceholder={{ hour: \"hh\", minute: \"mm\", period: \"aa\" }}\n      >\n        <TimePickerLabel>Custom (hh:mm aa)</TimePickerLabel>\n        <TimePickerInputGroup>\n          <TimePickerInput segment=\"hour\" />\n          <TimePickerSeparator />\n          <TimePickerInput segment=\"minute\" />\n          <TimePickerInput segment=\"period\" />\n          <TimePickerTrigger />\n        </TimePickerInputGroup>\n        <TimePickerContent>\n          <TimePickerHour />\n          <TimePickerMinute />\n          <TimePickerPeriod />\n        </TimePickerContent>\n      </TimePicker>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}