Time picker

Exports

Import these components from @mbsw/ui.

TimePicker

TimePickerTrigger

TimePickerAnchor

TimePickerContent

TimePanel

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

TimePicker

TimePicker props
Prop	Type	Requirement
`children`	`ReactNode`	Optional
`open`	`boolean`	Optional
`defaultOpen`	`boolean`	Optional
`onOpenChange`	`((open: boolean) => void)`	Optional

TimePickerTrigger

TimePickerTrigger props
Prop	Type	Requirement
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	Required
`standalone` Bind to the enclosing official Popover, not a surrounding TimePicker.	`boolean`	Optional

TimePickerContent

TimePickerContent props
Prop	Type	Requirement
`aria-label` Defines a string value that labels the current element.	`string`	Conditional
`aria-labelledby` Identifies the element (or elements) that labels the current element.	`string`	Conditional

TimePanel

TimePanel props
Prop	Type	Requirement
`value`	`TimeValue \| null`	Optional
`defaultValue`	`TimeValue \| null`	Optional
`minTime`	`TimeValue`	Optional
`maxTime`	`TimeValue`	Optional
`onValueChange`	`((value: TimeValue \| null) => void)`	Optional
`labels`	`Partial<TimePanelLabels>`	Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode, type ComponentPropsWithRef } from 'react';

import { Popover as PopoverPrimitive } from 'radix-ui';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

export type TimePickerProps = {
    children?: ReactNode;
    open?: boolean;
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
};

export type TimePickerTriggerProps = Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>, 'asChild' | 'children'> & DataAttributes & {
    children: ReactElement;
    /** Bind to the enclosing official Popover, not a surrounding TimePicker. */
    standalone?: boolean;
};

export type TimePickerAnchorProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor> & DataAttributes;

export type TimePickerContentProps = Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, 'asChild' | 'deferPointerDownOutside' | 'forceMount' | 'role'> & DataAttributes & ({
    'aria-label': string;
    'aria-labelledby'?: string;
} | {
    'aria-label'?: string;
    'aria-labelledby': string;
});

export declare function TimePicker({ children, defaultOpen, open, onOpenChange, }: TimePickerProps): import("react").JSX.Element;

export declare const TimePickerTrigger: import("react").ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "children" | "asChild"> & DataAttributes & {
    children: ReactElement;
    /** Bind to the enclosing official Popover, not a surrounding TimePicker. */
    standalone?: boolean;
} & import("react").RefAttributes<HTMLElement>>;

export declare const TimePickerAnchor: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & DataAttributes & import("react").RefAttributes<HTMLDivElement>>;

export declare const TimePickerContent: import("react").ForwardRefExoticComponent<TimePickerContentProps & import("react").RefAttributes<HTMLDivElement>>;

export type TimeValue = {
    hour: number;
    minute: number;
};

type TimeConstraints = {
    minTime?: TimeValue;
    maxTime?: TimeValue;
};

export type TimePanelLabels = {
    period: string;
    hour: string;
    minute: string;
    am: string;
    pm: string;
};

export type TimePanelProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'children'> & TimeConstraints & {
    value?: TimeValue | null;
    defaultValue?: TimeValue | null;
    onValueChange?: (value: TimeValue | null) => void;
    labels?: Partial<TimePanelLabels>;
};

export declare const TimePanel: import("react").ForwardRefExoticComponent<Omit<TimePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;