@jacshuo/onyx 2.1.0 → 2.2.0

package/dist/_tsup-dts-rollup.d.cts

@@ -3,6 +3,7 @@ import { ClassValue } from 'clsx';
 import { Dispatch } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { default as React_2 } from 'react';
+import { RefObject } from 'react';
 import { SetStateAction } from 'react';
 import { VariantProps } from 'class-variance-authority';
 
@@ -122,6 +123,8 @@ export { alertVariants }
 export { alertVariants as alertVariants_alias_1 }
 export { alertVariants as alertVariants_alias_2 }
 
+export declare function applyOffset(base: Date, amount: number, unit: OffsetUnit, direction: OffsetDirection): Date;
+
 declare function Avatar({ src, alt, initials, size, shape, status, className, ...props }: AvatarProps): JSX.Element;
 export { Avatar }
 export { Avatar as Avatar_alias_1 }
@@ -330,6 +333,11 @@ export { buttonVariants }
 export { buttonVariants as buttonVariants_alias_1 }
 export { buttonVariants as buttonVariants_alias_2 }
 
+export declare interface CalendarDay {
+    date: Date;
+    thisMonth: boolean;
+}
+
 declare function Card({ intent, size, className, ...props }: CardProps): JSX.Element;
 export { Card }
 export { Card as Card_alias_1 }
@@ -562,6 +570,8 @@ export { CinePlayerSortKey }
 export { CinePlayerSortKey as CinePlayerSortKey_alias_1 }
 export { CinePlayerSortKey as CinePlayerSortKey_alias_2 }
 
+export declare function clampDate(date: Date, min?: Date, max?: Date): Date;
+
 /** Computes a padded [min, max] range from raw data extents. */
 export declare function clampRange(min: number, max: number, padding?: number): [number, number];
 
@@ -877,6 +887,63 @@ export { DataTableProps }
 export { DataTableProps as DataTableProps_alias_1 }
 export { DataTableProps as DataTableProps_alias_2 }
 
+declare type DateTimeMode = "date" | "time" | "datetime";
+export { DateTimeMode }
+export { DateTimeMode as DateTimeMode_alias_1 }
+export { DateTimeMode as DateTimeMode_alias_2 }
+export { DateTimeMode as DateTimeMode_alias_3 }
+
+declare function DateTimePicker({ className, popupClassName, triggerClassName, disabled, placeholder, ...restProps }: DateTimePickerProps): JSX.Element;
+export { DateTimePicker }
+export { DateTimePicker as DateTimePicker_alias_1 }
+export { DateTimePicker as DateTimePicker_alias_2 }
+export { DateTimePicker as DateTimePicker_alias_3 }
+
+declare interface DateTimePickerProps {
+    /** Controlled selected date/time value. */
+    value?: Date | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: Date | null;
+    /** Called when the user confirms a new selection. */
+    onChange?: (date: Date | null) => void;
+    /** Picker mode: date only, time only, or full datetime. Default "datetime". */
+    mode?: DateTimeMode;
+    /** Minimum selectable date (inclusive). */
+    minDate?: Date;
+    /** Maximum selectable date (inclusive). */
+    maxDate?: Date;
+    /** Disable the trigger and prevent all interaction. */
+    disabled?: boolean;
+    /** Placeholder text in the trigger when no value is selected. */
+    placeholder?: string;
+    /**
+     * Display-format string.
+     * Tokens: YYYY YY MMMM MMM MM M DD D HH H hh h mm ss A a
+     * @example "YYYY-MM-DD HH:mm:ss"
+     */
+    format?: string;
+    /** Use 24-hour clock. false → 12-hour with AM/PM column. Default true. */
+    use24Hour?: boolean;
+    /** Show seconds column when mode includes time. Default true. */
+    showSeconds?: boolean;
+    /** BCP-47 locale tag for month/weekday names. Default "en-US". */
+    locale?: string;
+    /** Extra class applied to the root wrapper element. */
+    className?: string;
+    /** Extra class applied to the frosted-glass popup panel. */
+    popupClassName?: string;
+    /** Extra class applied to the trigger button. */
+    triggerClassName?: string;
+    /** Called when the picker popup opens. */
+    onOpen?: () => void;
+    /** Called when the picker popup closes (cancel OR confirm). */
+    onClose?: () => void;
+}
+export { DateTimePickerProps }
+export { DateTimePickerProps as DateTimePickerProps_alias_1 }
+export { DateTimePickerProps as DateTimePickerProps_alias_2 }
+export { DateTimePickerProps as DateTimePickerProps_alias_3 }
+
 export declare const default_alias: {
     Primitives: {
         Button: Button;
@@ -946,6 +1013,7 @@ export declare const default_alias: {
         TypewriterText: TypewriterText;
         CommandPalette: CommandPalette;
         Timeline: Timeline;
+        DateTimePicker: DateTimePicker;
     };
     Forms: {
         Form: Form;
@@ -1002,6 +1070,10 @@ export declare function default_alias_119(): JSX.Element;
 
 export declare function default_alias_12(): JSX.Element;
 
+export declare function default_alias_120(): JSX.Element;
+
+export declare function default_alias_121(): JSX.Element;
+
 export declare function default_alias_13(): JSX.Element;
 
 export declare function default_alias_14(): JSX.Element;
@@ -1496,6 +1568,7 @@ declare const Extras: {
     TypewriterText: typeof TypewriterText;
     CommandPalette: typeof CommandPalette;
     Timeline: typeof Timeline;
+    DateTimePicker: typeof DateTimePicker;
 };
 export { Extras }
 export { Extras as Extras_alias_1 }
@@ -1704,6 +1777,8 @@ export { Form as Form_alias_3 }
 /** Formats an axis value using an optional custom formatter. */
 export declare function formatAxisValue(v: number | string, formatter?: (v: number | string) => string): string;
 
+export declare function formatDate(date: Date, format: string, locale?: string): string;
+
 declare function FormItem({ label, layout: itemLayout, required, hint, validation, name, onValidate, className, children, }: FormItemProps): JSX.Element;
 export { FormItem }
 export { FormItem as FormItem_alias_1 }
@@ -1846,12 +1921,24 @@ declare const formVariants: (props?: ({
 export { formVariants }
 export { formVariants as formVariants_alias_1 }
 
+export declare function getCalendarDays(year: number, month: number): CalendarDay[];
+
+export declare function getDaysInMonth(year: number, month: number): number;
+
+export declare function getDefaultFormat(mode: DateTimeMode, use24Hour?: boolean, showSeconds?: boolean): string;
+
 /** Returns an array of CSS custom property references for chart series colors. */
 export declare function getDefaultPalette(count: number): string[];
 
+export declare function getMonthNames(locale?: string, format?: "long" | "short"): string[];
+
+export declare function getWeekdayNames(locale?: string, format?: "long" | "narrow" | "short"): string[];
+
 /** Gets the y value for a series at a given category key. */
 export declare function getYAtCategory(series: ChartSeries, category: string): number | undefined;
 
+export declare function getYearRange(center: number, span?: number): number[];
+
 declare function Header({ brand, onBrandClick, navItems, actions, linkComponent: Link, height, mobileMenu, navMenuIcon, actionsMenuIcon, className, children, }: HeaderProps): JSX.Element;
 export { Header }
 export { Header as Header_alias_1 }
@@ -2063,9 +2150,19 @@ export { inputVariants }
 export { inputVariants as inputVariants_alias_1 }
 export { inputVariants as inputVariants_alias_2 }
 
+export declare function isAfterDay(a: Date, b: Date): boolean;
+
+export declare function isBeforeDay(a: Date, b: Date): boolean;
+
+export declare function isSameDay(a: Date, b: Date): boolean;
+
 /** Returns true if any data point in the series has a string x value. */
 export declare function isSeriesCategorical(series: ChartSeries[]): boolean;
 
+export declare function isToday(date: Date): boolean;
+
+export declare const ITEM_H = 40;
+
 declare function Label({ intent, size, className, ...props }: LabelProps): JSX.Element;
 export { Label }
 export { Label as Label_alias_1 }
@@ -2362,6 +2459,18 @@ export { navLinkVariants }
 export { navLinkVariants as navLinkVariants_alias_1 }
 export { navLinkVariants as navLinkVariants_alias_2 }
 
+declare type OffsetDirection = "future" | "past";
+export { OffsetDirection }
+export { OffsetDirection as OffsetDirection_alias_1 }
+export { OffsetDirection as OffsetDirection_alias_2 }
+export { OffsetDirection as OffsetDirection_alias_3 }
+
+declare type OffsetUnit = "day" | "week" | "month" | "year";
+export { OffsetUnit }
+export { OffsetUnit as OffsetUnit_alias_1 }
+export { OffsetUnit as OffsetUnit_alias_2 }
+export { OffsetUnit as OffsetUnit_alias_3 }
+
 declare const Overlay: {
     Dialog: typeof Dialog;
     Tooltip: typeof Tooltip;
@@ -2758,7 +2867,7 @@ export declare const selectVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-declare function SideNav({ items, title, basePath, onItemClick, LinkComponent, collapsible, collapseMode: controlledMode, defaultCollapseMode, onCollapseModeChange, showLines, expandedKeys: controlledExpandedKeys, defaultExpandedKeys, onExpandedKeysChange, className, responsive, mobileBreakpoint, mobileTopOffset, ...props }: SideNavProps): JSX.Element;
+declare function SideNav({ items, title, basePath, onItemClick, LinkComponent, collapsible, collapseMode: controlledMode, defaultCollapseMode, onCollapseModeChange, showLines, expandedKeys: controlledExpandedKeys, defaultExpandedKeys, onExpandedKeysChange, className, responsive, mobileBreakpoint, mobileTopOffset, mobileDrawerSlot, ...props }: SideNavProps): JSX.Element;
 export { SideNav }
 export { SideNav as SideNav_alias_1 }
 export { SideNav as SideNav_alias_2 }
@@ -2849,6 +2958,12 @@ declare interface SideNavProps extends React_2.HTMLAttributes<HTMLElement> {
      * Set this to the height of your app's top bar. @default 48
      */
     mobileTopOffset?: number;
+    /**
+     * Optional slot rendered inside the mobile slide-in drawer, between the
+     * header row and the scrollable nav body. Use it to inject a search input
+     * or other controls that should appear on mobile too.
+     */
+    mobileDrawerSlot?: React_2.ReactNode;
 }
 export { SideNavProps }
 export { SideNavProps as SideNavProps_alias_1 }
@@ -2908,7 +3023,7 @@ export declare interface SliceSpec {
     cy: number;
 }
 
-declare function Slider({ mode, value: valueProp, defaultValue, onChange, min, max, step, intent, size, disabled, showValue, formatValue, label, className, ...props }: SliderProps): JSX.Element;
+declare function Slider({ mode, value: valueProp, defaultValue, onChange, min, max, step, intent, size, disabled, showValue, formatValue, label, className, id: propId, ...props }: SliderProps): JSX.Element;
 export { Slider }
 export { Slider as Slider_alias_1 }
 export { Slider as Slider_alias_2 }
@@ -2936,7 +3051,7 @@ export { SliderProps }
 export { SliderProps as SliderProps_alias_1 }
 export { SliderProps as SliderProps_alias_2 }
 
-declare function SliderRange({ value: valueProp, defaultValue, onChange, min, max, step, intent, size, disabled, showValue, formatValue, label, className, ...props }: SliderRangeProps): JSX.Element;
+declare function SliderRange({ value: valueProp, defaultValue, onChange, min, max, step, intent, size, disabled, showValue, formatValue, label, className, id: propId, ...props }: SliderRangeProps): JSX.Element;
 export { SliderRange }
 export { SliderRange as SliderRange_alias_1 }
 export { SliderRange as SliderRange_alias_2 }
@@ -3611,6 +3726,53 @@ export declare function useCommandPalette(commands: CommandItem[], open: boolean
     handleKeyDown: (e: React.KeyboardEvent) => void;
 };
 
+export declare function useDateTimePicker(props: DateTimePickerProps): {
+    isOpen: boolean;
+    displayValue: string;
+    workingDate: Date;
+    view: "drum" | "calendar";
+    calYear: number;
+    calMonth: number;
+    offsetAmount: number;
+    offsetUnit: OffsetUnit;
+    offsetDirection: OffsetDirection;
+    mode: DateTimeMode;
+    use24Hour: boolean;
+    showSeconds: boolean;
+    locale: string;
+    minDate: Date | undefined;
+    maxDate: Date | undefined;
+    openPicker: () => void;
+    closePicker: () => void;
+    confirm: () => void;
+    clear: () => void;
+    updateField: (field: "year" | "month" | "day" | "hour" | "minute" | "second", val: number) => void;
+    setView: Dispatch<SetStateAction<"drum" | "calendar">>;
+    setCalYear: Dispatch<SetStateAction<number>>;
+    setCalMonth: Dispatch<SetStateAction<number>>;
+    setOffsetAmount: Dispatch<SetStateAction<number>>;
+    setOffsetUnit: Dispatch<SetStateAction<OffsetUnit>>;
+    setOffsetDirection: Dispatch<SetStateAction<OffsetDirection>>;
+    applyQuickOffset: () => void;
+    navigateCalendar: (dir: -1 | 1) => void;
+};
+
+export declare function useOutsideClick(refs: ReadonlyArray<{
+    readonly current: Element | null;
+}>, callback: () => void, enabled?: boolean): void;
+
+export declare function usePositioning(anchorRef: {
+    readonly current: Element | null;
+}, popupRef: {
+    readonly current: HTMLElement | null;
+}, isOpen: boolean): void;
+
+export declare function useScrollColumn(containerRef: React.RefObject<HTMLDivElement | null>, count: number, onSelectIndex: (idx: number) => void): {
+    scrollToIndex: (index: number, behavior?: "smooth" | "instant" | "auto") => void;
+    handleScroll: () => void;
+    isScrollingRef: RefObject<boolean>;
+};
+
 /**
  * Returns a `setSpin(target, tip?)` function.
  * Each call returns a **close** function to dismiss that specific overlay.

package/dist/_tsup-dts-rollup.d.ts

@@ -3,6 +3,7 @@ import { ClassValue } from 'clsx';
 import { Dispatch } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { default as React_2 } from 'react';
+import { RefObject } from 'react';
 import { SetStateAction } from 'react';
 import { VariantProps } from 'class-variance-authority';
 
@@ -122,6 +123,8 @@ export { alertVariants }
 export { alertVariants as alertVariants_alias_1 }
 export { alertVariants as alertVariants_alias_2 }
 
+export declare function applyOffset(base: Date, amount: number, unit: OffsetUnit, direction: OffsetDirection): Date;
+
 declare function Avatar({ src, alt, initials, size, shape, status, className, ...props }: AvatarProps): JSX.Element;
 export { Avatar }
 export { Avatar as Avatar_alias_1 }
@@ -330,6 +333,11 @@ export { buttonVariants }
 export { buttonVariants as buttonVariants_alias_1 }
 export { buttonVariants as buttonVariants_alias_2 }
 
+export declare interface CalendarDay {
+    date: Date;
+    thisMonth: boolean;
+}
+
 declare function Card({ intent, size, className, ...props }: CardProps): JSX.Element;
 export { Card }
 export { Card as Card_alias_1 }
@@ -562,6 +570,8 @@ export { CinePlayerSortKey }
 export { CinePlayerSortKey as CinePlayerSortKey_alias_1 }
 export { CinePlayerSortKey as CinePlayerSortKey_alias_2 }
 
+export declare function clampDate(date: Date, min?: Date, max?: Date): Date;
+
 /** Computes a padded [min, max] range from raw data extents. */
 export declare function clampRange(min: number, max: number, padding?: number): [number, number];
 
@@ -877,6 +887,63 @@ export { DataTableProps }
 export { DataTableProps as DataTableProps_alias_1 }
 export { DataTableProps as DataTableProps_alias_2 }
 
+declare type DateTimeMode = "date" | "time" | "datetime";
+export { DateTimeMode }
+export { DateTimeMode as DateTimeMode_alias_1 }
+export { DateTimeMode as DateTimeMode_alias_2 }
+export { DateTimeMode as DateTimeMode_alias_3 }
+
+declare function DateTimePicker({ className, popupClassName, triggerClassName, disabled, placeholder, ...restProps }: DateTimePickerProps): JSX.Element;
+export { DateTimePicker }
+export { DateTimePicker as DateTimePicker_alias_1 }
+export { DateTimePicker as DateTimePicker_alias_2 }
+export { DateTimePicker as DateTimePicker_alias_3 }
+
+declare interface DateTimePickerProps {
+    /** Controlled selected date/time value. */
+    value?: Date | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: Date | null;
+    /** Called when the user confirms a new selection. */
+    onChange?: (date: Date | null) => void;
+    /** Picker mode: date only, time only, or full datetime. Default "datetime". */
+    mode?: DateTimeMode;
+    /** Minimum selectable date (inclusive). */
+    minDate?: Date;
+    /** Maximum selectable date (inclusive). */
+    maxDate?: Date;
+    /** Disable the trigger and prevent all interaction. */
+    disabled?: boolean;
+    /** Placeholder text in the trigger when no value is selected. */
+    placeholder?: string;
+    /**
+     * Display-format string.
+     * Tokens: YYYY YY MMMM MMM MM M DD D HH H hh h mm ss A a
+     * @example "YYYY-MM-DD HH:mm:ss"
+     */
+    format?: string;
+    /** Use 24-hour clock. false → 12-hour with AM/PM column. Default true. */
+    use24Hour?: boolean;
+    /** Show seconds column when mode includes time. Default true. */
+    showSeconds?: boolean;
+    /** BCP-47 locale tag for month/weekday names. Default "en-US". */
+    locale?: string;
+    /** Extra class applied to the root wrapper element. */
+    className?: string;
+    /** Extra class applied to the frosted-glass popup panel. */
+    popupClassName?: string;
+    /** Extra class applied to the trigger button. */
+    triggerClassName?: string;
+    /** Called when the picker popup opens. */
+    onOpen?: () => void;
+    /** Called when the picker popup closes (cancel OR confirm). */
+    onClose?: () => void;
+}
+export { DateTimePickerProps }
+export { DateTimePickerProps as DateTimePickerProps_alias_1 }
+export { DateTimePickerProps as DateTimePickerProps_alias_2 }
+export { DateTimePickerProps as DateTimePickerProps_alias_3 }
+
 export declare const default_alias: {
     Primitives: {
         Button: Button;
@@ -946,6 +1013,7 @@ export declare const default_alias: {
         TypewriterText: TypewriterText;
         CommandPalette: CommandPalette;
         Timeline: Timeline;
+        DateTimePicker: DateTimePicker;
     };
     Forms: {
         Form: Form;
@@ -1002,6 +1070,10 @@ export declare function default_alias_119(): JSX.Element;
 
 export declare function default_alias_12(): JSX.Element;
 
+export declare function default_alias_120(): JSX.Element;
+
+export declare function default_alias_121(): JSX.Element;
+
 export declare function default_alias_13(): JSX.Element;
 
 export declare function default_alias_14(): JSX.Element;
@@ -1496,6 +1568,7 @@ declare const Extras: {
     TypewriterText: typeof TypewriterText;
     CommandPalette: typeof CommandPalette;
     Timeline: typeof Timeline;
+    DateTimePicker: typeof DateTimePicker;
 };
 export { Extras }
 export { Extras as Extras_alias_1 }
@@ -1704,6 +1777,8 @@ export { Form as Form_alias_3 }
 /** Formats an axis value using an optional custom formatter. */
 export declare function formatAxisValue(v: number | string, formatter?: (v: number | string) => string): string;
 
+export declare function formatDate(date: Date, format: string, locale?: string): string;
+
 declare function FormItem({ label, layout: itemLayout, required, hint, validation, name, onValidate, className, children, }: FormItemProps): JSX.Element;
 export { FormItem }
 export { FormItem as FormItem_alias_1 }
@@ -1846,12 +1921,24 @@ declare const formVariants: (props?: ({
 export { formVariants }
 export { formVariants as formVariants_alias_1 }
 
+export declare function getCalendarDays(year: number, month: number): CalendarDay[];
+
+export declare function getDaysInMonth(year: number, month: number): number;
+
+export declare function getDefaultFormat(mode: DateTimeMode, use24Hour?: boolean, showSeconds?: boolean): string;
+
 /** Returns an array of CSS custom property references for chart series colors. */
 export declare function getDefaultPalette(count: number): string[];
 
+export declare function getMonthNames(locale?: string, format?: "long" | "short"): string[];
+
+export declare function getWeekdayNames(locale?: string, format?: "long" | "narrow" | "short"): string[];
+
 /** Gets the y value for a series at a given category key. */
 export declare function getYAtCategory(series: ChartSeries, category: string): number | undefined;
 
+export declare function getYearRange(center: number, span?: number): number[];
+
 declare function Header({ brand, onBrandClick, navItems, actions, linkComponent: Link, height, mobileMenu, navMenuIcon, actionsMenuIcon, className, children, }: HeaderProps): JSX.Element;
 export { Header }
 export { Header as Header_alias_1 }
@@ -2063,9 +2150,19 @@ export { inputVariants }
 export { inputVariants as inputVariants_alias_1 }
 export { inputVariants as inputVariants_alias_2 }
 
+export declare function isAfterDay(a: Date, b: Date): boolean;
+
+export declare function isBeforeDay(a: Date, b: Date): boolean;
+
+export declare function isSameDay(a: Date, b: Date): boolean;
+
 /** Returns true if any data point in the series has a string x value. */
 export declare function isSeriesCategorical(series: ChartSeries[]): boolean;
 
+export declare function isToday(date: Date): boolean;
+
+export declare const ITEM_H = 40;
+
 declare function Label({ intent, size, className, ...props }: LabelProps): JSX.Element;
 export { Label }
 export { Label as Label_alias_1 }
@@ -2362,6 +2459,18 @@ export { navLinkVariants }
 export { navLinkVariants as navLinkVariants_alias_1 }
 export { navLinkVariants as navLinkVariants_alias_2 }
 
+declare type OffsetDirection = "future" | "past";
+export { OffsetDirection }
+export { OffsetDirection as OffsetDirection_alias_1 }
+export { OffsetDirection as OffsetDirection_alias_2 }
+export { OffsetDirection as OffsetDirection_alias_3 }
+
+declare type OffsetUnit = "day" | "week" | "month" | "year";
+export { OffsetUnit }
+export { OffsetUnit as OffsetUnit_alias_1 }
+export { OffsetUnit as OffsetUnit_alias_2 }
+export { OffsetUnit as OffsetUnit_alias_3 }
+
 declare const Overlay: {
     Dialog: typeof Dialog;
     Tooltip: typeof Tooltip;
@@ -2758,7 +2867,7 @@ export declare const selectVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-declare function SideNav({ items, title, basePath, onItemClick, LinkComponent, collapsible, collapseMode: controlledMode, defaultCollapseMode, onCollapseModeChange, showLines, expandedKeys: controlledExpandedKeys, defaultExpandedKeys, onExpandedKeysChange, className, responsive, mobileBreakpoint, mobileTopOffset, ...props }: SideNavProps): JSX.Element;
+declare function SideNav({ items, title, basePath, onItemClick, LinkComponent, collapsible, collapseMode: controlledMode, defaultCollapseMode, onCollapseModeChange, showLines, expandedKeys: controlledExpandedKeys, defaultExpandedKeys, onExpandedKeysChange, className, responsive, mobileBreakpoint, mobileTopOffset, mobileDrawerSlot, ...props }: SideNavProps): JSX.Element;
 export { SideNav }
 export { SideNav as SideNav_alias_1 }
 export { SideNav as SideNav_alias_2 }
@@ -2849,6 +2958,12 @@ declare interface SideNavProps extends React_2.HTMLAttributes<HTMLElement> {
      * Set this to the height of your app's top bar. @default 48
      */
     mobileTopOffset?: number;
+    /**
+     * Optional slot rendered inside the mobile slide-in drawer, between the
+     * header row and the scrollable nav body. Use it to inject a search input
+     * or other controls that should appear on mobile too.
+     */
+    mobileDrawerSlot?: React_2.ReactNode;
 }
 export { SideNavProps }
 export { SideNavProps as SideNavProps_alias_1 }
@@ -2908,7 +3023,7 @@ export declare interface SliceSpec {
     cy: number;
 }
 
-declare function Slider({ mode, value: valueProp, defaultValue, onChange, min, max, step, intent, size, disabled, showValue, formatValue, label, className, ...props }: SliderProps): JSX.Element;
+declare function Slider({ mode, value: valueProp, defaultValue, onChange, min, max, step, intent, size, disabled, showValue, formatValue, label, className, id: propId, ...props }: SliderProps): JSX.Element;
 export { Slider }
 export { Slider as Slider_alias_1 }
 export { Slider as Slider_alias_2 }
@@ -2936,7 +3051,7 @@ export { SliderProps }
 export { SliderProps as SliderProps_alias_1 }
 export { SliderProps as SliderProps_alias_2 }
 
-declare function SliderRange({ value: valueProp, defaultValue, onChange, min, max, step, intent, size, disabled, showValue, formatValue, label, className, ...props }: SliderRangeProps): JSX.Element;
+declare function SliderRange({ value: valueProp, defaultValue, onChange, min, max, step, intent, size, disabled, showValue, formatValue, label, className, id: propId, ...props }: SliderRangeProps): JSX.Element;
 export { SliderRange }
 export { SliderRange as SliderRange_alias_1 }
 export { SliderRange as SliderRange_alias_2 }
@@ -3611,6 +3726,53 @@ export declare function useCommandPalette(commands: CommandItem[], open: boolean
     handleKeyDown: (e: React.KeyboardEvent) => void;
 };
 
+export declare function useDateTimePicker(props: DateTimePickerProps): {
+    isOpen: boolean;
+    displayValue: string;
+    workingDate: Date;
+    view: "drum" | "calendar";
+    calYear: number;
+    calMonth: number;
+    offsetAmount: number;
+    offsetUnit: OffsetUnit;
+    offsetDirection: OffsetDirection;
+    mode: DateTimeMode;
+    use24Hour: boolean;
+    showSeconds: boolean;
+    locale: string;
+    minDate: Date | undefined;
+    maxDate: Date | undefined;
+    openPicker: () => void;
+    closePicker: () => void;
+    confirm: () => void;
+    clear: () => void;
+    updateField: (field: "year" | "month" | "day" | "hour" | "minute" | "second", val: number) => void;
+    setView: Dispatch<SetStateAction<"drum" | "calendar">>;
+    setCalYear: Dispatch<SetStateAction<number>>;
+    setCalMonth: Dispatch<SetStateAction<number>>;
+    setOffsetAmount: Dispatch<SetStateAction<number>>;
+    setOffsetUnit: Dispatch<SetStateAction<OffsetUnit>>;
+    setOffsetDirection: Dispatch<SetStateAction<OffsetDirection>>;
+    applyQuickOffset: () => void;
+    navigateCalendar: (dir: -1 | 1) => void;
+};
+
+export declare function useOutsideClick(refs: ReadonlyArray<{
+    readonly current: Element | null;
+}>, callback: () => void, enabled?: boolean): void;
+
+export declare function usePositioning(anchorRef: {
+    readonly current: Element | null;
+}, popupRef: {
+    readonly current: HTMLElement | null;
+}, isOpen: boolean): void;
+
+export declare function useScrollColumn(containerRef: React.RefObject<HTMLDivElement | null>, count: number, onSelectIndex: (idx: number) => void): {
+    scrollToIndex: (index: number, behavior?: "smooth" | "instant" | "auto") => void;
+    handleScroll: () => void;
+    isScrollingRef: RefObject<boolean>;
+};
+
 /**
  * Returns a `setSpin(target, tip?)` function.
  * Each call returns a **close** function to dismiss that specific overlay.