asheeui 1.0.0 → 1.1.1

package/dist/components/page/page-config.d.ts

@@ -0,0 +1,57 @@
+import { Space } from '../../shared';
+import { ContainerSize } from '../container/container-config';
+/**
+ * Theme configuration options shared by the page parts.
+ *
+ * Set under `components.page` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade for all four parts, so an
+ * application can set its page shell once.
+ */
+export interface PageConfig {
+    /**
+     * Whether a part wraps its content in a {@link Container}.
+     *
+     * @default true
+     */
+    contained?: boolean;
+    /**
+     * Maximum content width used when a part is contained.
+     *
+     * @default "lg"
+     */
+    containerSize?: ContainerSize;
+    /**
+     * Vertical rhythm of the content area.
+     *
+     * @default "md"
+     */
+    spacing?: Space;
+    /**
+     * Whether the header stays at the top of the viewport while the content
+     * scrolls.
+     *
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Whether the header and the footer draw a separator line against the
+     * content.
+     *
+     * @default true
+     */
+    divider?: boolean;
+}
+/**
+ * Default config values registered for the page parts.
+ */
+export declare const defaultPageConfig: PageConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        page: PageConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_PAGE_CONFIG: Required<PageConfig>;
+//# sourceMappingURL=page-config.d.ts.map

package/dist/components/page/page-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-config.d.ts","sourceRoot":"","sources":["../../../src/components/page/page-config.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEnE;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAM/B,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,IAAI,EAAE,UAAU,CAAC;KAClB;CACF;AAID;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,UAAU,CAMrD,CAAC"}

package/dist/components/page/page-config.js

@@ -0,0 +1,20 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/page/page-config.ts
+var t = {
+	contained: !0,
+	containerSize: "lg",
+	spacing: "md",
+	sticky: !0,
+	divider: !0
+};
+e("page", t);
+var n = {
+	contained: !0,
+	containerSize: "lg",
+	spacing: "md",
+	sticky: !0,
+	divider: !0
+};
+//#endregion
+export { n as FALLBACK_PAGE_CONFIG, t as defaultPageConfig };

package/dist/components/page/page-styles.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Page component styles for AsheeUI.
+ * This file provides the static class mappings for the four page parts: the
+ * shell, the header, the content area and the footer.
+ */
+/** The page shell: a full-height column that owns the theme background. */
+export declare const PAGE_CLASS = "flex min-h-dvh w-full flex-col bg-background";
+/** Shared base classes for the page header. */
+export declare const PAGE_HEADER_CLASS = "w-full bg-background/95 backdrop-blur";
+/** Header classes applied while the header sticks to the top of the viewport. */
+export declare const PAGE_HEADER_STICKY_CLASS = "sticky top-0 z-10";
+/** Inner padding of the header, applied inside its container. */
+export declare const PAGE_HEADER_INNER_CLASS = "flex w-full items-center gap-4 py-3";
+/** Shared base classes for the content area: it fills the space between the
+ * header and the footer. */
+export declare const PAGE_CONTENT_CLASS = "flex w-full flex-1 flex-col";
+/** Shared base classes for the page footer. */
+export declare const PAGE_FOOTER_CLASS = "w-full bg-secondary/30";
+/** Inner padding of the footer, applied inside its container. */
+export declare const PAGE_FOOTER_INNER_CLASS = "flex w-full flex-col gap-2 py-6";
+/** Separator drawn between the header and the content area. */
+export declare const PAGE_DIVIDER_CLASS = "border-b border-border";
+/** Separator drawn between the content area and the footer. */
+export declare const PAGE_FOOTER_DIVIDER_CLASS = "border-t border-border";
+//# sourceMappingURL=page-styles.d.ts.map

package/dist/components/page/page-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-styles.d.ts","sourceRoot":"","sources":["../../../src/components/page/page-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,2EAA2E;AAC3E,eAAO,MAAM,UAAU,iDAAiD,CAAC;AAEzE,+CAA+C;AAC/C,eAAO,MAAM,iBAAiB,0CAA0C,CAAC;AAEzE,iFAAiF;AACjF,eAAO,MAAM,wBAAwB,sBAAsB,CAAC;AAE5D,iEAAiE;AACjE,eAAO,MAAM,uBAAuB,wCAAwC,CAAC;AAE7E;4BAC4B;AAC5B,eAAO,MAAM,kBAAkB,gCAAgC,CAAC;AAEhE,+CAA+C;AAC/C,eAAO,MAAM,iBAAiB,2BAA2B,CAAC;AAE1D,iEAAiE;AACjE,eAAO,MAAM,uBAAuB,oCAAoC,CAAC;AAEzE,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,2BAA2B,CAAC;AAE3D,+DAA+D;AAC/D,eAAO,MAAM,yBAAyB,2BAA2B,CAAC"}

package/dist/components/page/page-styles.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/page/page-styles.ts
+var e = "flex min-h-dvh w-full flex-col bg-background", t = "w-full bg-background/95 backdrop-blur", n = "sticky top-0 z-10", r = "flex w-full items-center gap-4 py-3", i = "flex w-full flex-1 flex-col", a = "w-full bg-secondary/30", o = "flex w-full flex-col gap-2 py-6", s = "border-b border-border", c = "border-t border-border";
+//#endregion
+export { e as PAGE_CLASS, i as PAGE_CONTENT_CLASS, s as PAGE_DIVIDER_CLASS, a as PAGE_FOOTER_CLASS, c as PAGE_FOOTER_DIVIDER_CLASS, o as PAGE_FOOTER_INNER_CLASS, t as PAGE_HEADER_CLASS, r as PAGE_HEADER_INNER_CLASS, n as PAGE_HEADER_STICKY_CLASS };

package/dist/components/pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAUf,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,qBAAqB,CAAC;AAQ7B,KAAK,mBAAmB,GAAG,gBAAgB,GACzC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAEvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,UAAU,yGAgMtB,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAc,KAAK,cAAc,EAAkB,MAAM,OAAO,CAAC;AAWxE,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAC;AAO7B,KAAK,mBAAmB,GAAG,gBAAgB,GACzC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAEvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,UAAU,yGAqMtB,CAAC"}

package/dist/components/pagination/Pagination.js

@@ -9,14 +9,14 @@ import { Button as o } from "../button/Button.js";
 import { ChevronRightIcon as s } from "../../icons/ChevronRightIcon.js";
 import { Link as c } from "../link/Link.js";
 import { ChevronLeftIcon as l } from "../../icons/ChevronLeftIcon.js";
-import { FALLBACK_PAGINATION_CONFIG as u } from "./pagination-config.js";
-import { PAGINATION_BASE_CLASS as d, PAGINATION_GAP_CLASS as f, PAGINATION_LIST_CLASS as p } from "./pagination-styles.js";
-import { getPaginationRange as m } from "./pagination.helpers.js";
+import { getPaginationRange as u } from "./pagination.helpers.js";
+import { FALLBACK_PAGINATION_CONFIG as d } from "./pagination-config.js";
+import { PAGINATION_BASE_CLASS as f, PAGINATION_GAP_CLASS as p, PAGINATION_LIST_CLASS as m } from "./pagination-styles.js";
 import { forwardRef as h } from "react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/pagination/Pagination.tsx
 var v = h(({ page: h, pageCount: v, onPageChange: y, hrefForPage: b, label: x = "Pagination", size: S, variant: C, color: w, radius: T, siblingCount: E, showEdges: D, isDisabled: O = !1, className: k, ...A }, j) => {
-	let M = r(), N = M.components?.pagination, P = i(S, N?.size, void 0, u.size), F = i(C, N?.variant, M.defaultVariant, u.variant), I = i(w, N?.color, M.defaultColor, u.color), L = a(T, N?.radius, M.defaultRadius, u.radius), R = i(E, N?.siblingCount, void 0, u.siblingCount), z = i(D, N?.showEdges, void 0, u.showEdges), B = Math.min(Math.max(h, 1), Math.max(v, 1)), V = Math.max(v, 1), H = (e) => {
+	let M = r(), N = M.components?.pagination, P = i(S, N?.size, void 0, d.size), F = i(C, N?.variant, M.defaultVariant, d.variant), I = i(w, N?.color, M.defaultColor, d.color), L = a(T, N?.radius, M.defaultRadius, d.radius), R = i(E, N?.siblingCount, void 0, d.siblingCount), z = i(D, N?.showEdges, void 0, d.showEdges), B = Math.min(Math.max(h, 1), Math.max(v, 1)), V = Math.max(v, 1), H = (e) => {
 		e === B || e < 1 || e > v || y?.(e);
 	}, U = (r, i, a, s = !1) => {
 		let l = r < 1 || r > v;
@@ -39,20 +39,20 @@ var v = h(({ page: h, pageCount: v, onPageChange: y, hrefForPage: b, label: x =
 			onClick: () => H(r),
 			children: a
 		});
-	}, W = m(B, v, R);
+	}, W = u(B, v, R);
 	return /* @__PURE__ */ g("nav", {
 		ref: j,
 		"aria-label": x,
-		className: e(d, k),
+		className: e(f, k),
 		...A,
 		children: /* @__PURE__ */ _("ul", {
-			className: p,
+			className: m,
 			children: [
 				z && /* @__PURE__ */ g("li", { children: U(1, "First page", /* @__PURE__ */ g(l, { "aria-hidden": "true" })) }),
 				/* @__PURE__ */ g("li", { children: U(B - 1, "Previous page", /* @__PURE__ */ g(l, { "aria-hidden": "true" })) }),
 				W.map((e, t) => e === "ellipsis" ? /* @__PURE__ */ g("li", { children: /* @__PURE__ */ g("span", {
 					"aria-hidden": "true",
-					className: f,
+					className: p,
 					children: "…"
 				}) }, `gap-${t}`) : /* @__PURE__ */ g("li", { children: U(e, `Page ${e}`, e, e === B) }, e)),
 				/* @__PURE__ */ g("li", { children: U(B + 1, "Next page", /* @__PURE__ */ g(s, { "aria-hidden": "true" })) }),

package/dist/components/pin-input/PinInput.d.ts

@@ -0,0 +1,109 @@
+import { InputHTMLAttributes } from 'react';
+import { FieldStatus, LabelAlign } from '../field/field-config';
+import { PinInputConfig, PinInputMode } from './pin-input-config';
+/**
+ * Keep only the characters a mode accepts.
+ *
+ * @param raw - The text to filter.
+ * @param mode - The characters the field accepts.
+ * @returns The filtered text.
+ */
+export declare function sanitizePinValue(raw: string, mode: PinInputMode): string;
+type BasePinInputProps = PinInputConfig & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "color" | "type" | "children" | "autoFocus">;
+/**
+ * Props for the PinInput component.
+ */
+export interface PinInputProps extends BasePinInputProps {
+    /** The code, for a consumer that owns the value. */
+    value?: string;
+    /** The initial code, for a consumer that does not. */
+    defaultValue?: string;
+    /** Called with the whole code whenever it changes. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Called once when the code reaches its full length.
+     * It fires once per completion, not on every keystroke, so a consumer can
+     * submit from it.
+     */
+    onComplete?: (value: string) => void;
+    /** Label of the field, shown above the boxes. */
+    label?: string;
+    /** Alignment of the label. @default "left" */
+    labelAlign?: LabelAlign;
+    /** Description under the label. */
+    description?: string;
+    /** Validation message under the boxes. */
+    message?: string;
+    /** Validation status, which colours the message. @default "default" */
+    status?: FieldStatus;
+    /** Whether the field is required. @default false */
+    required?: boolean;
+    /** Whether the label shows a pending state. @default false */
+    isLoading?: boolean;
+    /**
+     * Accessible name of the group of boxes.
+     * Used when the field has no visible label.
+     *
+     * @default "Verification code"
+     */
+    groupLabel?: string;
+    /**
+     * Draw a separator after this many boxes.
+     * Purely presentational grouping, hidden from assistive technology.
+     */
+    separatorAfter?: number;
+}
+/**
+ * A field that collects a code one character at a time.
+ *
+ * PinInput accepts a dense code string: the characters are always packed
+ * left to right, so deleting a character in the middle moves the characters
+ * after it left rather than leaving a gap. A consumer therefore never has to
+ * reason about positions when it reads `value`.
+ *
+ * Typing a character moves focus to the next box, Backspace clears the box
+ * behind the caret, the arrow keys move between boxes, Home and End jump to the
+ * ends, and a pasted code fills the boxes from the caret. Because the value is
+ * dense, a caret beyond the characters that are already filled pastes at the end
+ * of them, which is where the next character would have gone. The code is
+ * reported through `onValueChange` on every change and through `onComplete` when
+ * it becomes complete, so a consumer can submit from either.
+ *
+ * The boxes are one named group element (a `fieldset`), because the value is one
+ * value even though it is typed in several places. The component never focuses
+ * itself: a consumer that moves the reader to the field (after sending a code,
+ * for example) does so through the ref, which is the group element, so the
+ * decision to move focus stays with the screen that knows why.
+ *
+ * @param props - PinInput configuration options and field props.
+ * @param props.length - Number of characters. Defaults to 4.
+ * @param props.mode - Accepted characters. Defaults to "numeric".
+ * @param props.size - Density of the boxes. Defaults to "md".
+ * @param props.masked - Hide the typed characters. Defaults to false.
+ * @param props.value - Controlled value.
+ * @param props.defaultValue - Initial value.
+ * @param props.onValueChange - Called with the code on every change.
+ * @param props.onComplete - Called when the code becomes complete.
+ * @param props.label - Label of the field.
+ * @param props.description - Description under the label.
+ * @param props.message - Validation message under the boxes.
+ * @param props.status - Validation status.
+ * @param props.isDisabled - Disable the field. Defaults to false.
+ * @param props.isInvalid - Mark the value invalid. Defaults to false.
+ * @returns The rendered field.
+ *
+ * @example
+ * ```tsx
+ * <PinInput
+ *   label="Verification code"
+ *   length={6}
+ *   description="The six digits we sent to your phone."
+ *   onComplete={verify}
+ * />
+ * ```
+ *
+ * @see Input - The single-value field.
+ */
+export declare const PinInput: import('react').ForwardRefExoticComponent<PinInputProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+export {};
+//# sourceMappingURL=PinInput.d.ts.map

package/dist/components/pin-input/PinInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/PinInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAIL,KAAK,mBAAmB,EAKzB,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAW5B;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,GAAG,MAAM,CAQxE;AAED,KAAK,iBAAiB,GAAG,cAAc,GACrC,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,OAAO,GACP,MAAM,GACN,UAAU,GACV,WAAW,CACd,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,uEAAuE;IACvE,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAEH,eAAO,MAAM,QAAQ,+GA2QpB,CAAC"}

package/dist/components/pin-input/PinInput.js

@@ -0,0 +1,124 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { resolveClassKey as r, resolveConfigCascade as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
+import { FieldShell as o } from "../field/FieldShell.js";
+import { FALLBACK_PIN_INPUT_CONFIG as s } from "./pin-input-config.js";
+import { PIN_INPUT_BOX_CLASS as ee, PIN_INPUT_BOX_DEFAULT_CLASS as te, PIN_INPUT_BOX_DISABLED_CLASS as c, PIN_INPUT_BOX_INVALID_CLASS as l, PIN_INPUT_GROUP_CLASS as u, PIN_INPUT_SIZE_CLASS as d } from "./pin-input-styles.js";
+import { Fragment as f, forwardRef as p, useId as ne, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/pin-input/PinInput.tsx
+function v(e, t) {
+	return t === "numeric" ? e.replace(/\D+/g, "") : t === "alphanumeric" ? e.replace(/[^0-9a-zA-Z]+/g, "") : e.replace(/\s+/g, "");
+}
+var y = p(({ value: p, defaultValue: y, onValueChange: re, onComplete: b, length: x, mode: ie, size: ae, masked: oe, radius: S, isDisabled: se, isInvalid: ce, label: C, labelAlign: w, description: T, message: E, status: D, required: O, isLoading: k, groupLabel: A = "Verification code", separatorAfter: j, name: M, className: N, id: P, placeholder: F, ...I }, L) => {
+	let R = n(), z = R.components?.pininput, B = i({
+		length: x,
+		mode: ie,
+		size: ae,
+		masked: oe,
+		isDisabled: se,
+		isInvalid: ce,
+		radius: S ?? void 0
+	}, z, s), V = a(S, z?.radius, R.defaultRadius, s.radius), H = r(V, t, s.radius), U = ne(), W = P ?? U, G = `${W}-label`, K = `${W}-description`, q = `${W}-message`, [le, ue] = h(y ?? ""), J = p !== void 0, Y = J ? p : le, X = m([]), Z = (e) => {
+		let t = Math.max(0, Math.min(e, B.length - 1));
+		X.current[t]?.focus();
+	}, Q = (e) => {
+		let t = e.slice(0, B.length);
+		J || ue(t), re?.(t), t.length === B.length && b?.(t);
+	}, $ = (e, t) => {
+		let n = v(t, B.mode), r = (Y.slice(0, e) + n + Y.slice(e + n.length)).slice(0, B.length);
+		Q(r), Z(e + n.length);
+	}, de = (e, t) => {
+		let n = v(t, B.mode);
+		if (n.length === 0) {
+			Q(Y.slice(0, e) + Y.slice(e + 1));
+			return;
+		}
+		if (n.length > 1) {
+			$(e, n);
+			return;
+		}
+		let r = e >= Y.length ? Y + n : Y.slice(0, e) + n + Y.slice(e + 1);
+		Q(r), Z(e + 1);
+	}, fe = (e, t) => {
+		switch (t.key) {
+			case "Backspace":
+				t.preventDefault(), e < Y.length && Q(Y.slice(0, e) + Y.slice(e + 1)), Z(e - 1);
+				return;
+			case "Delete":
+				t.preventDefault(), e < Y.length && Q(Y.slice(0, e) + Y.slice(e + 1));
+				return;
+			case "ArrowLeft":
+				t.preventDefault(), Z(e - 1);
+				return;
+			case "ArrowRight":
+				t.preventDefault(), Z(e + 1);
+				return;
+			case "Home":
+				t.preventDefault(), Z(0);
+				return;
+			case "End":
+				t.preventDefault(), Z(B.length - 1);
+				return;
+		}
+	}, pe = (e, t) => {
+		let n = t.clipboardData?.getData("text") ?? "";
+		n && (t.preventDefault(), $(e, n));
+	}, me = [T ? K : null, E ? q : null].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ g(o, {
+		id: W,
+		htmlFor: null,
+		labelId: G,
+		label: C,
+		labelAlign: w,
+		description: T,
+		descriptionId: K,
+		message: E,
+		messageId: q,
+		status: D,
+		required: O,
+		isLoading: k,
+		children: /* @__PURE__ */ _("fieldset", {
+			ref: L,
+			"aria-labelledby": C ? G : void 0,
+			"aria-label": C ? void 0 : A,
+			"aria-describedby": me,
+			"data-disabled": B.isDisabled ? "true" : void 0,
+			className: e(u, N),
+			children: [Array.from({ length: B.length }, (t, n) => /* @__PURE__ */ _(f, { children: [/* @__PURE__ */ g("input", {
+				ref: (e) => {
+					X.current[n] = e;
+				},
+				id: n === 0 ? W : `${W}-${n}`,
+				type: B.masked ? "password" : "text",
+				inputMode: B.mode === "numeric" ? "numeric" : "text",
+				pattern: B.mode === "numeric" ? "[0-9]*" : void 0,
+				autoComplete: n === 0 ? "one-time-code" : "off",
+				placeholder: F,
+				disabled: B.isDisabled,
+				"aria-label": `${A}, character ${n + 1} of ${B.length}`,
+				"aria-invalid": B.isInvalid || void 0,
+				value: Y[n] ?? "",
+				onKeyDown: (e) => fe(n, e),
+				onPaste: (e) => pe(n, e),
+				onChange: (e) => de(n, e.target.value),
+				className: e(ee, d[B.size], H, B.isDisabled ? c : B.isInvalid ? l : te),
+				...I
+			}), j !== void 0 && j > 0 && n + 1 === j && n + 1 < B.length && /* @__PURE__ */ g("span", {
+				"aria-hidden": "true",
+				className: "px-1 text-foreground/40",
+				children: "-"
+			})] }, `pin-${n}`)), M && /* @__PURE__ */ g("input", {
+				type: "hidden",
+				name: M,
+				value: Y
+			})]
+		})
+	});
+});
+y.displayName = "PinInput";
+//#endregion
+export { y as PinInput, v as sanitizePinValue };

package/dist/components/pin-input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PinInput';
+export * from './pin-input-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/pin-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}

package/dist/components/pin-input/index.js

@@ -0,0 +1,3 @@
+export * from "./PinInput.js";
+export * from "./pin-input-config.js";
+export * from "./pin-input-styles.js";

package/dist/components/pin-input/pin-input-config.d.ts

@@ -0,0 +1,82 @@
+import { Radius } from '../../shared';
+/**
+ * Characters a PIN field accepts.
+ *
+ * - `numeric`: digits only, which is what a code sent by SMS contains.
+ * - `alphanumeric`: letters and digits, for a code that mixes both.
+ * - `text`: any character except whitespace.
+ */
+export type PinInputMode = "numeric" | "alphanumeric" | "text";
+/**
+ * Density of a PIN field.
+ */
+export type PinInputSize = "sm" | "md" | "lg";
+/**
+ * Theme configuration options for the PinInput component.
+ *
+ * Set under `components.pininput` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface PinInputConfig {
+    /**
+     * Number of characters the field collects.
+     *
+     * @default 4
+     */
+    length?: number;
+    /**
+     * Characters the field accepts.
+     *
+     * @default "numeric"
+     */
+    mode?: PinInputMode;
+    /**
+     * Density of the boxes.
+     *
+     * @default "md"
+     */
+    size?: PinInputSize;
+    /**
+     * Whether the typed characters are hidden.
+     * Use it for a value that must not be readable over a shoulder.
+     *
+     * @default false
+     */
+    masked?: boolean;
+    /**
+     * Corner rounding of each box.
+     * Defaults to the framework radius, so a PIN field matches the surrounding
+     * form.
+     */
+    radius?: Radius;
+    /**
+     * Whether the field is disabled.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the current value is invalid.
+     * Marks the group for assistive technology and colours the boxes, so an
+     * error is never carried by colour alone.
+     *
+     * @default false
+     */
+    isInvalid?: boolean;
+}
+/**
+ * Default config values registered for the PinInput component.
+ */
+export declare const defaultPinInputConfig: PinInputConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        pininput: PinInputConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_PIN_INPUT_CONFIG: Required<Omit<PinInputConfig, "radius">> & {
+    radius: Radius;
+};
+//# sourceMappingURL=pin-input-config.d.ts.map

package/dist/components/pin-input/pin-input-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input-config.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/pin-input-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,cAAc,GAAG,MAAM,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,cAOnC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,QAAQ,EAAE,cAAc,CAAC;KAC1B;CACF;AAID;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,QAAQ,CAC9C,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC/B,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAQnB,CAAC"}

package/dist/components/pin-input/pin-input-config.js

@@ -0,0 +1,23 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/pin-input/pin-input-config.ts
+var t = {
+	length: 4,
+	mode: "numeric",
+	size: "md",
+	masked: !1,
+	isDisabled: !1,
+	isInvalid: !1
+};
+e("pininput", t);
+var n = {
+	length: 4,
+	mode: "numeric",
+	size: "md",
+	masked: !1,
+	isDisabled: !1,
+	isInvalid: !1,
+	radius: "sm"
+};
+//#endregion
+export { n as FALLBACK_PIN_INPUT_CONFIG, t as defaultPinInputConfig };

package/dist/components/pin-input/pin-input-styles.d.ts

@@ -0,0 +1,16 @@
+import { PinInputSize } from './pin-input-config';
+/** The group of boxes. */
+export declare const PIN_INPUT_GROUP_CLASS = "flex flex-wrap items-center gap-2";
+/** Shared base classes for a box. */
+export declare const PIN_INPUT_BOX_CLASS = "border-2 text-center font-semibold tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 disabled:cursor-not-allowed";
+/** Box density classes. */
+export declare const PIN_INPUT_SIZE_CLASS: Record<PinInputSize, string>;
+/** Box state: no error, not disabled. */
+export declare const PIN_INPUT_BOX_DEFAULT_CLASS = "border-border bg-background text-foreground";
+/** Box state: the value is invalid. */
+export declare const PIN_INPUT_BOX_INVALID_CLASS = "border-danger bg-background text-foreground";
+/** Box state: the field is disabled. */
+export declare const PIN_INPUT_BOX_DISABLED_CLASS = "border-border bg-secondary/40 text-foreground/60";
+/** The separator shown between groups of boxes. */
+export declare const PIN_INPUT_SEPARATOR_CLASS = "px-1 text-foreground/40";
+//# sourceMappingURL=pin-input-styles.d.ts.map

package/dist/components/pin-input/pin-input-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input-styles.d.ts","sourceRoot":"","sources":["../../../src/components/pin-input/pin-input-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,0BAA0B;AAC1B,eAAO,MAAM,qBAAqB,sCAAsC,CAAC;AAEzE,qCAAqC;AACrC,eAAO,MAAM,mBAAmB,yMACwK,CAAC;AAEzM,2BAA2B;AAC3B,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI7D,CAAC;AAEF,yCAAyC;AACzC,eAAO,MAAM,2BAA2B,gDACO,CAAC;AAEhD,uCAAuC;AACvC,eAAO,MAAM,2BAA2B,gDACO,CAAC;AAEhD,wCAAwC;AACxC,eAAO,MAAM,4BAA4B,qDACW,CAAC;AAErD,mDAAmD;AACnD,eAAO,MAAM,yBAAyB,4BAA4B,CAAC"}

package/dist/components/pin-input/pin-input-styles.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/pin-input/pin-input-styles.ts
+var e = "flex flex-wrap items-center gap-2", t = "border-2 text-center font-semibold tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 disabled:cursor-not-allowed", n = {
+	sm: "h-9 w-8 text-sm",
+	md: "h-11 w-10 text-base",
+	lg: "h-14 w-12 text-lg"
+}, r = "border-border bg-background text-foreground", i = "border-danger bg-background text-foreground", a = "border-border bg-secondary/40 text-foreground/60", o = "px-1 text-foreground/40";
+//#endregion
+export { t as PIN_INPUT_BOX_CLASS, r as PIN_INPUT_BOX_DEFAULT_CLASS, a as PIN_INPUT_BOX_DISABLED_CLASS, i as PIN_INPUT_BOX_INVALID_CLASS, e as PIN_INPUT_GROUP_CLASS, o as PIN_INPUT_SEPARATOR_CLASS, n as PIN_INPUT_SIZE_CLASS };

package/dist/components/pricing-card/PricingCard.d.ts

@@ -0,0 +1,87 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ActionConfig } from '../../shared';
+import { PricingCardConfig } from './pricing-card-config';
+/**
+ * One line of a plan's feature list.
+ */
+export interface PricingFeatureItem {
+    /** Stable identifier for the line. Defaults to its position in the list. */
+    id?: string | number;
+    /** What the line says. */
+    label: ReactNode;
+    /**
+     * Whether the plan includes this line.
+     * An excluded line also carries the wording "(not included)" for assistive
+     * technology, so the meaning never depends on the visual treatment alone.
+     *
+     * @default true
+     */
+    included?: boolean;
+}
+type BasePricingCardProps = PricingCardConfig & Omit<HTMLAttributes<HTMLDivElement>, "color" | "title">;
+/**
+ * Props for the PricingCard component.
+ */
+export interface PricingCardProps extends BasePricingCardProps {
+    /** Name of the plan. */
+    name: ReactNode;
+    /** The amount, shown as the card's leading figure. */
+    price: ReactNode;
+    /** Billing period shown beside the amount, for example "/month". */
+    period?: ReactNode;
+    /** One sentence about who the plan is for. */
+    description?: ReactNode;
+    /** Short label above the plan name, for example "Most popular". */
+    badge?: ReactNode;
+    /** The plan's feature lines. */
+    features?: PricingFeatureItem[];
+    /** The emphasised action, typically the plan's signup. */
+    primaryAction?: ActionConfig;
+    /** The supporting action, typically a sales contact. */
+    secondaryAction?: ActionConfig;
+    /** Content below the actions. */
+    children?: ReactNode;
+}
+/**
+ * One plan in a pricing table.
+ *
+ * The amount is a required prop and renders as text rather than being parsed as
+ * a number, so a plan can say "Free", "$12" or "Custom" without the framework
+ * pretending to understand currency. A recommended plan is marked visually and
+ * carries the reason in its `badge`, so the recommendation is never communicated
+ * by colour alone.
+ *
+ * @param props - PricingCard configuration options and element attributes.
+ * @param props.name - Name of the plan.
+ * @param props.price - The amount.
+ * @param props.period - Billing period shown beside the amount.
+ * @param props.description - One sentence about the plan.
+ * @param props.badge - Short label above the plan name.
+ * @param props.features - The plan's feature lines.
+ * @param props.primaryAction - The emphasised action.
+ * @param props.secondaryAction - The supporting action.
+ * @param props.variant - Surface treatment. Defaults to "bordered".
+ * @param props.size - Card density. Defaults to "lg".
+ * @param props.highlighted - Mark the plan as recommended. Defaults to false.
+ *
+ * @returns The rendered card.
+ *
+ * @example
+ * ```tsx
+ * <PricingCard
+ *   badge="Most popular"
+ *   name="Growth"
+ *   price="$29"
+ *   period="/month"
+ *   highlighted
+ *   features={[{ label: "10,000 messages" }]}
+ *   primaryAction={{ label: "Choose Growth", href: "/signup" }}
+ * />
+ * ```
+ *
+ * @see Grid - Places several plans in a table.
+ * @see Card - The surface the plan renders in.
+ */
+export declare const PricingCard: import('react').ForwardRefExoticComponent<PricingCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=PricingCard.d.ts.map