@tenstorrent/vesper 0.1.0

package/dist/components/icons/user.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "react";
+export declare const User: (props: ComponentProps<"svg">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=user.d.ts.map

package/dist/components/icons/user.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user.d.ts","sourceRoot":"","sources":["../../../src/components/icons/user.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,eAAO,MAAM,IAAI,GAAI,OAAO,cAAc,CAAC,KAAK,CAAC,4CAchD,CAAC"}

package/dist/components/icons/user.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const User = (props) => {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M16.793 15.5L19.5 18.207V20.5H4.5V18.21L7.27539 15.5H16.793ZM14.5098 3.5L16.25 5.67578V10.3242L14.5098 12.5H9.49023L7.75 10.3242V5.67578L9.49023 3.5H14.5098Z", stroke: "currentColor" }) }));
+};
+//# sourceMappingURL=user.js.map

package/dist/components/icons/user.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user.js","sourceRoot":"","sources":["../../../src/components/icons/user.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAA4B,EAAE,EAAE;IACnD,OAAO,CACL,cACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,YAET,eACE,CAAC,EAAC,+JAA+J,EACjK,MAAM,EAAC,cAAc,GACf,GACJ,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/icons/warning-solid.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "react";
+export declare const WarningSolid: (props: ComponentProps<"svg">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=warning-solid.d.ts.map

package/dist/components/icons/warning-solid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"warning-solid.d.ts","sourceRoot":"","sources":["../../../src/components/icons/warning-solid.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,eAAO,MAAM,YAAY,GAAI,OAAO,cAAc,CAAC,KAAK,CAAC,4CAgBxD,CAAC"}

package/dist/components/icons/warning-solid.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const WarningSolid = (props) => {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 18.5537L20.876 20.5H3.10352L2 18.5898L10.9658 3.5H13.0557L22 18.5537ZM11.4932 16.2422L10.9766 16.7578V17.7881L11.4932 18.3027H12.5264L13.042 17.7881V16.7578L12.5264 16.2422H11.4932ZM11.2354 8L10.7188 8.51562L11.2354 14.6973L11.751 15.2119H12.2676L12.7842 14.6973L13.3008 8.51562L12.7842 8H11.2354Z", fill: "currentColor" }) }));
+};
+//# sourceMappingURL=warning-solid.js.map

package/dist/components/icons/warning-solid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"warning-solid.js","sourceRoot":"","sources":["../../../src/components/icons/warning-solid.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA4B,EAAE,EAAE;IAC3D,OAAO,CACL,cACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,YAET,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+SAA+S,EACjT,IAAI,EAAC,cAAc,GACb,GACJ,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/icons/warning.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "react";
+export declare const Warning: (props: ComponentProps<"svg">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=warning.d.ts.map

package/dist/components/icons/warning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"warning.d.ts","sourceRoot":"","sources":["../../../src/components/icons/warning.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,eAAO,MAAM,OAAO,GAAI,OAAO,cAAc,CAAC,KAAK,CAAC,4CAwBnD,CAAC"}

package/dist/components/icons/warning.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Warning = (props) => {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M13.0423 16.3788V17.4091L12.5259 17.9242H11.4932L10.9769 17.4091V16.3788L11.4932 15.8636H12.5259L13.0423 16.3788Z", fill: "currentColor" }), _jsx("path", { d: "M13.3005 8.13636L12.7841 14.3182L12.2678 14.8333H11.7514L11.235 14.3182L10.7187 8.13636L11.235 7.62121H12.7841L13.3005 8.13636Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 17.7522L20.4096 20.5H3.57229L2 17.7844L10.5018 3.5H13.5173L22 17.7522ZM3.19712 17.7914L4.16832 19.4697H19.8135L20.8029 17.7592L12.9294 4.5303H11.0898L3.19712 17.7914Z", fill: "currentColor" })] }));
+};
+//# sourceMappingURL=warning.js.map

package/dist/components/icons/warning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"warning.js","sourceRoot":"","sources":["../../../src/components/icons/warning.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAA4B,EAAE,EAAE;IACtD,OAAO,CACL,eACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,aAET,eACE,CAAC,EAAC,mHAAmH,EACrH,IAAI,EAAC,cAAc,GACb,EACR,eACE,CAAC,EAAC,iIAAiI,EACnI,IAAI,EAAC,cAAc,GACb,EACR,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACb,IACJ,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/icons/wormhole.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "react";
+export declare const Wormhole: (props: ComponentProps<"svg">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=wormhole.d.ts.map

package/dist/components/icons/wormhole.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wormhole.d.ts","sourceRoot":"","sources":["../../../src/components/icons/wormhole.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,eAAO,MAAM,QAAQ,GAAI,OAAO,cAAc,CAAC,KAAK,CAAC,4CAgBpD,CAAC"}

package/dist/components/icons/wormhole.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Wormhole = (props) => {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.9544 7.02386L19.9564 7.0224V9.0149L19.9544 9.01296L18.6177 10.3497L18.9616 10.6936V12.1858L18.1125 13.0344L18.4642 13.3861V14.8782L17.618 15.7239L17.9673 16.0732V17.5653L14.485 21.0471H9.51105L6.02928 17.5653V16.0732L6.03316 16.077V16.0732L6.37998 15.7263L5.53188 14.8782V13.3861L5.88307 13.0344L5.03448 12.1858V10.6936L5.37984 10.3478L4.04504 9.01296L4.04358 9.0149V7.0224L4.04504 7.02386L8.02226 3.04712H15.9777L19.9544 7.02386ZM14.9824 18.36H9.01365L7.12607 16.4724L6.77731 16.8212L9.51105 19.5549H14.485L17.2207 16.8188L16.8744 16.4729V16.4681L14.9824 18.36ZM15.4798 15.6676H8.51626L6.62916 13.7805L6.27797 14.1322L7.12607 14.9802L7.13385 14.9725V14.988L9.01365 16.8678H14.9824L17.7181 14.1322L17.3698 13.7839V13.7776L15.4798 15.6676ZM5.78058 11.4397L6.62916 12.2883L6.63305 12.2849V12.2922L8.51626 14.1754H15.4798L18.2155 11.4397L17.8716 11.0958L15.9777 12.9902H8.02226L6.12594 11.0939L5.78058 11.4397ZM5.03983 8.01865L8.02226 11.0011L15.9777 11.0016L18.9601 8.01865L15.9777 5.03622H8.02226L5.03983 8.01865Z", fill: "currentColor" }) }));
+};
+//# sourceMappingURL=wormhole.js.map

package/dist/components/icons/wormhole.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wormhole.js","sourceRoot":"","sources":["../../../src/components/icons/wormhole.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAA4B,EAAE,EAAE;IACvD,OAAO,CACL,cACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,YAET,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0/BAA0/B,EAC5/B,IAAI,EAAC,cAAc,GACb,GACJ,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/masked-input/getMaskitoOptions.d.ts

@@ -0,0 +1,4 @@
+import { MaskitoOptions } from "@maskito/core";
+import type { TextMaskingConfig } from "./masked-input.js";
+export declare function getMaskitoOptions(mask?: TextMaskingConfig): MaskitoOptions;
+//# sourceMappingURL=getMaskitoOptions.d.ts.map

package/dist/components/masked-input/getMaskitoOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMaskitoOptions.d.ts","sourceRoot":"","sources":["../../../src/components/masked-input/getMaskitoOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAEhF,wBAAgB,iBAAiB,CAAC,IAAI,CAAC,EAAE,iBAAiB,GAAG,cAAc,CA8B1E"}

package/dist/components/masked-input/getMaskitoOptions.js

@@ -0,0 +1,27 @@
+export function getMaskitoOptions(mask) {
+    if (!mask) {
+        return { mask: /./ };
+    }
+    if (typeof mask === "string") {
+        return { mask: Array.from(mask, (c) => (c === "_" ? /./ : c)) };
+    }
+    if ("mask" in mask) {
+        return mask;
+    }
+    if (typeof mask.replace === "string") {
+        return {
+            mask: Array.from(mask.format, (c) => (c === mask.replace ? /./ : c)),
+        };
+    }
+    if (mask.replace instanceof RegExp) {
+        const replacement = mask.replace;
+        return {
+            mask: Array.from(mask.format, (c) => (c === "_" ? replacement : c)),
+        };
+    }
+    const replacements = mask.replace;
+    return {
+        mask: Array.from(mask.format, (c) => replacements[c] ?? c),
+    };
+}
+//# sourceMappingURL=getMaskitoOptions.js.map

package/dist/components/masked-input/getMaskitoOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMaskitoOptions.js","sourceRoot":"","sources":["../../../src/components/masked-input/getMaskitoOptions.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,iBAAiB,CAAC,IAAwB;IACxD,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;IACvB,CAAC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAClE,CAAC;IAED,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;QACrC,OAAO;YACL,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACrE,CAAC;IACJ,CAAC;IAED,IAAI,IAAI,CAAC,OAAO,YAAY,MAAM,EAAE,CAAC;QACnC,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;QACjC,OAAO;YACL,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACpE,CAAC;IACJ,CAAC;IAED,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;IAClC,OAAO;QACL,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;KAC3D,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,68 @@
+import { type MaskitoOptions } from "@maskito/core";
+import { type TextInputProps } from "../text-input/text-input.js";
+/**
+ * The text masking configuration for a `MaskedInput`, which can take one of three shapes:
+ *
+ * - `string`: a fixed-length pattern where every `_` is a placeholder that accepts any character, eg. `"____-____-____"`.
+ * - `{ format, replace }`: a fixed-length pattern where `replace` determines the placeholder characters and what they accept.
+ *   Pass a `RegExp` to keep `_` as the placeholder but restrict accepted characters, a single-character `string` to use a
+ *   different placeholder that accepts any character, or a `Record<string, RegExp>` to map each placeholder character in
+ *   `format` to the expression validating it.
+ * - `MaskitoOptions`: a full [maskito](https://maskito.dev) configuration, for behavior the shorthands can't express, eg.
+ *   dynamic (variable-length) masks, pre/post-processing hooks, or overwrite mode.
+ *
+ * Any character in a `string` or `format` pattern that is not a placeholder is treated as a literal and inserted automatically as the user types.
+ */
+export type TextMaskingConfig = MaskitoOptions | string | {
+    format: string;
+    replace: RegExp | string | {
+        [key: string]: RegExp;
+    };
+};
+export interface MaskedInputProps extends Omit<TextInputProps, "type"> {
+    /** The text masking configuration, which determines the shape and formatting of the masked text. When omitted, no masking is applied and the field behaves like a regular `TextInput`. */
+    mask?: TextMaskingConfig;
+    /** The HTML input type. Restricted to the types that can be masked. @default text */
+    type?: "text" | "search" | "tel" | "email" | "url";
+    /** When `true`, the initial value of the input is formatted to match the `mask` on mount. @default false */
+    formatOnMount?: boolean;
+    /** When `true`, the current value of the input is reformatted to match the `mask` whenever the `mask` prop changes. @default true */
+    formatOnMaskChange?: boolean;
+}
+/**
+ * A `TextInput` that restricts and formats its value as the user types, via a text mask.
+ *
+ * @param {TextMaskingConfig} [props.mask] - (optional) The text masking configuration. Accepts a `string` pattern, a `{ format, replace }` object, or a `MaskitoOptions` object. When omitted, no masking is applied
+ * @param {string} [props.type] - (optional) The HTML input type, restricted to `"text" | "search" | "tel" | "email" | "url"`. @default text
+ * @param {boolean} [props.formatOnMount] - (optional) When `true`, the initial value of the input is formatted to match the `mask` on mount. @default false
+ * @param {boolean} [props.formatOnMaskChange] - (optional) When `true`, the current value of the input is reformatted to match the `mask` whenever the `mask` prop changes. @default false
+ *
+ * You may also pass any additional props supported by the `TextInput` component including `size`, `variant`, `iconLeft`, `iconRight`, and `dropdown`
+ *
+ * @example
+ * <MaskedInput aria-label="Activation code" mask="____-____-____" />
+ *
+ * @example
+ * <MaskedInput
+ *   aria-label="Phone number"
+ *   placeholder="ex: +1 (222) 333-4444"
+ *   mask={{ format: "+1 (___) ___-____", replace: /\d/ }}
+ * />
+ *
+ * @example
+ * <MaskedInput
+ *   aria-label="Postal code"
+ *   placeholder="ex: A0A 1B1"
+ *   mask={{ format: "ABA BAB", replace: { A: /[a-zA-Z]/, B: /\d/ } }}
+ * />
+ *
+ * @example
+ * <MaskedInput
+ *   aria-label="Activation code"
+ *   mask="____-____-____"
+ *   defaultValue="123456789012"
+ *   formatOnMount
+ * />
+ */
+export declare function MaskedInput({ mask, ref, formatOnMount, formatOnMaskChange, ...props }: MaskedInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=masked-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masked-input.d.ts","sourceRoot":"","sources":["../../../src/components/masked-input/masked-input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,oCAAoC,CAAC;AAM5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,iBAAiB,GACzB,cAAc,GACd,MAAM,GACN;IACE,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACtD,CAAC;AAEN,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IACpE,0LAA0L;IAC1L,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,CAAC;IACnD,4GAA4G;IAC5G,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qIAAqI;IACrI,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,EACH,aAAqB,EACrB,kBAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA6BlB"}

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

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { maskitoInitialCalibrationPlugin, } from "@maskito/core";
+import { useMaskito } from "@maskito/react";
+import { TextInput, } from "../text-input/text-input.js";
+import { useMergedRefs } from "../../utils/hooks/useMergedRefs.js";
+import { getMaskitoOptions } from "./getMaskitoOptions.js";
+/**
+ * A `TextInput` that restricts and formats its value as the user types, via a text mask.
+ *
+ * @param {TextMaskingConfig} [props.mask] - (optional) The text masking configuration. Accepts a `string` pattern, a `{ format, replace }` object, or a `MaskitoOptions` object. When omitted, no masking is applied
+ * @param {string} [props.type] - (optional) The HTML input type, restricted to `"text" | "search" | "tel" | "email" | "url"`. @default text
+ * @param {boolean} [props.formatOnMount] - (optional) When `true`, the initial value of the input is formatted to match the `mask` on mount. @default false
+ * @param {boolean} [props.formatOnMaskChange] - (optional) When `true`, the current value of the input is reformatted to match the `mask` whenever the `mask` prop changes. @default false
+ *
+ * You may also pass any additional props supported by the `TextInput` component including `size`, `variant`, `iconLeft`, `iconRight`, and `dropdown`
+ *
+ * @example
+ * <MaskedInput aria-label="Activation code" mask="____-____-____" />
+ *
+ * @example
+ * <MaskedInput
+ *   aria-label="Phone number"
+ *   placeholder="ex: +1 (222) 333-4444"
+ *   mask={{ format: "+1 (___) ___-____", replace: /\d/ }}
+ * />
+ *
+ * @example
+ * <MaskedInput
+ *   aria-label="Postal code"
+ *   placeholder="ex: A0A 1B1"
+ *   mask={{ format: "ABA BAB", replace: { A: /[a-zA-Z]/, B: /\d/ } }}
+ * />
+ *
+ * @example
+ * <MaskedInput
+ *   aria-label="Activation code"
+ *   mask="____-____-____"
+ *   defaultValue="123456789012"
+ *   formatOnMount
+ * />
+ */
+export function MaskedInput({ mask, ref, formatOnMount = false, formatOnMaskChange = false, ...props }) {
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+    }, []);
+    const maskitoConfig = useMemo(() => {
+        const options = getMaskitoOptions(mask);
+        const shouldFormat = mounted.current ? formatOnMaskChange : formatOnMount;
+        if (!shouldFormat)
+            return { options };
+        return {
+            options: {
+                ...options,
+                plugins: [
+                    ...(options.plugins ?? []),
+                    maskitoInitialCalibrationPlugin(),
+                ],
+            },
+        };
+    }, [mask, formatOnMount, formatOnMaskChange]);
+    const maskitoRef = useMaskito(maskitoConfig);
+    const mergedInputRef = useMergedRefs(ref, maskitoRef);
+    return _jsx(TextInput, { ref: mergedInputRef, ...props });
+}
+//# sourceMappingURL=masked-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masked-input.js","sourceRoot":"","sources":["../../../src/components/masked-input/masked-input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,+BAA+B,GAEhC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EACL,SAAS,GAEV,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAkCxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,EACH,aAAa,GAAG,KAAK,EACrB,kBAAkB,GAAG,KAAK,EAC1B,GAAG,KAAK,EACS;IACjB,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,OAAO,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAExC,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC;QAC1E,IAAI,CAAC,YAAY;YAAE,OAAO,EAAE,OAAO,EAAE,CAAC;QAEtC,OAAO;YACL,OAAO,EAAE;gBACP,GAAG,OAAO;gBACV,OAAO,EAAE;oBACP,GAAG,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC;oBAC1B,+BAA+B,EAAE;iBAClC;aACF;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE9C,MAAM,UAAU,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE7C,MAAM,cAAc,GAAG,aAAa,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAEtD,OAAO,KAAC,SAAS,IAAC,GAAG,EAAE,cAAc,KAAM,KAAK,GAAI,CAAC;AACvD,CAAC"}

package/dist/components/material/material.css

@@ -0,0 +1 @@
+.vesper-material{border-radius:var(--vesper-radius-2);color:var(--vesper-text-primary)}.vesper-material-outlined{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-background-primary)}.vesper-material-outlined-strong{border:var(--vesper-stroke-base) solid var(--vesper-border-strong);background:var(--vesper-background-primary)}.vesper-material-raised{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-background-primary);box-shadow:var(--vesper-shadow-100)}.vesper-material-floating{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-background-primary);box-shadow:var(--vesper-shadow-300)}.vesper-material-modal{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-background-primary);box-shadow:var(--vesper-shadow-400)}.vesper-material-inset{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-tint-neutral-100);box-shadow:var(--vesper-shadow-inset-100)}.vesper-material-inset-strong{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-tint-neutral-100);box-shadow:var(--vesper-shadow-inset-200)}.vesper-material-interactive{border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-background-primary)}.vesper-material-interactive.vesper-material-disabled{color:var(--vesper-text-disabled);border-color:var(--vesper-border-disabled);background:var(--vesper-background-disabled)}.vesper-material-interactive.vesper-material-active{background:linear-gradient(0deg, var(--vesper-state-neutral-active) 0%, var(--vesper-state-neutral-active) 100%), var(--vesper-background-primary);box-shadow:var(--vesper-shadow-100)}.vesper-material-interactive.vesper-material-selected{background:var(--vesper-tint-neutral-200);border-color:var(--vesper-border-strong)}.vesper-material-interactive:not(.vesper-material-disabled){cursor:pointer}.vesper-material-interactive:not(.vesper-material-disabled):hover{background:linear-gradient(0deg, var(--vesper-state-neutral-hover) 0%, var(--vesper-state-neutral-hover) 100%), var(--vesper-background-primary);box-shadow:var(--vesper-shadow-100)}@media (forced-colors:active){.vesper-material-interactive:focus-visible:not(.vesper-material-disabled){outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-material-interactive:focus-visible:not(.vesper-material-disabled){box-shadow:var(--vesper-shadow-focus-ring)}}

package/dist/components/material/material.d.ts

@@ -0,0 +1,43 @@
+import type { ElementType } from "react";
+import { Polymorphic } from "../../utils/polymorphic.js";
+export declare const BUTTON_SIZES: readonly ["xs", "sm", "md", "lg"];
+export declare const MATERIAL_VARIANTS: readonly ["outlined", "outlined-strong", "raised", "floating", "modal", "inset", "inset-strong", "interactive"];
+export declare const INTERACTIVE_MATERIAL_STATES: readonly ["disabled", "active", "selected"];
+export type MaterialVariant = (typeof MATERIAL_VARIANTS)[number];
+export type InteractiveMaterialState = (typeof INTERACTIVE_MATERIAL_STATES)[number];
+type NonInteractiveMaterialProps = {
+    /** The visual style variant of the material surface. @default outlined */
+    variant?: Exclude<MaterialVariant, "interactive">;
+    /** The current interaction state of the material surface. Only applicable when `variant` is `"interactive"`. */
+    state?: never;
+};
+type InteractiveMaterialProps = {
+    /** Must be set to `"interactive"` to enable interactive states such as active, selected, and disabled. */
+    variant: Extract<MaterialVariant, "interactive">;
+    /** The current interaction state of the material surface. Only applicable when `variant` is `"interactive"`. */
+    state?: InteractiveMaterialState;
+};
+type BaseMaterialProps = NonInteractiveMaterialProps | InteractiveMaterialProps;
+export type MaterialProps<E extends ElementType = "div"> = Polymorphic<BaseMaterialProps, E>;
+/**
+ * A polymorphic surface component that applies visual elevation and border treatments to its children.
+ *
+ * @param {MaterialVariant} [props.variant] - (optional) The visual style variant of the material surface. @default outlined
+ * @param {InteractiveMaterialState} [props.state] - (optional) The interaction state, only applicable when `variant` is `"interactive"`
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Material variant="raised">
+ *   <p>Elevated card content</p>
+ * </Material>
+ *
+ * @example
+ * <Material variant="interactive" state="active" as="button">
+ *   Active interactive surface
+ * </Material>
+ */
+export declare function Material<E extends ElementType = "div">(props: MaterialProps<E>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=material.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"material.d.ts","sourceRoot":"","sources":["../../../src/components/material/material.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,eAAO,MAAM,YAAY,mCAAoC,CAAC;AAE9D,eAAO,MAAM,iBAAiB,iHASpB,CAAC;AAEX,eAAO,MAAM,2BAA2B,6CAI9B,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjE,MAAM,MAAM,wBAAwB,GAClC,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/C,KAAK,2BAA2B,GAAG;IACjC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IAClD,gHAAgH;IAChH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,0GAA0G;IAC1G,OAAO,EAAE,OAAO,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACjD,gHAAgH;IAChH,KAAK,CAAC,EAAE,wBAAwB,CAAC;CAClC,CAAC;AAEF,KAAK,iBAAiB,GAAG,2BAA2B,GAAG,wBAAwB,CAAC;AAEhF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CACpE,iBAAiB,EACjB,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EACpD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,2CAsBxB"}

package/dist/components/material/material.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } 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 MATERIAL_VARIANTS = [
+    "outlined",
+    "outlined-strong",
+    "raised",
+    "floating",
+    "modal",
+    "inset",
+    "inset-strong",
+    "interactive",
+];
+export const INTERACTIVE_MATERIAL_STATES = [
+    "disabled",
+    "active",
+    "selected",
+];
+/**
+ * A polymorphic surface component that applies visual elevation and border treatments to its children.
+ *
+ * @param {MaterialVariant} [props.variant] - (optional) The visual style variant of the material surface. @default outlined
+ * @param {InteractiveMaterialState} [props.state] - (optional) The interaction state, only applicable when `variant` is `"interactive"`
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Material variant="raised">
+ *   <p>Elevated card content</p>
+ * </Material>
+ *
+ * @example
+ * <Material variant="interactive" state="active" as="button">
+ *   Active interactive surface
+ * </Material>
+ */
+export function Material(props) {
+    const { as: Component = "div", className, variant = "outlined", state, ...rest } = props;
+    return (_jsx(Component, { className: cn("vesper-material", `vesper-material-${variant}`, variant === "interactive" && state && `vesper-material-${state}`, className), ...rest, ...getDisabledProps(Component, state === "disabled") }));
+}
+//# sourceMappingURL=material.js.map

package/dist/components/material/material.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"material.js","sourceRoot":"","sources":["../../../src/components/material/material.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,iBAAiB,GAAG;IAC/B,UAAU;IACV,iBAAiB;IACjB,QAAQ;IACR,UAAU;IACV,OAAO;IACP,OAAO;IACP,cAAc;IACd,aAAa;CACL,CAAC;AAEX,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,UAAU;IACV,QAAQ;IACR,UAAU;CACF,CAAC;AA4BX;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,QAAQ,CACtB,KAAuB;IAEvB,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,OAAO,GAAG,UAAU,EACpB,KAAK,EACL,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,mBAAmB,OAAO,EAAE,EAC5B,OAAO,KAAK,aAAa,IAAI,KAAK,IAAI,mBAAmB,KAAK,EAAE,EAChE,SAAS,CACV,KACG,IAAI,KACJ,gBAAgB,CAAC,SAAS,EAAE,KAAK,KAAK,UAAU,CAAC,GACrD,CACH,CAAC;AACJ,CAAC"}

package/dist/components/menu/menu.css

@@ -0,0 +1 @@
+.vesper-menu{padding:var(--vesper-spacing-2);gap:var(--vesper-spacing-half);border-radius:var(--vesper-radius-3);border:var(--vesper-stroke-base) solid var(--vesper-border-tertiary);background:var(--vesper-background-primary);box-shadow:var(--vesper-shadow-200);flex-direction:column;display:flex}.vesper-menu-item{width:100%;padding:var(--vesper-spacing-2);align-items:center;gap:var(--vesper-spacing-2);border-radius:var(--vesper-radius-1);cursor:pointer;outline:none;display:flex}@media (forced-colors:active){.vesper-menu-item:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}.vesper-menu-item-default{color:var(--vesper-text-primary)}.vesper-menu-item-default .vesper-menu-item-label{color:var(--vesper-text-secondary)}.vesper-menu-item-default:hover{background:var(--vesper-tint-neutral-100)}.vesper-menu-item-default:focus-visible{background:var(--vesper-tint-neutral-100)}.vesper-menu-item-default[data-highlighted]{background:var(--vesper-tint-neutral-100)}.vesper-menu-item-selected{color:var(--vesper-text-primary);background:var(--vesper-tint-neutral-200)}.vesper-menu-item-selected .vesper-menu-item-label{color:var(--vesper-text-secondary)}.vesper-menu-item-selected:hover{background:linear-gradient(0deg, var(--vesper-state-neutral-hover) 0%, var(--vesper-state-neutral-hover) 100%), var(--vesper-tint-neutral-200)}.vesper-menu-item-selected:focus-visible{background:linear-gradient(0deg, var(--vesper-state-neutral-hover) 0%, var(--vesper-state-neutral-hover) 100%), var(--vesper-tint-neutral-200)}.vesper-menu-item-selected[data-highlighted]{background:linear-gradient(0deg, var(--vesper-state-neutral-hover) 0%, var(--vesper-state-neutral-hover) 100%), var(--vesper-tint-neutral-200)}.vesper-menu-item-danger{color:var(--vesper-text-error)}.vesper-menu-item-danger:hover{background:var(--vesper-background-error-subtle)}.vesper-menu-item-danger:focus-visible{background:var(--vesper-background-error-subtle)}.vesper-menu-item-danger[data-highlighted]{background:var(--vesper-background-error-subtle)}.vesper-menu-item-locked{pointer-events:none;color:var(--vesper-text-tertiary)}.vesper-menu-item-locked .vesper-menu-item-left-icon{color:var(--vesper-icon-tertiary)}.vesper-menu-item-locked .vesper-menu-item-right-icon{color:var(--vesper-icon-tertiary)}.vesper-menu-item-disabled{pointer-events:none;color:var(--vesper-text-disabled)}.vesper-menu-item-disabled .vesper-menu-item-left-icon{color:var(--vesper-icon-disabled)}.vesper-menu-item-disabled .vesper-menu-item-right-icon{color:var(--vesper-icon-disabled)}.vesper-menu-item-left-icon{width:1rem;height:1rem}.vesper-menu-item-right-icon{width:1.25rem;height:1.25rem}.vesper-menu-item-text-container{gap:var(--vesper-spacing-half);flex-direction:column;flex:1;display:flex}

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,75 @@
+import { type ReactNode, RefObject } from "react";
+import { type PortalContainer } from "../../utils/getPortalContainer.js";
+export type MenuItemProps = {
+    /** The text label displayed for the menu item. */
+    text: string;
+    /** An optional secondary description displayed below the text label. */
+    description?: string;
+    /** An optional icon element rendered to the left of the menu item text. */
+    icon?: ReactNode;
+    /** The visual and behavioral style of the menu item. `"locked"` and `"disabled"` both prevent interaction; `"selected"` displays a checkmark; `"locked"` displays a lock icon. @default default */
+    style?: "default" | "danger" | "locked" | "selected" | "disabled";
+    /** Callback fired when the menu item is selected. */
+    onSelect(): void;
+};
+export interface MenuProps {
+    /** The preferred side of the trigger to render the menu against. @default bottom */
+    side?: "top" | "bottom" | "left" | "right";
+    /** The distance in pixels from the trigger to the menu. @default 8 */
+    sideOffset?: number;
+    /** The alignment of the menu relative to the trigger along the perpendicular axis. @default start */
+    align?: "start" | "center" | "end";
+    /** An offset in pixels from the aligned edge of the trigger. @default 0 */
+    alignOffset?: number;
+    /** The trigger element that opens the menu. */
+    children?: ReactNode;
+    /** Controls the open state of the menu (controlled mode). */
+    open?: boolean;
+    /** Whether the menu is open by default (uncontrolled mode). */
+    defaultOpen?: boolean;
+    /** Callback fired when the open state changes. Receives the new open state as an argument. */
+    onOpenChange?(open: boolean): void;
+    /** The list of menu items to render in the dropdown. */
+    items: MenuItemProps[];
+    /** The width of the menu dropdown in pixels. @default 200 */
+    width?: number;
+    /** Specify the element or shadow root to portal the menu into */
+    container?: PortalContainer;
+    /** Specify the element to anchor the menu against. @default trigger element */
+    anchor?: HTMLElement | null | RefObject<HTMLElement | null>;
+}
+/**
+ * A dropdown menu component triggered by a child element, rendering a list of selectable menu items.
+ *
+ * @param {MenuItemProps[]} props.items - The list of menu items to render in the dropdown
+ * @param {ReactElement} [props.children] - (optional) The trigger element that opens the menu
+ * @param {number} [props.width] - (optional) The width of the dropdown in pixels. @default 200
+ * @param {"top" | "bottom" | "left" | "right"} [props.side] - (optional) The preferred side of the trigger. @default bottom
+ * @param {number} [props.sideOffset] - (optional) Distance in pixels from the trigger. @default 8
+ * @param {"start" | "center" | "end"} [props.align] - (optional) Alignment relative to the trigger. @default start
+ * @param {PortalContainer} [props.container] - (optional) Specify the element or shadow root to portal the menu into
+ * @param {boolean} [props.open] - (optional) Controls the open state (controlled)
+ * @param {(open: boolean) => void} [props.onOpenChange] - (optional) Callback fired when the open state changes
+ *
+ * @example
+ * <Menu
+ *   items={[
+ *     { text: "Edit", onSelect: handleEdit },
+ *     { text: "Delete", style: "danger", onSelect: handleDelete },
+ *   ]}
+ * >
+ *   <IconButton icon={<Ellipses />} aria-label="Actions" />
+ * </Menu>
+ *
+ * @example
+ * <Menu
+ *   items={options}
+ *   side="right"
+ *   width={250}
+ *   align="end"
+ * >
+ *   <Button variant="ghost">Options</Button>
+ * </Menu>
+ */
+export declare function Menu(props: MenuProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+//# sourceMappingURL=menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAM5D,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,4BAA4B,CAAC;AAIpC,MAAM,MAAM,aAAa,GAAG;IAC1B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mMAAmM;IACnM,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IAClE,qDAAqD;IACrD,QAAQ,IAAI,IAAI,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,oFAAoF;IACpF,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qGAAqG;IACrG,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8FAA8F;IAC9F,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,wDAAwD;IACxD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2UA+CpC"}

package/dist/components/menu/menu.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Menu as DropdownMenu } from "@base-ui/react/menu";
+import { Checkmark, Lock } from "../icons/icons.js";
+import { Typography } from "../typography/typography.js";
+import { getPortalContainer, } from "../../utils/getPortalContainer.js";
+import { useBaseRemSize } from "../../utils/hooks/useBaseRemSize.js";
+import { isSingleReactElement } from "../../utils/isSingleReactElement.js";
+/**
+ * A dropdown menu component triggered by a child element, rendering a list of selectable menu items.
+ *
+ * @param {MenuItemProps[]} props.items - The list of menu items to render in the dropdown
+ * @param {ReactElement} [props.children] - (optional) The trigger element that opens the menu
+ * @param {number} [props.width] - (optional) The width of the dropdown in pixels. @default 200
+ * @param {"top" | "bottom" | "left" | "right"} [props.side] - (optional) The preferred side of the trigger. @default bottom
+ * @param {number} [props.sideOffset] - (optional) Distance in pixels from the trigger. @default 8
+ * @param {"start" | "center" | "end"} [props.align] - (optional) Alignment relative to the trigger. @default start
+ * @param {PortalContainer} [props.container] - (optional) Specify the element or shadow root to portal the menu into
+ * @param {boolean} [props.open] - (optional) Controls the open state (controlled)
+ * @param {(open: boolean) => void} [props.onOpenChange] - (optional) Callback fired when the open state changes
+ *
+ * @example
+ * <Menu
+ *   items={[
+ *     { text: "Edit", onSelect: handleEdit },
+ *     { text: "Delete", style: "danger", onSelect: handleDelete },
+ *   ]}
+ * >
+ *   <IconButton icon={<Ellipses />} aria-label="Actions" />
+ * </Menu>
+ *
+ * @example
+ * <Menu
+ *   items={options}
+ *   side="right"
+ *   width={250}
+ *   align="end"
+ * >
+ *   <Button variant="ghost">Options</Button>
+ * </Menu>
+ */
+export function Menu(props) {
+    const { items, children, width = 200, side = "bottom", sideOffset = 8, align = "start", alignOffset = 0, container, anchor, ...rest } = props;
+    const [ref, setRef] = useState(null);
+    const baseRemSize = useBaseRemSize();
+    const portalContainer = getPortalContainer(container, ref);
+    if (!isSingleReactElement(children)) {
+        return children;
+    }
+    return (_jsxs(DropdownMenu.Root, { ...rest, children: [_jsx(DropdownMenu.Trigger, { render: children, ref: setRef }), _jsx(DropdownMenu.Portal, { container: portalContainer, children: _jsx(DropdownMenu.Positioner, { anchor: anchor, side: side, sideOffset: sideOffset * (baseRemSize / 16), align: align, alignOffset: alignOffset * (baseRemSize / 16), children: _jsx(DropdownMenu.Popup, { className: "vesper-menu", style: { width: `calc(${width} * (1rem / 16))` }, children: items.map((item, index) => (_jsx(MenuItem, { ...item }, index))) }) }) })] }));
+}
+function MenuItem({ onSelect, text, description, icon, style = "default", }) {
+    return (_jsxs(DropdownMenu.Item, { disabled: style === "disabled" || style === "locked", className: `vesper-menu-item vesper-menu-item-${style}`, onClick: () => onSelect(), label: text, children: [icon && _jsx("div", { className: "vesper-menu-item-left-icon", children: icon }), _jsxs("div", { className: "vesper-menu-item-text-container", children: [_jsx(Typography, { as: "span", variant: "label-md-bold", children: text }), description && (_jsx(Typography, { as: "span", variant: "copy-xs", className: "vesper-menu-item-label", children: description }))] }), style === "selected" && (_jsx(Checkmark, { className: "vesper-menu-item-right-icon" })), style === "locked" && _jsx(Lock, { className: "vesper-menu-item-right-icon" })] }));
+}
+//# sourceMappingURL=menu.js.map

package/dist/components/menu/menu.js.map

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

package/dist/components/modal/modal.css

@@ -0,0 +1 @@
+.vesper-modal{opacity:0;transform:translateY(var(--vesper-spacing-2));transition:opacity var(--vesper-transition-duration-fast) ease, transform var(--vesper-transition-duration-fast) ease, display var(--vesper-transition-duration-fast) ease allow-discrete, overlay var(--vesper-transition-duration-fast) ease allow-discrete;margin:auto;position:fixed;top:0;bottom:0;left:0;right:0;overflow:visible}.vesper-modal::-ms-backdrop{opacity:0}.vesper-modal::backdrop{opacity:0}.vesper-modal:before{content:"";transition:background var(--vesper-transition-duration-fast) ease, display var(--vesper-transition-duration-fast) ease allow-discrete, overlay var(--vesper-transition-duration-fast) ease allow-discrete;background:0 0;position:fixed;top:-100vh;bottom:-100vh;left:-100vw;right:-100vw}.vesper-modal[open]{opacity:1;transform:translateY(0)}.vesper-modal[open]:before{background:var(--vesper-scrim-contrast-base)}@starting-style{.vesper-modal[open]{opacity:0;transform:translateY(var(--vesper-spacing-2))}.vesper-modal[open]:before{background:0 0}}.vesper-modal-container{background:var(--vesper-background-primary);border-radius:var(--vesper-radius-3);border:var(--vesper-stroke-base) solid var(--vesper-border-primary);box-shadow:var(--vesper-shadow-300);max-width:calc(100vw - var(--vesper-spacing-16));gap:var(--vesper-spacing-6);padding-bottom:var(--vesper-spacing-6);flex-direction:column;display:flex;position:relative;overflow:hidden}.vesper-modal-header{padding:var(--vesper-spacing-6) var(--vesper-spacing-6) 0 var(--vesper-spacing-6);justify-content:space-between;align-items:flex-start;gap:var(--vesper-spacing-5);flex-shrink:0;display:flex}.vesper-modal-title{color:var(--vesper-text-primary)}.vesper-modal-description{color:var(--vesper-text-secondary);margin-top:var(--vesper-spacing-2)}.vesper-modal-content{padding:0 var(--vesper-spacing-6);color:var(--vesper-text-primary);flex-shrink:1;overflow-y:auto}.vesper-modal-buttons{gap:var(--vesper-spacing-6);padding:0 var(--vesper-spacing-6);flex-shrink:0;display:flex}.vesper-modal-buttons-start{justify-content:flex-start}.vesper-modal-buttons-end{justify-content:flex-end}.vesper-modal-buttons-fill .vesper-button{width:100%}.vesper-modal-buttons-between{justify-content:space-between}