@wallarm-org/design-system 0.69.0-rc-feature-WDS-143.2 → 0.69.0

package/dist/components/Attribute/index.d.ts

@@ -3,14 +3,6 @@ export { AttributeActions, type AttributeActionsProps } from './AttributeActions
 export { AttributeActionsContent, type AttributeActionsContentProps, } from './AttributeActionsContent';
 export { AttributeActionsItem, type AttributeActionsItemProps } from './AttributeActionsItem';
 export { AttributeActionsTarget, type AttributeActionsTargetProps } from './AttributeActionsTarget';
-export { AttributeEdit, type AttributeEditProps } from './AttributeEdit';
-export { type AttributeEditActivationMode, type AttributeEditContextValue, type AttributeEditStatus, type AttributeEditSubmitMode, useAttributeEdit, } from './AttributeEditContext';
-export { AttributeEditControl, type AttributeEditControlProps } from './AttributeEditControl';
-export { AttributeEditError, type AttributeEditErrorProps } from './AttributeEditError';
-export { AttributeEditInput, type AttributeEditInputProps } from './AttributeEditInput';
-export { AttributeEditNumber, type AttributeEditNumberProps } from './AttributeEditNumber';
-export { AttributeEditPreview, type AttributeEditPreviewProps } from './AttributeEditPreview';
-export { AttributeEditTextarea, type AttributeEditTextareaProps } from './AttributeEditTextarea';
 export { useAttributeEmpty } from './AttributeEmptyContext';
 export { AttributeEmptyDescription, type AttributeEmptyDescriptionProps, } from './AttributeEmptyDescription';
 export { AttributeLabel, type AttributeLabelProps } from './AttributeLabel';

package/dist/components/Attribute/index.js

@@ -3,18 +3,10 @@ import { AttributeActions } from "./AttributeActions.js";
 import { AttributeActionsContent } from "./AttributeActionsContent.js";
 import { AttributeActionsItem } from "./AttributeActionsItem.js";
 import { AttributeActionsTarget } from "./AttributeActionsTarget.js";
-import { AttributeEdit } from "./AttributeEdit.js";
-import { useAttributeEdit } from "./AttributeEditContext.js";
-import { AttributeEditControl } from "./AttributeEditControl.js";
-import { AttributeEditError } from "./AttributeEditError.js";
-import { AttributeEditInput } from "./AttributeEditInput.js";
-import { AttributeEditNumber } from "./AttributeEditNumber.js";
-import { AttributeEditPreview } from "./AttributeEditPreview.js";
-import { AttributeEditTextarea } from "./AttributeEditTextarea.js";
 import { useAttributeEmpty } from "./AttributeEmptyContext.js";
 import { AttributeEmptyDescription } from "./AttributeEmptyDescription.js";
 import { AttributeLabel } from "./AttributeLabel.js";
 import { AttributeLabelDescription } from "./AttributeLabelDescription.js";
 import { AttributeLabelInfo } from "./AttributeLabelInfo.js";
 import { AttributeValue } from "./AttributeValue.js";
-export { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeEdit, AttributeEditControl, AttributeEditError, AttributeEditInput, AttributeEditNumber, AttributeEditPreview, AttributeEditTextarea, AttributeEmptyDescription, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, useAttributeEdit, useAttributeEmpty };
+export { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeEmptyDescription, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, useAttributeEmpty };

package/dist/components/Calendar/Calendar.js

@@ -3,8 +3,7 @@ import { useCallback } from "react";
 import { DatePicker } from "@ark-ui/react";
 import { CalendarDate, endOfMonth, getLocalTimeZone, startOfMonth, today } from "@internationalized/date";
 import { CalendarProvider } from "./CalendarContext.js";
-import { toDateValue } from "./dateValue.js";
-import { useCalendarTime } from "./useCalendarTime.js";
+const toDateValue = (date)=>date;
 const getThisMonthRange = ()=>{
     const now = today(getLocalTimeZone());
     return [
@@ -116,13 +115,6 @@ const DEFAULT_RANGE_PRESETS = [
 const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true, value, defaultValue, onChange, minDate, maxDate, isDateUnavailable, disallowDisabledDatesInRange = false, open, defaultOpen, onOpenChange, closeOnSelect = true, readonly = false, focusedValue, children })=>{
     const isRange = 'range' === type;
     const numOfMonths = isRange ? 2 : 1;
-    const { timeRef, commitValue } = useCalendarTime({
-        showTime,
-        isRange,
-        value,
-        defaultValue,
-        onChange
-    });
     const hasUnavailableDateInRange = useCallback((start, end)=>{
         if (!isDateUnavailable) return false;
         let current = new CalendarDate(start.year, start.month, start.day);
@@ -151,9 +143,9 @@ const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true,
             const [start, end] = newValue;
             if (start && end && hasUnavailableDateInRange(start, end)) return;
         }
-        commitValue(newValue);
+        onChange?.(newValue);
     }, [
-        commitValue,
+        onChange,
         disallowDisabledDatesInRange,
         isRange,
         hasUnavailableDateInRange
@@ -169,9 +161,7 @@ const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true,
         isRange,
         showKeyboardHints,
         showTime,
-        readonly,
-        timeRef,
-        commitValue
+        readonly
     };
     return /*#__PURE__*/ jsx(DatePicker.Root, {
         selectionMode: isRange ? 'range' : 'single',

package/dist/components/Calendar/CalendarContext.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode, type RefObject } from 'react';
-import type { CalendarType, DateValue } from './types';
+import { type ReactNode } from 'react';
+import type { CalendarType } from './types';
 export interface CalendarContextValue {
     /** Calendar type: 'single' for one month, 'range' for two months (date range selection) */
     type: CalendarType;
@@ -11,23 +11,6 @@ export interface CalendarContextValue {
     showTime: boolean;
     /** Whether calendar is readonly (display only, no selection) */
     readonly: boolean;
-    /**
-     * Last-known time-of-day, owned by `Calendar`. In `showTime` mode the grid
-     * only produces date-only values; this ref carries the hour/minute so they
-     * survive a day change and so `Calendar`'s `onChange` can emit a full
-     * `CalendarDateTime`. Undefined outside a `Calendar`.
-     */
-    timeRef?: RefObject<{
-        hour: number;
-        minute: number;
-    }>;
-    /**
-     * Push a value straight to the consumer `onChange`, bypassing Ark's machine.
-     * Ark's DatePicker dedupes its value by date (year/month/day) and silently
-     * drops a same-date, time-only change, so the `showTime` header uses this to
-     * commit a time edit. Undefined outside a `Calendar`.
-     */
-    commitValue?: (value: DateValue[]) => void;
 }
 export interface CalendarProviderProps {
     children: ReactNode;

package/dist/components/Calendar/CalendarHeader.js

@@ -12,7 +12,6 @@ import { Tooltip } from "../Tooltip/index.js";
 import { TooltipContent } from "../Tooltip/TooltipContent.js";
 import { TooltipTrigger } from "../Tooltip/TooltipTrigger.js";
 import { useCalendarContext } from "./CalendarContext.js";
-import { toDateValue } from "./dateValue.js";
 const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRangeText: visibleRangeTextProp })=>{
     const { isRange, readonly } = useCalendarContext();
     const effectiveShowArrows = showArrows && !readonly;
@@ -61,7 +60,7 @@ const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRan
                                                         size: "small",
                                                         "aria-label": "Jump to today",
                                                         onClick: ()=>{
-                                                            api.setFocusedValue(toDateValue(todayDate));
+                                                            api.setFocusedValue(todayDate);
                                                         },
                                                         children: /*#__PURE__*/ jsx(JumpToTodayIcon, {
                                                             size: "md"

package/dist/components/Calendar/CalendarInputHeader.js

@@ -1,12 +1,28 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useReducer } from "react";
+import { useCallback, useState } from "react";
 import { DatePicker } from "@ark-ui/react";
+import { CalendarDateTime } from "@internationalized/date";
 import { cn } from "../../utils/cn.js";
 import { DateInput } from "../DateInput/index.js";
 import { useCalendarContext } from "./CalendarContext.js";
-import { sameDate, toArkDateValue, toReactAriaDateValue, withTime } from "./dateValue.js";
-const SingleDateInputInner = ({ api, readonly, showTime, timeRef, commitValue })=>{
-    const [, bumpTime] = useReducer((n)=>n + 1, 0);
+const toReactAriaDateValue = (date)=>{
+    if (!date) return null;
+    return date;
+};
+const toArkDateValue = (date)=>{
+    if (!date) return;
+    return date;
+};
+const withTime = (value, time)=>{
+    if (!value) return null;
+    if ('hour' in value) return value;
+    return new CalendarDateTime(value.year, value.month, value.day, time.hour, time.minute);
+};
+const SingleDateInputInner = ({ api, readonly, showTime })=>{
+    const [time, setTime] = useState({
+        hour: 0,
+        minute: 0
+    });
     const handleChange = useCallback((newValue)=>{
         const arkValue = toArkDateValue(newValue);
         if (arkValue) api.setValue([
@@ -17,34 +33,20 @@ const SingleDateInputInner = ({ api, readonly, showTime, timeRef, commitValue })
         api
     ]);
     const handleDateTimeChange = useCallback((newValue)=>{
-        if (newValue && 'hour' in newValue && timeRef) timeRef.current = {
+        if (newValue && 'hour' in newValue) setTime({
             hour: newValue.hour,
             minute: newValue.minute
-        };
-        if (newValue && sameDate(api.value[0], newValue)) {
-            const arkValue = toArkDateValue(newValue);
-            if (arkValue) commitValue?.([
-                arkValue
-            ]);
-            bumpTime();
-        } else handleChange(newValue);
+        });
+        handleChange(newValue);
     }, [
-        api,
-        handleChange,
-        timeRef,
-        commitValue
+        handleChange
     ]);
     const inputValue = toReactAriaDateValue(api.value[0]);
-    const time = timeRef?.current ?? {
-        hour: 0,
-        minute: 0
-    };
-    const dateTimeValue = inputValue ? toReactAriaDateValue(withTime(inputValue, time)) : null;
     return /*#__PURE__*/ jsx("div", {
         className: "flex flex-1",
         onKeyDown: (e)=>e.stopPropagation(),
         children: showTime ? /*#__PURE__*/ jsx(DateInput, {
-            value: dateTimeValue,
+            value: withTime(inputValue, time),
             onChange: handleDateTimeChange,
             readOnly: readonly,
             granularity: "minute",
@@ -119,7 +121,7 @@ const RangeDateInputInner = ({ api, readonly })=>{
     });
 };
 const CalendarInputHeader = ({ className })=>{
-    const { isRange, readonly, showTime, timeRef, commitValue } = useCalendarContext();
+    const { isRange, readonly, showTime } = useCalendarContext();
     return /*#__PURE__*/ jsx("div", {
         className: cn('flex flex-1 items-center', 'pt-20 pb-4 px-20', className),
         children: /*#__PURE__*/ jsx(DatePicker.Context, {
@@ -129,9 +131,7 @@ const CalendarInputHeader = ({ className })=>{
                 }) : /*#__PURE__*/ jsx(SingleDateInputInner, {
                     api: api,
                     readonly: readonly,
-                    showTime: showTime,
-                    timeRef: timeRef,
-                    commitValue: commitValue
+                    showTime: showTime
                 })
         })
     });

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,34 @@
+import { type FC, type ReactNode, type Ref } from 'react';
+import { Slider as ArkSlider } from '@ark-ui/react/slider';
+import { type TestableProps } from '../../utils/testId';
+/** Ark/Zag machine-config props forwarded to the headless `Slider.Root`. */
+type SliderRootConfig = Pick<ArkSlider.RootProps, 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'readOnly' | 'getAriaValueText' | 'name' | 'form' | 'minStepsBetweenThumbs' | 'thumbCollisionBehavior'>;
+export interface SliderProps extends SliderRootConfig, TestableProps {
+    /** Error state → maps to Ark `invalid` (repaints the handle; the message is the Field's job). */
+    error?: boolean;
+    className?: string;
+    children?: ReactNode;
+    /** Fires live during drag with the current value array (`[n]` single, `[low, high]` range). */
+    onValueChange?: (value: number[]) => void;
+    /** Fires once on drag release with the committed value array. */
+    onValueChangeEnd?: (value: number[]) => void;
+    /** Ref to the Ark Slider root element. */
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Slider — pick an approximate, bounded value (or range) by dragging a handle along
+ * a track. Built on `@ark-ui/react/slider`.
+ *
+ * Compose the parts: `SliderControl` (renders the track + range) holds one
+ * `SliderThumb` per thumb (the real `role="slider"` node — consumer `data-*` /
+ * analytics / `ref` land there) and an optional `SliderMarks`. `SliderInput` and
+ * `SliderValue` are optional readouts. Single vs range is driven by the length of
+ * `value` / `defaultValue` — render one `SliderThumb` per entry. Thumbs never cross
+ * (`thumbCollisionBehavior` defaults to `'none'`); set `minStepsBetweenThumbs` for a gap.
+ *
+ * It reads `Field` context like `Input`/`Textarea`, so wrapping it in `<Field>` wires
+ * label / invalid / disabled. When an exact figure matters, pair with `NumberInput`;
+ * for 2–7 fixed options use `SegmentedControl`. See `docs/slider-design-spec.md`.
+ */
+export declare const Slider: FC<SliderProps>;
+export {};

package/dist/components/Slider/Slider.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Slider/Slider.figma.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Field, FieldLabel } from "../Field/index.js";
+import { Slider } from "./Slider.js";
+import { SliderControl } from "./SliderControl.js";
+import { SliderInput } from "./SliderInput.js";
+import { SliderMarks } from "./SliderMarks.js";
+import { SliderThumb } from "./SliderThumb.js";
+const SLIDER_URL = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11354-181';
+const SLIDER_INPUT_URL = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11358-1807';
+code_connect.connect(Slider, SLIDER_URL, {
+    example: ()=>/*#__PURE__*/ jsx(Slider, {
+            "aria-label": "Value",
+            defaultValue: [
+                50
+            ],
+            children: /*#__PURE__*/ jsx(SliderControl, {
+                children: /*#__PURE__*/ jsx(SliderThumb, {
+                    "aria-label": "Value"
+                })
+            })
+        })
+});
+code_connect.connect(Slider, SLIDER_URL, {
+    variant: {
+        Double: 'On'
+    },
+    example: ()=>/*#__PURE__*/ jsx(Slider, {
+            defaultValue: [
+                20,
+                80
+            ],
+            children: /*#__PURE__*/ jsxs(SliderControl, {
+                children: [
+                    /*#__PURE__*/ jsx(SliderThumb, {
+                        index: 0
+                    }),
+                    /*#__PURE__*/ jsx(SliderThumb, {
+                        index: 1
+                    })
+                ]
+            })
+        })
+});
+code_connect.connect(Slider, SLIDER_URL, {
+    variant: {
+        Ticks: 'On'
+    },
+    example: ()=>/*#__PURE__*/ jsx(Slider, {
+            "aria-label": "Value",
+            step: 25,
+            defaultValue: [
+                50
+            ],
+            children: /*#__PURE__*/ jsxs(SliderControl, {
+                children: [
+                    /*#__PURE__*/ jsx(SliderThumb, {
+                        "aria-label": "Value"
+                    }),
+                    /*#__PURE__*/ jsx(SliderMarks, {
+                        marks: [
+                            {
+                                value: 0,
+                                label: '0'
+                            },
+                            {
+                                value: 25,
+                                label: '25'
+                            },
+                            {
+                                value: 50,
+                                label: '50'
+                            },
+                            {
+                                value: 75,
+                                label: '75'
+                            },
+                            {
+                                value: 100,
+                                label: '100'
+                            }
+                        ]
+                    })
+                ]
+            })
+        })
+});
+code_connect.connect(Slider, SLIDER_URL, {
+    variant: {
+        Input: 'On'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Slider, {
+            "aria-label": "Value",
+            defaultValue: [
+                50
+            ],
+            children: [
+                /*#__PURE__*/ jsx(SliderControl, {
+                    children: /*#__PURE__*/ jsx(SliderThumb, {
+                        "aria-label": "Value"
+                    })
+                }),
+                /*#__PURE__*/ jsx(SliderInput, {})
+            ]
+        })
+});
+code_connect.connect(Slider, SLIDER_INPUT_URL, {
+    example: ()=>/*#__PURE__*/ jsxs(Field, {
+            children: [
+                /*#__PURE__*/ jsx(FieldLabel, {
+                    children: "Risk threshold"
+                }),
+                /*#__PURE__*/ jsx(Slider, {
+                    defaultValue: [
+                        50
+                    ],
+                    children: /*#__PURE__*/ jsx(SliderControl, {
+                        children: /*#__PURE__*/ jsx(SliderThumb, {})
+                    })
+                })
+            ]
+        })
+});

package/dist/components/Slider/Slider.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { useFieldContext } from "@ark-ui/react/field";
+import { Slider } from "@ark-ui/react/slider";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { sliderVariants } from "./classes.js";
+import { SliderRootContextProvider } from "./SliderContext.js";
+const sameMarks = (a, b)=>a.length === b.length && a.every((mark, i)=>mark.value === b[i]?.value && mark.label === b[i]?.label);
+const Slider_Slider = ({ value, defaultValue = [
+    50
+], min, max, step, disabled, readOnly, getAriaValueText, name, form, minStepsBetweenThumbs, thumbCollisionBehavior, error = false, className, children, onValueChange, onValueChangeEnd, ref, 'data-testid': testId })=>{
+    const field = useFieldContext();
+    const invalid = error || Boolean(field?.invalid);
+    const isDisabled = disabled ?? field?.disabled ?? false;
+    const isReadOnly = readOnly ?? field?.readOnly ?? false;
+    const thumbCount = (value ?? defaultValue).length;
+    const isRange = thumbCount > 1;
+    const [marks, setMarks] = useState([]);
+    const registerMarks = useCallback((next)=>{
+        setMarks((prev)=>sameMarks(prev, next) ? prev : next);
+    }, []);
+    const resolvedGetAriaValueText = useMemo(()=>getAriaValueText ?? (({ value: v })=>marks.find((mark)=>mark.value === v)?.label ?? String(v)), [
+        getAriaValueText,
+        marks
+    ]);
+    const fieldLabelId = field && !isRange ? field.ids.label : void 0;
+    const handleValueChange = useCallback((details)=>onValueChange?.(details.value), [
+        onValueChange
+    ]);
+    const handleValueChangeEnd = useCallback((details)=>onValueChangeEnd?.(details.value), [
+        onValueChangeEnd
+    ]);
+    const contextValue = useMemo(()=>({
+            isRange,
+            thumbCount,
+            invalid,
+            disabled: isDisabled,
+            readOnly: isReadOnly,
+            ariaDescribedby: field?.ariaDescribedby,
+            fieldLabelId,
+            marks,
+            registerMarks
+        }), [
+        isRange,
+        thumbCount,
+        invalid,
+        isDisabled,
+        isReadOnly,
+        field?.ariaDescribedby,
+        fieldLabelId,
+        marks,
+        registerMarks
+    ]);
+    return /*#__PURE__*/ jsx(Slider.Root, {
+        ref: ref,
+        value: value,
+        defaultValue: defaultValue,
+        min: min,
+        max: max,
+        step: step,
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        invalid: invalid,
+        getAriaValueText: resolvedGetAriaValueText,
+        name: name,
+        form: form,
+        minStepsBetweenThumbs: minStepsBetweenThumbs,
+        thumbCollisionBehavior: thumbCollisionBehavior,
+        onValueChange: onValueChange ? handleValueChange : void 0,
+        onValueChangeEnd: onValueChangeEnd ? handleValueChangeEnd : void 0,
+        "data-slot": "slider",
+        "data-testid": testId,
+        className: cn(sliderVariants(), className),
+        children: /*#__PURE__*/ jsx(SliderRootContextProvider, {
+            value: contextValue,
+            children: /*#__PURE__*/ jsx(TestIdProvider, {
+                value: testId,
+                children: children
+            })
+        })
+    });
+};
+Slider_Slider.displayName = 'Slider';
+export { Slider_Slider as Slider };

package/dist/components/Slider/SliderContext.d.ts

@@ -0,0 +1,31 @@
+import type { SliderMark } from './types';
+export interface SliderRootContextValue {
+    /** True when the value has 2+ entries (range) — drives slot-naming + label defaults. */
+    isRange: boolean;
+    /** Expected thumb count (`value`/`defaultValue` length) — for the dev thumb-count guard. */
+    thumbCount: number;
+    /** Resolved invalid state (own `error` || Field `invalid`) — for sub-part error styling. */
+    invalid: boolean;
+    /** Resolved disabled state (own `disabled` ?? Field `disabled`). */
+    disabled: boolean;
+    /**
+     * Resolved read-only state (own `readOnly` ?? Field `readOnly`). Ark's thumb guards
+     * drag/keyboard on this, but its `setThumbValue` does NOT — so parts that write
+     * imperatively (`SliderInput`, `SliderMarks` click-to-jump) must honour it themselves.
+     */
+    readOnly: boolean;
+    /** Field help/error id to announce on the thumb (`aria-describedby`). */
+    ariaDescribedby?: string;
+    /** Field label id — fallback accessible name for a single thumb with no explicit label. */
+    fieldLabelId?: string;
+    /**
+     * Marks published by `<SliderMarks>`, mirrored into root state so `getAriaValueText`
+     * (and `SliderValue` / the thumb tooltip) resolve ordinal labels. Empty when there
+     * are no marks.
+     */
+    marks: SliderMark[];
+    /** Called by `<SliderMarks>` to publish its marks to the root (no-op if unchanged). */
+    registerMarks: (marks: SliderMark[]) => void;
+}
+export declare const SliderRootContextProvider: import("react").Provider<SliderRootContextValue | null>;
+export declare const useSliderRootContext: () => SliderRootContextValue;

package/dist/components/Slider/SliderContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const SliderRootContext = /*#__PURE__*/ createContext(null);
+const SliderRootContextProvider = SliderRootContext.Provider;
+const useSliderRootContext = ()=>{
+    const context = useContext(SliderRootContext);
+    if (!context) throw new Error('Slider sub-components must be rendered inside <Slider>.');
+    return context;
+};
+export { SliderRootContextProvider, useSliderRootContext };

package/dist/components/Slider/SliderControl.d.ts

@@ -0,0 +1,9 @@
+import { type FC, type ReactNode, type Ref } from 'react';
+export interface SliderControlProps {
+    children?: ReactNode;
+    className?: string;
+    /** Ref to the Ark Control element (the track region). */
+    ref?: Ref<HTMLDivElement>;
+}
+/** The interactive track region — renders the track + range, then the thumb(s) / marks. */
+export declare const SliderControl: FC<SliderControlProps>;

package/dist/components/Slider/SliderControl.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { Slider } from "@ark-ui/react/slider";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { sliderControlClassNames, sliderRangeClassNames, sliderTrackClassNames } from "./classes.js";
+import { useSliderRootContext } from "./SliderContext.js";
+import { SliderThumb } from "./SliderThumb.js";
+const SliderControl = ({ children, className, ref })=>{
+    const { thumbCount } = useSliderRootContext();
+    const testId = useTestId('control');
+    if ('production' !== process.env.NODE_ENV) {
+        const renderedThumbs = Children.toArray(children).filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type === SliderThumb).length;
+        if (renderedThumbs > 0 && renderedThumbs !== thumbCount) console.warn(`[Slider] Rendered ${renderedThumbs} <SliderThumb> but the value has ${thumbCount} entr${1 === thumbCount ? 'y' : 'ies'}. Render exactly one <SliderThumb index> per value entry.`);
+    }
+    return /*#__PURE__*/ jsxs(Slider.Control, {
+        ref: ref,
+        "data-slot": "slider-control",
+        "data-testid": testId,
+        className: cn(sliderControlClassNames, className),
+        children: [
+            /*#__PURE__*/ jsx(Slider.Track, {
+                "data-slot": "slider-track",
+                className: sliderTrackClassNames,
+                children: /*#__PURE__*/ jsx(Slider.Range, {
+                    "data-slot": "slider-range",
+                    className: sliderRangeClassNames
+                })
+            }),
+            children
+        ]
+    });
+};
+SliderControl.displayName = 'SliderControl';
+export { SliderControl };

package/dist/components/Slider/SliderInput.d.ts

@@ -0,0 +1,26 @@
+import { type FC, type InputHTMLAttributes, type Ref } from 'react';
+export interface SliderInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue'> {
+    /** Which thumb this box is bound to (0 = single/low, 1 = high). */
+    index?: number;
+    /** Ref to the real `<input>` node (analytics / focus management). */
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * Inline numbers-only `Input` two-way bound to the thumb at `index`: a plain box (no
+ * stepper, fixed width — the DS `Input`, matching Figma `_text-box`). The slider machine
+ * owns clamp/snap/no-cross, so the box needs no bounds of its own.
+ *
+ * Editing uses a local draft buffer: while focused, the box shows exactly what the user
+ * typed (so an empty field, a leading `-`, a trailing `.`, or a value that would snap/clamp
+ * survive the keystroke) and commits to `setThumbValue` on blur / Enter — then drops the
+ * draft so the box re-syncs to the machine's clamped + snapped value. Binding `value`
+ * straight to the snapped machine value instead would fight every intermediate keystroke.
+ *
+ * It is the real interactive node, so arbitrary consumer `data-*` / `aria-*` / `id` / `ref`
+ * (canonically `data-analytics-id` / `data-analytics-props`) forward straight to the
+ * `<input>` (see `docs/metrics/contract.md`).
+ *
+ * Explicit `useId` default so two range boxes never collide on the wrapping field's control
+ * id (and `FieldLabel`'s `htmlFor` keeps naming the thumb, not a box); a consumer `id` wins.
+ */
+export declare const SliderInput: FC<SliderInputProps>;

package/dist/components/Slider/SliderInput.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useId, useState } from "react";
+import { useSliderContext } from "@ark-ui/react/slider";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Input } from "../Input/index.js";
+import { sliderInputBoxClassNames } from "./classes.js";
+import { useSliderRootContext } from "./SliderContext.js";
+const SliderInput = ({ index = 0, 'aria-label': ariaLabel, id: idProp, className, ref, onChange: onChangeProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, ...rest })=>{
+    const { isRange, disabled, invalid, readOnly } = useSliderRootContext();
+    const api = useSliderContext();
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    const testId = useTestId(isRange ? `input-${index}` : 'input');
+    const defaultLabel = isRange ? 0 === index ? 'Minimum value' : 'Maximum value' : 'Value';
+    const machineText = String(api.value[index] ?? '');
+    const [draft, setDraft] = useState(null);
+    const value = draft ?? machineText;
+    const commit = useCallback(()=>{
+        if (null === draft) return;
+        const next = Number(draft);
+        if ('' !== draft && !Number.isNaN(next)) api.setThumbValue(index, next);
+        setDraft(null);
+    }, [
+        api,
+        draft,
+        index
+    ]);
+    const handleChange = useCallback((event)=>{
+        onChangeProp?.(event);
+        if (readOnly) return;
+        setDraft(event.target.value);
+    }, [
+        onChangeProp,
+        readOnly
+    ]);
+    const handleBlur = useCallback((event)=>{
+        onBlurProp?.(event);
+        commit();
+    }, [
+        onBlurProp,
+        commit
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        onKeyDownProp?.(event);
+        if ('Enter' === event.key) commit();
+    }, [
+        onKeyDownProp,
+        commit
+    ]);
+    return /*#__PURE__*/ jsx(Input, {
+        ...rest,
+        ref: ref,
+        inputMode: "numeric",
+        id: id,
+        value: value,
+        disabled: disabled,
+        readOnly: readOnly,
+        error: invalid,
+        "aria-label": ariaLabel ?? defaultLabel,
+        "data-testid": testId,
+        className: cn(sliderInputBoxClassNames, className),
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown
+    });
+};
+SliderInput.displayName = 'SliderInput';
+export { SliderInput };