@salt-ds/lab 1.0.0-alpha.51 → 1.0.0-alpha.53

package/dist-types/date-picker/DatePickerRangePanel.d.ts

@@ -0,0 +1,80 @@
+import { type DateValue } from "@internationalized/date";
+import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
+import { type CalendarDateGridProps, type CalendarNavigationProps, type CalendarOffsetProps, type CalendarRangeProps, type CalendarWeekHeaderProps, type DateRangeSelection } from "../calendar";
+/**
+ * Props for the DatePickerRangePanel component.
+ * @template T - The type of the selected date range.
+ */
+export interface DatePickerRangePanelProps<T> extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Callback fired when a date range is selected.
+     * @param event - The synthetic event.
+     * @param selectedDate - The selected date range or null.
+     */
+    onSelect?: (event: SyntheticEvent, selectedDate?: T | null) => void;
+    /**
+     * Helper text to be displayed below the date picker.
+     */
+    helperText?: string;
+    /**
+     * The currently visible month for the start date.
+     */
+    startVisibleMonth?: DateValue;
+    /**
+     * The default visible month for the start date.
+     */
+    defaultStartVisibleMonth?: DateValue;
+    /**
+     * Callback fired when the visible month for the start date changes.
+     * @param event - The synthetic event.
+     * @param visibleMonth - The new visible month for the start date.
+     */
+    onStartVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: DateValue) => void;
+    /**
+     * The currently visible month for the end date.
+     */
+    endVisibleMonth?: DateValue;
+    /**
+     * The default visible month for the end date.
+     */
+    defaultEndVisibleMonth?: DateValue;
+    /**
+     * Callback fired when the visible month for the end date changes.
+     * @param event - The synthetic event.
+     * @param visibleMonth - The new visible month for the end date.
+     */
+    onEndVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: DateValue) => void;
+    /**
+     * Props to be passed to the start date CalendarNavigation component.
+     */
+    StartCalendarNavigationProps?: CalendarNavigationProps;
+    /**
+     * Props to be passed to the start date calendar component.
+     */
+    StartCalendarProps?: Partial<Omit<CalendarRangeProps | CalendarOffsetProps, "selectedDate" | "defaultSelectedDate" | "onSelectedDateChange" | "onVisibleMonthChange">>;
+    /**
+     * Props to be passed to the start date CalendarWeekHeader component.
+     */
+    StartCalendarWeekHeaderProps?: CalendarWeekHeaderProps;
+    /**
+     * Props to be passed to the start date CalendarDataGrid component.
+     */
+    StartCalendarDataGridProps?: CalendarDateGridProps;
+    /**
+     * Props to be passed to the end date CalendarNavigation component.
+     */
+    EndCalendarProps?: Partial<Omit<CalendarRangeProps, "selectedDate" | "defaultSelectedDate" | "onSelectedDateChange" | "onVisibleMonthChange">>;
+    /**
+     * Props to be passed to the end date CalendarNavigation component.
+     */
+    EndCalendarNavigationProps?: CalendarNavigationProps;
+    /**
+     * Props to be passed to the end date CalendarWeekHeader component.
+     */
+    EndCalendarWeekHeaderProps?: CalendarWeekHeaderProps;
+    /**
+     * Props to be passed to the end date CalendarDataGrid component.
+     */
+    EndCalendarDataGridProps?: CalendarDateGridProps;
+}
+export declare const DatePickerRangePanel: import("react").ForwardRefExoticComponent<DatePickerRangePanelProps<DateRangeSelection> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerSingleInput.d.ts

@@ -0,0 +1,7 @@
+import { type DateInputSingleProps } from "../date-input";
+/**
+ * Props for the DatePickerSingleInput component.
+ */
+export interface DatePickerSingleInputProps extends DateInputSingleProps {
+}
+export declare const DatePickerSingleInput: import("react").ForwardRefExoticComponent<DatePickerSingleInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerSinglePanel.d.ts

@@ -0,0 +1,50 @@
+import { type DateValue } from "@internationalized/date";
+import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
+import { type CalendarDateGridProps, type CalendarNavigationProps, type CalendarSingleProps, type CalendarWeekHeaderProps } from "../calendar";
+/**
+ * Props for the DatePickerSinglePanel component.
+ * @template T - The type of the selected date.
+ */
+export interface DatePickerSinglePanelProps<T> extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Callback fired when a date is selected.
+     * @param event - The synthetic event.
+     * @param selectedDate - The selected date or null.
+     */
+    onSelect?: (event: SyntheticEvent, selectedDate?: T | null) => void;
+    /**
+     * Helper text to be displayed below the date picker.
+     */
+    helperText?: string;
+    /**
+     * The currently visible month.
+     */
+    visibleMonth?: DateValue;
+    /**
+     * The default visible month.
+     */
+    defaultVisibleMonth?: DateValue;
+    /**
+     * Callback fired when the visible month changes.
+     * @param event - The synthetic event.
+     * @param visibleMonth - The new visible month.
+     */
+    onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: DateValue) => void;
+    /**
+     * Props to be passed to the Calendar component.
+     */
+    CalendarProps?: Partial<Omit<CalendarSingleProps, "selectionVariant" | "selectedDate" | "defaultSelectedDate" | "onSelectedDateChange" | "onVisibleMonthChange">>;
+    /**
+     * Props to be passed to the CalendarNavigation component.
+     */
+    CalendarNavigationProps?: CalendarNavigationProps;
+    /**
+     * Props to be passed to the CalendarWeekHeader component.
+     */
+    CalendarWeekHeaderProps?: CalendarWeekHeaderProps;
+    /**
+     * Props to be passed to the CalendarDataGrid component.
+     */
+    CalendarDataGridProps?: CalendarDateGridProps;
+}
+export declare const DatePickerSinglePanel: import("react").ForwardRefExoticComponent<DatePickerSinglePanelProps<DateValue> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/index.d.ts

@@ -1 +1,8 @@
 export * from "./DatePicker";
+export * from "./DatePickerActions";
+export * from "./DatePickerContext";
+export * from "./DatePickerOverlay";
+export * from "./DatePickerSingleInput";
+export * from "./DatePickerSinglePanel";
+export * from "./DatePickerRangeInput";
+export * from "./DatePickerRangePanel";

package/dist-types/date-picker/useDatePicker.d.ts

@@ -0,0 +1,112 @@
+import { type DateValue } from "@internationalized/date";
+import { type DateRangeSelection, type SingleDateSelection } from "../calendar";
+import type { RangeDatePickerState, SingleDatePickerState } from "./DatePickerContext";
+interface UseDatePickerBaseProps<T> {
+    /** If `true`, the component is disabled. */
+    disabled?: boolean;
+    /** If `true`, the component is read-only. */
+    readOnly?: boolean;
+    /**
+     * The selected date. The selected date will be controlled when this prop is provided.
+     */
+    selectedDate?: T | null;
+    /**
+     * The initial selected date, when the selected date is uncontrolled.
+     */
+    defaultSelectedDate?: UseDatePickerBaseProps<T>["selectedDate"];
+    /**
+     * The minimum date for the range, default is 1900.
+     */
+    minDate?: DateValue;
+    /**
+     * The maximum date for the range, default is 2100.
+     */
+    maxDate?: DateValue;
+    /**
+     * Handler for when the date selection is cancelled.
+     */
+    onCancel?: () => void;
+    /**
+     * Time zone of the date selection, defaults to the current time zone of the user.
+     */
+    timeZone?: string;
+    /**
+     * Locale of the date selection, defaults to the current locale of the user.
+     */
+    locale?: string;
+}
+/**
+ * Props for single date selection.
+ *
+ * @typedef {UseDatePickerBaseProps<SingleDateSelection>} UseDatePickerSingleProps
+ * @property {"single"} selectionVariant - Single date selection.
+ * @property {(selectedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onSelectedDateChange] - Handler called when the selected date changes.
+ * @property {(appliedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onApply] - Handler called when the selected date is confirmed/applied.
+ */
+export interface UseDatePickerSingleProps extends UseDatePickerBaseProps<SingleDateSelection> {
+    /**
+     * Single date selection.
+     */
+    selectionVariant: "single";
+    /**
+     * Handler called when the selected date changes.
+     * @param {SingleDateSelection | null} selectedSingleDate - The selected date.
+     * @param {string | false} singleError - Error returned by the parser or `false`.
+     */
+    onSelectedDateChange?: (selectedSingleDate: SingleDateSelection | null, singleError: string | false) => void;
+    /**
+     * Handler called when the selected date is confirmed/applied.
+     * @param {SingleDateSelection | null} appliedSingleDate - The selected date.
+     * @param {string | false} singleError - Error returned by the parser or `false`.
+     */
+    onApply?: (appliedSingleDate: SingleDateSelection | null, singleError: string | false) => void;
+}
+/**
+ * Props for date range selection.
+ *
+ * @typedef {UseDatePickerBaseProps<DateRangeSelection>} UseDatePickerRangeProps
+ * @property {"range"} selectionVariant - Date range selection.
+ * @property {(selectedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onSelectedDateChange] - Handler called when the selected date changes.
+ * @property {(appliedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onApply] - Handler called when the selected date is confirmed/applied.
+ */
+export interface UseDatePickerRangeProps extends UseDatePickerBaseProps<DateRangeSelection> {
+    /**
+     * Date range selection.
+     */
+    selectionVariant: "range";
+    /**
+     * Handler called when the selected date changes.
+     * @param {DateRangeSelection | null} selectedRangeDate - The selected date.
+     * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.
+     */
+    onSelectedDateChange?: (selectedRangeDate: DateRangeSelection | null, rangeError: {
+        startDate: string | false;
+        endDate: string | false;
+    }) => void;
+    /**
+     * Handler called when the selected date is confirmed/applied.
+     * @param {DateRangeSelection | null} appliedRangeDate - The selected date.
+     * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.
+     */
+    onApply?: (appliedRangeDate: DateRangeSelection | null, rangeError: {
+        startDate: string | false;
+        endDate: string | false;
+    }) => void;
+}
+/**
+ * Props for the useDatePicker hook.
+ *
+ * @template SelectionVariant
+ * @typedef {SelectionVariant extends "single" ? UseDatePickerSingleProps : SelectionVariant extends "range" ? UseDatePickerRangeProps : never} UseDatePickerProps
+ */
+export declare type UseDatePickerProps<SelectionVariant> = SelectionVariant extends "single" ? UseDatePickerSingleProps : SelectionVariant extends "range" ? UseDatePickerRangeProps : never;
+/**
+ * Custom hook for managing date picker state.
+ *
+ * @template SelectionVariant
+ * @param {UseDatePickerProps<SelectionVariant>} props - The props for the date picker.
+ * @param {React.ForwardedRef<HTMLDivElement>} ref - The ref for the date picker container.
+ * @returns {DatePickerState<SelectionVariant extends "single" ? SingleDateSelection : DateRangeSelection>} The date picker state and helpers.
+ */
+export declare function useDatePicker<SelectionVariant extends "single" | "range">(props: UseDatePickerProps<SelectionVariant>, ref: React.ForwardedRef<HTMLDivElement>): SingleDatePickerState | RangeDatePickerState;
+export {};

package/dist-types/index.d.ts

@@ -35,6 +35,7 @@ export * from "./responsive";
 export * from "./search-input";
 export * from "./skip-link";
 export * from "./slider";
+export * from "./static-list";
 export * from "./stepped-tracker";
 export * from "./stepper-input";
 export * from "./system-status";

package/dist-types/slider/Slider.d.ts

@@ -1,20 +1,33 @@
 import { type HTMLAttributes } from "react";
-import { type SliderMark } from "./internal/SliderRailMarks";
 import type { SliderChangeHandler, SliderValue } from "./types";
 export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
-    label?: string;
+    /**
+     * Minimum slider value
+     */
     min?: number;
+    /**
+     * Maximum slider value
+     */
     max?: number;
+    /**
+     * Minimum interval the slider thumb can move
+     */
     step?: number;
-    pageStep?: number;
-    value?: SliderValue;
+    /**
+     * Initial value of the slider
+     */
     defaultValue?: SliderValue;
-    pushable?: boolean;
-    pushDistance?: number;
-    disabled?: boolean;
+    /**
+     * The markings the slider is displayed with
+     */
+    marks?: "inline" | "bottom" | "all";
+    /**
+     * Value of the slider, to be used when in a controlled state
+     */
+    value?: SliderValue;
+    /**
+     * Change handler to be used when in a controlled state
+     */
     onChange?: SliderChangeHandler;
-    marks?: SliderMark[];
-    hideMarks?: boolean;
-    hideMarkLabels?: boolean;
 }
 export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/slider/internal/SliderContext.d.ts

@@ -0,0 +1,11 @@
+import type { SliderChangeHandler, SliderValue } from "../types";
+export interface SliderContextValue {
+    min: number;
+    max: number;
+    step: number;
+    value: SliderValue;
+    onChange: SliderChangeHandler;
+    ariaLabel: string | undefined;
+}
+export declare const SliderContext: import("react").Context<SliderContextValue>;
+export declare function useSliderContext(): SliderContextValue;

package/dist-types/slider/internal/SliderMarks.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef } from "react";
+export interface SliderMarksProps extends ComponentPropsWithoutRef<"div"> {
+    min: number;
+    max: number;
+    step: number;
+}
+export declare function SliderMarks({ min, max, step, ...rest }: SliderMarksProps): JSX.Element;

package/dist-types/slider/internal/SliderSelection.d.ts

@@ -1,4 +1,4 @@
-export interface SliderSelectionProps {
-    valueLength: number;
+import type { ComponentPropsWithoutRef } from "react";
+export interface SliderSelectionProps extends ComponentPropsWithoutRef<"div"> {
 }
-export declare function SliderSelection({ valueLength }: SliderSelectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SliderSelection({ ...props }: SliderSelectionProps): JSX.Element;

package/dist-types/slider/internal/SliderThumb.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef } from "react";
+import type { ActiveThumbIndex, ThumbIndex } from "../types";
+export interface SliderThumbProps extends ComponentPropsWithoutRef<"div"> {
+    index: ThumbIndex;
+    activeThumb: ActiveThumbIndex;
+    setActiveThumb: (index: ActiveThumbIndex) => void;
+}
+export declare function SliderThumb(props: SliderThumbProps): JSX.Element;

package/dist-types/slider/internal/SliderTrack.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface SliderTrackProps extends ComponentPropsWithoutRef<"div"> {
+}
+export declare const SliderTrack: ({ ...props }: SliderTrackProps) => import("react/jsx-runtime").JSX.Element;

package/dist-types/slider/internal/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SliderTrack";
+export * from "./SliderMarks";
+export * from "./SliderContext";

package/dist-types/slider/internal/useKeyDownThumb.d.ts

@@ -0,0 +1,2 @@
+import type { SliderChangeHandler, SliderValue, ThumbIndex } from "../types";
+export declare const useKeyDownThumb: (min: number, max: number, step: number, value: SliderValue, onChange: SliderChangeHandler, index: ThumbIndex) => (event: React.KeyboardEvent) => void;

package/dist-types/slider/internal/utils.d.ts

@@ -1,10 +1,18 @@
-import type { SliderValue } from "../types";
-import type { LabeledMark, SliderMark } from "./SliderRailMarks";
-export declare type UpdateValueItem = (oldValue: SliderValue, index: number, valueItem: number) => SliderValue;
-export declare function useValueUpdater(pushable: boolean | undefined, pushDistance: number, min: number, max: number): UpdateValueItem;
-export declare const roundValue: (v: number, step: number) => number;
-export declare const clampValue: (v: number, min: number, max: number) => number;
-export declare function getSliderAriaLabel(count: number, index: number): string | undefined;
-export declare function getHandleIndex(element: HTMLElement): number;
-export declare function isLabeledMark(mark: SliderMark): mark is LabeledMark;
-export declare function isMarkAtMax(max: number, mark: SliderMark): boolean;
+import type { RefObject } from "react";
+import type { SliderChangeHandler, SliderValue, ThumbIndex } from "../types";
+export declare const getValue: (trackRef: RefObject<Element>, min: number, max: number, step: number, clientX: number) => number;
+export declare const setValue: (value: SliderValue, newValue: number, index: ThumbIndex, onChange: SliderChangeHandler) => void;
+export declare const roundToStep: (value: number, step: number) => number;
+export declare const clampValue: (value: number, [min, max]: number[]) => number;
+export declare const getPercentage: (min: number, max: number, value: number) => number;
+export declare const getPercentageDifference: (min: number, max: number, value: number[]) => string;
+export declare const getPercentageOffset: (min: number, max: number, value: number[]) => string;
+export declare const countDecimalPlaces: (num: number) => number;
+export declare const getMarkStyles: (min: number, max: number, step: number) => {
+    label: string;
+    value: number;
+    position: string;
+}[];
+export declare const getNearestIndex: (value: SliderValue, newValue: number) => ThumbIndex;
+export declare const preventOverlappingValues: (value: SliderValue, newValue: number, index: ThumbIndex) => number;
+export declare const parseValueProp: (value: number[] | undefined, min: number, max: number) => SliderValue | undefined;

package/dist-types/slider/types.d.ts

@@ -1,2 +1,4 @@
-export declare type SliderValue = number | number[];
+export declare type SliderValue = [number] | [number, number];
 export declare type SliderChangeHandler = (value: SliderValue) => void;
+export declare type ThumbIndex = 0 | 1;
+export declare type ActiveThumbIndex = ThumbIndex | undefined;

package/dist-types/static-list/StaticList.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface StaticListProps extends ComponentPropsWithoutRef<"ul"> {
+    /**
+     * The list items to be rendered within the StaticList.
+     */
+    children: ReactNode;
+}
+export declare const StaticList: import("react").ForwardRefExoticComponent<StaticListProps & import("react").RefAttributes<HTMLOListElement>>;

package/dist-types/static-list/StaticListItem.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface StaticListItemProps extends ComponentPropsWithoutRef<"li"> {
+}
+export declare const StaticListItem: import("react").ForwardRefExoticComponent<StaticListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist-types/static-list/StaticListItemContent.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface StaticListItemContentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of Static List Item
+     */
+    children?: ReactNode;
+}
+export declare const StaticListItemContent: import("react").ForwardRefExoticComponent<StaticListItemContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/static-list/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./StaticList";
+export * from "./StaticListItem";
+export * from "./StaticListItemContent";

package/dist-types/stepper-input/StepperInput.d.ts

@@ -1,10 +1,10 @@
-import { type InputProps } from "@salt-ds/core";
-import { type FocusEventHandler } from "react";
-export interface StepperInputProps extends Omit<InputProps, "onChange" | "emptyReadOnlyMarker"> {
+import { type ValidationStatus } from "@salt-ds/core";
+import { type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode, type Ref, type SyntheticEvent } from "react";
+export interface StepperInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     /**
-     * A multiplier applied to the `step` when the value is incremented or decremented using the PageDown/PageUp keys.
+     * A boolean. When `true`, the input will receive a full border.
      */
-    block?: number;
+    bordered?: boolean;
     /**
      * The number of decimal places to display.
      */
@@ -12,42 +12,89 @@ export interface StepperInputProps extends Omit<InputProps, "onChange" | "emptyR
     /**
      * Sets the initial default value of the component.
      */
-    defaultValue?: number;
+    defaultValue?: number | string;
     /**
-     * The maximum value that can be selected.
+     * If `true`, the stepper input will be disabled.
      */
-    max?: number;
+    disabled?: boolean;
     /**
-     * The minimum value that can be selected.
+     * The marker to use in an empty read only Input.
+     * Use `''` to disable this feature. Defaults to '—'.
+     * @default '—'
      */
-    min?: number;
+    emptyReadOnlyMarker?: string;
+    /**
+     * End adornment component
+     */
+    endAdornment?: ReactNode;
     /**
      * Whether to hide the stepper buttons. Defaults to `false`.
+     * @default false
      */
     hideButtons?: boolean;
     /**
-     * Callback when stepper input loses focus.
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Optional ref for the input component
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * The maximum value that can be selected. Defaults to Number.MAX_SAFE_INTEGER.
+     * @default Number.MAX_SAFE_INTEGER
+     */
+    max?: number;
+    /**
+     * The minimum value that can be selected. Defaults to Number.MIN_SAFE_INTEGER.
+     * @default Number.MIN_SAFE_INTEGER
      */
-    onBlur?: FocusEventHandler<HTMLInputElement>;
+    min?: number;
     /**
      * Callback when stepper input value is changed.
+     * @param event - the event triggers value change, could be undefined during increment / decrement button long press
+     */
+    onChange?: (event: SyntheticEvent | undefined, value: number | string) => void;
+    /**
+     * A string. Displayed in a dimmed color when the input value is empty.
      */
-    onChange?: (changedValue: number | string) => void;
+    placeholder?: string | undefined;
     /**
-     * Callback when stepper input gains focus.
+     * A boolean. If `true`, the component is not editable by the user.
      */
-    onFocus?: FocusEventHandler<HTMLInputElement>;
+    readOnly?: boolean;
     /**
-     * The amount to increment or decrement the value by when using the stepper buttons or Up Arrow and Down Arrow keys.
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
+    /**
+     * The amount to increment or decrement the value by when using the stepper buttons or Up Arrow and Down Arrow keys. Default to 1.
+     * @default 1
      */
     step?: number;
     /**
-     * Determines the text alignment of the display value.
+     * The amount to change the value when the value is incremented or decremented by holding Shift and pressing Up arrow or Down arrow keys.
+     * Defaults to 10.
+     * @default 10
+     */
+    stepBlock?: number;
+    /**
+     * Alignment of text within container. Defaults to "left".
+     * @default "left"
+     */
+    textAlign?: "left" | "center" | "right";
+    /**
+     * Validation status.
+     */
+    validationStatus?: Extract<ValidationStatus, "error" | "warning" | "success">;
+    /**
+     * Styling variant. Defaults to "primary".
+     * @default "primary"
      */
-    textAlign?: "center" | "left" | "right";
+    variant?: "primary" | "secondary";
     /**
      * The value of the stepper input. The component will be controlled if this prop is provided.
      */
-    value?: number | string;
+    value?: number | string | undefined;
 }
 export declare const StepperInput: import("react").ForwardRefExoticComponent<StepperInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/stepper-input/internal/useActivateWhileMouseDown.d.ts

@@ -0,0 +1,5 @@
+import { type SyntheticEvent } from "react";
+export declare function useActivateWhileMouseDown(activationFn: (event?: SyntheticEvent) => void, isAtLimit: boolean): {
+    activate: (event: SyntheticEvent) => void;
+    buttonDown: boolean;
+};

package/dist-types/stepper-input/internal/utils.d.ts

@@ -0,0 +1,8 @@
+export declare const ACCEPT_INPUT: RegExp;
+export declare const toFixedDecimalPlaces: (inputNumber: number, decimalPlaces: number) => string;
+export declare const isAllowedNonNumeric: (inputCharacter: number | string) => boolean | undefined;
+export declare const toFloat: (inputValue: number | string) => number;
+export declare const sanitizedInput: (numberString: string) => string;
+export declare const isAtMax: (value: number | string | undefined, max: number) => boolean;
+export declare const isAtMin: (value: number | string | undefined, min: number) => boolean;
+export declare const isOutOfRange: (value: number | string | undefined, min: number, max: number) => boolean;

package/dist-types/stepper-input/useStepperInput.d.ts

@@ -1,15 +1,28 @@
-import { type InputProps } from "@salt-ds/core";
-import type { MouseEvent, MutableRefObject } from "react";
+import { type Dispatch, type MouseEvent, type MutableRefObject, type SetStateAction, type SyntheticEvent } from "react";
 import type { StepperInputProps } from "./StepperInput";
-export declare const useStepperInput: (props: StepperInputProps, inputRef: MutableRefObject<HTMLInputElement | null>) => {
-    decrementButtonDown: boolean;
-    getButtonProps: (direction: string) => {
-        "aria-hidden": boolean;
+/**
+ * Manages increment / decrement logic
+ */
+export declare const useStepperInput: ({ decimalPlaces, disabled, inputRef, max, min, onChange, readOnly, setValue, step, stepBlock, value, }: Pick<StepperInputProps, "value" | "max" | "min" | "onChange" | "disabled" | "readOnly" | "step" | "inputRef" | "decimalPlaces" | "stepBlock"> & {
+    setValue: Dispatch<SetStateAction<string | number | undefined>>;
+    inputRef: MutableRefObject<HTMLInputElement | null>;
+}) => {
+    incrementButtonProps: {
+        "aria-label": string;
         disabled: boolean;
+        onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
+        "aria-hidden": boolean;
         tabIndex: number;
+        onMouseUp: () => void | undefined;
+    };
+    decrementButtonProps: {
+        "aria-label": string;
+        disabled: boolean;
         onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
+        "aria-hidden": boolean;
+        tabIndex: number;
         onMouseUp: () => void | undefined;
     };
-    getInputProps: (inputProps?: InputProps) => InputProps | undefined;
-    incrementButtonDown: boolean;
+    incrementValue: (event?: SyntheticEvent<Element, Event> | undefined, block?: boolean | undefined) => void;
+    decrementValue: (event?: SyntheticEvent<Element, Event> | undefined, block?: boolean | undefined) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.51",
+  "version": "1.0.0-alpha.53",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
     "@fluentui/react-overflow": "^9.0.19",
-    "@internationalized/date": "^3.0.0",
+    "@internationalized/date": "^3.5.5",
     "@types/react-window": "^1.8.2",
     "aria-hidden": "^1.1.1",
     "attr-accept": "^2.0.0",
@@ -26,7 +26,7 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.34.0",
+    "@salt-ds/core": "^1.37.0",
     "@salt-ds/styles": "^0.2.1",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/icons": "^1.12.1"