@tenstorrent/vesper 0.1.0

package/dist/components/tabs/tabs.css

@@ -0,0 +1 @@
+.vesper-tabs-trigger{cursor:pointer;align-items:center;gap:var(--vesper-spacing-1);display:flex}@media not (forced-colors:active){.vesper-tabs-trigger:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-tabs-list{display:flex}.vesper-tabs-trigger-icon{width:1rem;height:1rem}.vesper-tabs-primary .vesper-tabs-list{gap:var(--vesper-spacing-6);position:relative}.vesper-tabs-primary .vesper-tabs-list:before{content:"";border-top:var(--vesper-stroke-base) solid var(--vesper-border-secondary);position:absolute;bottom:0;left:0;right:0}.vesper-tabs-primary .vesper-tabs-trigger{padding:var(--vesper-spacing-4) 0;color:var(--vesper-text-secondary);position:relative}.vesper-tabs-primary .vesper-tabs-trigger:hover{color:var(--vesper-text-primary)}.vesper-tabs-primary .vesper-tabs-trigger[data-active]{color:var(--vesper-text-primary)}.vesper-tabs-primary .vesper-tabs-trigger:hover:after{content:"";border-top:var(--vesper-stroke-strong) solid var(--vesper-border-strong);position:absolute;bottom:0;left:0;right:0}@media (forced-colors:active){.vesper-tabs-primary .vesper-tabs-trigger:hover:after{border-color:canvastext}}.vesper-tabs-primary .vesper-tabs-trigger[data-active]:after{content:"";border-top:var(--vesper-stroke-strong) solid var(--vesper-border-strong);position:absolute;bottom:0;left:0;right:0}@media (forced-colors:active){.vesper-tabs-primary .vesper-tabs-trigger[data-active]:after{border-color:canvastext}}@media (forced-colors:active){.vesper-tabs-primary .vesper-tabs-trigger:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}.vesper-tabs-primary .vesper-tabs-trigger-icon{margin:calc(var(--vesper-spacing-micro) * -1) 0}.vesper-tabs-secondary .vesper-tabs-list{gap:var(--vesper-spacing-2)}.vesper-tabs-secondary .vesper-tabs-trigger{padding:var(--vesper-spacing-2);border-radius:var(--vesper-spacing-1);background:var(--vesper-tint-neutral-300);color:var(--vesper-text-primary)}.vesper-tabs-secondary .vesper-tabs-trigger:hover{background:var(--vesper-background-inverse-primary);color:var(--vesper-text-inverse-primary)}@media (forced-colors:active){.vesper-tabs-secondary .vesper-tabs-trigger:hover{forced-color-adjust:none;color:canvas;background:canvastext}}.vesper-tabs-secondary .vesper-tabs-trigger[data-state=active]{background:var(--vesper-background-inverse-primary);color:var(--vesper-text-inverse-primary)}@media (forced-colors:active){.vesper-tabs-secondary .vesper-tabs-trigger[data-state=active]{forced-color-adjust:none;color:canvas;background:canvastext}}@media (forced-colors:active){.vesper-tabs-secondary .vesper-tabs-trigger{border:var(--vesper-stroke-base) solid CanvasText}.vesper-tabs-secondary .vesper-tabs-trigger:focus-visible{outline:var(--vesper-stroke-base) solid CanvasText;outline-offset:var(--vesper-spacing-micro)}}.vesper-tabs-secondary .vesper-tabs-trigger-icon{margin:calc(var(--vesper-spacing-half) * -1) 0}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,60 @@
+import { ComponentProps, ReactNode } from "react";
+export declare const TABS_VARIANTS: readonly ["primary", "secondary"];
+export type TabsVariant = (typeof TABS_VARIANTS)[number];
+export interface TabsProps extends Omit<ComponentProps<"div">, "children" | "dir"> {
+    /** The visual style variant of the tabs. @default primary */
+    variant?: TabsVariant;
+    /** The list of tab items to render. Each item defines a tab trigger and its associated content panel. */
+    items: {
+        /** The text label displayed in the tab trigger. */
+        label: string;
+        /** A unique value identifying this tab, used for selection tracking. */
+        value: string;
+        /** An optional icon element rendered before the label in the tab trigger. */
+        icon?: ReactNode;
+        /** The content rendered in the panel when this tab is active. */
+        content: ReactNode;
+    }[];
+    /** The value for the selected tab (controlled). */
+    value?: string;
+    /** The value of the tab to select by default (uncontrolled). */
+    defaultValue?: string;
+    /** Callback fired when when a new tab is selected */
+    onValueChange?: (value: string) => void;
+    /** Whether a tab is activated automatically (when receiving focus) or manually (when clicked). @default automatic */
+    activationMode?: "automatic" | "manual";
+}
+/**
+ * A tabbed interface component for organizing content into switchable panels.
+ *
+ * @param {TabsProps["items"]} props.items - The list of tab items defining triggers and content panels
+ * @param {TabsVariant} [props.variant] - (optional) The visual style variant of the tabs. @default primary
+ * @param {string} [props.value] - (optional) The selected tab value (controlled)
+ * @param {string} [props.defaultValue] - (optional) The tab to select by default (uncontrolled)
+ * @param {(value: string) => void} [props.onValueChange] - (optional) Callback fired when a new tab is selected
+ * @param {"automatic" | "manual"} [props.activationMode] - (optional) Tab activation mode. @default automatic
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Tabs
+ *   items={[
+ *     { value: "overview", label: "Overview", content: <Overview /> },
+ *     { value: "settings", label: "Settings", content: <Settings /> },
+ *   ]}
+ *   defaultValue="overview"
+ * />
+ *
+ * @example
+ * <Tabs
+ *   variant="secondary"
+ *   items={[
+ *     { value: "code", label: "Code", icon: <Document />, content: <CodePanel /> },
+ *     { value: "preview", label: "Preview", content: <PreviewPanel /> },
+ *   ]}
+ *   value={activeTab}
+ *   onValueChange={setActiveTab}
+ * />
+ */
+export declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWlD,eAAO,MAAM,aAAa,mCAAoC,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,KAAK,CACnB;IACC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yGAAyG;IACzG,KAAK,EAAE;QACL,mDAAmD;QACnD,KAAK,EAAE,MAAM,CAAC;QACd,wEAAwE;QACxE,KAAK,EAAE,MAAM,CAAC;QACd,6EAA6E;QAC7E,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,iEAAiE;QACjE,OAAO,EAAE,SAAS,CAAC;KACpB,EAAE,CAAC;IACJ,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qHAAqH;IACrH,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACzC;AAOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2CAoDpC"}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { Typography, } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+import { isSingleReactElement } from "../../utils/isSingleReactElement.js";
+export const TABS_VARIANTS = ["primary", "secondary"];
+const TRIGGER_TYPOGRAPHY = {
+    primary: "label-md",
+    secondary: "label-sm",
+};
+/**
+ * A tabbed interface component for organizing content into switchable panels.
+ *
+ * @param {TabsProps["items"]} props.items - The list of tab items defining triggers and content panels
+ * @param {TabsVariant} [props.variant] - (optional) The visual style variant of the tabs. @default primary
+ * @param {string} [props.value] - (optional) The selected tab value (controlled)
+ * @param {string} [props.defaultValue] - (optional) The tab to select by default (uncontrolled)
+ * @param {(value: string) => void} [props.onValueChange] - (optional) Callback fired when a new tab is selected
+ * @param {"automatic" | "manual"} [props.activationMode] - (optional) Tab activation mode. @default automatic
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Tabs
+ *   items={[
+ *     { value: "overview", label: "Overview", content: <Overview /> },
+ *     { value: "settings", label: "Settings", content: <Settings /> },
+ *   ]}
+ *   defaultValue="overview"
+ * />
+ *
+ * @example
+ * <Tabs
+ *   variant="secondary"
+ *   items={[
+ *     { value: "code", label: "Code", icon: <Document />, content: <CodePanel /> },
+ *     { value: "preview", label: "Preview", content: <PreviewPanel /> },
+ *   ]}
+ *   value={activeTab}
+ *   onValueChange={setActiveTab}
+ * />
+ */
+export function Tabs(props) {
+    const { items, className, variant = "primary", activationMode = "automatic", onValueChange, ...rest } = props;
+    return (_jsxs(BaseTabs.Root, { className: cn(`vesper-tabs-${variant}`, className), onValueChange: (value) => onValueChange?.(value), ...rest, children: [_jsx(BaseTabs.List, { activateOnFocus: activationMode === "automatic", className: "vesper-tabs-list", children: items.map((item) => (_jsxs(Typography, { as: BaseTabs.Tab, variant: TRIGGER_TYPOGRAPHY[variant], value: item.value, className: "vesper-tabs-trigger", children: [item.icon && (_jsx("span", { className: "vesper-tabs-trigger-icon", children: item.icon })), item.label] }, item.value))) }), items.map((item) => {
+                const children = isSingleReactElement(item.content) ? (item.content) : (_jsx("span", { children: item.content }));
+                return (_jsx(BaseTabs.Panel, { render: children, value: item.value }, item.value));
+            })] }));
+}
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EACL,UAAU,GAEX,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,WAAW,CAAU,CAAC;AA+B/D,MAAM,kBAAkB,GAA8C;IACpE,OAAO,EAAE,UAAU;IACnB,SAAS,EAAE,UAAU;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EACJ,KAAK,EACL,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,cAAc,GAAG,WAAW,EAC5B,aAAa,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,QAAQ,CAAC,IAAI,IACZ,SAAS,EAAE,EAAE,CAAC,eAAe,OAAO,EAAE,EAAE,SAAS,CAAC,EAClD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,KAC5C,IAAI,aAER,KAAC,QAAQ,CAAC,IAAI,IACZ,eAAe,EAAE,cAAc,KAAK,WAAW,EAC/C,SAAS,EAAC,kBAAkB,YAE3B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,MAAC,UAAU,IACT,EAAE,EAAE,QAAQ,CAAC,GAAG,EAChB,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC,EAEpC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAC,qBAAqB,aAE9B,IAAI,CAAC,IAAI,IAAI,CACZ,eAAM,SAAS,EAAC,0BAA0B,YAAE,IAAI,CAAC,IAAI,GAAQ,CAC9D,EACA,IAAI,CAAC,KAAK,KAPN,IAAI,CAAC,KAAK,CAQJ,CACd,CAAC,GACY,EACf,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAClB,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CACpD,IAAI,CAAC,OAAO,CACb,CAAC,CAAC,CAAC,CACF,yBAAO,IAAI,CAAC,OAAO,GAAQ,CAC5B,CAAC;gBAEF,OAAO,CACL,KAAC,QAAQ,CAAC,KAAK,IACb,MAAM,EAAE,QAAQ,EAEhB,KAAK,EAAE,IAAI,CAAC,KAAK,IADZ,IAAI,CAAC,KAAK,CAEf,CACH,CAAC;YACJ,CAAC,CAAC,IACY,CACjB,CAAC;AACJ,CAAC"}

package/dist/components/tag/tag.css

@@ -0,0 +1 @@
+.vesper-tag{align-items:center;width:fit-content;display:inline-flex}.vesper-tag-icon{display:flex}.vesper-tag-sm{gap:var(--vesper-spacing-half);height:1.25rem;padding:0 var(--vesper-spacing-1);border-radius:var(--vesper-radius-half)}.vesper-tag-sm .vesper-tag-icon{width:.75rem;height:.75rem}.vesper-tag-md{gap:var(--vesper-spacing-1);height:1.5rem;padding:0 var(--vesper-spacing-2);border-radius:var(--vesper-radius-1)}.vesper-tag-md .vesper-tag-icon{width:.875rem;height:.875rem}.vesper-tag-lg{gap:var(--vesper-spacing-1);height:1.75rem;padding:0 var(--vesper-spacing-2);border-radius:var(--vesper-radius-1)}.vesper-tag-lg .vesper-tag-icon{width:1rem;height:1rem}.vesper-tag-default{background:var(--vesper-tint-neutral-300);color:var(--vesper-text-primary)}.vesper-tag-contrast{background:var(--vesper-background-inverse-primary);color:var(--vesper-text-inverse-primary)}.vesper-tag-accent-subtle{color:var(--vesper-text-accent);background:var(--vesper-background-accent-subtle)}.vesper-tag-accent-bold{color:var(--vesper-text-primary);background:var(--vesper-background-accent-base)}.vesper-tag-danger-subtle{color:var(--vesper-text-error);background:var(--vesper-background-error-subtle)}.vesper-tag-danger-bold{color:var(--vesper-text-inverse-primary);background:var(--vesper-background-error-base)}.vesper-tag-warning-subtle{color:var(--vesper-text-warning);background:var(--vesper-background-warning-subtle)}.vesper-tag-warning-bold{color:var(--vesper-text-inverse-primary);background:var(--vesper-background-warning-base)}.vesper-tag-success-subtle{color:var(--vesper-text-success);background:var(--vesper-background-success-subtle)}.vesper-tag-success-bold{color:var(--vesper-text-inverse-primary);background:var(--vesper-background-success-base)}.vesper-tag-info-subtle{color:var(--vesper-text-info);background:var(--vesper-background-info-subtle)}.vesper-tag-info-bold{color:var(--vesper-text-inverse-primary);background:var(--vesper-background-info-base)}.vesper-tag-disabled{color:var(--vesper-text-disabled);background:var(--vesper-background-disabled)}

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,42 @@
+import type { ElementType, ReactNode } from "react";
+import type { Polymorphic } from "../../utils/polymorphic.js";
+export declare const TAG_SIZES: readonly ["sm", "md", "lg"];
+export declare const TAG_VARIANTS: readonly ["default", "contrast", "accent-bold", "accent-subtle", "danger-bold", "danger-subtle", "success-bold", "success-subtle", "info-bold", "info-subtle", "warning-bold", "warning-subtle"];
+export type TagSize = (typeof TAG_SIZES)[number];
+export type TagVariant = (typeof TAG_VARIANTS)[number];
+export type TagProps<E extends ElementType = "div"> = Polymorphic<{
+    /** The size of the tag. Affects padding and font size. @default md */
+    size?: TagSize;
+    /** The color variant of the tag. @defaults default */
+    variant?: TagVariant;
+    /** When `true`, renders the tag in a disabled state and prevents interaction. @default false */
+    disabled?: boolean;
+    /** An optional icon element rendered to the left of the tag text. */
+    icon?: ReactNode;
+}, E>;
+/**
+ * A polymorphic label component for categorizing content with color variants and optional icons.
+ *
+ * Unlike `Badge` (which describes adjacent content like plan tiers or roles) and `Chip` (which displays on/off states), `Tags` are used to classify and organize content into categories.
+ *
+ * @see packages/vesper/src/components/badge/badge.tsx
+ * @see packages/vesper/src/components/chip/chip.tsx
+ *
+ * @param {TagSize} [props.size] - (optional) The size of the tag. @default md
+ * @param {TagVariant} [props.variant] - (optional) The color variant of the tag. @default default
+ * @param {boolean} [props.disabled] - (optional) Renders the tag in a disabled state
+ * @param {ReactNode} [props.icon] - (optional) An icon element rendered to the left of the tag 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
+ * <Tag variant="success-bold">Active</Tag>
+ *
+ * @example
+ * <Tag size="sm" variant="danger-subtle" icon={<ErrorSolid />}>
+ *   Failed
+ * </Tag>
+ */
+export declare function Tag<E extends ElementType = "div">(props: TagProps<E>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,eAAO,MAAM,SAAS,6BAA8B,CAAC;AAErD,eAAO,MAAM,YAAY,kMAaf,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CAC/D;IACE,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,EACD,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,2CA6BpE"}

package/dist/components/tag/tag.js

@@ -0,0 +1,48 @@
+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 TAG_SIZES = ["sm", "md", "lg"];
+export const TAG_VARIANTS = [
+    "default",
+    "contrast",
+    "accent-bold",
+    "accent-subtle",
+    "danger-bold",
+    "danger-subtle",
+    "success-bold",
+    "success-subtle",
+    "info-bold",
+    "info-subtle",
+    "warning-bold",
+    "warning-subtle",
+];
+/**
+ * A polymorphic label component for categorizing content with color variants and optional icons.
+ *
+ * Unlike `Badge` (which describes adjacent content like plan tiers or roles) and `Chip` (which displays on/off states), `Tags` are used to classify and organize content into categories.
+ *
+ * @see packages/vesper/src/components/badge/badge.tsx
+ * @see packages/vesper/src/components/chip/chip.tsx
+ *
+ * @param {TagSize} [props.size] - (optional) The size of the tag. @default md
+ * @param {TagVariant} [props.variant] - (optional) The color variant of the tag. @default default
+ * @param {boolean} [props.disabled] - (optional) Renders the tag in a disabled state
+ * @param {ReactNode} [props.icon] - (optional) An icon element rendered to the left of the tag 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
+ * <Tag variant="success-bold">Active</Tag>
+ *
+ * @example
+ * <Tag size="sm" variant="danger-subtle" icon={<ErrorSolid />}>
+ *   Failed
+ * </Tag>
+ */
+export function Tag(props) {
+    const { as: Component = "div", className, size = "md", variant = "default", disabled, icon, children, ...rest } = props;
+    return (_jsxs(Component, { className: cn("vesper-tag", `vesper-tag-${size}`, disabled ? "vesper-tag-disabled" : `vesper-tag-${variant}`, className), ...rest, ...getDisabledProps(Component, !!disabled), children: [icon && _jsx("span", { className: "vesper-tag-icon", children: icon }), _jsx(Typography, { as: "span", variant: "label-xs", children: children })] }));
+}
+//# sourceMappingURL=tag.js.map

package/dist/components/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAErD,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,SAAS;IACT,UAAU;IACV,aAAa;IACb,eAAe;IACf,aAAa;IACb,eAAe;IACf,cAAc;IACd,gBAAgB;IAChB,WAAW;IACX,aAAa;IACb,cAAc;IACd,gBAAgB;CACR,CAAC;AAoBX;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,GAAG,CAAgC,KAAkB;IACnE,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,YAAY,EACZ,cAAc,IAAI,EAAE,EACpB,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,cAAc,OAAO,EAAE,EAC1D,SAAS,CACV,KACG,IAAI,KACJ,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aAE1C,IAAI,IAAI,eAAM,SAAS,EAAC,iBAAiB,YAAE,IAAI,GAAQ,EACxD,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,YACrC,QAAQ,GACE,IACH,CACb,CAAC;AACJ,CAAC"}

package/dist/components/text-area/text-area.css

@@ -0,0 +1 @@
+.vesper-text-area{width:100%;color:var(--vesper-text-primary)}.vesper-text-area::-ms-input-placeholder{color:var(--vesper-text-tertiary)}.vesper-text-area::placeholder{color:var(--vesper-text-tertiary)}.vesper-text-area{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-tint-neutral-100)}.vesper-text-area:focus-visible{border:var(--vesper-stroke-base) solid var(--vesper-border-strong)}.vesper-text-area:disabled{border:var(--vesper-stroke-base) solid var(--vesper-border-disabled);background:var(--vesper-tint-neutral-200);color:var(--vesper-text-tertiary)}.vesper-text-area:disabled::-ms-input-placeholder{color:var(--vesper-text-disabled)}.vesper-text-area:disabled::placeholder{color:var(--vesper-text-disabled)}.vesper-text-area:-webkit-autofill{transition:background-color 2147480000s step-end}.vesper-text-area:autofill{transition:background-color 2147480000s step-end}.vesper-text-area:-webkit-autofill{transition:background-color 2147480000s step-end}.vesper-text-area-success{border:var(--vesper-stroke-base) solid var(--vesper-border-success-base)}.vesper-text-area-warning{border:var(--vesper-stroke-base) solid var(--vesper-border-warning-base)}.vesper-text-area-error{border:var(--vesper-stroke-base) solid var(--vesper-border-error-base)}.vesper-text-area-sm{border-radius:var(--vesper-radius-1);padding:.43125rem var(--vesper-spacing-2)}.vesper-text-area-md{border-radius:var(--vesper-radius-2);padding:.6375rem var(--vesper-spacing-3)}.vesper-text-area-lg{border-radius:var(--vesper-radius-2);padding:.9rem var(--vesper-spacing-3)}

package/dist/components/text-area/text-area.d.ts

@@ -0,0 +1,35 @@
+import { FormInputProps } from "../../utils/splitFormInputProps.js";
+export declare const TEXT_AREA_SIZES: readonly ["sm", "md", "lg"];
+export declare const TEXT_AREA_VARIANTS: readonly ["default", "warning", "success", "error"];
+export type TextAreaSize = (typeof TEXT_AREA_SIZES)[number];
+export type TextAreaVariant = (typeof TEXT_AREA_VARIANTS)[number];
+export interface TextAreaProps extends FormInputProps<"textarea", "textarea"> {
+    /** The fixed height of the textarea in pixels, scaling with base rem size. @default 104 */
+    height?: number;
+    /** Whether to allow vertical resizing of the underling `textarea` element. @default false */
+    resizeable?: boolean;
+    /** The size of the textarea. Affects padding and typography. @default md */
+    size?: TextAreaSize;
+    /** The visual variant of the text input, which determines its color scheme. @default default */
+    variant?: TextAreaVariant;
+}
+/**
+ * A form-ready textarea component supporting different visual variants.
+ *
+ * @param {TextAreaSize} [props.size] - (optional) The size of the text input. @default md
+ * @param {TextAreaVariant} [props.variant] - (optional) The visual variant determining color scheme. @default default
+ * @param {string} [props.placeholder] - (optional) Placeholder text for the input
+ * @param {number} [props.height] - (optional) The fixed height of the textarea in pixels, scaling with base rem size. @default 104
+ *
+ * You may also pass any additional props to the underlying `textarea` element
+
+ * @example
+ * <TextArea
+ *  aria-label="Bio"
+ *  placeholder="Tell us about yourself"
+ *  height={120}
+ *  maxLength={500}
+ * />
+ */
+export declare function TextArea(props: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=text-area.d.ts.map

package/dist/components/text-area/text-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/text-area.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,eAAO,MAAM,eAAe,6BAA8B,CAAC;AAE3D,eAAO,MAAM,kBAAkB,qDAKrB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,UAAU,EAAE,UAAU,CAAC;IAC3E,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6FAA6F;IAC7F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gGAAgG;IAChG,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAQD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAoC5C"}

package/dist/components/text-area/text-area.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography, } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+export const TEXT_AREA_SIZES = ["sm", "md", "lg"];
+export const TEXT_AREA_VARIANTS = [
+    "default",
+    "warning",
+    "success",
+    "error",
+];
+const TEXTAREA_TYPOGRAPHY = {
+    sm: "copy-xs",
+    md: "copy-sm",
+    lg: "copy-md",
+};
+/**
+ * A form-ready textarea component supporting different visual variants.
+ *
+ * @param {TextAreaSize} [props.size] - (optional) The size of the text input. @default md
+ * @param {TextAreaVariant} [props.variant] - (optional) The visual variant determining color scheme. @default default
+ * @param {string} [props.placeholder] - (optional) Placeholder text for the input
+ * @param {number} [props.height] - (optional) The fixed height of the textarea in pixels, scaling with base rem size. @default 104
+ *
+ * You may also pass any additional props to the underlying `textarea` element
+
+ * @example
+ * <TextArea
+ *  aria-label="Bio"
+ *  placeholder="Tell us about yourself"
+ *  height={120}
+ *  maxLength={500}
+ * />
+ */
+export function TextArea(props) {
+    const { variant = "default", size = "md", resizeable = false, 
+    // props that should get forwarded to the textarea element
+    height = 104, className, placeholder = " ", style, ...rest } = props;
+    return (_jsx(Typography, { ...rest, className: cn("vesper-text-area", `vesper-text-area-${size}`, `vesper-text-area-${variant}`, className), as: "textarea", variant: TEXTAREA_TYPOGRAPHY[size], placeholder: props.required && placeholder.trim()
+            ? `${placeholder.trim()} *`
+            : placeholder, style: {
+            height: `${height / 16}rem`,
+            resize: resizeable ? "block" : "none",
+            ...style,
+        } }));
+}
+//# sourceMappingURL=text-area.js.map

package/dist/components/text-area/text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../src/components/text-area/text-area.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,UAAU,GAEX,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAGhC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAE3D,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,SAAS;IACT,SAAS;IACT,SAAS;IACT,OAAO;CACC,CAAC;AAiBX,MAAM,mBAAmB,GAA+C;IACtE,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,UAAU,GAAG,KAAK;IAClB,0DAA0D;IAC1D,MAAM,GAAG,GAAG,EACZ,SAAS,EACT,WAAW,GAAG,GAAG,EACjB,KAAK,EACL,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,UAAU,OACL,IAAI,EACR,SAAS,EAAE,EAAE,CACX,kBAAkB,EAClB,oBAAoB,IAAI,EAAE,EAC1B,oBAAoB,OAAO,EAAE,EAC7B,SAAS,CACV,EACD,EAAE,EAAC,UAAU,EACb,OAAO,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAClC,WAAW,EACT,KAAK,CAAC,QAAQ,IAAI,WAAW,CAAC,IAAI,EAAE;YAClC,CAAC,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,IAAI;YAC3B,CAAC,CAAC,WAAW,EAEjB,KAAK,EAAE;YACL,MAAM,EAAE,GAAG,MAAM,GAAG,EAAE,KAAK;YAC3B,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;YACrC,GAAG,KAAK;SACT,GACD,CACH,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1 @@
+.vesper-text-button{justify-content:center;align-items:center;gap:var(--vesper-spacing-1);text-transform:uppercase;width:fit-content;font-weight:400;font-family:var(--vesper-font-mono);line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal);cursor:pointer;border-bottom:var(--vesper-stroke-base) solid transparent;display:inline-flex}.vesper-text-button:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}@media (forced-colors:active){.vesper-text-button:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}.vesper-text-button-lg{height:1rem;font-size:1rem}.vesper-text-button-lg .vesper-text-button-icon{width:1rem;height:1rem}.vesper-text-button-md{height:.875rem;font-size:.875rem}.vesper-text-button-md .vesper-text-button-icon{width:.875rem;height:.875rem}.vesper-text-button-sm{height:.75rem;font-size:.75rem}.vesper-text-button-sm .vesper-text-button-icon{width:.75rem;height:.75rem}.vesper-text-button-subtle{color:var(--vesper-text-tertiary)}.vesper-text-button-subtle .vesper-text-button-icon{color:var(--vesper-icon-tertiary)}.vesper-text-button-subtle:hover{border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-primary)}.vesper-text-button-contrast{color:var(--vesper-text-primary)}.vesper-text-button-contrast .vesper-text-button-icon{color:var(--vesper-icon-primary)}.vesper-text-button-contrast:hover{border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-strong)}.vesper-text-button-accent{color:var(--vesper-text-accent)}.vesper-text-button-accent .vesper-text-button-icon{color:var(--vesper-icon-accent)}.vesper-text-button-accent:hover{border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-accent-base)}.vesper-text-button-danger{color:var(--vesper-text-error)}.vesper-text-button-danger .vesper-text-button-icon{color:var(--vesper-icon-error)}.vesper-text-button-danger:hover{border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-error-base)}.vesper-text-button-warning{color:var(--vesper-text-warning)}.vesper-text-button-warning .vesper-text-button-icon{color:var(--vesper-icon-warning)}.vesper-text-button-warning:hover{border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-warning-base)}.vesper-text-button-success{color:var(--vesper-text-success)}.vesper-text-button-success .vesper-text-button-icon{color:var(--vesper-icon-success)}.vesper-text-button-success:hover{border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-success-base)}.vesper-text-button-info{color:var(--vesper-text-info)}.vesper-text-button-info .vesper-text-button-icon{color:var(--vesper-icon-info)}.vesper-text-button-info:hover{border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-info-base)}.vesper-text-button-purple{color:var(--vesper-text-brand-purple)}.vesper-text-button-purple .vesper-text-button-icon{color:var(--vesper-icon-brand-purple)}.vesper-text-button-purple:hover{border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-brand-purple-base)}.vesper-text-button-pink{color:var(--vesper-text-brand-pink)}.vesper-text-button-pink .vesper-text-button-icon{color:var(--vesper-icon-brand-pink)}.vesper-text-button-pink:hover{border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-brand-pink-base)}.vesper-text-button-disabled{color:var(--vesper-text-disabled)}.vesper-text-button-disabled .vesper-text-button-icon{color:var(--vesper-icon-disabled)}.vesper-text-button-disabled{pointer-events:none}

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

@@ -0,0 +1,46 @@
+import type { ElementType, ReactNode } from "react";
+import type { Polymorphic } from "../../utils/polymorphic.js";
+export declare const TEXT_BUTTON_SIZES: readonly ["sm", "md", "lg"];
+export declare const TEXT_BUTTON_VARIANTS: readonly ["subtle", "contrast", "accent", "success", "warning", "danger", "info", "purple", "pink"];
+export type TextButtonSize = (typeof TEXT_BUTTON_SIZES)[number];
+export type TextButtonVariant = (typeof TEXT_BUTTON_VARIANTS)[number];
+export type TextButtonProps<E extends ElementType = "button"> = Polymorphic<{
+    /** The size of the text button. Affects font size. @default md */
+    size?: TextButtonSize;
+    /** The color variant of the text button. @default accent */
+    variant?: TextButtonVariant;
+    /** When `true`, renders the text button in a disabled state and prevents interaction. @default false */
+    disabled?: boolean;
+    /** An optional icon element rendered to the left of the text button content. */
+    iconLeft?: ReactNode;
+    /** An optional icon element rendered to the right of the text button content. */
+    iconRight?: ReactNode;
+}, E>;
+/**
+ * A polymorphic text-only button component with color variants and optional leading/trailing icons, rendered without a background.
+ *
+ * Unlike `Button` (which renders with a filled or outlined background), `IconButton` (which displays a single icon without text), and `SplitButton` (which pairs a primary action with a dropdown menu), `TextButton` provides a minimal, text-styled control.
+ *
+ * @see packages/vesper/src/components/button/button.tsx
+ * @see packages/vesper/src/components/icon-button/icon-button.tsx
+ * @see packages/vesper/src/components/split-button/split-button.tsx
+ *
+ * @param {TextButtonSize} [props.size] - (optional) The size of the text button. @default md
+ * @param {TextButtonVariant} [props.variant] - (optional) The color variant. @default accent
+ * @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 content
+ * @param {ReactNode} [props.iconRight] - (optional) An icon rendered to the right of the 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
+ * <TextButton onClick={handleClick}>Learn more</TextButton>
+ *
+ * @example
+ * <TextButton variant="danger" iconRight={<ArrowRight />} as="a" href="/docs">
+ *   View documentation
+ * </TextButton>
+ */
+export declare function TextButton<E extends ElementType>(props: TextButtonProps<E>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=text-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-button.d.ts","sourceRoot":"","sources":["../../../src/components/text-button/text-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,iBAAiB,6BAA8B,CAAC;AAE7D,eAAO,MAAM,oBAAoB,qGAUvB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,WAAW,CACzE;IACE,kEAAkE;IAClE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wGAAwG;IACxG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iFAAiF;IACjF,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,EACD,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,2CA+B1E"}

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

@@ -0,0 +1,46 @@
+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 TEXT_BUTTON_SIZES = ["sm", "md", "lg"];
+export const TEXT_BUTTON_VARIANTS = [
+    "subtle",
+    "contrast",
+    "accent",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "purple",
+    "pink",
+];
+/**
+ * A polymorphic text-only button component with color variants and optional leading/trailing icons, rendered without a background.
+ *
+ * Unlike `Button` (which renders with a filled or outlined background), `IconButton` (which displays a single icon without text), and `SplitButton` (which pairs a primary action with a dropdown menu), `TextButton` provides a minimal, text-styled control.
+ *
+ * @see packages/vesper/src/components/button/button.tsx
+ * @see packages/vesper/src/components/icon-button/icon-button.tsx
+ * @see packages/vesper/src/components/split-button/split-button.tsx
+ *
+ * @param {TextButtonSize} [props.size] - (optional) The size of the text button. @default md
+ * @param {TextButtonVariant} [props.variant] - (optional) The color variant. @default accent
+ * @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 content
+ * @param {ReactNode} [props.iconRight] - (optional) An icon rendered to the right of the 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
+ * <TextButton onClick={handleClick}>Learn more</TextButton>
+ *
+ * @example
+ * <TextButton variant="danger" iconRight={<ArrowRight />} as="a" href="/docs">
+ *   View documentation
+ * </TextButton>
+ */
+export function TextButton(props) {
+    const { as: Component = "button", size = "md", variant = "accent", iconLeft, iconRight, children, className, disabled, ...rest } = props;
+    return (_jsxs(Component, { className: cn("vesper-text-button", `vesper-text-button-${size}`, `vesper-text-button-${disabled ? "disabled" : variant}`, className), ...rest, ...getDisabledProps(Component, !!disabled), children: [iconLeft && _jsx("span", { className: "vesper-text-button-icon", children: iconLeft }), children, iconRight && (_jsx("span", { className: "vesper-text-button-icon", children: iconRight }))] }));
+}
+//# sourceMappingURL=text-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-button.js","sourceRoot":"","sources":["../../../src/components/text-button/text-button.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAE7D,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,QAAQ;IACR,UAAU;IACV,QAAQ;IACR,SAAS;IACT,SAAS;IACT,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;CACE,CAAC;AAsBX;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,UAAU,CAAwB,KAAyB;IACzE,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,QAAQ,EAClB,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,oBAAoB,EACpB,sBAAsB,IAAI,EAAE,EAC5B,sBAAsB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,EACvD,SAAS,CACV,KACG,IAAI,KACJ,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aAE1C,QAAQ,IAAI,eAAM,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAQ,EACvE,QAAQ,EACR,SAAS,IAAI,CACZ,eAAM,SAAS,EAAC,yBAAyB,YAAE,SAAS,GAAQ,CAC7D,IACS,CACb,CAAC;AACJ,CAAC"}

package/dist/components/text-input/text-input.css

@@ -0,0 +1 @@
+.vesper-text-input{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-tint-neutral-100);align-items:center;display:flex}.vesper-text-input:has(.vesper-text-input-field:focus-visible){border:var(--vesper-stroke-base) solid var(--vesper-border-strong);box-shadow:var(--vesper-shadow-focus-ring)}@media (forced-colors:active){.vesper-text-input:has(.vesper-text-input-field:focus-visible){outline:var(--vesper-stroke-strong) solid CanvasText}}.vesper-text-input:has(.vesper-text-input-icon:focus-visible){border:var(--vesper-stroke-base) solid var(--vesper-border-strong);box-shadow:var(--vesper-shadow-focus-ring)}@media (forced-colors:active){.vesper-text-input:has(.vesper-text-input-icon:focus-visible){outline:var(--vesper-stroke-strong) solid CanvasText}}.vesper-text-input:has(.vesper-text-input-field:disabled){border:var(--vesper-stroke-base) solid var(--vesper-border-disabled);background:var(--vesper-tint-neutral-200)}.vesper-text-input:has(.vesper-text-input-field:disabled) .vesper-text-input-icon{color:var(--vesper-icon-disabled);pointer-events:none}.vesper-text-input-success{border:var(--vesper-stroke-base) solid var(--vesper-border-success-base)}.vesper-text-input-warning{border:var(--vesper-stroke-base) solid var(--vesper-border-warning-base)}.vesper-text-input-error{border:var(--vesper-stroke-base) solid var(--vesper-border-error-base)}.vesper-text-input-icon{color:var(--vesper-icon-secondary);flex-shrink:0}.vesper-text-input-icon:where(button:not(:disabled)){cursor:pointer;position:relative}.vesper-text-input-icon:where(button:not(:disabled)):after{content:"";inset:calc(var(--vesper-spacing-micro) * -4);position:absolute}.vesper-text-input-field{width:100%}.vesper-text-input-field:focus-visible{box-shadow:none;outline:none}.vesper-text-input-field:-webkit-autofill{transition:background-color 2147480000s step-end}.vesper-text-input-field:autofill{transition:background-color 2147480000s step-end}.vesper-text-input-field:-webkit-autofill{transition:background-color 2147480000s step-end}.vesper-text-input-field:disabled{color:var(--vesper-text-tertiary)}.vesper-text-input-field:disabled::-ms-input-placeholder{color:var(--vesper-text-disabled)}.vesper-text-input-field:disabled::placeholder{color:var(--vesper-text-disabled)}.vesper-text-input-field::-webkit-search-decoration{-ms-appearance:none;appearance:none;display:none}.vesper-text-input-field::-webkit-search-cancel-button{-ms-appearance:none;appearance:none;display:none}.vesper-text-input-field::-webkit-search-results-button{-ms-appearance:none;appearance:none;display:none}.vesper-text-input-field::-webkit-search-results-decoration{-ms-appearance:none;appearance:none;display:none}.vesper-text-input-sm{gap:var(--vesper-spacing-1);padding:0 var(--vesper-spacing-2);border-radius:var(--vesper-radius-1);height:2rem}.vesper-text-input-sm .vesper-text-input-icon{width:.875rem;height:.875rem}.vesper-text-input-sm .vesper-text-input-field{padding:.43125rem 0}.vesper-text-input-md{gap:var(--vesper-spacing-2);padding:0 var(--vesper-spacing-3);border-radius:var(--vesper-radius-2);height:2.5rem}.vesper-text-input-md .vesper-text-input-icon{width:1rem;height:1rem}.vesper-text-input-md .vesper-text-input-field{padding:.6375rem 0}.vesper-text-input-lg{gap:var(--vesper-spacing-2);padding:0 var(--vesper-spacing-3);border-radius:var(--vesper-radius-2);height:3rem}.vesper-text-input-lg .vesper-text-input-icon{width:1.25rem;height:1.25rem}.vesper-text-input-lg .vesper-text-input-field{padding:.9rem 0}.vesper-text-input-field{color:var(--vesper-text-primary)}.vesper-text-input-field::-ms-input-placeholder{color:var(--vesper-text-tertiary)}.vesper-text-input-field::placeholder{color:var(--vesper-text-tertiary)}.vesper-text-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.vesper-text-input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.vesper-text-input-field[type=number]{-ms-appearance:textfield;appearance:textfield}

package/dist/components/text-input/text-input.d.ts

@@ -0,0 +1,57 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { FormInputProps } from "../../utils/splitFormInputProps.js";
+export declare const TEXT_INPUT_SIZES: readonly ["sm", "md", "lg"];
+export declare const TEXT_INPUT_VARIANTS: readonly ["default", "warning", "success", "error"];
+export type TextInputSize = (typeof TEXT_INPUT_SIZES)[number];
+export type TextInputVariant = (typeof TEXT_INPUT_VARIANTS)[number];
+export interface TextInputProps extends FormInputProps<"div", "input"> {
+    /** The size of the text input. Affects padding and typography. @default md */
+    size?: TextInputSize;
+    /** The visual variant of the text input, which determines its color scheme. @default default */
+    variant?: TextInputVariant;
+    /** An optional icon element rendered to the left of the input field. */
+    iconLeft?: ReactNode;
+    /** Optional click handler for the left icon. When provided, the icon is rendered as a `<button>` instead of a `<span>`. */
+    iconLeftAction?: {
+        /** The click event handler */
+        handler(e: MouseEvent<HTMLButtonElement>): void;
+        /** An accessible aria-label for the icon */
+        ariaLabel: string;
+    };
+    /** An optional icon element rendered to the right of the input field. */
+    iconRight?: ReactNode;
+    /** Optional click handler for the right icon. When provided, the icon is rendered as a `<button>` instead of a `<span>`. */
+    iconRightAction?: {
+        /** The click event handler */
+        handler(e: MouseEvent<HTMLButtonElement>): void;
+        /** An accessible aria-label for the icon */
+        ariaLabel: string;
+    };
+    /** The HTML input type. Determines the browser's native input behavior and keyboard. @default text */
+    type?: "text" | "email" | "password" | "url" | "tel" | "search" | "number" | "date" | "datetime-local" | "week" | "month" | "time";
+}
+/**
+ * A text input component supporting different visual variants, as well as leading and trailing icons.
+ *
+ * @param {TextInputSize} [props.size] - (optional) The size of the text input. @default md
+ * @param {TextInputVariant} [props.variant] - (optional) The visual variant determining color scheme. @default default
+ * @param {ReactNode} [props.iconLeft] - (optional) An element rendered to the left of the input field
+ * @param {ReactNode} [props.iconRight] - (optional) An element rendered to the right of the input field
+ * @param {string} [props.type] - (optional) The HTML input type. @default text
+ * @param {string} [props.placeholder] - (optional) Placeholder text for the input
+ *
+ * You may also pass any additional props to the underlying `div` wrapper or `input` element
+ *
+ * @example
+ * <TextInput aria-label="Email" name="email" type="email" required />
+ *
+ * @example
+ * <TextInput
+ *   variant="error"
+ *   aria-label="Username"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ * />
+ */
+export declare function TextInput(props: TextInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=text-input.d.ts.map

package/dist/components/text-input/text-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/text-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQxD,OAAO,EACL,cAAc,EAEf,MAAM,6BAA6B,CAAC;AAErC,eAAO,MAAM,gBAAgB,6BAA8B,CAAC;AAE5D,eAAO,MAAM,mBAAmB,qDAKtB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC;IACpE,8EAA8E;IAC9E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,gGAAgG;IAChG,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2HAA2H;IAC3H,cAAc,CAAC,EAAE;QACf,8BAA8B;QAC9B,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;QAChD,4CAA4C;QAC5C,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,yEAAyE;IACzE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,4HAA4H;IAC5H,eAAe,CAAC,EAAE;QAChB,8BAA8B;QAC9B,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;QAChD,4CAA4C;QAC5C,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,sGAAsG;IACtG,IAAI,CAAC,EACD,MAAM,GACN,OAAO,GACP,UAAU,GACV,KAAK,GACL,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,gBAAgB,GAChB,MAAM,GACN,OAAO,GACP,MAAM,CAAC;CACZ;AAOD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CA6D9C"}

package/dist/components/text-input/text-input.js

@@ -0,0 +1,54 @@
+"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 TEXT_INPUT_SIZES = ["sm", "md", "lg"];
+export const TEXT_INPUT_VARIANTS = [
+    "default",
+    "warning",
+    "success",
+    "error",
+];
+const TEXT_INPUT_TYPOGRAPHY = {
+    sm: "copy-xs",
+    md: "copy-sm",
+    lg: "copy-md",
+};
+/**
+ * A text input component supporting different visual variants, as well as leading and trailing icons.
+ *
+ * @param {TextInputSize} [props.size] - (optional) The size of the text input. @default md
+ * @param {TextInputVariant} [props.variant] - (optional) The visual variant determining color scheme. @default default
+ * @param {ReactNode} [props.iconLeft] - (optional) An element rendered to the left of the input field
+ * @param {ReactNode} [props.iconRight] - (optional) An element rendered to the right of the input field
+ * @param {string} [props.type] - (optional) The HTML input type. @default text
+ * @param {string} [props.placeholder] - (optional) Placeholder text for the input
+ *
+ * You may also pass any additional props to the underlying `div` wrapper or `input` element
+ *
+ * @example
+ * <TextInput aria-label="Email" name="email" type="email" required />
+ *
+ * @example
+ * <TextInput
+ *   variant="error"
+ *   aria-label="Username"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ * />
+ */
+export function TextInput(props) {
+    const { iconLeft, iconLeftAction, iconRight, iconRightAction, variant = "default", size = "md", type = "text", className, placeholder = " ", ...rest } = props;
+    const { ariaProps, controlProps, formProps, wrapperProps } = splitFormInputProps(rest);
+    return (_jsxs("div", { ...wrapperProps, className: cn("vesper-text-input", `vesper-text-input-${size}`, `vesper-text-input-${variant}`, className), children: [iconLeft && (_jsx(TextInputIcon, { ariaLabel: iconLeftAction?.ariaLabel, onClick: iconLeftAction?.handler, disabled: formProps.disabled, children: iconLeft })), _jsx(Typography, { ...ariaProps, ...controlProps, ...formProps, as: "input", variant: TEXT_INPUT_TYPOGRAPHY[size], className: "vesper-text-input-field", type: type, placeholder: formProps.required && placeholder.trim()
+                    ? `${placeholder.trim()} *`
+                    : placeholder }), iconRight && (_jsx(TextInputIcon, { ariaLabel: iconRightAction?.ariaLabel, onClick: iconRightAction?.handler, disabled: formProps.disabled, children: iconRight }))] }));
+}
+function TextInputIcon({ ariaLabel, onClick, children, disabled, }) {
+    if (onClick) {
+        return (_jsx("button", { "aria-label": ariaLabel, onClick: onClick, disabled: disabled, type: "button", className: "vesper-text-input-icon", children: children }));
+    }
+    return _jsx("span", { className: "vesper-text-input-icon", children: children });
+}
+//# sourceMappingURL=text-input.js.map

package/dist/components/text-input/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/components/text-input/text-input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,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,gBAAgB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAE5D,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,SAAS;IACT,SAAS;IACT,SAAS;IACT,OAAO;CACC,CAAC;AA4CX,MAAM,qBAAqB,GAAgD;IACzE,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,QAAQ,EACR,cAAc,EACd,SAAS,EACT,eAAe,EACf,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,SAAS,EACT,WAAW,GAAG,GAAG,EACjB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,GACxD,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAE5B,OAAO,CACL,kBACM,YAAY,EAChB,SAAS,EAAE,EAAE,CACX,mBAAmB,EACnB,qBAAqB,IAAI,EAAE,EAC3B,qBAAqB,OAAO,EAAE,EAC9B,SAAS,CACV,aAEA,QAAQ,IAAI,CACX,KAAC,aAAa,IACZ,SAAS,EAAE,cAAc,EAAE,SAAS,EACpC,OAAO,EAAE,cAAc,EAAE,OAAO,EAChC,QAAQ,EAAE,SAAS,CAAC,QAAQ,YAE3B,QAAQ,GACK,CACjB,EACD,KAAC,UAAU,OACL,SAAS,KACT,YAAY,KACZ,SAAS,EACb,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,qBAAqB,CAAC,IAAI,CAAC,EACpC,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAE,IAAI,EACV,WAAW,EACT,SAAS,CAAC,QAAQ,IAAI,WAAW,CAAC,IAAI,EAAE;oBACtC,CAAC,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,IAAI;oBAC3B,CAAC,CAAC,WAAW,GAEjB,EACD,SAAS,IAAI,CACZ,KAAC,aAAa,IACZ,SAAS,EAAE,eAAe,EAAE,SAAS,EACrC,OAAO,EAAE,eAAe,EAAE,OAAO,EACjC,QAAQ,EAAE,SAAS,CAAC,QAAQ,YAE3B,SAAS,GACI,CACjB,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,GAMT;IACC,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,+BACc,SAAS,EACrB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wBAAwB,YAEjC,QAAQ,GACF,CACV,CAAC;IACJ,CAAC;IAED,OAAO,eAAM,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAQ,CAAC;AACpE,CAAC"}

package/dist/components/theme-switcher/theme-switcher.css

@@ -0,0 +1 @@
+.vesper-theme-switcher{background:var(--vesper-background-primary);outline:var(--vesper-stroke-base) solid var(--vesper-border-primary);width:fit-content;display:inline-flex;position:relative}.vesper-theme-switcher-lg{border-radius:var(--vesper-radius-2);height:2rem}.vesper-theme-switcher-lg .vesper-theme-switcher-button{border-radius:var(--vesper-radius-2);padding:.375rem}.vesper-theme-switcher-lg .vesper-theme-switcher-indicator{border-radius:var(--vesper-radius-2)}.vesper-theme-switcher-sm{border-radius:var(--vesper-radius-1);height:1.5rem}.vesper-theme-switcher-sm .vesper-theme-switcher-button{border-radius:var(--vesper-radius-1);padding:.3125rem}.vesper-theme-switcher-sm .vesper-theme-switcher-indicator{border-radius:var(--vesper-radius-1)}.vesper-theme-switcher-button{cursor:pointer;color:var(--vesper-icon-secondary);transition:color var(--vesper-transition-duration-fast) ease;aspect-ratio:1;height:100%}@media (forced-colors:active){.vesper-theme-switcher-button:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-theme-switcher-button:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-theme-switcher-indicator{top:calc(var(--vesper-spacing-micro) * -1);left:calc(var(--vesper-spacing-micro) * -1);height:calc(100% + var(--vesper-spacing-half));aspect-ratio:1;border:var(--vesper-stroke-base) solid var(--vesper-border-primary);transition:transform var(--vesper-transition-duration-fast) ease;pointer-events:none;position:absolute}html[data-vesper-theme=system] .vesper-theme-switcher-indicator{transform:translate(0)}html[data-vesper-theme=system] .vesper-theme-switcher-button-system{color:var(--vesper-icon-primary)}html[data-vesper-theme=light] .vesper-theme-switcher-indicator{transform:translateX(calc(100% - var(--vesper-spacing-half)))}html[data-vesper-theme=light] .vesper-theme-switcher-button-light{color:var(--vesper-icon-primary)}html[data-vesper-theme=dark] .vesper-theme-switcher-indicator{transform:translateX(calc(200% - var(--vesper-spacing-1)))}html[data-vesper-theme=dark] .vesper-theme-switcher-button-dark{color:var(--vesper-icon-primary)}

package/dist/components/theme-switcher/theme-switcher.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentProps } from "react";
+export declare const THEME_SWITCHER_SIZES: readonly ["sm", "lg"];
+export type ThemeSwitcherSize = (typeof THEME_SWITCHER_SIZES)[number];
+export type VesperTheme = "light" | "dark" | "system";
+export interface ThemeSwitcherProps extends Omit<ComponentProps<"div">, "children"> {
+    /** The size of the theme switcher. @default lg */
+    size?: ThemeSwitcherSize;
+}
+/**
+ * A three-way toggle for switching between system, light, and dark color themes by setting the `data-vesper-theme` attribute on the document root.
+ *
+ * @param {ThemeSwitcherSize} [props.size] - (optional) The size of the theme switcher. @default lg
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <ThemeSwitcher />
+ *
+ * @example
+ * <ThemeSwitcher size="sm" />
+ */
+export declare function ThemeSwitcher(props: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme-switcher.d.ts.map