asheeui 0.7.0 → 1.0.0

package/dist/components/multi-select/MultiSelect.js

@@ -1,15 +1,15 @@
 "use client";
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { ChevronDownIcon as n } from "../../icons/ChevronDownIcon.js";
-import { RADIUS_CLASS as ee } from "../../shared/radius.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { ChevronDownIcon as ee } from "../../icons/ChevronDownIcon.js";
 import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
-import { FieldShell as te } from "../field/FieldShell.js";
-import { Button as ne } from "../button/Button.js";
-import { SelectMenu as o } from "../select-menu/SelectMenu.js";
-import { useSelectFloating as s } from "../select-menu/use-select-floating.js";
-import { CloseIcon as re } from "../../icons/CloseIcon.js";
+import { CloseIcon as te } from "../../icons/CloseIcon.js";
+import { FieldShell as ne } from "../field/FieldShell.js";
+import { Button as o } from "../button/Button.js";
+import { Menu as s } from "../menu/Menu.js";
+import { useMenuFloating as re } from "../menu/use-menu-floating.js";
 import { Chip as ie } from "../chip/Chip.js";
 import { FALLBACK_MULTI_SELECT_CONFIG as c } from "./multi-select-config.js";
 import { MULTI_SELECT_FONT_CLASS as ae, MULTI_SELECT_HEIGHT_CLASS as oe, MULTI_SELECT_PADDING_CLASS as se, STATUS_BORDER_CLASS as ce } from "./multi-select-styles.js";
@@ -17,127 +17,140 @@ import { forwardRef as l, useCallback as u, useId as d, useMemo as f, useState a
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useClick as le, useDismiss as ue, useInteractions as de, useRole as fe } from "@floating-ui/react";
 //#region src/components/multi-select/MultiSelect.tsx
-var _ = l(({ options: l = [], value: _, onChange: v, InputLabel: y = "Select Options...", isSearch: pe = !0, searchPlaceholder: me = "Search...", searchInputName: he = "multiselect-search", belowList: ge, chipOptions: b, handleRemoveChip: x, handleAddChip: S, chipLabel: C, disableChipDisplay: w = !1, variant: T, color: E, size: D, radius: O, status: k, label: A, labelAlign: j, description: M, message: N, required: P, isLoading: F, disabled: I, containerClassName: L, id: _e, className: ve, menu: ye, chip: R, style: be, startContent: xe, endContent: Se }, z) => {
-	let B = t(), V = B.components?.multiSelect, Ce = d(), H = _e ?? Ce, [U, we] = p(!1), [Te, Ee] = p(""), W = r(D, V?.size, void 0, c.size), De = r(T, V?.variant, B.defaultVariant, c.variant), G = r(E, V?.color, B.defaultColor, c.color), K = a(O, V?.radius, B.defaultRadius, c.radius), Oe = R?.className, ke = r(R?.color, V?.chip?.color, G, c.chip.color), Ae = r(R?.size, V?.chip?.size, void 0, c.chip.size), je = a(R?.radius, V?.chip?.radius, K, c.chip.radius), q = k ?? c.status, Me = q === "error" ? "danger" : q === "success" ? "success" : q === "warning" ? "warning" : G, Ne = r(j, V?.labelAlign, void 0, c.labelAlign), Pe = i(W, oe, c.size), Fe = i(W, se, c.size), Ie = i(W, ae, c.size), Le = i(je, ee, c.chip.radius), { refs: J, context: Y, isPositioned: X, floatingStyles: Re } = s({
-		isOpen: U,
-		onOpenChange: we,
-		disabled: I
-	}), ze = le(Y, { enabled: !I }), Be = ue(Y), Ve = fe(Y, { role: "listbox" }), { getReferenceProps: He, getFloatingProps: Ue } = de([
-		ze,
-		Be,
-		Ve
-	]), Z = f(() => b === void 0 ? Array.isArray(_) ? l.filter((e) => _.includes(e.value)) : [] : b, [
+var _ = l(({ options: l = [], value: _, onChange: v, InputLabel: y = "Dropmenu Options...", isSearch: pe = !0, searchPlaceholder: me = "Search...", searchInputName: he = "multiselect-search", belowList: ge, chipOptions: b, handleRemoveChip: x, handleAddChip: S, chipLabel: C, disableChipDisplay: _e = !1, variant: ve, color: ye, size: be, radius: xe, status: Se, label: w, labelAlign: T, description: E, message: D, required: O, isLoading: k, disabled: A, containerClassName: j, id: Ce, className: we, menu: Te, chip: M, style: Ee, startContent: De, endContent: Oe }, N) => {
+	let P = n(), F = P.components?.multiSelect, ke = d(), I = Ce ?? ke, [L, R] = p(!1), [Ae, je] = p(""), [Me, z] = p([]), B = _ !== void 0, V = _ ?? Me, H = r(be, F?.size, void 0, c.size), Ne = r(ve, F?.variant, P.defaultVariant, c.variant), U = r(ye, F?.color, P.defaultColor, c.color), W = a(xe, F?.radius, P.defaultRadius, c.radius), Pe = M?.className, Fe = r(M?.color, F?.chip?.color, U, c.chip.color), Ie = r(M?.size, F?.chip?.size, void 0, c.chip.size), Le = a(M?.radius, F?.chip?.radius, W, c.chip.radius), G = Se ?? c.status, Re = G === "error" ? "danger" : G === "success" ? "success" : G === "warning" ? "warning" : U, ze = r(T, F?.labelAlign, void 0, c.labelAlign), Be = i(H, oe, c.size), Ve = i(H, se, c.size), He = i(H, ae, c.size), Ue = i(Le, t, c.chip.radius), { refs: K, context: q, isPositioned: We, floatingStyles: Ge } = re({
+		isOpen: L,
+		onOpenChange: R,
+		disabled: A
+	}), Ke = le(q, { enabled: !A }), qe = ue(q), Je = fe(q, { role: "listbox" }), { getReferenceProps: Ye, getFloatingProps: J } = de([
+		Ke,
+		qe,
+		Je
+	]), Y = f(() => b === void 0 ? l.filter((e) => V.includes(e.value)) : b, [
 		b,
-		_,
+		V,
 		l
-	]), Q = u((e) => Z.some((t) => t.value === e), [Z]), We = u((e) => {
-		let t = Q(e.value);
-		if (S || x) t ? x?.(e.value) : S?.(e);
-		else if (v) {
-			let n = _ ?? [];
-			v(t ? n.filter((t) => t !== e.value) : [...n, e.value]);
+	]), X = u((e) => Y.some((t) => t.value === e), [Y]), Xe = u((e) => {
+		let t = X(e.value);
+		if (S || x) {
+			t ? x?.(e.value) : S?.(e);
+			return;
 		}
+		let n = t ? V.filter((t) => t !== e.value) : [...V, e.value];
+		B || z(n), v?.(n);
 	}, [
-		Q,
+		X,
 		S,
 		x,
+		B,
 		v,
-		_
-	]), $ = u((e) => {
-		x ? x(e) : v && Array.isArray(_) && v(_.filter((t) => t !== e));
+		V
+	]), Z = u((e) => {
+		if (x) {
+			x(e);
+			return;
+		}
+		let t = V.filter((t) => t !== e);
+		B || z(t), v?.(t);
 	}, [
 		x,
+		B,
 		v,
-		_
-	]), Ge = f(() => Z.map((e) => e.value), [Z]), Ke = f(() => Z.length > 0 ? `${Z.length} selected` : y, [Z.length, y]), qe = He();
-	return /* @__PURE__ */ h(te, {
-		id: H,
-		label: A,
-		labelAlign: Ne,
-		description: M,
-		descriptionId: M ? `${H}-description` : void 0,
-		message: N,
-		messageId: N ? `${H}-message` : void 0,
-		status: q,
-		required: P,
-		isLoading: F,
+		V
+	]), Ze = f(() => Y.map((e) => e.value), [Y]), Qe = f(() => Y.length > 0 ? `${Y.length} selected` : y, [Y.length, y]), Q = E ? `${I}-description` : void 0, $ = D ? `${I}-message` : void 0, $e = [Q, $].filter(Boolean).join(" ") || void 0, et = Ye({ onKeyDown: u((e) => {
+		A || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), R(!0));
+	}, [A]) });
+	return /* @__PURE__ */ h(ne, {
+		id: I,
+		label: w,
+		labelAlign: ze,
+		description: E,
+		descriptionId: Q,
+		message: D,
+		messageId: $,
+		status: G,
+		required: O,
+		isLoading: k,
 		children: /* @__PURE__ */ g("div", {
-			className: e("w-full flex flex-col gap-3", L),
-			style: be,
+			className: e("w-full flex flex-col gap-3", j),
+			style: Ee,
 			children: [/* @__PURE__ */ g("div", {
 				className: "relative w-full",
-				children: [/* @__PURE__ */ h(ne, {
+				children: [/* @__PURE__ */ h(o, {
 					ref: (e) => {
-						J.setReference(e), typeof z == "function" ? z(e) : z && (z.current = e);
+						K.setReference(e), typeof N == "function" ? N(e) : N && (N.current = e);
 					},
 					type: "button",
-					variant: De,
-					color: Me,
-					size: W,
-					radius: K,
-					isDisabled: I,
-					isLoading: F,
+					id: I,
+					variant: Ne,
+					color: Re,
+					size: H,
+					radius: W,
+					isDisabled: A,
+					isLoading: k,
 					fullWidth: !0,
 					animate: !1,
-					"aria-expanded": U,
+					"aria-expanded": L,
 					"aria-haspopup": "listbox",
-					"aria-invalid": q === "error",
-					"aria-describedby": [M ? `${H}-description` : void 0].filter(Boolean).join(" ") || void 0,
-					className: e("font-normal text-left justify-between", ce[q], Pe, Fe, Ie, ve),
-					startContent: xe,
-					endContent: /* @__PURE__ */ g(m, { children: [Se, /* @__PURE__ */ h(n, { className: e("shrink-0 text-foreground/70 transition-transform duration-200", U && "rotate-180") })] }),
-					...qe,
+					"aria-invalid": G === "error",
+					"aria-describedby": $e,
+					className: e("font-normal text-left justify-between", ce[G], Be, Ve, He, we),
+					startContent: De,
+					endContent: /* @__PURE__ */ g(m, { children: [Oe, /* @__PURE__ */ h(ee, { className: e("shrink-0 text-foreground/70 transition-transform duration-200", L && "rotate-180") })] }),
+					...et,
 					children: /* @__PURE__ */ h("span", {
-						className: e("truncate", Z.length > 0 ? "text-foreground" : "text-foreground/70"),
-						children: Ke
+						className: e("truncate", Y.length > 0 ? "text-foreground" : "text-foreground/70"),
+						children: Qe
 					})
-				}), /* @__PURE__ */ h(o, {
-					isOpen: U,
-					floatingStyles: Re,
-					context: Y,
-					getFloatingProps: Ue,
-					setFloatingRef: J.setFloating,
-					isPositioned: X,
+				}), /* @__PURE__ */ h(s, {
+					isOpen: L,
+					floatingStyles: Ge,
+					context: q,
+					getFloatingProps: J,
+					setFloatingRef: K.setFloating,
+					isPositioned: We,
+					isMultiSelectable: !0,
+					returnFocus: !0,
 					options: l,
-					selectedValues: Ge,
-					onSelectMenuOption: We,
+					selectedValues: Ze,
+					onOptionSelect: Xe,
 					isSearch: pe,
 					searchPlaceholder: me,
 					searchInputName: he,
-					searchQuery: Te,
-					onSearchChange: Ee,
+					searchQuery: Ae,
+					onSearchChange: je,
 					belowList: ge,
-					menuProps: ye,
-					menuConfig: V?.menu
+					menuProps: Te,
+					menuConfig: F?.menu
 				})]
-			}), !w && /* @__PURE__ */ g("div", {
+			}), !_e && /* @__PURE__ */ g("div", {
 				className: "flex flex-col gap-1.5",
 				children: [C && /* @__PURE__ */ h("span", {
 					className: "text-xs font-medium text-foreground/70",
 					children: C
 				}), /* @__PURE__ */ h("div", {
 					className: "flex flex-wrap gap-1.5 p-2 min-h-12 bg-secondary/20 border border-dashed border-border rounded-lg items-center",
-					children: Z.length === 0 ? /* @__PURE__ */ h("span", {
+					children: Y.length === 0 ? /* @__PURE__ */ h("span", {
 						className: "text-xs text-foreground/70 px-2 py-1",
 						children: "No selections made"
-					}) : Z.map((t) => /* @__PURE__ */ g(ie, {
+					}) : Y.map((t) => /* @__PURE__ */ g(ie, {
 						variant: "bordered",
-						color: ke,
-						size: Ae,
-						isDisabled: I,
-						className: e("inline-flex items-center gap-1.5 font-medium shadow-xs", Le, Oe),
+						color: Fe,
+						size: Ie,
+						isDisabled: A,
+						className: e("inline-flex items-center gap-1.5 font-medium shadow-xs", Ue, Pe),
 						children: [/* @__PURE__ */ h("span", { children: t.label }), /* @__PURE__ */ h("button", {
 							type: "button",
-							tabIndex: I ? -1 : 0,
+							tabIndex: A ? -1 : 0,
 							onClick: (e) => {
-								e.stopPropagation(), I || $(t.value);
+								e.stopPropagation(), A || Z(t.value);
 							},
 							onKeyDown: (e) => {
-								(e.key === "Enter" || e.key === " ") && !I && (e.stopPropagation(), $(t.value));
+								(e.key === "Enter" || e.key === " ") && !A && (e.stopPropagation(), Z(t.value));
 							},
 							"aria-label": `Remove ${t.label}`,
-							className: "inline-flex items-center justify-center h-3.5 w-3.5 rounded-full hover:bg-black/20 dark:hover:bg-white/20 transition-colors cursor-pointer shrink-0",
-							children: /* @__PURE__ */ h(re, { className: "w-3 h-3" })
+							className: "inline-flex items-center justify-center h-3.5 w-3.5 rounded-full hover:bg-foreground/20 transition-colors cursor-pointer shrink-0",
+							children: /* @__PURE__ */ h(te, { className: "w-3 h-3" })
 						})]
 					}, String(t.value)))
 				})]

package/dist/components/multi-select/multi-select-config.d.ts

@@ -1,6 +1,6 @@
 import { Color, Radius, Size, Variant } from '../../shared';
 import { InputConfig } from '../input';
-import { MenuConfig } from '../select-menu';
+import { MenuConfig } from '../menu';
 /**
  * Configuration for selected value chips.
  * Controls the appearance of chips in the selected values section.

package/dist/components/multi-select/multi-select-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-config.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAKtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;CAQ/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}
+{"version":3,"file":"multi-select-config.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAKtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;CAQ/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,91 @@
+import { HTMLAttributes } from 'react';
+import { PaginationConfig } from './pagination-config';
+type BasePaginationProps = PaginationConfig & Omit<HTMLAttributes<HTMLElement>, "color" | "onChange">;
+/**
+ * Configuration options for the Pagination component.
+ */
+export interface PaginationProps extends BasePaginationProps {
+    /**
+     * The current page, counted from one.
+     */
+    page: number;
+    /**
+     * How many pages the collection has.
+     */
+    pageCount: number;
+    /**
+     * Called with the page the consumer chose.
+     * It is not called when the chosen page is already the current page.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Builds the destination of a page.
+     *
+     * Supplying it renders every control as a link rather than as a button,
+     * which is what a paginated collection with real addresses wants. Without
+     * it the controls are buttons that report the chosen page through
+     * `onPageChange`.
+     */
+    hrefForPage?: (page: number) => string;
+    /**
+     * Name of the navigation landmark.
+     *
+     * @default "Pagination"
+     */
+    label?: string;
+    /**
+     * Whether the controls are unavailable, for example while a page loads.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+}
+/**
+ * A set of controls for moving through a paged collection.
+ *
+ * Pagination shows the current page, a range of pages around it, and the
+ * controls that move between them. The first and last pages are always
+ * offered, a longer range becomes an ellipsis, and the current page carries
+ * `aria-current="page"` so assistive technology can announce where the reader
+ * is in the collection.
+ *
+ * The controls are links when the consumer supplies `hrefForPage`, which is
+ * what a collection with real addresses wants, and buttons that report the
+ * chosen page through `onPageChange` otherwise. The current page is never
+ * reported as a change, because it is already where the reader is.
+ *
+ * Size, variant, colour and radius resolve through the standard AsheeUI
+ * cascade: prop, component config, global theme defaults, and the built-in
+ * fallback.
+ *
+ * @param props - Pagination configuration options and navigation attributes.
+ * @param props.page - The current page, counted from one.
+ * @param props.pageCount - How many pages the collection has.
+ * @param props.onPageChange - Called with the page the consumer chose.
+ * @param props.hrefForPage - Builds a page's destination, which renders links.
+ * @param props.label - Name of the navigation landmark. Defaults to "Pagination".
+ * @param props.siblingCount - Pages shown each side of the current page. Defaults to 1.
+ * @param props.showEdges - Whether first and last page controls are shown. Defaults to false.
+ * @param props.isDisabled - Whether the controls are unavailable. Defaults to false.
+ * @param props.size - Size of the controls. Defaults to "md".
+ * @param props.variant - Visual style of the controls. Defaults to the configured value.
+ * @param props.color - Accent colour of the controls. Defaults to the configured value.
+ * @param props.radius - Corner rounding of the controls. Defaults to "md".
+ * @param props.className - Extra classes applied last.
+ *
+ * @example
+ * ```tsx
+ * <Pagination page={3} pageCount={42} onPageChange={setPage} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Real addresses, so every control is a link.
+ * <Pagination page={3} pageCount={42} hrefForPage={(page) => `/invoices?page=${page}`} />
+ * ```
+ *
+ * @see PaginationConfig - The configuration type for component defaults.
+ */
+export declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,66 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { resolveVariantClass as n } from "../../shared/variant.js";
+import { useAsheeConfig as r } from "../../libs/context.js";
+import { resolveCascade as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
+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 { 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) => {
+		e === B || e < 1 || e > v || y?.(e);
+	}, U = (r, i, a, s = !1) => {
+		let l = r < 1 || r > v;
+		return b ? /* @__PURE__ */ g(c, {
+			href: b(r),
+			"aria-label": i,
+			"aria-current": s ? "page" : void 0,
+			"aria-disabled": O || l ? !0 : void 0,
+			className: e("inline-flex items-center justify-center min-w-8 h-8 px-2", t[L], n(F, I), (O || l) && "opacity-50 pointer-events-none cursor-not-allowed"),
+			children: a
+		}) : /* @__PURE__ */ g(o, {
+			type: "button",
+			size: P,
+			variant: F,
+			color: I,
+			radius: L,
+			"aria-label": i,
+			"aria-current": s ? "page" : void 0,
+			isDisabled: O || l,
+			onClick: () => H(r),
+			children: a
+		});
+	}, W = m(B, v, R);
+	return /* @__PURE__ */ g("nav", {
+		ref: j,
+		"aria-label": x,
+		className: e(d, k),
+		...A,
+		children: /* @__PURE__ */ _("ul", {
+			className: p,
+			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,
+					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" })) }),
+				z && /* @__PURE__ */ g("li", { children: U(V, "Last page", /* @__PURE__ */ g(s, { "aria-hidden": "true" })) })
+			]
+		})
+	});
+});
+v.displayName = "Pagination";
+//#endregion
+export { v as Pagination };

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

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

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

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

package/dist/components/pagination/index.js

@@ -0,0 +1,4 @@
+export * from "./Pagination.js";
+export * from "./pagination-config.js";
+export * from "./pagination-styles.js";
+export * from "./pagination.helpers.js";

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

@@ -0,0 +1,66 @@
+import { Color, Radius, Size, Variant } from '../../shared';
+/**
+ * Theme configuration options for the Pagination component.
+ *
+ * Set under `components.pagination` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface PaginationConfig {
+    /**
+     * Size of the page controls.
+     *
+     * @default "md"
+     */
+    size?: Size;
+    /**
+     * Visual style variant of the page controls.
+     *
+     * @default "bordered"
+     */
+    variant?: Variant;
+    /**
+     * Theme accent colour of the page controls.
+     *
+     * @default "primary"
+     */
+    color?: Color;
+    /**
+     * Corner rounding of the page controls.
+     *
+     * @default "md"
+     */
+    radius?: Radius;
+    /**
+     * How many pages to show on each side of the current page.
+     * A wider range shows more of the collection at once; a narrower range keeps
+     * the trail short.
+     *
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Whether the trail offers controls for the first and last page.
+     *
+     * @default false
+     */
+    showEdges?: boolean;
+}
+/**
+ * Default config values registered for the Pagination component.
+ *
+ * `variant` and `color` are intentionally absent so they inherit from the
+ * global `defaultVariant` and `defaultColor`.
+ */
+export declare const defaultPaginationConfig: PaginationConfig;
+/**
+ * Hard fallback values used when no config tier provides a value.
+ * These values are used when instance props, component config,
+ * and global defaults are all undefined.
+ */
+export declare const FALLBACK_PAGINATION_CONFIG: Required<PaginationConfig>;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        pagination: PaginationConfig;
+    }
+}
+//# sourceMappingURL=pagination-config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-config.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,gBAKrC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,gBAAgB,CAOxD,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}

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

@@ -0,0 +1,19 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/pagination/pagination-config.ts
+var t = {
+	size: "md",
+	radius: "md",
+	siblingCount: 1,
+	showEdges: !1
+}, n = {
+	size: "md",
+	variant: "bordered",
+	color: "primary",
+	radius: "md",
+	siblingCount: 1,
+	showEdges: !1
+};
+e("pagination", t);
+//#endregion
+export { n as FALLBACK_PAGINATION_CONFIG, t as defaultPaginationConfig };

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

@@ -0,0 +1,19 @@
+/**
+ * Pagination component styles for AsheeUI.
+ * This file provides the static classes the Pagination component is built
+ * from.
+ */
+/**
+ * Base classes for the navigation landmark.
+ */
+export declare const PAGINATION_BASE_CLASS = "w-full";
+/**
+ * Classes for the ordered list that holds the page controls.
+ */
+export declare const PAGINATION_LIST_CLASS = "flex items-center flex-wrap list-none p-0 m-0 gap-1";
+/**
+ * Classes for a gap in the page range.
+ * A gap conveys nothing on its own, so it is not focusable and not announced.
+ */
+export declare const PAGINATION_GAP_CLASS = "inline-flex items-center justify-center min-w-7 px-1 select-none text-foreground/60";
+//# sourceMappingURL=pagination-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-styles.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB,WAAW,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,qBAAqB,wDACqB,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,wFACsD,CAAC"}

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

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/pagination/pagination-styles.ts
+var e = "w-full", t = "flex items-center flex-wrap list-none p-0 m-0 gap-1", n = "inline-flex items-center justify-center min-w-7 px-1 select-none text-foreground/60";
+//#endregion
+export { e as PAGINATION_BASE_CLASS, n as PAGINATION_GAP_CLASS, t as PAGINATION_LIST_CLASS };

package/dist/components/pagination/pagination.helpers.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Pagination helpers for AsheeUI.
+ * This file provides the pure range calculation the Pagination component is
+ * built on, kept apart from the component so the arithmetic can be reasoned
+ * about and tested on its own.
+ */
+/**
+ * One entry in a pagination range.
+ * An ellipsis stands for the pages a range leaves out.
+ */
+export type PaginationRangeItem = number | "ellipsis";
+/**
+ * Calculates the page controls a range shows.
+ *
+ * The first and last pages are always offered, the current page is always
+ * shown with `siblingCount` pages on either side of it, and a gap between two
+ * shown pages becomes an ellipsis. A collection short enough to show in full
+ * is shown in full.
+ *
+ * @param page - The current page, counted from one.
+ * @param pageCount - How many pages the collection has.
+ * @param siblingCount - How many pages to show on each side of the current page.
+ * @returns The controls to render, in order.
+ */
+export declare function getPaginationRange(page: number, pageCount: number, siblingCount?: number): PaginationRangeItem[];
+//# sourceMappingURL=pagination.helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.helpers.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,YAAY,SAAI,GACf,mBAAmB,EAAE,CAuBvB"}

package/dist/components/pagination/pagination.helpers.js

@@ -0,0 +1,12 @@
+"use client";
+//#region src/components/pagination/pagination.helpers.ts
+function e(e, t, n = 1) {
+	if (t <= 0) return [];
+	if (t === 1) return [1];
+	let r = Math.min(Math.max(e, 1), t), i = Math.max(n, 0), a = Math.max(r - i, 2), o = Math.min(r + i, t - 1), s = [1];
+	a > 2 && s.push("ellipsis");
+	for (let e = a; e <= o; e += 1) s.push(e);
+	return o < t - 1 && s.push("ellipsis"), s.push(t), s;
+}
+//#endregion
+export { e as getPaginationRange };