@tenstorrent/vesper 0.1.0

package/dist/components/badge/badge.js

@@ -0,0 +1,49 @@
+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 BADGE_SIZES = ["sm", "md", "lg"];
+export const BADGE_VARIANTS = [
+    "accent",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "purple",
+    "pink",
+    "mint",
+    "contrast",
+];
+const BADGE_TYPOGRAPHY_VARIANTS = {
+    lg: "label-md",
+    md: "label-sm",
+    sm: "label-xs",
+};
+/**
+ * A polymorphic badge component for describing the content it sits next to (e.g. plan tier, environment, role) with color variants and optional icons.
+ *
+ * Unlike `Tag` (which categorizes content) and `Chip` (which displays on/off states), `Badges` provide contextual metadata about adjacent content.
+ *
+ * @see packages/vesper/src/components/chip/chip.tsx
+ * @see packages/vesper/src/components/tag/tag.tsx
+ *
+ * @param {BadgeSize} [props.size] - (optional) The size of the badge. @default md
+ * @param {BadgeVariant} [props.variant] - (optional) The color variant of the badge. @default accent
+ * @param {boolean} [props.subtle] - (optional) Renders the badge with a more subdued appearance. @default false
+ * @param {ReactNode} [props.icon] - (optional) An icon element rendered to the left of the badge text
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Badge variant="success">Active</Badge>
+ *
+ * @example
+ * <Badge size="sm" variant="danger" icon={<ErrorSolid />} subtle>
+ *   3 errors
+ * </Badge>
+ */
+export function Badge(props) {
+    const { as: Component = "div", className, size = "md", variant = "accent", subtle, icon, children, ...rest } = props;
+    return (_jsxs(Component, { className: cn("vesper-badge", `vesper-badge-${size}`, subtle ? `vesper-badge-${variant}-subtle` : `vesper-badge-${variant}`, className), ...rest, children: [icon && _jsx("span", { className: "vesper-badge-icon", children: icon }), _jsx(Typography, { as: "span", variant: BADGE_TYPOGRAPHY_VARIANTS[size], className: "vesper-badge-text", children: children })] }));
+}
+//# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,UAAU,GAEX,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAGhC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAEvD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,QAAQ;IACR,SAAS;IACT,SAAS;IACT,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;IACN,MAAM;IACN,UAAU;CACF,CAAC;AAoBX,MAAM,yBAAyB,GAA4C;IACzE,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,KAAK,CAAgC,KAAoB;IACvE,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,QAAQ,EAClB,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,gBAAgB,IAAI,EAAE,EACtB,MAAM,CAAC,CAAC,CAAC,gBAAgB,OAAO,SAAS,CAAC,CAAC,CAAC,gBAAgB,OAAO,EAAE,EACrE,SAAS,CACV,KACG,IAAI,aAEP,IAAI,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,IAAI,GAAQ,EAC1D,KAAC,UAAU,IACT,EAAE,EAAC,MAAM,EACT,OAAO,EAAE,yBAAyB,CAAC,IAAI,CAAC,EACxC,SAAS,EAAC,mBAAmB,YAE5B,QAAQ,GACE,IACH,CACb,CAAC;AACJ,CAAC"}

package/dist/components/button/button.css

@@ -0,0 +1 @@
+.vesper-button{justify-content:center;align-items:center;gap:var(--vesper-spacing-2);width:fit-content;font-family:var(--vesper-font-mono);text-transform:uppercase;font-weight:400;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal);cursor:pointer;display:inline-flex}@media (forced-colors:active){.vesper-button{border:var(--vesper-stroke-base) solid CanvasText}.vesper-button:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-button:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-button{text-box-trim:trim-both;text-box-edge:cap alphabetic}.vesper-button-lg{height:3rem;padding:0 var(--vesper-spacing-5);border-radius:var(--vesper-radius-2);font-size:1rem}.vesper-button-lg .vesper-button-icon{width:1.25rem;height:1.25rem}.vesper-button-md{height:2.5rem;padding:0 var(--vesper-spacing-4);border-radius:var(--vesper-radius-2);font-size:1rem}.vesper-button-md .vesper-button-icon{width:1.25rem;height:1.25rem}.vesper-button-sm{height:2rem;padding:0 var(--vesper-spacing-3);border-radius:var(--vesper-radius-1);font-size:.875rem}.vesper-button-sm .vesper-button-icon{width:1rem;height:1rem}.vesper-button-xs{height:1.5rem;padding:0 var(--vesper-spacing-2);border-radius:var(--vesper-radius-1);font-size:.875rem}.vesper-button-xs .vesper-button-icon{width:.875rem;height:.875rem}.vesper-button-primary{color:var(--vesper-text-primary);background:var(--vesper-background-accent-base)}.vesper-button-primary:hover{background:linear-gradient(0deg, var(--vesper-state-inverse-hover) 0%, var(--vesper-state-inverse-hover) 100%), var(--vesper-background-accent-base)}@media not (forced-colors:active){.vesper-button-contrast{color:var(--vesper-text-inverse-primary);background:var(--vesper-background-inverse-primary)}.vesper-button-contrast:hover{background:linear-gradient(0deg, var(--vesper-state-inverse-hover) 0%, var(--vesper-state-inverse-hover) 100%), var(--vesper-background-inverse-primary)}}@media (forced-colors:active){.vesper-button-contrast:focus-visible{outline-offset:var(--vesper-spacing-micro);outline-width:var(--vesper-stroke-base)}.vesper-button-contrast{forced-color-adjust:none;color:canvas;background:canvastext}}.vesper-button-danger{color:var(--vesper-text-inverse-primary);background:var(--vesper-background-error-base)}.vesper-button-danger:hover{background:linear-gradient(0deg, var(--vesper-state-inverse-hover) 0%, var(--vesper-state-inverse-hover) 100%), var(--vesper-background-error-base)}.vesper-button-warning{color:var(--vesper-text-primary);background:var(--vesper-background-warning-base)}.vesper-button-warning:hover{background:linear-gradient(0deg, var(--vesper-state-inverse-hover) 0%, var(--vesper-state-inverse-hover) 100%), var(--vesper-background-warning-base)}.vesper-button-subtle{color:var(--vesper-text-primary);background:var(--vesper-tint-neutral-300)}.vesper-button-subtle:hover{background:var(--vesper-tint-neutral-400)}.vesper-button-tertiary{color:var(--vesper-text-primary)}@media (forced-colors:none){.vesper-button-tertiary{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary)}}.vesper-button-tertiary{background:var(--vesper-tint-inverse-100)}.vesper-button-tertiary:hover{background:var(--vesper-tint-neutral-200)}.vesper-button-ghost{color:var(--vesper-text-primary)}.vesper-button-ghost:hover{background:var(--vesper-tint-neutral-200)}.vesper-button-disabled{color:var(--vesper-text-disabled);background:var(--vesper-background-disabled);pointer-events:none}

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

@@ -0,0 +1,51 @@
+import type { ElementType, ReactNode } from "react";
+import type { Polymorphic } from "../../utils/polymorphic.js";
+export declare const BUTTON_SIZES: readonly ["xs", "sm", "md", "lg"];
+export declare const BUTTON_VARIANTS: readonly ["contrast", "danger", "ghost", "primary", "subtle", "tertiary", "warning"];
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];
+export type ButtonProps<E extends ElementType = "button"> = Polymorphic<{
+    /** The size of the button. Affects padding and font size. @default md */
+    size?: ButtonSize;
+    /** The visual style variant of the button. @default primary */
+    variant?: ButtonVariant;
+    /** When true, renders the button in a disabled state and prevents interaction. @default false */
+    disabled?: boolean;
+    /** An optional icon element rendered to the left of the button content. */
+    iconLeft?: ReactNode;
+    /** An optional icon element rendered to the right of the button content. */
+    iconRight?: ReactNode;
+}, E>;
+/**
+ * A polymorphic button component with multiple size and style variants, supporting optional leading and trailing icons.
+ *
+ * Unlike `TextButton` (which renders text without a background fill or outline), `IconButton` (which displays a single icon without text), and `SplitButton` (which pairs a primary action with a dropdown menu), `Button` is the standard interactive control for triggering actions.
+ *
+ * @see packages/vesper/src/components/icon-button/icon-button.tsx
+ * @see packages/vesper/src/components/split-button/split-button.tsx
+ * @see packages/vesper/src/components/text-/text-button.tsx
+ *
+ * @param {ButtonSize} [props.size] - (optional) The size of the button. @default md
+ * @param {ButtonVariant} [props.variant] - (optional) The visual style variant. @default primary
+ * @param {boolean} [props.disabled] - (optional) Renders the button in a disabled state. @default false
+ * @param {ReactNode} [props.iconLeft] - (optional) An icon rendered to the left of the button content
+ * @param {ReactNode} [props.iconRight] - (optional) An icon rendered to the right of the button content
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default button
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Button onClick={handleClick}>Submit</Button>
+ *
+ * @example
+ * <Button variant="danger" size="sm" iconLeft={<Trash />}>
+ *   Delete
+ * </Button>
+ *
+ * @example
+ * <Button as="a" href="/docs" variant="ghost">
+ *   Documentation
+ * </Button>
+ */
+export declare function Button<E extends ElementType = "button">(props: ButtonProps<E>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,eAAO,MAAM,YAAY,mCAAoC,CAAC;AAE9D,eAAO,MAAM,eAAe,sFAQlB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,WAAW,CACrE;IACE,yEAAyE;IACzE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,iGAAiG;IACjG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,EACD,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EACrD,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,2CA8BtB"}

package/dist/components/button/button.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { getDisabledProps } from "../../utils/getDisabledProps.js";
+export const BUTTON_SIZES = ["xs", "sm", "md", "lg"];
+export const BUTTON_VARIANTS = [
+    "contrast",
+    "danger",
+    "ghost",
+    "primary",
+    "subtle",
+    "tertiary",
+    "warning",
+];
+/**
+ * A polymorphic button component with multiple size and style variants, supporting optional leading and trailing icons.
+ *
+ * Unlike `TextButton` (which renders text without a background fill or outline), `IconButton` (which displays a single icon without text), and `SplitButton` (which pairs a primary action with a dropdown menu), `Button` is the standard interactive control for triggering actions.
+ *
+ * @see packages/vesper/src/components/icon-button/icon-button.tsx
+ * @see packages/vesper/src/components/split-button/split-button.tsx
+ * @see packages/vesper/src/components/text-/text-button.tsx
+ *
+ * @param {ButtonSize} [props.size] - (optional) The size of the button. @default md
+ * @param {ButtonVariant} [props.variant] - (optional) The visual style variant. @default primary
+ * @param {boolean} [props.disabled] - (optional) Renders the button in a disabled state. @default false
+ * @param {ReactNode} [props.iconLeft] - (optional) An icon rendered to the left of the button content
+ * @param {ReactNode} [props.iconRight] - (optional) An icon rendered to the right of the button content
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default button
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Button onClick={handleClick}>Submit</Button>
+ *
+ * @example
+ * <Button variant="danger" size="sm" iconLeft={<Trash />}>
+ *   Delete
+ * </Button>
+ *
+ * @example
+ * <Button as="a" href="/docs" variant="ghost">
+ *   Documentation
+ * </Button>
+ */
+export function Button(props) {
+    const { as: Component = "button", size = "md", variant = "primary", iconLeft, iconRight, children, className, disabled, ...rest } = props;
+    return (_jsxs(Component, { className: cn("vesper-button", `vesper-button-${size}`, `vesper-button-${disabled ? "disabled" : variant}`, className), ...rest, ...getDisabledProps(Component, !!disabled), children: [iconLeft && _jsx("span", { className: "vesper-button-icon", children: iconLeft }), children, iconRight && _jsx("span", { className: "vesper-button-icon", children: iconRight })] }));
+}
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAE9D,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,UAAU;IACV,QAAQ;IACR,OAAO;IACP,SAAS;IACT,QAAQ;IACR,UAAU;IACV,SAAS;CACD,CAAC;AAsBX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,MAAM,CACpB,KAAqB;IAErB,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,eAAe,EACf,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,EAClD,SAAS,CACV,KACG,IAAI,KACJ,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aAE1C,QAAQ,IAAI,eAAM,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAQ,EAClE,QAAQ,EACR,SAAS,IAAI,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,IAC3D,CACb,CAAC;AACJ,CAAC"}

package/dist/components/checkbox/checkbox.css

@@ -0,0 +1 @@
+.vesper-checkbox{align-items:center;gap:var(--vesper-spacing-2);width:fit-content;display:flex}.vesper-checkbox:not(:has(:disabled)){cursor:pointer}.vesper-checkbox-box{border-radius:var(--vesper-radius-half);border:var(--vesper-stroke-base) solid var(--vesper-border-primary);position:relative}.vesper-checkbox-sm .vesper-checkbox-box{width:.75rem;height:.75rem}.vesper-checkbox-md .vesper-checkbox-box{width:1rem;height:1rem}.vesper-checkbox-checked-icon,.vesper-checkbox-indeterminate-icon{visibility:hidden;position:absolute}.vesper-checkbox-input{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.vesper-checkbox-input:checked:not(:indeterminate):not(:disabled)+.vesper-checkbox-box{background:var(--vesper-background-accent-base);border-color:var(--vesper-background-accent-base)}.vesper-checkbox-input:checked:not(:indeterminate)+.vesper-checkbox-box .vesper-checkbox-checked-icon{visibility:visible}.vesper-checkbox-input:focus-visible+.vesper-checkbox-box{outline-offset:var(--vesper-spacing-micro);outline:var(--vesper-stroke-base) solid var(--vesper-border-focus)}@media (forced-colors:active){.vesper-checkbox-input:focus-visible+.vesper-checkbox-box{outline-color:canvastext}}.vesper-checkbox-input:indeterminate+.vesper-checkbox-box{background:var(--vesper-background-accent-base);border-color:var(--vesper-background-accent-base)}.vesper-checkbox-input:indeterminate+.vesper-checkbox-box .vesper-checkbox-indeterminate-icon{visibility:visible}.vesper-checkbox-input:disabled+.vesper-checkbox-box{border-color:var(--vesper-border-disabled);background:var(--vesper-background-disabled)}.vesper-checkbox-input:disabled+.vesper-checkbox-box .vesper-checkbox-indicator{color:var(--vesper-icon-disabled)}.vesper-checkbox-input:disabled~.vesper-checkbox-label{color:var(--vesper-text-disabled)}.vesper-checkbox-label{color:var(--vesper-text-primary)}

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,53 @@
+import { type FormInputProps } from "../../utils/splitFormInputProps.js";
+export declare const CHECKBOX_SIZES: readonly ["sm", "md"];
+export type CheckboxSize = (typeof CHECKBOX_SIZES)[number];
+export interface CheckboxProps extends FormInputProps<"label", "input"> {
+    /** The text displayed next to the checkbox, also used as the input's default `aria-label`. An asterisk is appended when `required` is `true`. */
+    text: string;
+    /** When true, renders the checkbox in an indeterminate (mixed) state, displaying a dash icon instead of a checkmark. @default false */
+    indeterminate?: boolean;
+    /** The size of the checkbox and its text. @default md */
+    size?: CheckboxSize;
+}
+/**
+ * A form-ready checkbox input with a label, supporting controlled and uncontrolled usage as well as indeterminate state.
+ *
+ * Unlike `Switch`, which only allows a binary on/off choice, `Checkbox` can be used for individual boolean selections that can also include indeterminate state.
+ *
+ * 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/switch/switch.tsx
+ * @see packages/vesper/src/components/toggle/toggle.tsx
+ * @see packages/vesper/src/components/choicebox/choicebox.tsx
+ *
+ * @param {string} props.text - The text displayed next to the checkbox
+ * @param {CheckboxSize} [props.size] - (optional) The size of the checkbox and its text. @default md
+ * @param {boolean} [props.indeterminate] - (optional) Renders the checkbox in an indeterminate (mixed) state. @default false
+ * @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 checkbox as required for form validation, and appends an asterisk to the `text`. @default false
+ * @param {string} [props.name] - (optional) Form field name submitted with form data
+ *
+ * You may also pass any additional props to the wrapping `div` element
+ *
+ * @example
+ * <Checkbox text="Accept terms" name="terms" required />
+ *
+ * @example
+ * <Checkbox
+ *   text="Select all"
+ *   indeterminate={someChecked && !allChecked}
+ *   checked={allChecked}
+ *   onChange={(e) => toggleAll(e.target.checked)}
+ * />
+ *
+ * @example
+ * <Checkbox
+ *   text="Accept terms"
+ *   aria-label="Terms and conditions"
+ *   required
+ * />
+ */
+export declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,KAAK,cAAc,EAEpB,MAAM,6BAA6B,CAAC;AAErC,eAAO,MAAM,cAAc,uBAAwB,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC;IACrE,iJAAiJ;IACjJ,IAAI,EAAE,MAAM,CAAC;IACb,uIAAuI;IACvI,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yDAAyD;IACzD,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA0C5C"}

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { Checkmark, Minus } from "../icons/icons.js";
+import { Typography, } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+import { useMergedRefs } from "../../utils/hooks/useMergedRefs.js";
+import { splitFormInputProps, } from "../../utils/splitFormInputProps.js";
+export const CHECKBOX_SIZES = ["sm", "md"];
+const CHECKBOX_TYPOGRAPHY = {
+    sm: "label-md",
+    md: "label-lg",
+};
+/**
+ * A form-ready checkbox input with a label, supporting controlled and uncontrolled usage as well as indeterminate state.
+ *
+ * Unlike `Switch`, which only allows a binary on/off choice, `Checkbox` can be used for individual boolean selections that can also include indeterminate state.
+ *
+ * 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/switch/switch.tsx
+ * @see packages/vesper/src/components/toggle/toggle.tsx
+ * @see packages/vesper/src/components/choicebox/choicebox.tsx
+ *
+ * @param {string} props.text - The text displayed next to the checkbox
+ * @param {CheckboxSize} [props.size] - (optional) The size of the checkbox and its text. @default md
+ * @param {boolean} [props.indeterminate] - (optional) Renders the checkbox in an indeterminate (mixed) state. @default false
+ * @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 checkbox as required for form validation, and appends an asterisk to the `text`. @default false
+ * @param {string} [props.name] - (optional) Form field name submitted with form data
+ *
+ * You may also pass any additional props to the wrapping `div` element
+ *
+ * @example
+ * <Checkbox text="Accept terms" name="terms" required />
+ *
+ * @example
+ * <Checkbox
+ *   text="Select all"
+ *   indeterminate={someChecked && !allChecked}
+ *   checked={allChecked}
+ *   onChange={(e) => toggleAll(e.target.checked)}
+ * />
+ *
+ * @example
+ * <Checkbox
+ *   text="Accept terms"
+ *   aria-label="Terms and conditions"
+ *   required
+ * />
+ */
+export function Checkbox(props) {
+    const { text, size = "md", indeterminate, className, ...rest } = props;
+    const { ariaProps, controlProps, wrapperProps, formProps } = splitFormInputProps(rest);
+    const innerRef = useRef(null);
+    useLayoutEffect(() => {
+        if (innerRef.current)
+            innerRef.current.indeterminate = !!indeterminate;
+    }, [indeterminate]);
+    const mergedInputRef = useMergedRefs(controlProps.ref, innerRef);
+    return (_jsxs("label", { ...wrapperProps, className: cn("vesper-checkbox", `vesper-checkbox-${size}`, className), children: [_jsx("input", { "aria-label": text, ...ariaProps, ...controlProps, ...formProps, ref: mergedInputRef, type: "checkbox", className: "vesper-checkbox-input" }), _jsx("div", { className: "vesper-checkbox-box", children: _jsxs("div", { className: "vesper-checkbox-indicator", children: [_jsx(Checkmark, { className: "vesper-checkbox-checked-icon" }), _jsx(Minus, { className: "vesper-checkbox-indeterminate-icon" })] }) }), _jsx(Typography, { variant: CHECKBOX_TYPOGRAPHY[size], className: "vesper-checkbox-label", as: "span", children: formProps.required ? `${text} *` : text })] }));
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EACL,UAAU,GAEX,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAEL,mBAAmB,GACpB,MAAM,6BAA6B,CAAC;AAErC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AAapD,MAAM,mBAAmB,GAA+C;IACtE,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEvE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,GACxD,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAE5B,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC,aAAa,CAAC;IACzE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,aAAa,CAAC,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAEjE,OAAO,CACL,oBACM,YAAY,EAChB,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,mBAAmB,IAAI,EAAE,EAAE,SAAS,CAAC,aAEtE,8BACc,IAAI,KACZ,SAAS,KACT,YAAY,KACZ,SAAS,EACb,GAAG,EAAE,cAAc,EACnB,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,uBAAuB,GACjC,EACF,cAAK,SAAS,EAAC,qBAAqB,YAClC,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,SAAS,IAAC,SAAS,EAAC,8BAA8B,GAAG,EACtD,KAAC,KAAK,IAAC,SAAS,EAAC,oCAAoC,GAAG,IACpD,GACF,EACN,KAAC,UAAU,IACT,OAAO,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAClC,SAAS,EAAC,uBAAuB,EACjC,EAAE,EAAC,MAAM,YAER,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,GAC7B,IACP,CACT,CAAC;AACJ,CAAC"}

package/dist/components/chip/chip.css

@@ -0,0 +1 @@
+.vesper-chip{justify-content:space-between;align-items:center;gap:var(--vesper-spacing-1);border-radius:var(--vesper-radius-1);width:fit-content;padding:0 var(--vesper-spacing-2);cursor:pointer;display:inline-flex}@media (forced-colors:active){.vesper-chip{border:var(--vesper-stroke-base) solid CanvasText}.vesper-chip:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-chip:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-chip-sm{height:1.5rem}.vesper-chip-md{height:1.75rem}.vesper-chip-default{color:var(--vesper-text-primary);border:var(--vesper-stroke-base) solid var(--vesper-border-primary);background:var(--vesper-tint-inverse-200)}.vesper-chip-default.vesper-chip-selected{color:var(--vesper-text-inverse-primary);background:var(--vesper-background-inverse-primary);border:var(--vesper-stroke-base) solid var(--vesper-border-strong)}@media (forced-colors:active){.vesper-chip-default.vesper-chip-selected{border:var(--vesper-stroke-base) solid CanvasText;color:canvas;forced-color-adjust:none;background:canvastext}}.vesper-chip-default:hover{border:var(--vesper-stroke-base) solid var(--vesper-border-strong)}.vesper-chip-contrast{color:var(--vesper-text-inverse-primary);border:var(--vesper-stroke-base) solid var(--vesper-border-strong);background:var(--vesper-background-inverse-primary)}.vesper-chip-contrast.vesper-chip-selected{color:var(--vesper-text-primary);background:var(--vesper-background-primary)}@media (forced-colors:active){.vesper-chip-contrast.vesper-chip-selected{border:var(--vesper-stroke-base) solid CanvasText;color:canvastext;forced-color-adjust:none;background:canvas}}.vesper-chip-contrast:hover:not(.vesper-chip-selected){background:var(--vesper-background-inverse-secondary)}@media (forced-colors:active){.vesper-chip-contrast{color:canvas;forced-color-adjust:none;background:canvastext}.vesper-chip-contrast:focus-visible{outline-offset:var(--vesper-spacing-micro);outline-width:var(--vesper-stroke-base)}}.vesper-chip.vesper-chip-disabled{pointer-events:none;color:var(--vesper-text-disabled);background:var(--vesper-background-disabled);border:var(--vesper-stroke-base) solid var(--vesper-border-disabled)}.vesper-chip.vesper-chip-disabled .vesper-chip-icon{color:var(--vesper-icon-disabled)}@media (forced-colors:active){.vesper-chip.vesper-chip-disabled{opacity:.5}}.vesper-chip-icon{width:.875rem;height:.875rem;display:flex}

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,53 @@
+import type { ElementType, ReactNode } from "react";
+import type { Polymorphic } from "../../utils/polymorphic.js";
+export declare const CHIP_VARIANTS: readonly ["default", "contrast"];
+export declare const CHIP_SIZES: readonly ["sm", "md"];
+export type ChipVariant = (typeof CHIP_VARIANTS)[number];
+export type ChipSize = (typeof CHIP_SIZES)[number];
+export type ChipProps<E extends ElementType = "button"> = Polymorphic<{
+    /** The visual style variant of the chip. @default default */
+    variant?: ChipVariant;
+    /** The size of the chip. @default md */
+    size?: ChipSize;
+    /** An optional icon element rendered to the left of the chip content. */
+    iconLeft?: ReactNode;
+    /** An optional icon element rendered to the right of the chip content. */
+    iconRight?: ReactNode;
+    /** Whether the chip is currently selected. When rendered as a button, this value is reflected via `aria-pressed`. @default false */
+    selected?: boolean;
+    /** When `true`, renders the chip in a disabled state and prevents interaction. @default false */
+    disabled?: boolean;
+    /** Callback fired when the chip is clicked. Receives the next selected state as an argument. */
+    onChange?(selected: boolean): void;
+}, E>;
+/**
+ * A polymorphic selectable chip component for displaying on/off states in UI panels and forms, supporting icons and click callbacks.
+ *
+ * Unlike `Tag` (which categorizes content) and `Badge` (which describes adjacent content), `Chips` represent toggleable selections.
+ *
+ * @see packages/vesper/src/components/badge/badge.tsx
+ * @see packages/vesper/src/components/tag/tag.tsx
+ *
+ * @param {ChipVariant} [props.variant] - (optional) The visual style variant. @default default
+ * @param {ChipSize} [props.size] - (optional) The size of the `Chip`. @default md
+ * @param {boolean} [props.selected] - (optional) Whether the chip is currently selected @default false
+ * @param {boolean} [props.disabled] - (optional) Renders the chip in a disabled state @default false
+ * @param {ReactNode} [props.iconLeft] - (optional) An icon rendered to the left of the chip content
+ * @param {ReactNode} [props.iconRight] - (optional) An icon rendered to the right of the chip content
+ * @param {(selected: boolean) => void} [props.onChange] - (optional) Callback fired with the next selected state when clicked
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default button
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Chip selected={isActive} onChange={setIsActive}>
+ *   Filter
+ * </Chip>
+ *
+ * @example
+ * <Chip variant="contrast" iconLeft={<Add />} disabled>
+ *   Add tag
+ * </Chip>
+ */
+export declare function Chip<E extends ElementType = "button">(props: ChipProps<E>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,eAAO,MAAM,aAAa,kCAAmC,CAAC;AAE9D,eAAO,MAAM,UAAU,uBAAwB,CAAC;AAEhD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,WAAW,CACnE;IACE,6DAA6D;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,oIAAoI;IACpI,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iGAAiG;IACjG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gGAAgG;IAChG,QAAQ,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CACpC,EACD,CAAC,CACF,CAAC;AAOF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,2CA2CzE"}

package/dist/components/chip/chip.js

@@ -0,0 +1,51 @@
+"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 { getDisabledProps } from "../../utils/getDisabledProps.js";
+export const CHIP_VARIANTS = ["default", "contrast"];
+export const CHIP_SIZES = ["sm", "md"];
+const CHIP_TYPOGRAPHY = {
+    sm: "label-xs",
+    md: "label-sm",
+};
+/**
+ * A polymorphic selectable chip component for displaying on/off states in UI panels and forms, supporting icons and click callbacks.
+ *
+ * Unlike `Tag` (which categorizes content) and `Badge` (which describes adjacent content), `Chips` represent toggleable selections.
+ *
+ * @see packages/vesper/src/components/badge/badge.tsx
+ * @see packages/vesper/src/components/tag/tag.tsx
+ *
+ * @param {ChipVariant} [props.variant] - (optional) The visual style variant. @default default
+ * @param {ChipSize} [props.size] - (optional) The size of the `Chip`. @default md
+ * @param {boolean} [props.selected] - (optional) Whether the chip is currently selected @default false
+ * @param {boolean} [props.disabled] - (optional) Renders the chip in a disabled state @default false
+ * @param {ReactNode} [props.iconLeft] - (optional) An icon rendered to the left of the chip content
+ * @param {ReactNode} [props.iconRight] - (optional) An icon rendered to the right of the chip content
+ * @param {(selected: boolean) => void} [props.onChange] - (optional) Callback fired with the next selected state when clicked
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default button
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Chip selected={isActive} onChange={setIsActive}>
+ *   Filter
+ * </Chip>
+ *
+ * @example
+ * <Chip variant="contrast" iconLeft={<Add />} disabled>
+ *   Add tag
+ * </Chip>
+ */
+export function Chip(props) {
+    const { as: Component = "button", variant = "default", size = "md", children, iconLeft, iconRight, className, selected = false, disabled = false, onChange, onClick, ...rest } = props;
+    return (_jsxs(Typography, { as: Component, variant: CHIP_TYPOGRAPHY[size], "aria-pressed": Component === "button" ? selected : undefined, className: cn("vesper-chip", `vesper-chip-${variant}`, `vesper-chip-${size}`, selected && `vesper-chip-selected`, disabled && `vesper-chip-disabled`, className), 
+        // TypeScript cannot infer the type of onClick because this component is polymorphic
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onClick: (e) => {
+            onChange?.(!selected);
+            onClick?.(e);
+        }, ...rest, ...getDisabledProps(Component, disabled), children: [iconLeft && _jsx("span", { className: "vesper-chip-icon", children: iconLeft }), children, iconRight && _jsx("span", { className: "vesper-chip-icon", children: iconRight })] }));
+}
+//# sourceMappingURL=chip.js.map

package/dist/components/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EACL,UAAU,GAGX,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,UAAU,CAAU,CAAC;AAE9D,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AA0BhD,MAAM,eAAe,GAA2C;IAC9D,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,IAAI,CAAmC,KAAmB;IACxE,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,UAAU,IACT,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,eAAe,CAAC,IAAI,CAAC,kBAChB,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC3D,SAAS,EAAE,EAAE,CACX,aAAa,EACb,eAAe,OAAO,EAAE,EACxB,eAAe,IAAI,EAAE,EACrB,QAAQ,IAAI,sBAAsB,EAClC,QAAQ,IAAI,sBAAsB,EAClC,SAAS,CACV;QACD,oFAAoF;QACpF,8DAA8D;QAC9D,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE;YAClB,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;YACtB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACf,CAAC,KACI,IAA2B,KAC5B,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,aAExC,QAAQ,IAAI,eAAM,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAQ,EAChE,QAAQ,EACR,SAAS,IAAI,eAAM,SAAS,EAAC,kBAAkB,YAAE,SAAS,GAAQ,IACxD,CACd,CAAC;AACJ,CAAC"}

package/dist/components/choicebox/choicebox.css

@@ -0,0 +1 @@
+.vesper-choicebox{gap:var(--vesper-spacing-2);flex-direction:column;display:flex}.vesper-choicebox-item{justify-content:space-between;align-items:center;gap:var(--vesper-spacing-3);border-radius:var(--vesper-radius-1);background:var(--vesper-background-primary);padding:var(--vesper-spacing-3);border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);display:flex}.vesper-choicebox-item.vesper-choicebox-item-compact{padding-top:.375rem;padding-bottom:.375rem}.vesper-choicebox-item:has(:disabled){border-color:var(--vesper-border-disabled)}.vesper-choicebox-item:has(:disabled) .vesper-choicebox-item-label{color:var(--vesper-text-disabled)}.vesper-choicebox-item:has(:disabled) .vesper-choicebox-item-description{color:var(--vesper-text-disabled)}.vesper-choicebox-item:not(:has(:disabled)):hover{background:linear-gradient(0deg, var(--vesper-tint-neutral-100) 0%, var(--vesper-tint-neutral-100) 100%), var(--vesper-background-primary)}.vesper-choicebox-item:not(:has(:disabled)):has(:checked){border-color:var(--vesper-border-strong);background:linear-gradient(0deg, var(--vesper-tint-neutral-200) 0%, var(--vesper-tint-neutral-200) 100%), var(--vesper-background-primary)}.vesper-choicebox-item:not(:has(:disabled)){cursor:pointer}.vesper-choicebox-item:has(:focus-visible){box-shadow:var(--vesper-shadow-focus-ring)}.vesper-choicebox-item-label{color:var(--vesper-text-primary)}.vesper-choicebox-item-description{color:var(--vesper-text-secondary);margin-top:var(--vesper-spacing-1)}.vesper-choicebox-input-single-indicator{border:var(--vesper-stroke-base) solid var(--vesper-border-primary);border-radius:50%;justify-content:center;align-items:center;width:.75rem;height:.75rem;display:flex}.vesper-choicebox-input-single-indicator:after{content:"";border-radius:50%;width:50%;height:50%}.vesper-choicebox-input-multi-indicator{border-radius:var(--vesper-radius-half);border:var(--vesper-stroke-base) solid var(--vesper-border-primary);width:.75rem;height:.75rem;color:var(--vesper-text-primary);justify-content:center;align-items:center;display:flex}.vesper-choicebox-input-multi-indicator svg{visibility:hidden;width:.625rem;height:.625rem}.vesper-choicebox-input{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.vesper-choicebox-input:checked+.vesper-choicebox-input-single-indicator{border-color:var(--vesper-background-accent-base);background:var(--vesper-background-accent-base)}.vesper-choicebox-input:checked+.vesper-choicebox-input-single-indicator:after{background:var(--vesper-background-primary)}.vesper-choicebox-input:checked+.vesper-choicebox-input-multi-indicator{border-color:var(--vesper-background-accent-base);background:var(--vesper-background-accent-base)}.vesper-choicebox-input:checked+.vesper-choicebox-input-multi-indicator svg{visibility:visible}.vesper-choicebox-input:disabled+.vesper-choicebox-input-single-indicator{border-color:var(--vesper-border-disabled);background:var(--vesper-background-disabled)}.vesper-choicebox-input:disabled+.vesper-choicebox-input-multi-indicator{border-color:var(--vesper-border-disabled);background:var(--vesper-background-disabled)}.vesper-choicebox-input:disabled:checked+.vesper-choicebox-input-single-indicator:after{background:var(--vesper-icon-disabled)}.vesper-choicebox-input:disabled:checked+.vesper-choicebox-input-multi-indicator{color:var(--vesper-icon-disabled)}

package/dist/components/choicebox/choicebox.d.ts

@@ -0,0 +1,90 @@
+import { type ComponentProps } from "react";
+export type ChoiceboxItem = {
+    /** The value associated with this option. */
+    value: string;
+    /** The text label displayed for this option. */
+    label: string;
+    /** An optional secondary description displayed below the label. */
+    description?: string;
+    /** When `true`, prevents this option from being selected. @default false */
+    disabled?: boolean;
+    /** An optional HTML `id` attribute applied to the underlying input element. */
+    id?: string;
+};
+interface ChoiceboxBaseProps extends Omit<ComponentProps<"fieldset">, "children" | "onChange" | "defaultValue"> {
+    /** The name attribute shared by all inputs in the group, used for form submission. */
+    name: string;
+    /** The list of options to render. */
+    options: ChoiceboxItem[];
+    /** When `true`, disables all options in the group, preventing interaction. @default false */
+    disabled?: boolean;
+}
+export interface ChoiceboxSingleSelectProps extends ChoiceboxBaseProps {
+    /** When `false` or omitted, the choicebox operates in single-select (radio) mode. */
+    multiselect?: false;
+    /** When `true`, a selection is required for form validation. @default false */
+    required?: boolean;
+    /** 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;
+}
+export interface ChoiceboxMultiSelectProps extends ChoiceboxBaseProps {
+    /** When `true`, the choicebox operates in multi-select (checkbox) mode. */
+    multiselect: true;
+    /** The currently selected values (controlled mode). */
+    values?: string[];
+    /** The initially selected values (uncontrolled mode). */
+    defaultValues?: string[];
+    /** Callback fired when the selected values change. Receives the full array of currently selected values. */
+    onChange?(values: string[]): void;
+    /** The minimum number of selections required for form validation. @default 0 */
+    min?: number;
+    /** The maximum number of selections allowed for form validation. @default Infinity */
+    max?: number;
+}
+export type ChoiceboxProps = ChoiceboxSingleSelectProps | ChoiceboxMultiSelectProps;
+/**
+ * A selection group component that supports both single-select (radio) and multi-select (checkbox) modes with card-style options.
+ *
+ * @param {string} props.name - The name attribute shared by all inputs, used for form submission
+ * @param {ChoiceboxItem[]} props.options - The list of options to render
+ * @param {boolean} [props.multiselect] - (optional) When `true`, enables multi-select (checkbox) mode. @default false
+ * @param {boolean} [props.disabled] - (optional) Disables all options in the group. @default false
+ * @param {string} [props.value] - (optional) The currently selected value (single-select, controlled)
+ * @param {string} [props.defaultValue] - (optional) The initially selected value (single-select, uncontrolled)
+ * @param {(value: string) => void} [props.onChange] - (optional) Callback fired on selection change (single-select)
+ * @param {string[]} [props.values] - (optional) The currently selected values (multi-select, controlled)
+ * @param {(values: string[]) => void} [props.onChange] - (optional) Callback fired with all selected values (multi-select)
+ *
+ * You may also pass any additional props to the underlying `fieldset` element
+
+ * @example
+ * <Choicebox
+ *   name="plan"
+ *   options={[
+ *     { value: "free", label: "Free", description: "Basic features" },
+ *     { value: "pro", label: "Pro", description: "Advanced features" },
+ *   ]}
+ *   value={selectedPlan}
+ *   onChange={setSelectedPlan}
+ * />
+ *
+ * @example
+ * <Choicebox
+ *   multiselect
+ *   name="features"
+ *   options={[
+ *     { value: "dark-mode", label: "Dark Mode" },
+ *     { value: "notifications", label: "Notifications" },
+ *   ]}
+ *   min={1}
+ *   max={3}
+ *   onChange={(values) => console.log(values)}
+ * />
+ */
+export declare function Choicebox(props: ChoiceboxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=choicebox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"choicebox.d.ts","sourceRoot":"","sources":["../../../src/components/choicebox/choicebox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAQf,MAAM,MAAM,aAAa,GAAG;IAC1B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,UAAU,kBAAmB,SAAQ,IAAI,CACvC,cAAc,CAAC,UAAU,CAAC,EAC1B,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC;IACC,sFAAsF;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,0BAA2B,SAAQ,kBAAkB;IACpE,qFAAqF;IACrF,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,2EAA2E;IAC3E,WAAW,EAAE,IAAI,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,4GAA4G;IAC5G,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClC,gFAAgF;IAChF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sFAAsF;IACtF,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,cAAc,GACxB,0BAA0B,GAAG,yBAAyB,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAG9C"}