@velocis/timepicker1 0.2.0

package/dist/index.d.cts

@@ -0,0 +1,193 @@
+import * as react from 'react';
+import { RefObject, CSSProperties } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/**
+ * Rules for times that cannot be selected.
+ */
+type TimePicker1DisabledRule = 
+/** وقت محدد */
+{
+    type: 'time';
+    time: TimeValue;
+}
+/** عدة أوقات محددة */
+ | {
+    type: 'times';
+    times: TimeValue[];
+}
+/** ساعة معينة في كل يوم */
+ | {
+    type: 'hour';
+    hour: number;
+}
+/** دقيقة معينة في كل ساعة (مثلاً :30) */
+ | {
+    type: 'minute';
+    minute: number;
+}
+/** ساعة ودقيقة محددتان */
+ | {
+    type: 'hourMinute';
+    hour: number;
+    minute: number;
+}
+/** قاعدة مخصصة */
+ | {
+    type: 'custom';
+    match: (time: TimeValue) => boolean;
+};
+type TimePicker1TimeConstraints = {
+    minTime?: TimeValue;
+    maxTime?: TimeValue;
+    disabledRules?: TimePicker1DisabledRule[];
+};
+declare function isTimeRuleDisabled(time: TimeValue, rule: TimePicker1DisabledRule): boolean;
+declare function isTimeDisabledByRules(time: TimeValue, rules: TimePicker1DisabledRule[] | undefined): boolean;
+declare function isTimePickerTimeDisabled(time: TimeValue, constraints?: TimePicker1TimeConstraints): boolean;
+
+type TimeValue = {
+    hours: number;
+    minutes: number;
+};
+type TimePicker1Colors = {
+    /** Main panel background */
+    panelBgColor?: string;
+    /** Active hour/minute item background */
+    activeItemColor?: string;
+    /** Scrollbar thumb color (Firefox + WebKit) */
+    scrollbarThumbColor?: string;
+    /** Scrollbar width in px (default 2) */
+    scrollbarWidth?: number;
+};
+type TimePicker1Props = {
+    trigger?: React.ReactNode;
+    value?: TimeValue | null;
+    defaultValue?: TimeValue | null;
+    onChange?: (time: TimeValue) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    colors?: TimePicker1Colors;
+    locale?: string;
+    use24Hour?: boolean;
+    /** Interval between slots in minutes (default 15) */
+    minuteStep?: number;
+    /** How many slots to show in the list */
+    slotCount?: number;
+    /** Start list from the next slot after the user's current time */
+    startFromNow?: boolean;
+    /** أقرب وقت يمكن اختياره */
+    minTime?: TimeValue;
+    /** آخر وقت يمكن اختياره */
+    maxTime?: TimeValue;
+    /**
+     * أوقات ممنوعة — انظر `TimePicker1DisabledRule`
+     * @example
+     * disabledRules={[
+     *   { type: 'hourMinute', hour: 12, minute: 0 },
+     *   { type: 'minute', minute: 30 },
+     * ]}
+     */
+    disabledRules?: TimePicker1DisabledRule[];
+    /** Fixed height of the scrollable time list (px number or CSS length) */
+    listHeight?: string | number;
+    listClassName?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    contentWidth?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    closeOnScroll?: boolean;
+    contentZIndex?: number | string;
+    testId?: string;
+    contentTestId?: string;
+};
+
+declare function TimePicker1Root({ trigger, value: controlledValue, defaultValue, onChange, open: controlledOpen, defaultOpen, onOpenChange, colors, locale: localeProp, use24Hour, minuteStep, slotCount, startFromNow, minTime, maxTime, disabledRules, listHeight, listClassName, triggerClassName, contentClassName, contentWidth, fullWidth, disabled, closeOnSelect, closeOnScroll, contentZIndex, testId, contentTestId, }: TimePicker1Props): react.JSX.Element;
+
+declare const TIMEPICKER1_DEFAULTS: {
+    readonly contentWidth: "w-40";
+    readonly contentZIndex: 9999;
+    readonly closeOnScroll: true;
+    readonly fullWidth: false;
+    readonly disabled: false;
+    readonly defaultOpen: false;
+    readonly closeOnSelect: true;
+    readonly minuteStep: 15;
+    readonly use24Hour: false;
+    readonly slotCount: 48;
+    readonly startFromNow: true;
+    readonly listHeight: 280;
+};
+declare const TIMEPICKER1_DEFAULT_COLORS: {
+    readonly panelBgColor: "#141414";
+    readonly activeItemColor: "#FF6B3D";
+    readonly scrollbarThumbColor: "rgba(255, 255, 255, 0.18)";
+    readonly scrollbarWidth: 2;
+};
+
+type UseTimePicker1Options = Partial<Pick<TimePicker1Props, 'value' | 'defaultValue' | 'onChange' | 'open' | 'defaultOpen' | 'onOpenChange' | 'colors' | 'locale' | 'use24Hour' | 'minuteStep' | 'slotCount' | 'startFromNow' | 'minTime' | 'maxTime' | 'disabledRules' | 'listHeight' | 'listClassName' | 'closeOnSelect' | 'contentWidth' | 'fullWidth'>>;
+type UseTimePicker1Result = {
+    value: TimeValue | null;
+    setValue: (time: TimeValue) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    show: () => void;
+    hide: () => void;
+    anchorRef: RefObject<HTMLButtonElement | null>;
+    timePickerProps: Pick<TimePicker1Props, 'value' | 'onChange' | 'open' | 'onOpenChange' | 'colors' | 'locale' | 'use24Hour' | 'minuteStep' | 'slotCount' | 'startFromNow' | 'minTime' | 'maxTime' | 'disabledRules' | 'listHeight' | 'listClassName' | 'closeOnSelect' | 'contentWidth' | 'fullWidth'>;
+};
+declare function useTimePicker1(options?: UseTimePicker1Options): UseTimePicker1Result;
+
+type TimePickerPanelProps = {
+    value: TimeValue | null;
+    colors: TimePicker1Colors;
+    locale: string;
+    use24Hour: boolean;
+    minuteStep: number;
+    slotCount: number;
+    startFromNow: boolean;
+    isOpen: boolean;
+    minTime?: TimeValue;
+    maxTime?: TimeValue;
+    disabledRules?: TimePicker1DisabledRule[];
+    listHeight: string | number;
+    listClassName?: string;
+    onChange: (time: TimeValue) => void;
+    className?: string;
+};
+declare function TimePickerPanel({ value, colors, locale, use24Hour, minuteStep, slotCount, startFromNow, isOpen, minTime, maxTime, disabledRules, listHeight, listClassName, onChange, className, }: TimePickerPanelProps): react.JSX.Element;
+
+declare const timePicker1TriggerVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const timePicker1ContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const timePicker1ItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+declare function isTimeInRange(time: TimeValue, minTime?: TimeValue, maxTime?: TimeValue): boolean;
+/** Next step slot strictly after the user's current time (e.g. 6:04 → 6:15). */
+declare function getNextSlotAfterNow(step?: number): TimeValue;
+declare function generateBoundedTimeSlots(options: {
+    startFromNow: boolean;
+    minTime?: TimeValue;
+    maxTime?: TimeValue;
+    disabledRules?: TimePicker1DisabledRule[];
+    minuteStep: number;
+    slotCount: number;
+}): TimeValue[];
+/** Format like `4:00 م` (Arabic) or `4:00 PM` (English). */
+declare function formatTimeSlot(time: TimeValue | null | undefined, locale: string, use24Hour: boolean): string;
+declare function clampTimeToRange(time: TimeValue, minTime?: TimeValue, maxTime?: TimeValue): TimeValue;
+
+declare const TIMEPICKER1_SCROLLBAR_WIDTH_PX = 2;
+/** Class hook for the injected ultra-thin scrollbar styles */
+declare const timepicker1ListScrollbarStyles = "velocis-timepicker1-scroll";
+declare function resolveListHeight(height: string | number): string;
+declare function resolveScrollbarStyle(colors?: Pick<TimePicker1Colors, 'scrollbarThumbColor' | 'scrollbarWidth'>): CSSProperties;
+
+declare const TimePicker1: typeof TimePicker1Root;
+
+export { TIMEPICKER1_DEFAULTS, TIMEPICKER1_DEFAULT_COLORS, TIMEPICKER1_SCROLLBAR_WIDTH_PX, TimePicker1, type TimePicker1Colors, type TimePicker1DisabledRule, type TimePicker1Props, TimePicker1Root, type TimePicker1TimeConstraints, TimePickerPanel, type TimeValue, type UseTimePicker1Options, type UseTimePicker1Result, clampTimeToRange, formatTimeSlot, generateBoundedTimeSlots, getNextSlotAfterNow, isTimeDisabledByRules, isTimeInRange, isTimePickerTimeDisabled, isTimeRuleDisabled, resolveListHeight, resolveScrollbarStyle, timePicker1ContentVariants, timePicker1ItemVariants, timePicker1TriggerVariants, timepicker1ListScrollbarStyles, useTimePicker1 };

package/dist/index.d.ts

@@ -0,0 +1,193 @@
+import * as react from 'react';
+import { RefObject, CSSProperties } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/**
+ * Rules for times that cannot be selected.
+ */
+type TimePicker1DisabledRule = 
+/** وقت محدد */
+{
+    type: 'time';
+    time: TimeValue;
+}
+/** عدة أوقات محددة */
+ | {
+    type: 'times';
+    times: TimeValue[];
+}
+/** ساعة معينة في كل يوم */
+ | {
+    type: 'hour';
+    hour: number;
+}
+/** دقيقة معينة في كل ساعة (مثلاً :30) */
+ | {
+    type: 'minute';
+    minute: number;
+}
+/** ساعة ودقيقة محددتان */
+ | {
+    type: 'hourMinute';
+    hour: number;
+    minute: number;
+}
+/** قاعدة مخصصة */
+ | {
+    type: 'custom';
+    match: (time: TimeValue) => boolean;
+};
+type TimePicker1TimeConstraints = {
+    minTime?: TimeValue;
+    maxTime?: TimeValue;
+    disabledRules?: TimePicker1DisabledRule[];
+};
+declare function isTimeRuleDisabled(time: TimeValue, rule: TimePicker1DisabledRule): boolean;
+declare function isTimeDisabledByRules(time: TimeValue, rules: TimePicker1DisabledRule[] | undefined): boolean;
+declare function isTimePickerTimeDisabled(time: TimeValue, constraints?: TimePicker1TimeConstraints): boolean;
+
+type TimeValue = {
+    hours: number;
+    minutes: number;
+};
+type TimePicker1Colors = {
+    /** Main panel background */
+    panelBgColor?: string;
+    /** Active hour/minute item background */
+    activeItemColor?: string;
+    /** Scrollbar thumb color (Firefox + WebKit) */
+    scrollbarThumbColor?: string;
+    /** Scrollbar width in px (default 2) */
+    scrollbarWidth?: number;
+};
+type TimePicker1Props = {
+    trigger?: React.ReactNode;
+    value?: TimeValue | null;
+    defaultValue?: TimeValue | null;
+    onChange?: (time: TimeValue) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    colors?: TimePicker1Colors;
+    locale?: string;
+    use24Hour?: boolean;
+    /** Interval between slots in minutes (default 15) */
+    minuteStep?: number;
+    /** How many slots to show in the list */
+    slotCount?: number;
+    /** Start list from the next slot after the user's current time */
+    startFromNow?: boolean;
+    /** أقرب وقت يمكن اختياره */
+    minTime?: TimeValue;
+    /** آخر وقت يمكن اختياره */
+    maxTime?: TimeValue;
+    /**
+     * أوقات ممنوعة — انظر `TimePicker1DisabledRule`
+     * @example
+     * disabledRules={[
+     *   { type: 'hourMinute', hour: 12, minute: 0 },
+     *   { type: 'minute', minute: 30 },
+     * ]}
+     */
+    disabledRules?: TimePicker1DisabledRule[];
+    /** Fixed height of the scrollable time list (px number or CSS length) */
+    listHeight?: string | number;
+    listClassName?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    contentWidth?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    closeOnScroll?: boolean;
+    contentZIndex?: number | string;
+    testId?: string;
+    contentTestId?: string;
+};
+
+declare function TimePicker1Root({ trigger, value: controlledValue, defaultValue, onChange, open: controlledOpen, defaultOpen, onOpenChange, colors, locale: localeProp, use24Hour, minuteStep, slotCount, startFromNow, minTime, maxTime, disabledRules, listHeight, listClassName, triggerClassName, contentClassName, contentWidth, fullWidth, disabled, closeOnSelect, closeOnScroll, contentZIndex, testId, contentTestId, }: TimePicker1Props): react.JSX.Element;
+
+declare const TIMEPICKER1_DEFAULTS: {
+    readonly contentWidth: "w-40";
+    readonly contentZIndex: 9999;
+    readonly closeOnScroll: true;
+    readonly fullWidth: false;
+    readonly disabled: false;
+    readonly defaultOpen: false;
+    readonly closeOnSelect: true;
+    readonly minuteStep: 15;
+    readonly use24Hour: false;
+    readonly slotCount: 48;
+    readonly startFromNow: true;
+    readonly listHeight: 280;
+};
+declare const TIMEPICKER1_DEFAULT_COLORS: {
+    readonly panelBgColor: "#141414";
+    readonly activeItemColor: "#FF6B3D";
+    readonly scrollbarThumbColor: "rgba(255, 255, 255, 0.18)";
+    readonly scrollbarWidth: 2;
+};
+
+type UseTimePicker1Options = Partial<Pick<TimePicker1Props, 'value' | 'defaultValue' | 'onChange' | 'open' | 'defaultOpen' | 'onOpenChange' | 'colors' | 'locale' | 'use24Hour' | 'minuteStep' | 'slotCount' | 'startFromNow' | 'minTime' | 'maxTime' | 'disabledRules' | 'listHeight' | 'listClassName' | 'closeOnSelect' | 'contentWidth' | 'fullWidth'>>;
+type UseTimePicker1Result = {
+    value: TimeValue | null;
+    setValue: (time: TimeValue) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    show: () => void;
+    hide: () => void;
+    anchorRef: RefObject<HTMLButtonElement | null>;
+    timePickerProps: Pick<TimePicker1Props, 'value' | 'onChange' | 'open' | 'onOpenChange' | 'colors' | 'locale' | 'use24Hour' | 'minuteStep' | 'slotCount' | 'startFromNow' | 'minTime' | 'maxTime' | 'disabledRules' | 'listHeight' | 'listClassName' | 'closeOnSelect' | 'contentWidth' | 'fullWidth'>;
+};
+declare function useTimePicker1(options?: UseTimePicker1Options): UseTimePicker1Result;
+
+type TimePickerPanelProps = {
+    value: TimeValue | null;
+    colors: TimePicker1Colors;
+    locale: string;
+    use24Hour: boolean;
+    minuteStep: number;
+    slotCount: number;
+    startFromNow: boolean;
+    isOpen: boolean;
+    minTime?: TimeValue;
+    maxTime?: TimeValue;
+    disabledRules?: TimePicker1DisabledRule[];
+    listHeight: string | number;
+    listClassName?: string;
+    onChange: (time: TimeValue) => void;
+    className?: string;
+};
+declare function TimePickerPanel({ value, colors, locale, use24Hour, minuteStep, slotCount, startFromNow, isOpen, minTime, maxTime, disabledRules, listHeight, listClassName, onChange, className, }: TimePickerPanelProps): react.JSX.Element;
+
+declare const timePicker1TriggerVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const timePicker1ContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const timePicker1ItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+declare function isTimeInRange(time: TimeValue, minTime?: TimeValue, maxTime?: TimeValue): boolean;
+/** Next step slot strictly after the user's current time (e.g. 6:04 → 6:15). */
+declare function getNextSlotAfterNow(step?: number): TimeValue;
+declare function generateBoundedTimeSlots(options: {
+    startFromNow: boolean;
+    minTime?: TimeValue;
+    maxTime?: TimeValue;
+    disabledRules?: TimePicker1DisabledRule[];
+    minuteStep: number;
+    slotCount: number;
+}): TimeValue[];
+/** Format like `4:00 م` (Arabic) or `4:00 PM` (English). */
+declare function formatTimeSlot(time: TimeValue | null | undefined, locale: string, use24Hour: boolean): string;
+declare function clampTimeToRange(time: TimeValue, minTime?: TimeValue, maxTime?: TimeValue): TimeValue;
+
+declare const TIMEPICKER1_SCROLLBAR_WIDTH_PX = 2;
+/** Class hook for the injected ultra-thin scrollbar styles */
+declare const timepicker1ListScrollbarStyles = "velocis-timepicker1-scroll";
+declare function resolveListHeight(height: string | number): string;
+declare function resolveScrollbarStyle(colors?: Pick<TimePicker1Colors, 'scrollbarThumbColor' | 'scrollbarWidth'>): CSSProperties;
+
+declare const TimePicker1: typeof TimePicker1Root;
+
+export { TIMEPICKER1_DEFAULTS, TIMEPICKER1_DEFAULT_COLORS, TIMEPICKER1_SCROLLBAR_WIDTH_PX, TimePicker1, type TimePicker1Colors, type TimePicker1DisabledRule, type TimePicker1Props, TimePicker1Root, type TimePicker1TimeConstraints, TimePickerPanel, type TimeValue, type UseTimePicker1Options, type UseTimePicker1Result, clampTimeToRange, formatTimeSlot, generateBoundedTimeSlots, getNextSlotAfterNow, isTimeDisabledByRules, isTimeInRange, isTimePickerTimeDisabled, isTimeRuleDisabled, resolveListHeight, resolveScrollbarStyle, timePicker1ContentVariants, timePicker1ItemVariants, timePicker1TriggerVariants, timepicker1ListScrollbarStyles, useTimePicker1 };