@tenstorrent/vesper 0.1.0

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+export const SKELETON_SHAPES = ["box", "pill", "circle"];
+/**
+ * A placeholder loading element that displays an animated shimmer overlay in configurable shapes and sizes.
+ *
+ * @param {SkeletonShape} [props.shape] - (optional) The shape of the skeleton placeholder. @default box
+ * @param {number | string} [props.size] - (optional) Sets both width and height simultaneously
+ * @param {number | string} [props.width] - (optional) The width of the skeleton
+ * @param {number | string} [props.height] - (optional) The height of the skeleton
+ * @param {boolean} [props.show] - (optional) Whether to render the skeleton overlay. @default true
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Skeleton width={200} height={20} />
+ *
+ * @example
+ * <Skeleton shape="circle" size={48} />
+ *
+ * @example
+ * <Skeleton show={isLoading}>
+ *   <Avatar src={user.avatar} />
+ * </Skeleton>
+ */
+export function Skeleton(props) {
+    const { className, shape = "box", width, height, size, show = true, children, style, ...rest } = props;
+    if (!show)
+        return children;
+    return (_jsxs("div", { className: cn("vesper-skeleton", `vesper-skeleton-${shape}`, className), style: {
+            width: size ?? width,
+            height: size ?? height,
+            ...style,
+        }, ...rest, children: [children, _jsx("div", { className: "vesper-skeleton-overlay" })] }));
+}
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAC;AAiBlE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,SAAS,EACT,KAAK,GAAG,KAAK,EACb,KAAK,EACL,MAAM,EACN,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,IAAI,CAAC,IAAI;QAAE,OAAO,QAAQ,CAAC;IAE3B,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,mBAAmB,KAAK,EAAE,EAAE,SAAS,CAAC,EACvE,KAAK,EAAE;YACL,KAAK,EAAE,IAAI,IAAI,KAAK;YACpB,MAAM,EAAE,IAAI,IAAI,MAAM;YACtB,GAAG,KAAK;SACT,KACG,IAAI,aAEP,QAAQ,EACT,cAAK,SAAS,EAAC,yBAAyB,GAAG,IACvC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,69 @@
+import { type RangeProps } from "../range/range.js";
+export interface SliderProps extends Omit<RangeProps, "values" | "variant" | "valueLabels" | "thumbAriaLabels" | "showValueLabels" | "defaultValues" | "onValuesChange" | "onValuesCommit" | "minStepsBetweenThumbs"> {
+    /** The value of the slider thumb (controlled mode). */
+    value?: number;
+    /** A custom display label for the thumb, shown as a tooltip-style label above it. When unset, defaults to the active value of the slider. */
+    valueLabel?: string;
+    /** When `true`, displays the value label above the thumb. @default false */
+    showValueLabel?: boolean;
+    /** The initial thumb value (uncontrolled mode). @default props.min */
+    defaultValue?: number;
+    /** Callback fired as the thumb value changes during interaction. Receives the current value. */
+    onValueChange?(value: number): void;
+    /** Callback fired when the thumb interaction is completed (e.g., on pointer up). Receives the final value. */
+    onValueCommit?(value: number): void;
+    /** The accessible `aria-label` attribute for the thumb. */
+    thumbAriaLabel: string;
+}
+/**
+ * A single-thumb slider for selecting a numeric value within a range.
+ *
+ * @param {string} props.thumbAriaLabel - The accessible `aria-label` for the thumb
+ * @param {number} [props.value] - (optional) The value of the thumb (controlled)
+ * @param {number} [props.defaultValue] - (optional) The initial thumb value (uncontrolled). @default props.min
+ * @param {(value: number) => void} [props.onValueChange] - (optional) Callback fired as the thumb value changes during interaction
+ * @param {(value: number) => void} [props.onValueCommit] - (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 {boolean} [props.showTicks] - (optional) Whether to render tick marks at each step interval. @default false
+ * @param {boolean} [props.showValueLabel] - (optional) Whether to display the value label above the thumb. @default false
+ * @param {string} [props.valueLabel] - (optional) A custom display label for the thumb, falling back to its current value
+ * @param {string} [props.label] - (optional) A label displayed above the track, also used as the accessible name of the slider group
+ * @param {string} [props.message] - (optional) A message displayed below the track, linked to the slider via `aria-describedby`
+ * @param {boolean} [props.disabled] - (optional) Whether to prevent interaction. @default false
+ * @param {string} [props.name] - (optional) The form field name the thumb submits its value under
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Slider
+ *   min={0}
+ *   max={100}
+ *   defaultValue={50}
+ *   onValueCommit={(value) => console.log(value)}
+ *   thumbAriaLabel="Volume"
+ * />
+ *
+ * @example
+ * <Slider
+ *   min={0}
+ *   max={10}
+ *   step={1}
+ *   showTicks
+ *   showValueLabel
+ *   value={volume}
+ *   onValueChange={setVolume}
+ *   thumbAriaLabel="Volume"
+ * />
+ *
+ * @example
+ * <Slider
+ *   value={workers}
+ *   onValueChange={setWorkers}
+ *   aria-invalid
+ *   thumbAriaLabel="Workers"
+ * />
+ */
+export declare function Slider(props: SliderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAElE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,UAAU,EACR,QAAQ,GACR,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,uBAAuB,CAC1B;IACC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6IAA6I;IAC7I,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gGAAgG;IAChG,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,8GAA8G;IAC9G,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,2DAA2D;IAC3D,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAoCxC"}

package/dist/components/slider/slider.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Range } from "../range/range.js";
+/**
+ * A single-thumb slider for selecting a numeric value within a range.
+ *
+ * @param {string} props.thumbAriaLabel - The accessible `aria-label` for the thumb
+ * @param {number} [props.value] - (optional) The value of the thumb (controlled)
+ * @param {number} [props.defaultValue] - (optional) The initial thumb value (uncontrolled). @default props.min
+ * @param {(value: number) => void} [props.onValueChange] - (optional) Callback fired as the thumb value changes during interaction
+ * @param {(value: number) => void} [props.onValueCommit] - (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 {boolean} [props.showTicks] - (optional) Whether to render tick marks at each step interval. @default false
+ * @param {boolean} [props.showValueLabel] - (optional) Whether to display the value label above the thumb. @default false
+ * @param {string} [props.valueLabel] - (optional) A custom display label for the thumb, falling back to its current value
+ * @param {string} [props.label] - (optional) A label displayed above the track, also used as the accessible name of the slider group
+ * @param {string} [props.message] - (optional) A message displayed below the track, linked to the slider via `aria-describedby`
+ * @param {boolean} [props.disabled] - (optional) Whether to prevent interaction. @default false
+ * @param {string} [props.name] - (optional) The form field name the thumb submits its value under
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Slider
+ *   min={0}
+ *   max={100}
+ *   defaultValue={50}
+ *   onValueCommit={(value) => console.log(value)}
+ *   thumbAriaLabel="Volume"
+ * />
+ *
+ * @example
+ * <Slider
+ *   min={0}
+ *   max={10}
+ *   step={1}
+ *   showTicks
+ *   showValueLabel
+ *   value={volume}
+ *   onValueChange={setVolume}
+ *   thumbAriaLabel="Volume"
+ * />
+ *
+ * @example
+ * <Slider
+ *   value={workers}
+ *   onValueChange={setWorkers}
+ *   aria-invalid
+ *   thumbAriaLabel="Workers"
+ * />
+ */
+export function Slider(props) {
+    const { value, valueLabel, defaultValue, onValueChange, onValueCommit, showValueLabel, thumbAriaLabel, min = 0, ...rest } = props;
+    const handleValueChange = useCallback(([value]) => onValueChange?.(value), [onValueChange]);
+    const handleValueCommit = useCallback(([value]) => onValueCommit?.(value), [onValueCommit]);
+    return (_jsx(Range, { values: typeof value === "number" ? [value] : undefined, valueLabels: typeof valueLabel === "string" ? [valueLabel] : undefined, defaultValues: typeof defaultValue === "number" ? [defaultValue] : [min], showValueLabels: showValueLabel, onValuesChange: handleValueChange, onValuesCommit: handleValueCommit, thumbAriaLabels: [thumbAriaLabel], min: min, ...rest }));
+}
+//# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,KAAK,EAAmB,MAAM,0BAA0B,CAAC;AA8BlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,EACJ,KAAK,EACL,UAAU,EACV,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,cAAc,EACd,GAAG,GAAG,CAAC,EACP,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,CAAC,KAAK,CAAW,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,KAAM,CAAC,EAC9C,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,CAAC,KAAK,CAAW,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,KAAM,CAAC,EAC9C,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,IACJ,MAAM,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EACvD,WAAW,EAAE,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,EACtE,aAAa,EAAE,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EACxE,eAAe,EAAE,cAAc,EAC/B,cAAc,EAAE,iBAAiB,EACjC,cAAc,EAAE,iBAAiB,EACjC,eAAe,EAAE,CAAC,cAAc,CAAC,EACjC,GAAG,EAAE,GAAG,KACJ,IAAI,GACR,CACH,CAAC;AACJ,CAAC"}

package/dist/components/snippet/snippet.css

@@ -0,0 +1 @@
+.vesper-snippet{padding:var(--vesper-spacing-2) var(--vesper-spacing-3);align-items:center;gap:var(--vesper-spacing-16);border:var(--vesper-stroke-base) solid var(--vesper-border-tertiary);border-radius:var(--vesper-radius-1);width:fit-content;display:flex;position:relative}.vesper-snippet pre{outline:none;margin:0}.vesper-snippet code{flex-direction:column;display:flex}.vesper-snippet .line:before{content:"$";margin-right:var(--vesper-spacing-2);-webkit-user-select:none;-ms-user-select:none;user-select:none}.vesper-snippet-default{background:var(--vesper-tint-neutral-100);color:var(--vesper-text-primary)}.vesper-snippet-contrast{background:var(--vesper-background-inverse-primary);color:var(--vesper-text-inverse-primary)}

package/dist/components/snippet/snippet.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentProps } from "react";
+export declare const SNIPPET_VARIANTS: readonly ["default", "contrast"];
+export type SnippetVariant = (typeof SNIPPET_VARIANTS)[number];
+export interface SnippetProps extends Omit<ComponentProps<"div">, "children"> {
+    /** The code snippet text to display in the snippet. Also used as the value copied to the clipboard when the copy button is clicked. */
+    children?: string;
+    /** The visual style variant of the snippet. @default fault */
+    variant?: SnippetVariant;
+}
+/**
+ * A copyable code snippet component that displays monospace text with a built-in copy-to-clipboard button.
+ *
+ * @param {string} [props.children] - (optional) The code snippet text to display and copy to clipboard
+ * @param {SnippetVariant} [props.variant] - (optional) The visual style variant of the snippet. @default default`
+ * @param {string} [props.className] - (optional) Additional CSS class names to apply
+ *
+ * You may also pass any additional props to the underlying `<div>` element
+ *
+ * @example
+ * <Snippet>yarn add some-package</Snippet>
+ *
+ * @example
+ * <Snippet variant="contrast">
+ *   {`export default function App() {\n  return <div />\n}`}
+ * </Snippet>
+ */
+export declare function Snippet(props: SnippetProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=snippet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snippet.d.ts","sourceRoot":"","sources":["../../../src/components/snippet/snippet.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAiC,MAAM,OAAO,CAAC;AAQ3E,eAAO,MAAM,gBAAgB,kCAAmC,CAAC;AAEjE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3E,uIAAuI;IACvI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CA8C1C"}

package/dist/components/snippet/snippet.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Checkmark, Copy } from "../icons/icons.js";
+import { Typography } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+export const SNIPPET_VARIANTS = ["default", "contrast"];
+/**
+ * A copyable code snippet component that displays monospace text with a built-in copy-to-clipboard button.
+ *
+ * @param {string} [props.children] - (optional) The code snippet text to display and copy to clipboard
+ * @param {SnippetVariant} [props.variant] - (optional) The visual style variant of the snippet. @default default`
+ * @param {string} [props.className] - (optional) Additional CSS class names to apply
+ *
+ * You may also pass any additional props to the underlying `<div>` element
+ *
+ * @example
+ * <Snippet>yarn add some-package</Snippet>
+ *
+ * @example
+ * <Snippet variant="contrast">
+ *   {`export default function App() {\n  return <div />\n}`}
+ * </Snippet>
+ */
+export function Snippet(props) {
+    const { className, children, variant = "default", ...rest } = props;
+    const [copied, setCopied] = useState(false);
+    const timeout = useRef(null);
+    const copyToClipboard = useCallback(() => {
+        if (timeout.current !== null) {
+            clearTimeout(timeout.current);
+        }
+        navigator.clipboard
+            ?.writeText(children ?? "")
+            .then(() => {
+            setCopied(true);
+            timeout.current = setTimeout(() => setCopied(false), 2000);
+        })
+            .catch(() => { });
+    }, [children]);
+    return (_jsxs("div", { className: cn("vesper-snippet", `vesper-snippet-${variant}`, className), ...rest, children: [_jsx("pre", { children: _jsx(Typography, { as: "code", variant: "copy-xs-mono", children: (children ?? "").split("\n").map((line, index) => (_jsx("span", { className: "line", children: line }, index))) }) }), _jsx(IconButton, { variant: variant === "default" ? "ghost" : "contrast", icon: copied ? _jsx(Checkmark, {}) : _jsx(Copy, {}), "aria-label": copied ? "Copied to clipboard" : "Copy to clipboard", "aria-live": "polite", size: "xs", type: "button", onClick: copyToClipboard })] }));
+}
+//# sourceMappingURL=snippet.js.map

package/dist/components/snippet/snippet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snippet.js","sourceRoot":"","sources":["../../../src/components/snippet/snippet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAuB,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAU,CAAC;AAWjE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEpE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC7B,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;QAED,SAAS,CAAC,SAAS;YACjB,EAAE,SAAS,CAAC,QAAQ,IAAI,EAAE,CAAC;aAC1B,IAAI,CAAC,GAAG,EAAE;YACT,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;QAC7D,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,OAAO,EAAE,EAAE,SAAS,CAAC,KACnE,IAAI,aAER,wBACE,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YACzC,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACjD,eAAkB,SAAS,EAAC,MAAM,YAC/B,IAAI,IADI,KAAK,CAET,CACR,CAAC,GACS,GACT,EACN,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EACrD,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,KAAC,IAAI,KAAG,gBAC3B,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,mBAAmB,eACtD,QAAQ,EAClB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,eAAe,GACxB,IACE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/split-button/split-button.css

@@ -0,0 +1 @@
+.vesper-split-button{width:fit-content;display:inline-flex}.vesper-split-button-action-button{border-width:var(--vesper-stroke-base);border-style:solid;border-top-right-radius:0;border-bottom-right-radius:0;width:100%;position:relative}.vesper-split-button-action-button:focus-visible{z-index:2}@media (forced-colors:active){.vesper-split-button-action-button{border-color:canvastext}}.vesper-split-button-menu-button{border-width:var(--vesper-stroke-base);border-style:solid;border-left-width:0;border-top-left-radius:0;border-bottom-left-radius:0;position:relative}.vesper-split-button-menu-button:focus-visible{z-index:2}.vesper-split-button-menu-button .vesper-split-button-caret-up{display:none}.vesper-split-button-menu-button[data-popup-open] .vesper-split-button-caret-down{display:none}.vesper-split-button-menu-button[data-popup-open] .vesper-split-button-caret-up{display:block}@media (forced-colors:none){.vesper-split-button-action-button.vesper-button-contrast,.vesper-split-button-menu-button.vesper-button-contrast{border-color:var(--vesper-border-inverse-secondary)}.vesper-split-button-action-button.vesper-button-subtle,.vesper-split-button-menu-button.vesper-button-subtle,.vesper-split-button-action-button.vesper-button-disabled,.vesper-split-button-menu-button.vesper-button-disabled{border-color:var(--vesper-border-secondary)}}

package/dist/components/split-button/split-button.d.ts

@@ -0,0 +1,78 @@
+import { ComponentProps, type MouseEventHandler } from "react";
+import { type MenuItemProps, type MenuProps } from "../menu/menu.js";
+export declare const SPLIT_BUTTON_SIZES: readonly ["sm", "md", "lg"];
+export declare const SPLIT_BUTTON_VARIANTS: readonly ["subtle", "contrast"];
+export type SplitButtonSize = (typeof SPLIT_BUTTON_SIZES)[number];
+export type SplitButtonVariant = (typeof SPLIT_BUTTON_VARIANTS)[number];
+export interface SplitButtonProps extends Omit<ComponentProps<"div">, "onClick"> {
+    /** The size of the split button, applied to both the action button and the menu toggle. @default md */
+    size?: SplitButtonSize;
+    /** The visual style variant, applied to both the action button and the menu toggle. @default contrast */
+    variant?: SplitButtonVariant;
+    /** The list of menu items rendered in the dropdown when the menu toggle is clicked. */
+    menuItems: MenuItemProps[];
+    /** Callback fired when the primary action button is clicked. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** An accessible `aria-label` for the menu toggle button. @default Toggle menu */
+    menuButtonAriaLabel?: string;
+    /** The width of the dropdown menu in pixels. @default 200 */
+    menuWidth?: MenuProps["width"];
+    /** The preferred side of the split button to render the dropdown menu against. @default bottom */
+    menuSide?: MenuProps["side"];
+    /** The distance in pixels from the split button to the dropdown menu. @default 8 */
+    menuSideOffset?: MenuProps["sideOffset"];
+    /** The alignment of the dropdown menu relative to the split button. @default start */
+    menuAlign?: MenuProps["align"];
+    /** An offset in pixels from the aligned edge of the split button. @default 0 */
+    menuAlignOffset?: MenuProps["alignOffset"];
+    /** Controls the open state of the dropdown menu (controlled mode). */
+    menuOpen?: MenuProps["open"];
+    /** Callback fired when the dropdown menu's open state changes. */
+    onMenuOpenChange?: MenuProps["onOpenChange"];
+    /** Whether the dropdown menu is open by default (uncontrolled mode). */
+    defaultMenuOpen?: MenuProps["defaultOpen"];
+    /** When `true`, disables both the action button and the menu toggle, preventing interaction. @default false */
+    disabled?: boolean;
+}
+/**
+ * A compound button that pairs a primary action button with a dropdown menu toggle for secondary actions.
+ *
+ * Unlike `Button` (which triggers a single action), `TextButton` (which renders as text-only), and `IconButton` (which displays a single icon without text), `SplitButton` pairs a primary action with a dropdown menu.
+ *
+ * @see packages/vesper/src/components/button/button.tsx
+ * @see packages/vesper/src/components/text-button/text-button.tsx
+ * @see packages/vesper/src/components/icon-button/icon-button.tsx
+ *
+ * @param {MenuItemProps[]} props.menuItems - The list of menu items rendered in the dropdown
+ * @param {SplitButtonSize} [props.size] - (optional) The size of the split button. @default md
+ * @param {SplitButtonVariant} [props.variant] - (optional) The visual style variant. @default contrast
+ * @param {MouseEventHandler<HTMLButtonElement>} [props.onClick] - (optional) Callback fired when the primary action button is clicked
+ * @param {boolean} [props.disabled] - (optional) Disables both the action button and the menu toggle. @default false
+ * @param {string} [props.menuButtonAriaLabel] - (optional) Accessible label for the menu toggle. @default Toggle menu
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <SplitButton
+ *   onClick={handleSave}
+ *   menuItems={[
+ *     { text: "Save as draft", onSelect: handleDraft },
+ *     { text: "Save and publish", onSelect: handlePublish },
+ *   ]}
+ * >
+ *   Save
+ * </SplitButton>
+ *
+ * @example
+ * <SplitButton
+ *   size="sm"
+ *   variant="subtle"
+ *   menuItems={exportOptions}
+ *   menuSide="top"
+ *   onClick={handleExport}
+ * >
+ *   Export
+ * </SplitButton>
+ */
+export declare function SplitButton(props: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=split-button.d.ts.map

package/dist/components/split-button/split-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../src/components/split-button/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,cAAc,EACd,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAKf,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,wBAAwB,CAAC;AAKhC,eAAO,MAAM,kBAAkB,6BAA8B,CAAC;AAE9D,eAAO,MAAM,qBAAqB,iCAAkC,CAAC;AAErE,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,IAAI,CAC5C,cAAc,CAAC,KAAK,CAAC,EACrB,SAAS,CACV;IACC,uGAAuG;IACvG,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,yGAAyG;IACzG,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,uFAAuF;IACvF,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,gEAAgE;IAChE,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,kFAAkF;IAClF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC/B,kGAAkG;IAClG,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC7B,oFAAoF;IACpF,cAAc,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACzC,sFAAsF;IACtF,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC/B,gFAAgF;IAChF,eAAe,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAC3C,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC7B,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,wEAAwE;IACxE,eAAe,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAC3C,+GAA+G;IAC/G,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAoFlD"}

package/dist/components/split-button/split-button.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, } from "react";
+import { Button } from "../button/button.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { CaretDown, CaretUp } from "../icons/icons.js";
+import { Menu, } from "../menu/menu.js";
+import { cn } from "../../utils/cn.js";
+import { useMergedRefs } from "../../utils/hooks/useMergedRefs.js";
+export const SPLIT_BUTTON_SIZES = ["sm", "md", "lg"];
+export const SPLIT_BUTTON_VARIANTS = ["subtle", "contrast"];
+/**
+ * A compound button that pairs a primary action button with a dropdown menu toggle for secondary actions.
+ *
+ * Unlike `Button` (which triggers a single action), `TextButton` (which renders as text-only), and `IconButton` (which displays a single icon without text), `SplitButton` pairs a primary action with a dropdown menu.
+ *
+ * @see packages/vesper/src/components/button/button.tsx
+ * @see packages/vesper/src/components/text-button/text-button.tsx
+ * @see packages/vesper/src/components/icon-button/icon-button.tsx
+ *
+ * @param {MenuItemProps[]} props.menuItems - The list of menu items rendered in the dropdown
+ * @param {SplitButtonSize} [props.size] - (optional) The size of the split button. @default md
+ * @param {SplitButtonVariant} [props.variant] - (optional) The visual style variant. @default contrast
+ * @param {MouseEventHandler<HTMLButtonElement>} [props.onClick] - (optional) Callback fired when the primary action button is clicked
+ * @param {boolean} [props.disabled] - (optional) Disables both the action button and the menu toggle. @default false
+ * @param {string} [props.menuButtonAriaLabel] - (optional) Accessible label for the menu toggle. @default Toggle menu
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <SplitButton
+ *   onClick={handleSave}
+ *   menuItems={[
+ *     { text: "Save as draft", onSelect: handleDraft },
+ *     { text: "Save and publish", onSelect: handlePublish },
+ *   ]}
+ * >
+ *   Save
+ * </SplitButton>
+ *
+ * @example
+ * <SplitButton
+ *   size="sm"
+ *   variant="subtle"
+ *   menuItems={exportOptions}
+ *   menuSide="top"
+ *   onClick={handleExport}
+ * >
+ *   Export
+ * </SplitButton>
+ */
+export function SplitButton(props) {
+    const { size = "md", variant = "contrast", children, className, onClick, menuItems = [], menuAlign = "start", menuAlignOffset, menuOpen, onMenuOpenChange, menuSide = "bottom", menuSideOffset, menuWidth, disabled = false, menuButtonAriaLabel, onPointerDown, defaultMenuOpen, ref, ...rest } = props;
+    const innerRef = useRef(null);
+    const mergedRef = useMergedRefs(ref, innerRef);
+    const actionButtonRef = useRef(null);
+    const menuButtonRef = useRef(null);
+    const handlePointerDown = useCallback((e) => {
+        if (disabled)
+            e.preventDefault();
+        onPointerDown?.(e);
+    }, [disabled, onPointerDown]);
+    return (_jsxs("div", { className: cn("vesper-split-button", className), onPointerDown: handlePointerDown, ref: mergedRef, ...rest, children: [_jsx(Button, { className: "vesper-split-button-action-button", ref: actionButtonRef, onClick: onClick, onKeyDown: (e) => e.stopPropagation(), size: size, variant: variant, disabled: disabled, children: children }), _jsx(Menu, { anchor: innerRef, items: menuItems, align: menuAlign, side: menuSide, alignOffset: menuAlignOffset, open: menuOpen, sideOffset: menuSideOffset, width: menuWidth, defaultOpen: defaultMenuOpen, onOpenChange: onMenuOpenChange, children: _jsx(IconButton, { className: "vesper-split-button-menu-button", size: size, variant: variant, disabled: disabled, "aria-label": menuButtonAriaLabel || "Toggle menu", ref: menuButtonRef, icon: _jsxs(_Fragment, { children: [_jsx(CaretDown, { className: "vesper-split-button-caret-down" }), _jsx(CaretUp, { className: "vesper-split-button-caret-up" })] }) }) })] }));
+}
+//# sourceMappingURL=split-button.js.map

package/dist/components/split-button/split-button.js.map

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

package/dist/components/status-indicator/status-indicator.css

@@ -0,0 +1 @@
+.vesper-status-indicator{align-items:center;gap:var(--vesper-spacing-2);width:fit-content;display:inline-flex}.vesper-status-indicator-badge{padding:var(--vesper-spacing-1);border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);border-radius:var(--vesper-radius-half)}.vesper-status-indicator-dot{width:.625rem;height:.625rem;position:relative}.vesper-status-indicator-dot:before{content:"";border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}.vesper-status-indicator-dot:after{content:"";border-radius:50%;position:absolute;top:.1875rem;bottom:.1875rem;left:.1875rem;right:.1875rem}.vesper-status-indicator-dot.vesper-status-indicator-dot-animated:before{animation:vesper-status-indicator-dot-pulse var(--vesper-transition-duration-slow) cubic-bezier(.85, 0, .35, 1) infinite alternate}@keyframes vesper-status-indicator-dot-pulse{0%{opacity:1}to{opacity:.1}}.vesper-status-indicator-dot-queued:before{background:var(--vesper-sky-300)}.vesper-status-indicator-dot-queued:after{background:var(--vesper-sky-700)}.vesper-status-indicator-dot-progress:before{background:var(--vesper-amber-400)}.vesper-status-indicator-dot-progress:after{background:var(--vesper-amber-700)}.vesper-status-indicator-dot-error:before{background:var(--vesper-red-400)}.vesper-status-indicator-dot-error:after{background:var(--vesper-red-700)}.vesper-status-indicator-dot-ready:before{background:var(--vesper-mint-400)}.vesper-status-indicator-dot-ready:after{background:var(--vesper-mint-700)}.vesper-status-indicator-dot-cancelled:before{background:var(--vesper-stone-400)}.vesper-status-indicator-dot-cancelled:after{background:var(--vesper-stone-700)}.vesper-status-indicator-label{color:var(--vesper-text-primary)}

package/dist/components/status-indicator/status-indicator.d.ts

@@ -0,0 +1,35 @@
+import type { ElementType } from "react";
+import type { Polymorphic } from "../../utils/polymorphic.js";
+export declare const STATUS_INDICATOR_STATES: readonly ["queued", "progress", "error", "ready", "cancelled"];
+export declare const STATUS_INDICATOR_VARIANTS: readonly ["default", "badge"];
+export type StatusIndicatorState = (typeof STATUS_INDICATOR_STATES)[number];
+export type StatusIndicatorVariants = (typeof STATUS_INDICATOR_VARIANTS)[number];
+export type StatusIndicatorProps<E extends ElementType = "div"> = Polymorphic<{
+    /** The text label displayed next to the status dot. */
+    label: string;
+    /** The current status state, which determines the color of the indicator dot. */
+    state: StatusIndicatorState;
+    /** The visual style variant of the status indicator. @default default */
+    variant?: StatusIndicatorVariants;
+    /** When `true`, applies a pulsing animation to the status dot. @default false */
+    animated?: boolean;
+}, E, "children">;
+/**
+ * A polymorphic status indicator that displays a colored dot and label representing a system state.
+ *
+ * @param {string} props.label - The text label displayed next to the status dot
+ * @param {StatusIndicatorState} props.state - The current status state determining the dot color
+ * @param {StatusIndicatorVariants} [props.variant] - (optional) The visual style variant. @default default`
+ * @param {boolean} [props.animated] - (optional) When `true`, applies a pulsing animation to the dot. @default false
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <StatusIndicator label="Running" state="progress" animated />
+ *
+ * @example
+ * <StatusIndicator label="Deployed" state="ready" variant="badge" />
+ */
+export declare function StatusIndicator<E extends ElementType = "div">(props: StatusIndicatorProps<E>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=status-indicator.d.ts.map

package/dist/components/status-indicator/status-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/status-indicator/status-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAKzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,eAAO,MAAM,uBAAuB,gEAM1B,CAAC;AAEX,eAAO,MAAM,yBAAyB,+BAAgC,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5E,MAAM,MAAM,uBAAuB,GACjC,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7C,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CAC3E;IACE,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,KAAK,EAAE,oBAAoB,CAAC;IAC5B,yEAAyE;IACzE,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,EACD,CAAC,EACD,UAAU,CACX,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAC3D,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAqC/B"}

package/dist/components/status-indicator/status-indicator.js

@@ -0,0 +1,33 @@
+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 STATUS_INDICATOR_STATES = [
+    "queued",
+    "progress",
+    "error",
+    "ready",
+    "cancelled",
+];
+export const STATUS_INDICATOR_VARIANTS = ["default", "badge"];
+/**
+ * A polymorphic status indicator that displays a colored dot and label representing a system state.
+ *
+ * @param {string} props.label - The text label displayed next to the status dot
+ * @param {StatusIndicatorState} props.state - The current status state determining the dot color
+ * @param {StatusIndicatorVariants} [props.variant] - (optional) The visual style variant. @default default`
+ * @param {boolean} [props.animated] - (optional) When `true`, applies a pulsing animation to the dot. @default false
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <StatusIndicator label="Running" state="progress" animated />
+ *
+ * @example
+ * <StatusIndicator label="Deployed" state="ready" variant="badge" />
+ */
+export function StatusIndicator(props) {
+    const { className, label, state, animated, variant = "default", as: Component = "div", ...rest } = props;
+    return (_jsxs(Component, { className: cn("vesper-status-indicator", `vesper-status-indicator-${variant}`, className), ...rest, children: [_jsx("span", { className: cn("vesper-status-indicator-dot", `vesper-status-indicator-dot-${state}`, animated && "vesper-status-indicator-dot-animated") }), _jsx(Typography, { as: "span", className: "vesper-status-indicator-label", variant: "label-xs-mono", children: label })] }));
+}
+//# sourceMappingURL=status-indicator.js.map

package/dist/components/status-indicator/status-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator.js","sourceRoot":"","sources":["../../../src/components/status-indicator/status-indicator.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAGhC,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,QAAQ;IACR,UAAU;IACV,OAAO;IACP,OAAO;IACP,WAAW;CACH,CAAC;AAEX,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU,CAAC;AAsBvE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,eAAe,CAC7B,KAA8B;IAE9B,MAAM,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,yBAAyB,EACzB,2BAA2B,OAAO,EAAE,EACpC,SAAS,CACV,KACG,IAAI,aAER,eACE,SAAS,EAAE,EAAE,CACX,6BAA6B,EAC7B,+BAA+B,KAAK,EAAE,EACtC,QAAQ,IAAI,sCAAsC,CACnD,GACD,EACF,KAAC,UAAU,IACT,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAC,eAAe,YAEtB,KAAK,GACK,IACH,CACb,CAAC;AACJ,CAAC"}

package/dist/components/switch/switch.css

@@ -0,0 +1 @@
+.vesper-switch{align-items:center;gap:var(--vesper-spacing-2);width:fit-content;display:flex}.vesper-switch:not(:has(:disabled)){cursor:pointer}.vesper-switch-pill{aspect-ratio:2;background:var(--vesper-tint-neutral-400);padding:var(--vesper-spacing-half);overflow:hidden}.vesper-switch-pill:after{content:"";aspect-ratio:1;height:100%;transition:transform var(--vesper-transition-duration-fast) ease;border-radius:50%;display:block}@media (forced-colors:active){.vesper-switch-pill{background:canvastext}.vesper-switch-pill:after{background:canvas}}.vesper-switch-label{align-items:center;gap:var(--vesper-spacing-2);color:var(--vesper-text-primary);display:inline-flex}.vesper-switch-input{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.vesper-switch-input:not(:disabled)~.vesper-switch-pill{transition:background var(--vesper-transition-duration-fast) ease}.vesper-switch-input:not(:disabled)~.vesper-switch-pill:after{box-shadow:var(--vesper-shadow-100)}.vesper-switch-input:checked~.vesper-switch-pill{background:var(--vesper-background-accent-base)}.vesper-switch-input:checked~.vesper-switch-pill:after{transform:translateX(calc(100% + var(--vesper-spacing-1)))}@media (forced-colors:active){.vesper-switch-input:checked~.vesper-switch-pill{background:canvastext}}.vesper-switch-input:focus-visible~.vesper-switch-pill{box-shadow:var(--vesper-shadow-focus-ring)}@media (forced-colors:active){.vesper-switch-input:focus-visible~.vesper-switch-pill{box-shadow:none;outline:var(--vesper-stroke-base) solid CanvasText;outline-offset:var(--vesper-spacing-micro)}}.vesper-switch-input:disabled~.vesper-switch-label{color:var(--vesper-text-disabled)}.vesper-switch-input:disabled~.vesper-switch-pill{background:var(--vesper-background-disabled)}.vesper-switch-input:disabled~.vesper-switch-pill:after{background:var(--vesper-background-disabled)}@media (forced-colors:active){.vesper-switch-input:disabled~.vesper-switch-pill{opacity:.35;background:canvastext}}.vesper-switch-input~.vesper-switch-pill:after{background:var(--vesper-background-primary)}.vesper-switch-sm .vesper-switch-pill{border-radius:1rem;height:1rem}.vesper-switch-md .vesper-switch-pill{border-radius:1.5rem;height:1.5rem}

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,41 @@
+import { FormInputProps } from "../../utils/splitFormInputProps.js";
+export declare const SWITCH_SIZES: readonly ["sm", "md"];
+export type SwitchSize = (typeof SWITCH_SIZES)[number];
+export interface SwitchProps extends FormInputProps<"label", "input"> {
+    /** The text label displayed next to the switch. An asterisk is appended when `required` is `true`. */
+    label?: string;
+    /** The size of the switch and its label. @default md */
+    size?: SwitchSize;
+}
+/**
+ * A form-ready toggle switch input with an optional label, supporting controlled and uncontrolled usage.
+ *
+ * Unlike `Checkbox`, which can render an indeterminate state, `Switch` only allows a binary on/off choice.
+ *
+ * Related components include `Toggle` (which selects one option from a segmented group) and `Choicebox` (which selects any number of options from a group).
+ *
+ * @see packages/vesper/src/components/checkbox/checkbox.tsx
+ * @see packages/vesper/src/components/toggle/toggle.tsx
+ *
+ * @param {string} [props.label] - (optional) The text label displayed next to the switch
+ * @param {SwitchSize} [props.size] - (optional) The size of the switch and its label. @default md
+ * @param {boolean} [props.checked] - (optional) The controlled checked state
+ * @param {boolean} [props.defaultChecked] - (optional) The initial checked state (uncontrolled)
+ * @param {boolean} [props.disabled] - (optional) Prevents interaction. @default false
+ * @param {boolean} [props.required] - (optional) Marks the switch as required for form validation. @default false
+ * @param {string} [props.name] - (optional) Form field name submitted with form data
+ *
+ * You may also pass any additional props to the underlying `label` element
+ *
+ * @example
+ * <Switch label="Enable notifications" name="notifications" />
+ *
+ * @example
+ * <Switch
+ *   label="Dark mode"
+ *   checked={darkMode}
+ *   onChange={(e) => setDarkMode(e.target.checked)}
+ * />
+ */
+export declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAQA,OAAO,EACL,cAAc,EAEf,MAAM,6BAA6B,CAAC;AAErC,eAAO,MAAM,YAAY,uBAAwB,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC;IACnE,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CA8BxC"}

package/dist/components/switch/switch.js

@@ -0,0 +1,46 @@
+"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";
+import { splitFormInputProps, } from "../../utils/splitFormInputProps.js";
+export const SWITCH_SIZES = ["sm", "md"];
+const SWITCH_TYPOGRAPHY = {
+    sm: "label-md",
+    md: "label-lg",
+};
+/**
+ * A form-ready toggle switch input with an optional label, supporting controlled and uncontrolled usage.
+ *
+ * Unlike `Checkbox`, which can render an indeterminate state, `Switch` only allows a binary on/off choice.
+ *
+ * Related components include `Toggle` (which selects one option from a segmented group) and `Choicebox` (which selects any number of options from a group).
+ *
+ * @see packages/vesper/src/components/checkbox/checkbox.tsx
+ * @see packages/vesper/src/components/toggle/toggle.tsx
+ *
+ * @param {string} [props.label] - (optional) The text label displayed next to the switch
+ * @param {SwitchSize} [props.size] - (optional) The size of the switch and its label. @default md
+ * @param {boolean} [props.checked] - (optional) The controlled checked state
+ * @param {boolean} [props.defaultChecked] - (optional) The initial checked state (uncontrolled)
+ * @param {boolean} [props.disabled] - (optional) Prevents interaction. @default false
+ * @param {boolean} [props.required] - (optional) Marks the switch as required for form validation. @default false
+ * @param {string} [props.name] - (optional) Form field name submitted with form data
+ *
+ * You may also pass any additional props to the underlying `label` element
+ *
+ * @example
+ * <Switch label="Enable notifications" name="notifications" />
+ *
+ * @example
+ * <Switch
+ *   label="Dark mode"
+ *   checked={darkMode}
+ *   onChange={(e) => setDarkMode(e.target.checked)}
+ * />
+ */
+export function Switch(props) {
+    const { label, size = "md", className, ...rest } = props;
+    const { ariaProps, controlProps, formProps, wrapperProps } = splitFormInputProps(rest);
+    return (_jsxs("label", { ...wrapperProps, className: cn("vesper-switch", `vesper-switch-${size}`, className), children: [_jsx("input", { ...ariaProps, ...controlProps, ...formProps, className: "vesper-switch-input", type: "checkbox", role: "switch" }), _jsx("div", { className: "vesper-switch-pill" }), label && (_jsx(Typography, { className: "vesper-switch-label", variant: SWITCH_TYPOGRAPHY[size], children: formProps.required ? `${label} *` : label }))] }));
+}
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,UAAU,GAEX,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAEL,mBAAmB,GACpB,MAAM,6BAA6B,CAAC;AAErC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AAWlD,MAAM,iBAAiB,GAA6C;IAClE,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEzD,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,GACxD,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAE5B,OAAO,CACL,oBACM,YAAY,EAChB,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,iBAAiB,IAAI,EAAE,EAAE,SAAS,CAAC,aAElE,mBACM,SAAS,KACT,YAAY,KACZ,SAAS,EACb,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,GACb,EACF,cAAK,SAAS,EAAC,oBAAoB,GAAG,EACrC,KAAK,IAAI,CACR,KAAC,UAAU,IACT,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC,YAE/B,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,GAC/B,CACd,IACK,CACT,CAAC;AACJ,CAAC"}