fma-ds

Time Picker

A composable time picker: hour, minute, second and AM/PM columns, in a popover or in place.

Formsthird-partyMITChangelogRegistry JSON

Overview

  • Layouts: in a popover (TimePickerTrigger + TimePickerContent), behind a typable field (TimePickerInput, which reads 930, 14h30, 2:30 pm…) or in place (TimePickerPanel). <TimePicker /> alone renders a trigger and a popover.
  • Value: @internationalized/date Time objects (value/defaultValue/onChange, null when empty).
  • Columns: hourCycle, granularity and periodPosition shape them.
  • Choices: hourStep/minuteStep/secondStep, minValue/maxValue (an overnight window when min > max) and isTimeUnavailable narrow them, and a pick moves to the nearest selectable time.
  • `requireConfirm`: keeps picks as a draft until OK.
  • Keyboard: each column is an aria-activedescendant listbox — arrows, Home/End, PageUp/PageDown and typed digits pick, Left/Right move between columns, Enter commits and closes.
  • Forms: name submits HH:mm (or HH:mm:ss) with a native form; isRequired, isInvalid, isReadOnly and isDisabled work as in react-aria.
  • `useTimePicker()`: exposes the state inside a picker.

Every string comes from i18n.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/time-picker

    Files land in components/fma-ds/time-picker.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
@internationalized/date@^3.12.4cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1