DocsinputsDuration picker

Duration picker

A Calamansi duration field: hours, minutes and a save button in one bar that pulls apart on a real liquid thread when you press the pen.

Palette
Calamansi

Tap the pen to edit the duration

  • Hr.
  • Min.

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/duration-picker

How to use

demo.tsx
import { DurationPicker } from "@/components/ui/duration-picker"
export function Demo() {
  return (
    <DurationPicker
      defaultValue={{ hours: 1, minutes: 30 }}
      onConfirm={(value) => console.log(value)}
    />
  )
}

Props

Options you can pass to customize this component.

  • valueoptional
    DurationValue

    Controlled value, `{ hours, minutes }`. A new outside value is adopted unless the field already shows that number, so typing is never fought.

  • defaultValueoptional
    DurationValue

    Value on mount when uncontrolled.

  • onChangeoptional
    (value: DurationValue) => void

    Fired on every keystroke with the clamped value.

  • onConfirmoptional
    (value: DurationValue) => void

    Fired when the bar is committed — the tick, or Enter in either field.

  • editingoptional
    boolean

    Hold the bar open or shut yourself.

  • defaultEditingoptional
    boolean

    Open the bar on mount when uncontrolled.

  • onEditingChangeoptional
    (editing: boolean) => void

    Fired when the pieces split apart or merge back.

  • maxHoursoptional
    number

    Ceiling for the hours field, and the verge the input refuses to cross.

  • maxMinutesoptional
    number

    Ceiling for the minutes field.

  • hoursLabeloptional
    string

    Unit after the hours field, and its accessible name as well.

  • minutesLabeloptional
    string

    Unit after the minutes field.

  • variantoptional
    whitecalamansislatecitrus

    Palette the save button and its bead are painted in once the seams are open.

  • sizeoptional
    smmdlg

    Bar height, and with it the corner, the travel and the width a live field grows to.

  • gapoptional
    number

    Override how far the seams open on each side, in pixels.

  • radiusoptional
    number

    Override the brand corner radius in pixels. Defaults to the kit's share of the bar — 16 on 40, 20 on 48, 24 on 56.

  • viscosityoptional
    number

    The SVG blur behind the fuse, in pixels, and so how far a thread reaches: the bridge survives to about 1.234 of this before it severs. Defaults to 0.55 of the gap.

  • thresholdoptional
    number

    The alpha ramp's slope — how hard the fused edge is, and how much the thread thins before it parts.

  • gooeyoptional
    boolean

    Run the fuse at all. Off, the pieces simply slide apart. The filter is skipped under reduced motion either way.

  • beadoptional
    boolean

    Leave a bead behind when the thread severs. The drop wears the material of its own seam: the palette at the save button's, the tray's own colour between the two fields.

  • disabledoptional
    boolean

    Dim the bar and take both the fields and the tick out of play.

  • classNameoptional
    string

    Extra classes merged onto the wrapper.

Dependencies

motionfigma-squirclereact-use-measure

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousGooey nav
NextTask widget