@tenstorrent/vesper 0.1.0

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,83 @@
+import { ComponentProps, type ComponentPropsWithoutRef, type Ref } from "react";
+import { type ButtonProps } from "../button/button.js";
+export declare const MODAL_BUTTONS_ALIGNMENTS: readonly ["start", "end", "fill", "between"];
+export type ModalButtonsAlignment = (typeof MODAL_BUTTONS_ALIGNMENTS)[number];
+interface ModalRef {
+    open(): void;
+    close(): void;
+}
+export interface ModalProps extends Omit<ComponentPropsWithoutRef<"dialog">, "open"> {
+    /** The title text displayed in the modal header. Also used for the modal's `aria-labelledby` association. */
+    title: string;
+    /** A description displayed below the title in the modal header. Also used for the modal's `aria-describedby` association. */
+    description: string;
+    /** The width of the modal container. Accepts a number (interpreted as pixels) or a CSS string value. @default 452 */
+    width?: number | string;
+    /**
+     * The maximum height of the modal container. Accepts a number (interpreted as pixels) or a CSS string value.
+     *
+     * The effective max height is the minimum of this value and `calc(100vh - var(--vesper-spacing-16))`, ensuring the modal never exceeds the viewport height minus spacing. @default 640.
+     */
+    maxHeight?: number | string;
+    /** An optional array of button props to render as action buttons at the bottom of the modal. The last button defaults to `"primary"` variant; all others default to `"tertiary"`. */
+    buttons?: Omit<ButtonProps, "size" | "as">[];
+    /** Controls the horizontal alignment of the action buttons. @default end */
+    buttonsAlignment?: ModalButtonsAlignment;
+    /** A ref that exposes imperative `open()` and `close()` methods for controlling the modal. Obtained via the `useModal` hook. */
+    ref?: Ref<ModalRef>;
+    /** When `true`, clicking the backdrop outside the modal will close it. Defaults to `false`. */
+    closeOnClickOutside?: boolean;
+    /** When provided, wraps the modal content in a `<form>` element with the given form attributes, enabling native form submission from within the modal. @default false */
+    form?: Pick<ComponentProps<"form">, "id" | "name" | "action" | "method" | "encType" | "acceptCharset" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "spellCheck" | "noValidate" | "onReset" | "onSubmit" | "target" | "rel">;
+}
+/**
+ * A dialog overlay component for focused user interactions, supporting forms, custom widths, and action buttons.
+ *
+ * Unlike `Sheet`, which can be configured to allow the user to continue to interact with the rest of the page, `Modal` is meant to always block user interaction with underlying content.
+ *
+ * @see packages/vesper/src/components/sheet/sheet.tsx
+ *
+ * @param {string} props.title - The title text displayed in the modal header
+ * @param {string} props.description - A description displayed below the title
+ * @param {number | string} [props.width] - (optional) The width of the modal container. @default 452
+ * @param {number | string} [props.maxHeight] - (optional) The maximum height of the modal container. @default 640
+ * @param {ButtonProps[]} [props.buttons] - (optional) Action buttons rendered at the bottom of the modal
+ * @param {ModalButtonsAlignment} [props.buttonsAlignment] - (optional) Horizontal alignment of action buttons. @default end
+ * @param {Ref<ModalRef>} [props.ref] - (optional) A ref exposing imperative `open()` and `close()` methods
+ * @param {boolean} [props.closeOnClickOutside] - (optional) Whether clicking the backdrop closes the modal. @default false
+ * @param {object} [props.form] - (optional) Form attributes to wrap the modal content in a `<form>` element
+ *
+ * You may also pass any additional props to the underlying `dialog` element
+ *
+ * @example
+ * const { ref, open, close } = useModal();
+ *
+ * <Modal ref={ref} title="Confirm" description="Are you sure?">
+ *   <p>This action cannot be undone.</p>
+ * </Modal>
+ * <Button onClick={open}>Open Modal</Button>
+ *
+ * @example
+ * <Modal
+ *   title="Create Item"
+ *   description="Fill out the form below."
+ *   form={{ onSubmit: handleSubmit }}
+ *   buttons={[{ children: "Cancel", onClick: close }, { children: "Create" }]}
+ * />
+ */
+export declare function Modal(props: ModalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A convenience hook that returns a ref and imperative `open()` and `close()` functions for controlling a `Modal` component.
+ *
+ * @example
+ * const { ref, open, close } = useModal();
+ * <Modal ref={ref} title="Example" description="An example modal." />
+ * <Button onClick={open}>Open modal</Button>
+ */
+export declare function useModal(): {
+    open: () => void;
+    close: () => void;
+    ref: import("react").RefObject<ModalRef>;
+};
+export {};
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,cAAc,EACd,KAAK,wBAAwB,EAC7B,KAAK,GAAG,EAMT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAOtE,eAAO,MAAM,wBAAwB,8CAK3B,CAAC;AAEX,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,UAAU,QAAQ;IAChB,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,wBAAwB,CAAC,QAAQ,CAAC,EAClC,MAAM,CACP;IACC,6GAA6G;IAC7G,KAAK,EAAE,MAAM,CAAC;IACd,6HAA6H;IAC7H,WAAW,EAAE,MAAM,CAAC;IACpB,qHAAqH;IACrH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,qLAAqL;IACrL,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC7C,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,gIAAgI;IAChI,GAAG,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;IACpB,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yKAAyK;IACzK,IAAI,CAAC,EAAE,IAAI,CACT,cAAc,CAAC,MAAM,CAAC,EACpB,IAAI,GACJ,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,UAAU,GACV,QAAQ,GACR,KAAK,CACR,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CA0ItC;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ;;;;EAYvB"}

package/dist/components/modal/modal.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useImperativeHandle, useRef, } from "react";
+import { Button } from "../button/button.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Close } from "../icons/icons.js";
+import { Typography } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+export const MODAL_BUTTONS_ALIGNMENTS = [
+    "start",
+    "end",
+    "fill",
+    "between",
+];
+/**
+ * A dialog overlay component for focused user interactions, supporting forms, custom widths, and action buttons.
+ *
+ * Unlike `Sheet`, which can be configured to allow the user to continue to interact with the rest of the page, `Modal` is meant to always block user interaction with underlying content.
+ *
+ * @see packages/vesper/src/components/sheet/sheet.tsx
+ *
+ * @param {string} props.title - The title text displayed in the modal header
+ * @param {string} props.description - A description displayed below the title
+ * @param {number | string} [props.width] - (optional) The width of the modal container. @default 452
+ * @param {number | string} [props.maxHeight] - (optional) The maximum height of the modal container. @default 640
+ * @param {ButtonProps[]} [props.buttons] - (optional) Action buttons rendered at the bottom of the modal
+ * @param {ModalButtonsAlignment} [props.buttonsAlignment] - (optional) Horizontal alignment of action buttons. @default end
+ * @param {Ref<ModalRef>} [props.ref] - (optional) A ref exposing imperative `open()` and `close()` methods
+ * @param {boolean} [props.closeOnClickOutside] - (optional) Whether clicking the backdrop closes the modal. @default false
+ * @param {object} [props.form] - (optional) Form attributes to wrap the modal content in a `<form>` element
+ *
+ * You may also pass any additional props to the underlying `dialog` element
+ *
+ * @example
+ * const { ref, open, close } = useModal();
+ *
+ * <Modal ref={ref} title="Confirm" description="Are you sure?">
+ *   <p>This action cannot be undone.</p>
+ * </Modal>
+ * <Button onClick={open}>Open Modal</Button>
+ *
+ * @example
+ * <Modal
+ *   title="Create Item"
+ *   description="Fill out the form below."
+ *   form={{ onSubmit: handleSubmit }}
+ *   buttons={[{ children: "Cancel", onClick: close }, { children: "Create" }]}
+ * />
+ */
+export function Modal(props) {
+    const { className, ref, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, title, description, width = 452, maxHeight = 640, buttons, buttonsAlignment = "end", children, form, closeOnClickOutside = false, ...rest } = props;
+    const titleId = useId();
+    const descriptionId = useId();
+    const innerRef = useRef(null);
+    const open = useCallback(() => {
+        if (!innerRef.current)
+            return;
+        if (!innerRef.current.open)
+            innerRef.current.showModal();
+    }, []);
+    const close = useCallback(() => {
+        if (!innerRef.current)
+            return;
+        innerRef.current.close();
+    }, []);
+    useImperativeHandle(ref, () => ({ open, close }), [open, close]);
+    useEffect(() => {
+        if (!closeOnClickOutside)
+            return;
+        const handleClick = (e) => {
+            if (e.target === innerRef.current)
+                close();
+        };
+        window.addEventListener("click", handleClick);
+        return () => window.removeEventListener("click", handleClick);
+    }, [closeOnClickOutside, close]);
+    // If an additional aria-labelledby is supplied, this ensures that both ids get used
+    const labelledBy = [ariaLabelledby, titleId].filter(Boolean).join(" ");
+    // If an additional aria-describedby is supplied, this ensures that both ids get used
+    const describedBy = [ariaDescribedby, descriptionId]
+        .filter(Boolean)
+        .join(" ");
+    const modalContents = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vesper-modal-header", children: [_jsxs("div", { children: [_jsx(Typography, { id: titleId, as: "h2", variant: "heading-md", className: "vesper-modal-title", children: title }), _jsx(Typography, { id: descriptionId, variant: "copy-md", className: "vesper-modal-description", children: description })] }), _jsx(IconButton, { "aria-label": "Close modal", size: "sm", variant: "subtle", type: "button", onClick: close, icon: _jsx(Close, {}) })] }), children && (_jsx(Typography, { as: "div", variant: "copy-md", className: "vesper-modal-content", children: children })), !!buttons?.length && (_jsx("div", { className: cn("vesper-modal-buttons", `vesper-modal-buttons-${buttonsAlignment}`), children: buttons.map((button, index) => {
+                    const variant = button.variant ||
+                        (index === buttons.length - 1 ? "primary" : "tertiary");
+                    return (_jsx(Button, { ...button, size: "lg", variant: variant }, index));
+                }) }))] }));
+    const computedMaxHeight = typeof maxHeight === "number"
+        ? `calc(${maxHeight} * (1rem / 16))`
+        : maxHeight;
+    const containerProps = {
+        className: "vesper-modal-container",
+        style: {
+            width: typeof width === "number" ? `calc(${width} * (1rem / 16))` : width,
+            maxHeight: `min(calc(100vh - var(--vesper-spacing-16)), ${computedMaxHeight})`,
+        },
+    };
+    return (_jsx("dialog", { ref: innerRef, className: cn("vesper-modal", className), "aria-labelledby": labelledBy, "aria-describedby": describedBy, ...rest, children: form ? (_jsx("form", { ...containerProps, ...form, children: modalContents })) : (_jsx("div", { ...containerProps, children: modalContents })) }));
+}
+/**
+ * A convenience hook that returns a ref and imperative `open()` and `close()` functions for controlling a `Modal` component.
+ *
+ * @example
+ * const { ref, open, close } = useModal();
+ * <Modal ref={ref} title="Example" description="An example modal." />
+ * <Button onClick={open}>Open modal</Button>
+ */
+export function useModal() {
+    const ref = useRef({ open() { }, close() { } });
+    const open = useCallback(() => {
+        ref.current.open();
+    }, [ref]);
+    const close = useCallback(() => {
+        ref.current.close();
+    }, [ref]);
+    return { open, close, ref };
+}
+//# sourceMappingURL=modal.js.map

package/dist/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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"}

package/dist/components/progress-bar/progress-bar.css

@@ -0,0 +1 @@
+.vesper-progress-bar{background:var(--vesper-tint-neutral-200);justify-content:space-evenly;align-items:stretch;width:100%;display:flex;position:relative;overflow:hidden}.vesper-progress-bar:before{content:"";border:var(--vesper-stroke-base) solid var(--vesper-border-primary);position:absolute;top:0;bottom:0;left:0;right:0}.vesper-progress-bar-sm{border-radius:var(--vesper-spacing-2);height:.5rem}.vesper-progress-bar-sm:before{border-radius:var(--vesper-spacing-2)}.vesper-progress-bar-md{border-radius:var(--vesper-spacing-3);height:.75rem}.vesper-progress-bar-md:before{border-radius:var(--vesper-spacing-3)}.vesper-progress-bar-lg{border-radius:var(--vesper-spacing-4);height:1rem}.vesper-progress-bar-lg:before{border-radius:var(--vesper-spacing-4)}.vesper-progress-bar-indicator{background:var(--vesper-background-accent-base);position:absolute;top:0;bottom:0;left:0}@media (forced-colors:active){.vesper-progress-bar-indicator{background:canvastext}}.vesper-progress-bar-animated .vesper-progress-bar-indicator{transition:width var(--vesper-transition-duration-default) cubic-bezier(.45, .15, .25, .95)}.vesper-progress-bar-animated .vesper-progress-bar-tick{transition:background var(--vesper-transition-duration-default) cubic-bezier(.45, .15, .25, .95)}.vesper-progress-bar-tick{border-left:var(--vesper-stroke-base) solid;position:relative}.vesper-progress-bar-tick-light{border-color:var(--vesper-background-primary)}@media (forced-colors:active){.vesper-progress-bar-tick-light{border-color:canvas}}.vesper-progress-bar-tick-dark{border-color:var(--vesper-border-primary)}@media (forced-colors:active){.vesper-progress-bar-tick-dark{border-color:canvastext}}

package/dist/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentProps } from "react";
+export declare const PROGRESS_BAR_SIZES: readonly ["sm", "md", "lg"];
+export declare const PROGRESS_BAR_VARIANTS: readonly ["default", "steps"];
+export type ProgressBarSize = (typeof PROGRESS_BAR_SIZES)[number];
+export type ProgressBarVariant = (typeof PROGRESS_BAR_VARIANTS)[number];
+export interface ProgressBarProps extends ComponentProps<"div"> {
+    /** Value from `0` to `100`. */
+    value: number;
+    /** The rendered size of the progress bar. @default md */
+    size?: ProgressBarSize;
+    /** The `default` variant will render the progress bar indicator width as a true percentage representation of `value / 100`. The `steps` variant will clamp the width of the progress bar indicator to the nearest rounded tick value. @default default */
+    variant?: ProgressBarVariant;
+    /** The number of segments to split up the progress bar into when variant is `steps`. Must be an integer greater than `0`. @default 10 */
+    steps?: number;
+    /** Determines how to clamp the width of the progress bar to the nearest tick value. @default Math.round */
+    stepRoundingStrategy?: (n: number) => number;
+    /** Whether to animate progress bar value changes. @default false */
+    animated?: boolean;
+}
+/**
+ * A progress bar component that visualizes completion percentage, with support for stepped segments and animations.
+ *
+ * @param {number} props.value - The progress value from `0` to `100`
+ * @param {ProgressBarSize} [props.size] - (optional) The rendered size of the progress bar. @default md
+ * @param {ProgressBarVariant} [props.variant] - (optional) The display variant; `"steps"` clamps to tick intervals. @default default
+ * @param {number} [props.steps] - (optional) Number of segments when variant is `"steps"`. @default 10
+ * @param {boolean} [props.animated] - (optional) Whether to animate progress changes. @default false
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <ProgressBar value={75} />
+ *
+ * @example
+ * <ProgressBar value={60} variant="steps" steps={5} animated />
+ */
+export declare function ProgressBar(props: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=progress-bar.d.ts.map

package/dist/components/progress-bar/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,eAAO,MAAM,kBAAkB,6BAA8B,CAAC;AAE9D,eAAO,MAAM,qBAAqB,+BAAgC,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7D,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,0PAA0P;IAC1P,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,yIAAyI;IACzI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,oBAAoB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA2ClD"}

package/dist/components/progress-bar/progress-bar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+export const PROGRESS_BAR_SIZES = ["sm", "md", "lg"];
+export const PROGRESS_BAR_VARIANTS = ["default", "steps"];
+/**
+ * A progress bar component that visualizes completion percentage, with support for stepped segments and animations.
+ *
+ * @param {number} props.value - The progress value from `0` to `100`
+ * @param {ProgressBarSize} [props.size] - (optional) The rendered size of the progress bar. @default md
+ * @param {ProgressBarVariant} [props.variant] - (optional) The display variant; `"steps"` clamps to tick intervals. @default default
+ * @param {number} [props.steps] - (optional) Number of segments when variant is `"steps"`. @default 10
+ * @param {boolean} [props.animated] - (optional) Whether to animate progress changes. @default false
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <ProgressBar value={75} />
+ *
+ * @example
+ * <ProgressBar value={60} variant="steps" steps={5} animated />
+ */
+export function ProgressBar(props) {
+    const { value, variant = "default", steps = 10, className, size = "md", stepRoundingStrategy, animated = false, "aria-label": ariaLabel = "Progress", ...rest } = props;
+    const progress = Math.min(Math.max(value, 0), 100);
+    return (_jsxs("div", { "aria-label": ariaLabel, className: cn("vesper-progress-bar", `vesper-progress-bar-${size}`, animated && "vesper-progress-bar-animated", className), ...rest, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, role: "progressbar", "aria-valuetext": `${progress}%`, children: [variant === "default" && (_jsx(ProgressBarIndicatorDefault, { value: progress })), variant === "steps" && (_jsx(ProgressBarIndicatorSteps, { value: progress, steps: steps, stepRoundingStrategy: stepRoundingStrategy }))] }));
+}
+function ProgressBarIndicatorDefault({ value }) {
+    return (_jsx("div", { className: "vesper-progress-bar-indicator", style: { width: `${value}%` } }));
+}
+function ProgressBarIndicatorSteps({ value, steps, stepRoundingStrategy = Math.round, }) {
+    const totalSteps = Math.max(Math.floor(steps), 1);
+    const stepWidth = 100 / totalSteps;
+    const numSteps = stepRoundingStrategy(value / stepWidth);
+    const width = `${numSteps * stepWidth}%`;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "vesper-progress-bar-indicator", style: { width } }), Array.from({ length: totalSteps - 1 }).map((_, index) => (_jsx("span", { className: cn("vesper-progress-bar-tick", numSteps !== totalSteps && index >= numSteps - 1
+                    ? "vesper-progress-bar-tick-dark"
+                    : "vesper-progress-bar-tick-light") }, index)))] }));
+}
+//# sourceMappingURL=progress-bar.js.map

package/dist/components/progress-bar/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAE9D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU,CAAC;AAqBnE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,KAAK,GAAG,EAAE,EACV,SAAS,EACT,IAAI,GAAG,IAAI,EACX,oBAAoB,EACpB,QAAQ,GAAG,KAAK,EAChB,YAAY,EAAE,SAAS,GAAG,UAAU,EACpC,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,6BACc,SAAS,EACrB,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,uBAAuB,IAAI,EAAE,EAC7B,QAAQ,IAAI,8BAA8B,EAC1C,SAAS,CACV,KACG,IAAI,mBACO,CAAC,mBACD,GAAG,mBACH,QAAQ,EACvB,IAAI,EAAC,aAAa,oBACF,GAAG,QAAQ,GAAG,aAE7B,OAAO,KAAK,SAAS,IAAI,CACxB,KAAC,2BAA2B,IAAC,KAAK,EAAE,QAAQ,GAAI,CACjD,EACA,OAAO,KAAK,OAAO,IAAI,CACtB,KAAC,yBAAyB,IACxB,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,KAAK,EACZ,oBAAoB,EAAE,oBAAoB,GAC1C,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,2BAA2B,CAAC,EAAE,KAAK,EAAqB;IAC/D,OAAO,CACL,cACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,EAAE,GAC7B,CACH,CAAC;AACJ,CAAC;AAED,SAAS,yBAAyB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,oBAAoB,GAAG,IAAI,CAAC,KAAK,GAKlC;IACC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,GAAG,GAAG,UAAU,CAAC;IACnC,MAAM,QAAQ,GAAG,oBAAoB,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;IACzD,MAAM,KAAK,GAAG,GAAG,QAAQ,GAAG,SAAS,GAAG,CAAC;IAEzC,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAI,EAClE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACxD,eAEE,SAAS,EAAE,EAAE,CACX,0BAA0B,EAC1B,QAAQ,KAAK,UAAU,IAAI,KAAK,IAAI,QAAQ,GAAG,CAAC;oBAC9C,CAAC,CAAC,+BAA+B;oBACjC,CAAC,CAAC,gCAAgC,CACrC,IANI,KAAK,CAOV,CACH,CAAC,IACD,CACJ,CAAC;AACJ,CAAC"}

package/dist/components/radio-group/radio-group.css

@@ -0,0 +1 @@
+.vesper-radio-group{align-items:flex-start;gap:var(--vesper-spacing-3);display:flex}.vesper-radio-group-horizontal{flex-direction:row}.vesper-radio-group-vertical{flex-direction:column}.vesper-radio-group-item{align-items:center;gap:var(--vesper-spacing-1);cursor:pointer;display:flex}.vesper-radio-group-item-indicator{border:var(--vesper-stroke-base) solid var(--vesper-border-primary);border-radius:50%;justify-content:center;align-items:center;display:flex}.vesper-radio-group-item-indicator:after{content:"";border-radius:50%;width:50%;height:50%}.vesper-radio-group-item-sm .vesper-radio-group-item-indicator{width:.75rem;height:.75rem}.vesper-radio-group-item-md .vesper-radio-group-item-indicator{width:1rem;height:1rem}.vesper-radio-group-item-label{color:var(--vesper-text-primary)}.vesper-radio-input{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.vesper-radio-input:checked+.vesper-radio-group-item-indicator{border-color:var(--vesper-background-accent-base);background:var(--vesper-background-accent-base)}.vesper-radio-input:checked+.vesper-radio-group-item-indicator:after{background:var(--vesper-icon-inverse-primary)}@media (forced-colors:active){.vesper-radio-input:checked+.vesper-radio-group-item-indicator:after{background:canvastext}}.vesper-radio-input:focus-visible+.vesper-radio-group-item-indicator{outline:var(--vesper-stroke-base) solid var(--vesper-border-focus);outline-offset:var(--vesper-spacing-micro)}.vesper-radio-group-item-disabled{cursor:auto}.vesper-radio-group-item-disabled .vesper-radio-input+.vesper-radio-group-item-indicator{border-color:var(--vesper-border-disabled);background:var(--vesper-background-disabled)}.vesper-radio-group-item-disabled .vesper-radio-input:checked+.vesper-radio-group-item-indicator:after{background:var(--vesper-icon-disabled)}@media (forced-colors:active){.vesper-radio-group-item-disabled .vesper-radio-input:checked+.vesper-radio-group-item-indicator:after{background:canvastext}}.vesper-radio-group-item-disabled .vesper-radio-group-item-label{color:var(--vesper-text-disabled)}@media (forced-colors:active){.vesper-radio-group-item-disabled{opacity:.35}}

package/dist/components/radio-group/radio-group.d.ts

@@ -0,0 +1,70 @@
+import type { ComponentProps } from "react";
+export declare const RADIO_SIZES: readonly ["sm", "md"];
+export declare const RADIO_GROUP_ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type RadioSize = (typeof RADIO_SIZES)[number];
+export type RadioGroupOrientation = (typeof RADIO_GROUP_ORIENTATIONS)[number];
+export type RadioGroupItem = {
+    /** The value associated with this radio option, used to identify it in selection callbacks. */
+    value: string;
+    /** The text label displayed next to the radio input. */
+    label: string;
+    /** When true, prevents this individual option from being selected. @default false */
+    disabled?: boolean;
+    /** An optional HTML `id` attribute applied to the underlying radio input element. */
+    id?: string;
+};
+export interface RadioGroupProps extends Omit<ComponentProps<"fieldset">, "children" | "onChange" | "defaultValue"> {
+    /** The size of the radio inputs and their labels. @default md */
+    size?: RadioSize;
+    /** The layout direction of the radio options. @default vertical */
+    orientation?: RadioGroupOrientation;
+    /** When `true`, a selection is required for form validation. @default false */
+    required?: boolean;
+    /** The list of radio options to render. */
+    options: RadioGroupItem[];
+    /** The name attribute shared by all radio inputs in the group, used for form submission. */
+    name: string;
+    /** The currently selected value (controlled mode). */
+    value?: string;
+    /** The initially selected value (uncontrolled mode). */
+    defaultValue?: string;
+    /** Callback fired when the selected value changes. Receives the newly selected value. */
+    onChange?(value: string): void;
+}
+/**
+ * A form-ready radio group component for single-value selection from a list of options.
+ *
+ * @param {string} props.name - The name attribute shared by all radio inputs, used for form submission
+ * @param {RadioGroupItem[]} props.options - The list of radio options to render
+ * @param {RadioSize} [props.size] - (optional) The size of the radio inputs and labels. Default: `"md"`
+ * @param {RadioGroupOrientation} [props.orientation] - (optional) The layout direction of the options. Default: `"vertical"`
+ * @param {string} [props.value] - (optional) The currently selected value (controlled)
+ * @param {string} [props.defaultValue] - (optional) The initially selected value (uncontrolled)
+ * @param {(value: string) => void} [props.onChange] - (optional) Callback fired when the selected value changes
+ * @param {boolean} [props.required] - (optional) Marks a selection as required for form validation. @default false
+ *
+ * You may also pass any additional props to the underlying `fieldset` element
+ *
+ * @example
+ * <RadioGroup
+ *   name="color"
+ *   options={[
+ *     { value: "red", label: "Red" },
+ *     { value: "blue", label: "Blue" },
+ *     { value: "green", label: "Green" },
+ *   ]}
+ *   value={color}
+ *   onChange={setColor}
+ * />
+ *
+ * @example
+ * <RadioGroup
+ *   name="size"
+ *   size="sm"
+ *   orientation="horizontal"
+ *   options={sizeOptions}
+ *   defaultValue="md"
+ * />
+ */
+export declare function RadioGroup(props: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAS5C,eAAO,MAAM,WAAW,uBAAwB,CAAC;AAEjD,eAAO,MAAM,wBAAwB,qCAAsC,CAAC;AAE5E,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,MAAM,MAAM,cAAc,GAAG;IAC3B,+FAA+F;IAC/F,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,UAAU,CAAC,EAC1B,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC;IACC,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,4FAA4F;IAC5F,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yFAAyF;IACzF,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAsEhD"}

package/dist/components/radio-group/radio-group.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography, } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+export const RADIO_SIZES = ["sm", "md"];
+export const RADIO_GROUP_ORIENTATIONS = ["horizontal", "vertical"];
+const RADIO_GROUP_ITEM_TYPOGRAPHY = {
+    sm: "label-md",
+    md: "label-lg",
+};
+/**
+ * A form-ready radio group component for single-value selection from a list of options.
+ *
+ * @param {string} props.name - The name attribute shared by all radio inputs, used for form submission
+ * @param {RadioGroupItem[]} props.options - The list of radio options to render
+ * @param {RadioSize} [props.size] - (optional) The size of the radio inputs and labels. Default: `"md"`
+ * @param {RadioGroupOrientation} [props.orientation] - (optional) The layout direction of the options. Default: `"vertical"`
+ * @param {string} [props.value] - (optional) The currently selected value (controlled)
+ * @param {string} [props.defaultValue] - (optional) The initially selected value (uncontrolled)
+ * @param {(value: string) => void} [props.onChange] - (optional) Callback fired when the selected value changes
+ * @param {boolean} [props.required] - (optional) Marks a selection as required for form validation. @default false
+ *
+ * You may also pass any additional props to the underlying `fieldset` element
+ *
+ * @example
+ * <RadioGroup
+ *   name="color"
+ *   options={[
+ *     { value: "red", label: "Red" },
+ *     { value: "blue", label: "Blue" },
+ *     { value: "green", label: "Green" },
+ *   ]}
+ *   value={color}
+ *   onChange={setColor}
+ * />
+ *
+ * @example
+ * <RadioGroup
+ *   name="size"
+ *   size="sm"
+ *   orientation="horizontal"
+ *   options={sizeOptions}
+ *   defaultValue="md"
+ * />
+ */
+export function RadioGroup(props) {
+    const { size = "md", orientation = "vertical", required, disabled, options, className, name, value, defaultValue, onChange, ...rest } = props;
+    return (_jsx("fieldset", { disabled: disabled, className: cn("vesper-radio-group", `vesper-radio-group-${orientation}`, className), ...rest, children: options.map((option) => {
+            const isDisabled = disabled || option.disabled;
+            const checkedProps = value !== undefined
+                ? { checked: value === option.value }
+                : { defaultChecked: defaultValue === option.value };
+            return (_jsxs("label", { htmlFor: option.id, className: cn("vesper-radio-group-item", `vesper-radio-group-item-${size}`, isDisabled && "vesper-radio-group-item-disabled"), children: [_jsx("input", { type: "radio", name: name, required: required, disabled: isDisabled, id: option.id, value: option.value, className: "vesper-radio-input", onChange: (e) => {
+                            if (!onChange)
+                                return;
+                            if (e.target.checked)
+                                onChange(option.value);
+                        }, ...checkedProps }), _jsx("div", { className: "vesper-radio-group-item-indicator" }), _jsx(Typography, { as: "span", className: "vesper-radio-group-item-label", variant: RADIO_GROUP_ITEM_TYPOGRAPHY[size], children: option.label })] }, option.value));
+        }) }));
+}
+//# sourceMappingURL=radio-group.js.map

package/dist/components/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EACL,UAAU,GAEX,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AAEjD,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,YAAY,EAAE,UAAU,CAAU,CAAC;AAuC5E,MAAM,2BAA2B,GAA4C;IAC3E,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,WAAW,GAAG,UAAU,EACxB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,mBACE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,sBAAsB,WAAW,EAAE,EACnC,SAAS,CACV,KACG,IAAI,YAEP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,UAAU,GAAG,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC;YAE/C,MAAM,YAAY,GAChB,KAAK,KAAK,SAAS;gBACjB,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,KAAK,MAAM,CAAC,KAAK,EAAE;gBACrC,CAAC,CAAC,EAAE,cAAc,EAAE,YAAY,KAAK,MAAM,CAAC,KAAK,EAAE,CAAC;YAExD,OAAO,CACL,iBAEE,OAAO,EAAE,MAAM,CAAC,EAAE,EAClB,SAAS,EAAE,EAAE,CACX,yBAAyB,EACzB,2BAA2B,IAAI,EAAE,EACjC,UAAU,IAAI,kCAAkC,CACjD,aAED,gBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAU,EACpB,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAC,oBAAoB,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;4BACd,IAAI,CAAC,QAAQ;gCAAE,OAAO;4BACtB,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO;gCAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC/C,CAAC,KACG,YAAY,GAChB,EACF,cAAK,SAAS,EAAC,mCAAmC,GAAG,EACrD,KAAC,UAAU,IACT,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,2BAA2B,CAAC,IAAI,CAAC,YAEzC,MAAM,CAAC,KAAK,GACF,KA7BR,MAAM,CAAC,KAAK,CA8BX,CACT,CAAC;QACJ,CAAC,CAAC,GACO,CACZ,CAAC;AACJ,CAAC"}

package/dist/components/range/range.css

@@ -0,0 +1 @@
+.vesper-range{--vesper-range-thumb-size:1rem;width:100%;display:block;position:relative}@media (forced-colors:active){.vesper-range[data-disabled]{opacity:.35}}.vesper-range-labeled{padding-top:1.4375rem}.vesper-range-track{width:100%;height:1rem;display:block;position:relative}.vesper-range-track:before{z-index:1;content:"";background:var(--vesper-stone-200);border:var(--vesper-stroke-base) solid var(--vesper-border-primary);border-radius:var(--vesper-spacing-1);position:absolute;top:.3125rem;bottom:.3125rem;left:0;right:0}.vesper-range-tick{z-index:0;height:1rem;left:calc(var(--vesper-range-thumb-size) / 2 + (100% - var(--vesper-range-thumb-size)) * var(--vesper-range-tick-position,0));border-left:var(--vesper-stroke-base) solid var(--vesper-border-primary);position:absolute;transform:translate(-.03125rem)}@media (forced-colors:active){.vesper-range-tick{background:canvastext}}.vesper-range-range{z-index:1}.vesper-range-range:before{content:"";background:var(--vesper-background-accent-base);border:var(--vesper-stroke-base) solid var(--vesper-border-accent-base);border-radius:var(--vesper-spacing-1);position:absolute;top:.3125rem;bottom:.3125rem;left:0;right:0}.vesper-range-range[data-disabled]:before{background:var(--vesper-tint-neutral-400);border:var(--vesper-stroke-base) solid var(--vesper-border-primary)}@media (forced-colors:active){.vesper-range-range:before{background:canvastext}.vesper-range-range[data-disabled]:before{background:canvastext}}.vesper-range-thumb{z-index:2;width:var(--vesper-range-thumb-size);height:var(--vesper-range-thumb-size);cursor:pointer;background:var(--vesper-background-tertiary);border:var(--vesper-stroke-base) solid var(--vesper-border-accent-base);border-radius:var(--vesper-spacing-2);justify-content:center;display:flex}.vesper-range-thumb.vesper-range-thumb-labeled:after{white-space:pre;content:var(--vesper-range-thumb-label,"");color:var(--vesper-text-primary);background:var(--vesper-tint-neutral-100);border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);border-radius:var(--vesper-radius-half);padding:var(--vesper-spacing-1);bottom:calc(100% + var(--vesper-stroke-base));transform:translateY(calc(var(--vesper-spacing-micro) * -1));position:absolute}.vesper-range-thumb[data-disabled]{cursor:auto;border-color:var(--vesper-stone-400)}.vesper-range-thumb[data-disabled]:after{color:var(--vesper-text-disabled)}@media (forced-colors:active){.vesper-range-thumb:has(:focus-visible){outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-range-thumb:has(:focus-visible){box-shadow:var(--vesper-shadow-focus-ring)}}

package/dist/components/range/range.d.ts

@@ -0,0 +1,86 @@
+import { ComponentProps, type Ref } from "react";
+export interface RangeProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "dir"> {
+    /** The values of each thumb (controlled mode). One thumb is rendered per entry in the array. */
+    values?: number[];
+    /** Custom display labels for each thumb, shown as a tooltip-style label above the thumb. When left blank, defaults to the active values of each thumb. */
+    valueLabels?: string[];
+    /** Accessible `aria-label` attributes for each thumb, in the same order as the values. */
+    thumbAriaLabels: string[];
+    /** When `true`, displays the value labels above each thumb. @default false */
+    showValueLabels?: boolean;
+    /** The initial thumb values (uncontrolled mode). @default [min, max] */
+    defaultValues?: number[];
+    /** Callback fired as thumb values change during interaction. Receives the full array of current values. */
+    onValuesChange?(value: number[]): void;
+    /** Callback fired when a thumb interaction is completed (e.g., on pointer up). Receives the final array of values. */
+    onValuesCommit?(value: number[]): void;
+    /** When `true`, renders tick marks along the track at each step interval. @default false */
+    showTicks?: boolean;
+    /** The name attribute applied to each thumb's underlying input, used for form submission. Every thumb submits its value under this name. */
+    name?: string;
+    /** When true, prevents interaction. @default false */
+    disabled?: boolean;
+    /** The minimum allowed value. @default 0 */
+    min?: number;
+    /** The maximum allowed value. @default 100 */
+    max?: number;
+    /** The stepping interval between selectable values. @default 1 */
+    step?: number;
+    /** The minimum number of steps required between thumbs, preventing them from overlapping. @default 1 */
+    minStepsBetweenThumbs?: number;
+    /** The `id` of the `<form>` element this input belongs to, allowing association with a form outside the input's DOM hierarchy. */
+    form?: string;
+    /** A ref forwarded to the wrapping `<div>` element for direct DOM access. */
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A multi-thumb range input for selecting a span of numeric values between a minimum and maximum.
+ *
+ * @param {string[]} props.thumbAriaLabels - Accessible `aria-label` attributes for each thumb, in the same order as the values
+ * @param {number[]} [props.values] - (optional) The values of each thumb (controlled). One thumb is rendered per entry
+ * @param {number[]} [props.defaultValues] - (optional) The initial thumb values (uncontrolled). @default [min, max]
+ * @param {(value: number[]) => void} [props.onValuesChange] - (optional) Callback fired as thumb values change during interaction
+ * @param {(value: number[]) => void} [props.onValuesCommit] - (optional) Callback fired when thumb interaction is completed
+ * @param {number} [props.min] - (optional) The minimum allowed value. @default 0
+ * @param {number} [props.max] - (optional) The maximum allowed value. @default 100
+ * @param {number} [props.step] - (optional) The stepping interval. @default 1
+ * @param {number} [props.minStepsBetweenThumbs] - (optional) The minimum number of steps required between thumbs. @default 1
+ * @param {boolean} [props.showTicks] - (optional) Whether to render tick marks at each step interval. @default false
+ * @param {boolean} [props.showValueLabels] - (optional) Whether to display a value label above each thumb. @default false
+ * @param {string[]} [props.valueLabels] - (optional) Custom display labels for each thumb, falling back to that thumb's current value
+ * @param {boolean} [props.disabled] - (optional) Whether to prevent interaction. @default false
+ * @param {string} [props.name] - (optional) The form field name each thumb submits its value under
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Range
+ *   min={0}
+ *   max={100}
+ *   defaultValues={[20, 80]}
+ *   onValuesCommit={(values) => console.log(values)}
+ *   thumbAriaLabels={["Volume (min)", "Volume (max)"]}
+ * />
+ *
+ * @example
+ * <Range
+ *   min={0}
+ *   max={50}
+ *   step={5}
+ *   showTicks
+ *   showValueLabels
+ *   values={range}
+ *   onValuesChange={setRange}
+ *   thumbAriaLabels={["Volume (min)", "Volume (max)"]}
+ * />
+ *
+ * @example
+ * <Range
+ *   variant="error"
+ *   values={price}
+ *   onValuesChange={setPrice}
+ *   thumbAriaLabels={["Price (min)", "Price (max)"]}
+ * />
+ */
+export declare function Range(props: RangeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=range.d.ts.map

package/dist/components/range/range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["../../../src/components/range/range.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsB,KAAK,GAAG,EAAW,MAAM,OAAO,CAAC;AAa9E,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,cAAc,GAAG,KAAK,CACpC;IACC,gGAAgG;IAChG,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,0JAA0J;IAC1J,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,0FAA0F;IAC1F,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,8EAA8E;IAC9E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,2GAA2G;IAC3G,cAAc,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvC,sHAAsH;IACtH,cAAc,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvC,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4IAA4I;IAC5I,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wGAAwG;IACxG,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kIAAkI;IAClI,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAmHtC"}