asheeui 1.0.0 → 1.1.0

package/dist/components/page/Page.d.ts

@@ -0,0 +1,166 @@
+import { ElementType, HTMLAttributes } from 'react';
+import { Space } from '../../shared';
+import { PageConfig } from './page-config';
+type BasePageProps = PageConfig & Omit<HTMLAttributes<HTMLElement>, "color">;
+/**
+ * Props for the Page component.
+ */
+export interface PageProps extends BasePageProps {
+    /**
+     * Element to render.
+     * Defaults to a `div`. A page whose shell is the document body may render
+     * `main` here, but a `main` element is usually `PageContent`.
+     *
+     * @default "div"
+     */
+    as?: ElementType;
+}
+/**
+ * The application-page shell.
+ *
+ * Page is a full-height column that applies the theme background to everything
+ * inside it. It adds no width, no gutter and no rhythm of its own: those belong
+ * to `Container`, `PageContent` and `Section`.
+ *
+ * @param props - Page configuration options and element attributes.
+ * @param props.as - Element to render. Defaults to "div".
+ * @returns The rendered page shell.
+ *
+ * @example
+ * ```tsx
+ * <Page>
+ *   <PageHeader>Invoices</PageHeader>
+ *   <PageContent>...</PageContent>
+ *   <PageFooter>Ashee Softworks</PageFooter>
+ * </Page>
+ * ```
+ *
+ * @see SidebarLayout - A shell that adds a persistent navigation column.
+ */
+export declare const Page: import('react').ForwardRefExoticComponent<PageProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the PageHeader component.
+ */
+export interface PageHeaderProps extends BasePageProps {
+    /**
+     * Element to render.
+     * Defaults to `header`.
+     *
+     * @default "header"
+     */
+    as?: ElementType;
+    /**
+     * Whether the header sticks to the top of the viewport while the content
+     * scrolls. Resolved through the standard cascade, so an application can turn
+     * it off for every page in configuration.
+     *
+     * @default true
+     */
+    sticky?: boolean;
+}
+/**
+ * The bar at the top of a page.
+ *
+ * PageHeader keeps a page title, a breadcrumb, a search field or a set of
+ * actions visible while the content scrolls. It is a `header` landmark by
+ * default and is contained by default, so a consumer adds the content and gets
+ * the framework's width and gutter.
+ *
+ * @param props - Page configuration options and element attributes.
+ * @param props.sticky - Stick to the top while scrolling. Defaults to true.
+ * @param props.contained - Wrap the content in a Container. Defaults to true.
+ * @param props.containerSize - Container width when contained. Defaults to "lg".
+ * @param props.divider - Draw a separator below the header. Defaults to true.
+ * @param props.as - Element to render. Defaults to "header".
+ * @returns The rendered header.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader sticky>
+ *   <Typography role="heading-md">Invoices</Typography>
+ *   <Button size="sm">New invoice</Button>
+ * </PageHeader>
+ * ```
+ */
+export declare const PageHeader: import('react').ForwardRefExoticComponent<PageHeaderProps & import('react').RefAttributes<HTMLElement>>;
+/**
+ * Props for the PageContent component.
+ */
+export interface PageContentProps extends BasePageProps {
+    /**
+     * Element to render.
+     * Defaults to `main`, which is the landmark assistive technology jumps to
+     * when a reader skips the navigation.
+     *
+     * @default "main"
+     */
+    as?: ElementType;
+    /**
+     * Vertical rhythm of the content area.
+     * Resolved through the standard cascade: prop, then
+     * `components.page.spacing`, then the framework fallback.
+     *
+     * @default "md"
+     */
+    spacing?: Space;
+}
+/**
+ * The area that fills the space between the header and the footer.
+ *
+ * PageContent is the `main` landmark of the document and is contained by
+ * default, so an application page gets the framework's maximum width and gutter
+ * without any extra markup.
+ *
+ * @param props - Page configuration options and element attributes.
+ * @param props.spacing - Vertical padding. Defaults to "md".
+ * @param props.contained - Wrap the content in a Container. Defaults to true.
+ * @param props.containerSize - Container width when contained. Defaults to "lg".
+ * @param props.as - Element to render. Defaults to "main".
+ * @returns The rendered content area.
+ *
+ * @example
+ * ```tsx
+ * <PageContent spacing="lg">
+ *   <Grid columns={1} columnsLg={3} gap="lg">...</Grid>
+ * </PageContent>
+ * ```
+ */
+export declare const PageContent: import('react').ForwardRefExoticComponent<PageContentProps & import('react').RefAttributes<HTMLElement>>;
+/**
+ * Props for the PageFooter component.
+ */
+export interface PageFooterProps extends BasePageProps {
+    /**
+     * Element to render.
+     * Defaults to `footer`.
+     *
+     * @default "footer"
+     */
+    as?: ElementType;
+}
+/**
+ * The bar at the bottom of an application page.
+ *
+ * PageFooter is the application counterpart of the marketing {@link Footer}. It
+ * carries a short legal line, a build identifier or a status summary rather than
+ * navigation groups, and it is the last element of a page shell.
+ *
+ * @param props - Page configuration options and element attributes.
+ * @param props.contained - Wrap the content in a Container. Defaults to true.
+ * @param props.containerSize - Container width when contained. Defaults to "lg".
+ * @param props.divider - Draw a separator above the footer. Defaults to true.
+ * @param props.as - Element to render. Defaults to "footer".
+ * @returns The rendered footer.
+ *
+ * @example
+ * ```tsx
+ * <PageFooter>
+ *   <Typography role="caption" tone="muted">Version 1.1.0</Typography>
+ * </PageFooter>
+ * ```
+ *
+ * @see Footer - The marketing footer, with navigation groups and social links.
+ */
+export declare const PageFooter: import('react').ForwardRefExoticComponent<PageFooterProps & import('react').RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Page.d.ts.map

package/dist/components/page/Page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/components/page/Page.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,EAAE,KAAK,WAAW,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,cAAc,CAAC;AAKjE,OAAO,EAAwB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAatE,KAAK,aAAa,GAAG,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;AAiD7E;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI,sGAUhB,CAAC;AAIF;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,UAAU,yGAsCtB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,0GA8BvB,CAAC;AAIF;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,yGA4BtB,CAAC"}

package/dist/components/page/Page.js

@@ -0,0 +1,90 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { SPACE_PADDING_Y_CLASS as t } from "../../shared/spacing.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { resolveCascade as r } from "../../utils/resolve-token.js";
+import { Container as i } from "../container/Container.js";
+import { FALLBACK_PAGE_CONFIG as a } from "./page-config.js";
+import { PAGE_CLASS as o, PAGE_CONTENT_CLASS as s, PAGE_FOOTER_CLASS as c, PAGE_FOOTER_INNER_CLASS as l, PAGE_HEADER_CLASS as u, PAGE_HEADER_INNER_CLASS as d } from "./page-styles.js";
+import { forwardRef as f } from "react";
+import { jsx as p } from "react/jsx-runtime";
+//#region src/components/page/Page.tsx
+function m(e) {
+	let t = n().components?.page;
+	return {
+		contained: r(e.contained, t?.contained, void 0, a.contained),
+		containerSize: r(e.containerSize, t?.containerSize, void 0, a.containerSize),
+		spacing: r(e.spacing, t?.spacing, void 0, a.spacing),
+		sticky: r(e.sticky, t?.sticky, void 0, a.sticky),
+		divider: r(e.divider, t?.divider, void 0, a.divider)
+	};
+}
+var h = f(({ as: t, className: n, children: r, ...i }, a) => /* @__PURE__ */ p(t ?? "div", {
+	ref: a,
+	className: e(o, n),
+	...i,
+	children: r
+}));
+h.displayName = "Page";
+var g = f(({ as: t, sticky: n, contained: r, containerSize: a, divider: o, className: s, children: c, ...l }, f) => {
+	let h = m({
+		sticky: n,
+		contained: r,
+		containerSize: a,
+		divider: o
+	}), g = t ?? "header", _ = /* @__PURE__ */ p("div", {
+		className: d,
+		children: c
+	});
+	return /* @__PURE__ */ p(g, {
+		ref: f,
+		className: e(u, h.sticky && "sticky top-0 z-10", h.divider && "border-b border-border", s),
+		...l,
+		children: h.contained ? /* @__PURE__ */ p(i, {
+			size: h.containerSize,
+			children: _
+		}) : _
+	});
+}), _ = f(({ as: n, contained: r, containerSize: a, spacing: o, className: c, children: l, ...u }, d) => {
+	let f = m({
+		contained: r,
+		containerSize: a,
+		spacing: o
+	}), h = n ?? "main", g = /* @__PURE__ */ p("div", {
+		className: e(t[f.spacing], "flex w-full flex-col", c),
+		children: l
+	});
+	return /* @__PURE__ */ p(h, {
+		ref: d,
+		className: s,
+		...u,
+		children: f.contained ? /* @__PURE__ */ p(i, {
+			size: f.containerSize,
+			children: g
+		}) : g
+	});
+});
+_.displayName = "PageContent";
+var v = f(({ as: t, contained: n, containerSize: r, divider: a, className: o, children: s, ...u }, d) => {
+	let f = m({
+		contained: n,
+		containerSize: r,
+		divider: a
+	}), h = t ?? "footer", g = /* @__PURE__ */ p("div", {
+		className: l,
+		children: s
+	});
+	return /* @__PURE__ */ p(h, {
+		ref: d,
+		className: e(c, f.divider && "border-t border-border", o),
+		...u,
+		children: f.contained ? /* @__PURE__ */ p(i, {
+			size: f.containerSize,
+			children: g
+		}) : g
+	});
+});
+v.displayName = "PageFooter", g.displayName = "PageHeader";
+//#endregion
+export { h as Page, _ as PageContent, v as PageFooter, g as PageHeader };

package/dist/components/page/index.d.ts

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

package/dist/components/page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/dist/components/page/index.js

@@ -0,0 +1,3 @@
+export * from "./Page.js";
+export * from "./page-config.js";
+export * from "./page-styles.js";

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"}