@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/number-input.js

@@ -1,96 +1,103 @@
 "use client";
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import * as w from "react";
-import { IconMinus as y, IconPlus as E } from "@tabler/icons-react";
-import { cn as j } from "./lib/utils.js";
-import { useFormField as D } from "./form.js";
-import { Icon as f } from "./icon.js";
-const M = w.forwardRef(
-  ({
-    value: r = 0,
-    onValueChange: n,
-    min: t = Number.MIN_SAFE_INTEGER,
-    max: o = Number.MAX_SAFE_INTEGER,
-    step: i = 1,
-    disabled: c = !1,
-    className: m,
-    "aria-label": b,
-    ...d
-  }, p) => {
-    const u = D(), h = b ?? (d.id || u.helperTextId ? void 0 : "Numeric value"), v = (s) => {
-      const e = s.target.value.trim();
-      if (e === "" || e === "-") {
-        n?.(t >= 0 ? t : 0);
-        return;
-      }
-      const l = Number(e);
-      if (Number.isNaN(l)) return;
-      const I = Math.min(Math.max(l, t), o);
-      n?.(I);
-    }, N = (s) => {
-      s.preventDefault();
-      const e = r + i;
-      e <= o && n?.(e);
-    }, x = (s) => {
-      s.preventDefault();
-      const e = r - i;
-      e >= t && n?.(e);
-    };
-    return /* @__PURE__ */ g(
-      "div",
-      {
-        className: j(
-          "flex items-center justify-between rounded-ds-full border border-surface-border-strong",
-          m
-        ),
-        children: [
-          /* @__PURE__ */ a(
-            "button",
-            {
-              type: "button",
-              onClick: x,
-              disabled: c || r <= t,
-              "aria-label": "Decrease value",
-              title: "Decrease",
-              className: "flex h-ds-sm w-ds-sm items-center justify-center border-0 text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,transform] duration-fast-01 ease-productive-standard",
-              children: /* @__PURE__ */ a(f, { icon: y, size: "sm" })
-            }
-          ),
-          /* @__PURE__ */ a(
-            "input",
-            {
-              ref: p,
-              type: "number",
-              value: r,
-              onChange: v,
-              min: t,
-              max: o,
-              step: i,
-              disabled: c,
-              "aria-label": h,
-              "aria-describedby": d["aria-describedby"] ?? u.helperTextId,
-              className: "bg-transparent text-ds-md font-semibold w-ds-sm-plus border-0 text-center text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-              ...d
-            }
-          ),
-          /* @__PURE__ */ a(
-            "button",
-            {
-              type: "button",
-              onClick: N,
-              disabled: c || r >= o,
-              "aria-label": "Increase value",
-              title: "Increase",
-              className: "flex h-ds-sm w-ds-sm items-center justify-center border-0 text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,transform] duration-fast-01 ease-productive-standard",
-              children: /* @__PURE__ */ a(f, { icon: E, size: "sm" })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-M.displayName = "NumberInput";
-export {
-  M as NumberInput
-};
+import { t as e } from "../_chunks/vendor-utils.js";
+import { cn as t } from "./lib/utils.js";
+import { Icon as n } from "./icon.js";
+import { useFormField as r } from "./form.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { IconMinus as s, IconPlus as c } from "@tabler/icons-react";
+//#region src/ui/number-input.tsx
+var l = e("flex items-center justify-between rounded-ds-md border border-surface-border-strong", {
+	variants: { size: {
+		xs: "h-ds-xs-plus",
+		sm: "h-ds-sm",
+		md: "h-ds-md",
+		lg: "h-ds-lg"
+	} },
+	defaultVariants: { size: "md" }
+}), u = {
+	xs: "h-[22px] w-[22px]",
+	sm: "h-ds-sm w-ds-sm",
+	md: "h-ds-sm w-ds-sm",
+	lg: "h-ds-md w-ds-md"
+}, d = {
+	xs: "xs",
+	sm: "sm",
+	md: "sm",
+	lg: "md"
+}, f = {
+	xs: "text-ds-sm w-[28px]",
+	sm: "text-ds-sm w-ds-sm-plus",
+	md: "text-ds-md w-ds-sm-plus",
+	lg: "text-ds-md w-ds-md"
+}, p = {
+	default: "",
+	error: "border-error-7",
+	warning: "border-warning-7",
+	success: "border-success-7"
+}, m = i.forwardRef(({ value: e = 0, onValueChange: i, min: m = -(2 ** 53 - 1), max: h = 2 ** 53 - 1, step: g = 1, disabled: _ = !1, className: v, size: y = "md", state: b, "aria-label": x, ...S }, C) => {
+	let w = y ?? "md", T = r(), E = x ?? (S.id || T.helperTextId ? void 0 : "Numeric value"), D = b ?? (T.state === "helper" ? "default" : T.state) ?? "default", O = (e) => {
+		let t = e.target.value.trim();
+		if (t === "" || t === "-") {
+			i?.(m >= 0 ? m : 0);
+			return;
+		}
+		let n = Number(t);
+		Number.isNaN(n) || i?.(Math.min(Math.max(n, m), h));
+	}, k = (t) => {
+		t.preventDefault();
+		let n = e + g;
+		n <= h && i?.(n);
+	}, A = (t) => {
+		t.preventDefault();
+		let n = e - g;
+		n >= m && i?.(n);
+	}, j = u[w], M = d[w], N = f[w];
+	return /* @__PURE__ */ o("div", {
+		className: t(l({ size: w }), p[D], v),
+		children: [
+			/* @__PURE__ */ a("button", {
+				type: "button",
+				onClick: A,
+				disabled: _ || e <= m,
+				"aria-label": "Decrease value",
+				title: "Decrease",
+				className: t("flex items-center justify-center border-0 rounded-ds-sm text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none", j),
+				children: /* @__PURE__ */ a(n, {
+					icon: s,
+					size: M
+				})
+			}),
+			/* @__PURE__ */ a("input", {
+				ref: C,
+				type: "number",
+				value: e,
+				onChange: O,
+				min: m,
+				max: h,
+				step: g,
+				disabled: _,
+				"aria-label": E,
+				"aria-invalid": D === "error" || void 0,
+				"aria-describedby": S["aria-describedby"] ?? T.helperTextId,
+				className: t("bg-transparent font-semibold border-0 text-center text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", N),
+				...S
+			}),
+			/* @__PURE__ */ a("button", {
+				type: "button",
+				onClick: k,
+				disabled: _ || e >= h,
+				"aria-label": "Increase value",
+				title: "Increase",
+				className: t("flex items-center justify-center border-0 rounded-ds-sm text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none", j),
+				children: /* @__PURE__ */ a(n, {
+					icon: c,
+					size: M
+				})
+			})
+		]
+	});
+});
+m.displayName = "NumberInput";
+//#endregion
+export { m as NumberInput, l as numberInputWrapperVariants };

package/dist/ui/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.js","names":[],"sources":["../../src/ui/number-input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { IconMinus, IconPlus } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from './lib/utils'\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport type { IconSize } from './icon-context'\n\nexport type NumberInputState = 'default' | 'error' | 'warning' | 'success'\n\nconst numberInputWrapperVariants = cva(\n  'flex items-center justify-between rounded-ds-md border border-surface-border-strong',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus',\n        sm: 'h-ds-sm',\n        md: 'h-ds-md',\n        lg: 'h-ds-lg',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type NumberInputSize = NonNullable<VariantProps<typeof numberInputWrapperVariants>['size']>\n\n/** Maps size to stepper button dimensions */\nconst buttonSizeMap: Record<NonNullable<NumberInputSize>, string> = {\n  xs: 'h-[22px] w-[22px]',\n  sm: 'h-ds-sm w-ds-sm',\n  md: 'h-ds-sm w-ds-sm',\n  lg: 'h-ds-md w-ds-md',\n}\n\n/** Maps size to Icon component size */\nconst iconSizeMap: Record<NonNullable<NumberInputSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps size to input text and width classes */\nconst inputSizeMap: Record<NonNullable<NumberInputSize>, string> = {\n  xs: 'text-ds-sm w-[28px]',\n  sm: 'text-ds-sm w-ds-sm-plus',\n  md: 'text-ds-md w-ds-sm-plus',\n  lg: 'text-ds-md w-ds-md',\n}\n\n/** Maps state to border color classes */\nconst stateColorMap: Record<NonNullable<NumberInputState>, string> = {\n  default: '',\n  error: 'border-error-7',\n  warning: 'border-warning-7',\n  success: 'border-success-7',\n}\n\n/**\n * Props for NumberInput — a stepper control with \"−\" and \"+\" buttons flanking a numeric input,\n * clamped between `min` and `max`. The decrement/increment buttons are disabled when bounds are reached.\n *\n * **Controlled only:** Pass `value` + `onValueChange` for controlled usage. Uncontrolled usage is\n * possible but the buttons won't update the displayed value without `onValueChange`.\n *\n * **Step:** The `step` prop controls how much each button press increments/decrements (default 1).\n * Direct text input is also clamped to `[min, max]` on change.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n *\n * **Validation states:** `state=\"error\"` colors the border red.\n * Use with `<FormField>` to show helper text below the input.\n *\n * @example\n * // Quantity selector with 1–99 range:\n * <NumberInput value={qty} onValueChange={setQty} min={1} max={99} />\n *\n * @example\n * // Rating input (1–10, step 1):\n * <NumberInput value={rating} onValueChange={setRating} min={1} max={10} />\n *\n * @example\n * // Fine-grained opacity control (0–100, step 5):\n * <NumberInput value={opacity} onValueChange={setOpacity} min={0} max={100} step={5} />\n *\n * @example\n * // Disabled number display (read-only-like):\n * <NumberInput value={autoCalcValue} onValueChange={() => {}} disabled />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'size'> {\n  value?: number\n  onValueChange?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  /** Size of the number input. Controls height, button sizes, text size. */\n  size?: NumberInputSize\n  /** Validation state controlling border color. */\n  state?: NumberInputState\n}\n\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value = 0,\n      onValueChange,\n      min = Number.MIN_SAFE_INTEGER,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled = false,\n      className,\n      size: sizeProp = 'md',\n      state: stateProp,\n      'aria-label': ariaLabelProp,\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const fieldCtx = useFormField()\n    // If no explicit aria-label and not inside a FormField (no id to associate with Label),\n    // provide a sensible default\n    const ariaLabel = ariaLabelProp ?? (rest.id || fieldCtx.helperTextId ? undefined : 'Numeric value')\n\n    // Merge FormField context — explicit props always win\n    const state =\n      stateProp ??\n      (fieldCtx.state === 'helper'\n        ? 'default'\n        : (fieldCtx.state as NumberInputState | undefined)) ??\n      'default'\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value.trim()\n      if (raw === '' || raw === '-') {\n        onValueChange?.(min >= 0 ? min : 0)\n        return\n      }\n      const parsed = Number(raw)\n      if (Number.isNaN(parsed)) return\n      const clamped = Math.min(Math.max(parsed, min), max)\n      onValueChange?.(clamped)\n    }\n\n    const handleIncrement = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault() // Prevent form submission\n      const newValue = value + step\n      if (newValue <= max) {\n        onValueChange?.(newValue)\n      }\n    }\n\n    const handleDecrement = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault() // Prevent form submission\n      const newValue = value - step\n      if (newValue >= min) {\n        onValueChange?.(newValue)\n      }\n    }\n\n    const resolvedButtonSize = buttonSizeMap[size]\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedInputSize = inputSizeMap[size]\n\n    return (\n      <div\n        className={cn(\n          numberInputWrapperVariants({ size }),\n          stateColorMap[state],\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          onClick={handleDecrement}\n          disabled={disabled || value <= min}\n          aria-label=\"Decrease value\"\n          title=\"Decrease\"\n          className={cn(\n            'flex items-center justify-center border-0 rounded-ds-sm text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none',\n            resolvedButtonSize,\n          )}\n        >\n          <Icon icon={IconMinus} size={resolvedIconSize} />\n        </button>\n\n        <input\n          ref={ref}\n          type=\"number\"\n          value={value}\n          onChange={handleInputChange}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-invalid={state === 'error' || undefined}\n          aria-describedby={rest['aria-describedby'] ?? fieldCtx.helperTextId}\n          className={cn(\n            'bg-transparent font-semibold border-0 text-center text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n            resolvedInputSize,\n          )}\n          {...rest}\n        />\n\n        <button\n          type=\"button\"\n          onClick={handleIncrement}\n          disabled={disabled || value >= max}\n          aria-label=\"Increase value\"\n          title=\"Increase\"\n          className={cn(\n            'flex items-center justify-center border-0 rounded-ds-sm text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none',\n            resolvedButtonSize,\n          )}\n        >\n          <Icon icon={IconPlus} size={resolvedIconSize} />\n        </button>\n      </div>\n    )\n  },\n)\nNumberInput.displayName = 'NumberInput'\n\nexport { NumberInput, numberInputWrapperVariants }\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAA6B,EACjC,uFACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAKK,IAA8D;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGK,IAA8D;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGK,IAA6D;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGK,IAA+D;CACnE,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACV,EA8CK,IAAc,EAAM,YAEtB,EACE,WAAQ,GACR,kBACA,SAAM,gBACN,sBACA,UAAO,GACP,cAAW,IACX,cACA,MAAM,IAAW,MACjB,OAAO,GACP,cAAc,GACd,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,GAAc,EAGzB,IAAY,MAAkB,EAAK,MAAM,EAAS,eAAe,KAAA,IAAY,kBAG7E,IACJ,MACC,EAAS,UAAU,WAChB,YACC,EAAS,UACd,WAEI,KAAqB,MAA2C;EACpE,IAAM,IAAM,EAAE,OAAO,MAAM,MAAM;AACjC,MAAI,MAAQ,MAAM,MAAQ,KAAK;AAC7B,OAAgB,KAAO,IAAI,IAAM,EAAE;AACnC;;EAEF,IAAM,IAAS,OAAO,EAAI;AACtB,SAAO,MAAM,EAAO,IAExB,IADgB,KAAK,IAAI,KAAK,IAAI,GAAQ,EAAI,EAAE,EAAI,CAC5B;IAGpB,KAAmB,MAA2C;AAClE,IAAE,gBAAgB;EAClB,IAAM,IAAW,IAAQ;AACzB,EAAI,KAAY,KACd,IAAgB,EAAS;IAIvB,KAAmB,MAA2C;AAClE,IAAE,gBAAgB;EAClB,IAAM,IAAW,IAAQ;AACzB,EAAI,KAAY,KACd,IAAgB,EAAS;IAIvB,IAAqB,EAAc,IACnC,IAAmB,EAAY,IAC/B,IAAoB,EAAa;AAEvC,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAA2B,EAAE,SAAM,CAAC,EACpC,EAAc,IACd,EACD;YALH;GAOE,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU,KAAY,KAAS;IAC/B,cAAW;IACX,OAAM;IACN,WAAW,EACT,kTACA,EACD;cAED,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAM;KAAoB,CAAA;IAC1C,CAAA;GAET,kBAAC,SAAD;IACO;IACL,MAAK;IACE;IACP,UAAU;IACL;IACA;IACC;IACI;IACV,cAAY;IACZ,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB,EAAK,uBAAuB,EAAS;IACvD,WAAW,EACT,8QACA,EACD;IACD,GAAI;IACJ,CAAA;GAEF,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU,KAAY,KAAS;IAC/B,cAAW;IACX,OAAM;IACN,WAAW,EACT,kTACA,EACD;cAED,kBAAC,GAAD;KAAM,MAAM;KAAU,MAAM;KAAoB,CAAA;IACzC,CAAA;GACL;;EAGX;AACD,EAAY,cAAc"}

package/dist/ui/pagination.js

@@ -1,161 +1,124 @@
 "use client";
-import { jsx as a, jsxs as h } from "react/jsx-runtime";
-import * as o from "react";
-import { S as I } from "../_chunks/primitives.js";
-import { IconChevronLeft as j, IconChevronRight as k, IconDots as C } from "@tabler/icons-react";
-import { cn as r } from "./lib/utils.js";
-import { Icon as v } from "./icon.js";
-const x = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ a(
-  "nav",
-  {
-    ref: s,
-    role: "navigation",
-    "aria-label": "pagination",
-    className: r("mx-auto flex w-full justify-center", e),
-    ...i
-  }
-));
-x.displayName = "PaginationRoot";
-const y = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ a(
-  "ul",
-  {
-    ref: s,
-    className: r("flex flex-row items-center gap-ds-02", e),
-    ...i
-  }
-));
-y.displayName = "PaginationContent";
-const m = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ a("li", { ref: s, className: r("", e), ...i }));
-m.displayName = "PaginationItem";
-const u = o.forwardRef(
-  ({ className: e, isActive: i = !1, asChild: s = !1, ...c }, t) => /* @__PURE__ */ a(
-    s ? I : "button",
-    {
-      ref: t,
-      "aria-current": i ? "page" : void 0,
-      className: r(
-        "inline-flex items-center justify-center h-ds-sm-plus w-ds-sm-plus rounded-ds-md text-ds-md font-medium tabular-nums transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled active:scale-95",
-        i ? "bg-accent-9 text-accent-fg" : "hover:bg-surface-raised-hover text-surface-fg",
-        e
-      ),
-      ...c
-    }
-  )
-);
-u.displayName = "PaginationLink";
-const P = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ h(
-  u,
-  {
-    ref: s,
-    "aria-label": "Go to previous page",
-    className: r("w-auto gap-ds-02 pl-ds-03 pr-ds-04", e),
-    ...i,
-    children: [
-      /* @__PURE__ */ a(v, { icon: j, size: "sm" }),
-      /* @__PURE__ */ a("span", { children: "Previous" })
-    ]
-  }
-));
-P.displayName = "PaginationPrevious";
-const w = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ h(
-  u,
-  {
-    ref: s,
-    "aria-label": "Go to next page",
-    className: r("w-auto gap-ds-02 pl-ds-04 pr-ds-03", e),
-    ...i,
-    children: [
-      /* @__PURE__ */ a("span", { children: "Next" }),
-      /* @__PURE__ */ a(v, { icon: k, size: "sm" })
-    ]
-  }
-));
-w.displayName = "PaginationNext";
-const b = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ h(
-  "span",
-  {
-    ref: s,
-    "aria-hidden": "true",
-    className: r(
-      "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center text-surface-fg-muted",
-      e
-    ),
-    ...i,
-    children: [
-      /* @__PURE__ */ a(v, { icon: C, size: "sm" }),
-      /* @__PURE__ */ a("span", { className: "sr-only", children: "More pages" })
-    ]
-  }
-));
-b.displayName = "PaginationEllipsis";
-function M(e, i, s) {
-  const c = s * 2 + 5;
-  if (i <= c)
-    return Array.from({ length: i }, (n, f) => f + 1);
-  const t = Math.max(e - s, 1), d = Math.min(e + s, i), p = t > 2, g = d < i - 1;
-  if (!p && g) {
-    const n = s * 2 + 3;
-    return [...Array.from({ length: n }, (R, N) => N + 1), "ellipsis", i];
-  }
-  if (p && !g) {
-    const n = s * 2 + 3;
-    return [1, "ellipsis", ...Array.from(
-      { length: n },
-      (R, N) => i - n + 1 + N
-    )];
-  }
-  return [1, "ellipsis", ...Array.from(
-    { length: d - t + 1 },
-    (n, f) => t + f
-  ), "ellipsis", i];
+import { Hn as e } from "../_chunks/primitives.js";
+import { cn as t } from "./lib/utils.js";
+import { Icon as n } from "./icon.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { IconChevronLeft as o, IconChevronRight as s, IconDots as c } from "@tabler/icons-react";
+//#region src/ui/pagination.tsx
+var l = r.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ i("nav", {
+	ref: r,
+	role: "navigation",
+	"aria-label": "pagination",
+	className: t("mx-auto flex w-full justify-center", e),
+	...n
+}));
+l.displayName = "PaginationRoot";
+var u = r.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ i("ul", {
+	ref: r,
+	className: t("flex flex-row items-center gap-ds-02", e),
+	...n
+}));
+u.displayName = "PaginationContent";
+var d = r.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ i("li", {
+	ref: r,
+	className: t("", e),
+	...n
+}));
+d.displayName = "PaginationItem";
+var f = r.forwardRef(({ className: n, isActive: r = !1, asChild: a = !1, ...o }, s) => /* @__PURE__ */ i(a ? e : "button", {
+	ref: s,
+	"aria-current": r ? "page" : void 0,
+	className: t("inline-flex items-center justify-center h-ds-sm-plus w-ds-sm-plus rounded-ds-md text-ds-md font-medium tabular-nums transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled active:scale-95", r ? "bg-accent-9 text-accent-fg" : "hover:bg-surface-raised-hover text-surface-fg", n),
+	...o
+}));
+f.displayName = "PaginationLink";
+var p = r.forwardRef(({ className: e, ...r }, s) => /* @__PURE__ */ a(f, {
+	ref: s,
+	"aria-label": "Go to previous page",
+	className: t("w-auto gap-ds-02 pl-ds-03 pr-ds-04", e),
+	...r,
+	children: [/* @__PURE__ */ i(n, {
+		icon: o,
+		size: "sm"
+	}), /* @__PURE__ */ i("span", { children: "Previous" })]
+}));
+p.displayName = "PaginationPrevious";
+var m = r.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ a(f, {
+	ref: o,
+	"aria-label": "Go to next page",
+	className: t("w-auto gap-ds-02 pl-ds-04 pr-ds-03", e),
+	...r,
+	children: [/* @__PURE__ */ i("span", { children: "Next" }), /* @__PURE__ */ i(n, {
+		icon: s,
+		size: "sm"
+	})]
+}));
+m.displayName = "PaginationNext";
+var h = r.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ a("span", {
+	ref: o,
+	"aria-hidden": "true",
+	className: t("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center text-surface-fg-muted", e),
+	...r,
+	children: [/* @__PURE__ */ i(n, {
+		icon: c,
+		size: "sm"
+	}), /* @__PURE__ */ i("span", {
+		className: "sr-only",
+		children: "More pages"
+	})]
+}));
+h.displayName = "PaginationEllipsis";
+function g(e, t, n) {
+	if (t <= n * 2 + 5) return Array.from({ length: t }, (e, t) => t + 1);
+	let r = Math.max(e - n, 1), i = Math.min(e + n, t), a = r > 2, o = i < t - 1;
+	if (!a && o) {
+		let e = n * 2 + 3;
+		return [
+			...Array.from({ length: e }, (e, t) => t + 1),
+			"ellipsis",
+			t
+		];
+	}
+	if (a && !o) {
+		let e = n * 2 + 3;
+		return [
+			1,
+			"ellipsis",
+			...Array.from({ length: e }, (n, r) => t - e + 1 + r)
+		];
+	}
+	return [
+		1,
+		"ellipsis",
+		...Array.from({ length: i - r + 1 }, (e, t) => r + t),
+		"ellipsis",
+		t
+	];
 }
-const S = o.forwardRef(
-  ({
-    totalPages: e,
-    currentPage: i,
-    onPageChange: s,
-    siblingCount: c = 1,
-    className: t,
-    ...d
-  }, p) => {
-    const g = M(i, e, c);
-    return /* @__PURE__ */ a(x, { ref: p, className: t, ...d, children: /* @__PURE__ */ h(y, { children: [
-      /* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(
-        P,
-        {
-          onClick: () => s(Math.max(1, i - 1)),
-          disabled: i <= 1
-        }
-      ) }),
-      g.map(
-        (l, n) => l === "ellipsis" ? /* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(b, {}) }, `e${n}`) : /* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(
-          u,
-          {
-            isActive: l === i,
-            onClick: () => s(l),
-            children: l
-          }
-        ) }, l)
-      ),
-      /* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(
-        w,
-        {
-          onClick: () => s(Math.min(e, i + 1)),
-          disabled: i >= e
-        }
-      ) })
-    ] }) });
-  }
-);
-S.displayName = "PaginationNav";
-export {
-  y as PaginationContent,
-  b as PaginationEllipsis,
-  m as PaginationItem,
-  u as PaginationLink,
-  S as PaginationNav,
-  w as PaginationNext,
-  P as PaginationPrevious,
-  x as PaginationRoot,
-  M as generatePagination
-};
+var _ = r.forwardRef(({ totalPages: e, currentPage: t, onPageChange: n, siblingCount: r = 1, className: o, ...s }, c) => {
+	let _ = g(t, e, r);
+	return /* @__PURE__ */ i(l, {
+		ref: c,
+		className: o,
+		...s,
+		children: /* @__PURE__ */ a(u, { children: [
+			/* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(p, {
+				onClick: () => n(Math.max(1, t - 1)),
+				disabled: t <= 1
+			}) }),
+			_.map((e, r) => e === "ellipsis" ? /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(h, {}) }, `e${r}`) : /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(f, {
+				isActive: e === t,
+				onClick: () => n(e),
+				children: e
+			}) }, e)),
+			/* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(m, {
+				onClick: () => n(Math.min(e, t + 1)),
+				disabled: t >= e
+			}) })
+		] })
+	});
+});
+_.displayName = "PaginationNav";
+//#endregion
+export { u as PaginationContent, h as PaginationEllipsis, d as PaginationItem, f as PaginationLink, _ as PaginationNav, m as PaginationNext, p as PaginationPrevious, l as PaginationRoot, g as generatePagination };

package/dist/ui/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../src/ui/pagination.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@primitives/react-slot'\nimport { IconChevronLeft, IconChevronRight, IconDots } from '@tabler/icons-react'\nimport { cn } from './lib/utils'\nimport { Icon } from './icon'\n\nconst PaginationRoot = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'>\n>(({ className, ...props }, ref) => (\n  <nav\n    ref={ref}\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn('mx-auto flex w-full justify-center', className)}\n    {...props}\n  />\n))\nPaginationRoot.displayName = 'PaginationRoot'\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentPropsWithoutRef<'ul'>\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn('flex flex-row items-center gap-ds-02', className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = 'PaginationContent'\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<'li'>\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn('', className)} {...props} />\n))\nPaginationItem.displayName = 'PaginationItem'\n\n/**\n * Props for PaginationLink — a single page number button in a pagination row.\n * When `isActive` is true, the button gets the brand interactive fill and `aria-current=\"page\"`.\n *\n * @example\n * // Active page button:\n * <PaginationLink isActive onClick={() => goToPage(3)}>3</PaginationLink>\n *\n * @example\n * // Render as a Next.js Link via asChild:\n * <PaginationLink asChild isActive={currentPage === 5}>\n *   <Link href=\"/posts?page=5\">5</Link>\n * </PaginationLink>\n */\nexport interface PaginationLinkProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  isActive?: boolean\n  asChild?: boolean\n}\n\nconst PaginationLink = React.forwardRef<HTMLButtonElement, PaginationLinkProps>(\n  ({ className, isActive = false, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    return (\n      <Comp\n        ref={ref}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'inline-flex items-center justify-center h-ds-sm-plus w-ds-sm-plus rounded-ds-md text-ds-md font-medium tabular-nums transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled active:scale-95',\n          isActive\n            ? 'bg-accent-9 text-accent-fg'\n            : 'hover:bg-surface-raised-hover text-surface-fg',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nPaginationLink.displayName = 'PaginationLink'\n\nconst PaginationPrevious = React.forwardRef<\n  HTMLButtonElement,\n  PaginationLinkProps\n>(({ className, ...props }, ref) => (\n  <PaginationLink\n    ref={ref}\n    aria-label=\"Go to previous page\"\n    className={cn('w-auto gap-ds-02 pl-ds-03 pr-ds-04', className)}\n    {...props}\n  >\n    <Icon icon={IconChevronLeft} size=\"sm\" />\n    <span>Previous</span>\n  </PaginationLink>\n))\nPaginationPrevious.displayName = 'PaginationPrevious'\n\nconst PaginationNext = React.forwardRef<\n  HTMLButtonElement,\n  PaginationLinkProps\n>(({ className, ...props }, ref) => (\n  <PaginationLink\n    ref={ref}\n    aria-label=\"Go to next page\"\n    className={cn('w-auto gap-ds-02 pl-ds-04 pr-ds-03', className)}\n    {...props}\n  >\n    <span>Next</span>\n    <Icon icon={IconChevronRight} size=\"sm\" />\n  </PaginationLink>\n))\nPaginationNext.displayName = 'PaginationNext'\n\nconst PaginationEllipsis = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<'span'>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    aria-hidden=\"true\"\n    className={cn(\n      'flex h-ds-sm-plus w-ds-sm-plus items-center justify-center text-surface-fg-muted',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconDots} size=\"sm\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n))\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\n/* ------------------------------------------------------------------ */\n/*  generatePagination helper                                         */\n/* ------------------------------------------------------------------ */\n\ntype PageItem = number | 'ellipsis'\n\n/**\n * Pure function that builds an array of page numbers and ellipsis markers.\n * Always shows first and last page, plus `siblingCount` pages around `current`.\n *\n * @example generatePagination(5, 10, 1) → [1, 'ellipsis', 4, 5, 6, 'ellipsis', 10]\n */\nfunction generatePagination(\n  current: number,\n  total: number,\n  siblingCount: number,\n): PageItem[] {\n  // When total pages fit without any ellipsis\n  const totalSlots = siblingCount * 2 + 5 // first + last + current + 2*siblings + 2 ellipsis slots\n  if (total <= totalSlots) {\n    return Array.from({ length: total }, (_, i) => i + 1)\n  }\n\n  const leftSibling = Math.max(current - siblingCount, 1)\n  const rightSibling = Math.min(current + siblingCount, total)\n\n  const showLeftEllipsis = leftSibling > 2\n  const showRightEllipsis = rightSibling < total - 1\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    // e.g. [1, 2, 3, 4, 5, '...', 10]\n    const leftCount = siblingCount * 2 + 3\n    const leftPages = Array.from({ length: leftCount }, (_, i) => i + 1)\n    return [...leftPages, 'ellipsis', total]\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    // e.g. [1, '...', 6, 7, 8, 9, 10]\n    const rightCount = siblingCount * 2 + 3\n    const rightPages = Array.from(\n      { length: rightCount },\n      (_, i) => total - rightCount + 1 + i,\n    )\n    return [1, 'ellipsis', ...rightPages]\n  }\n\n  // Both ellipses: [1, '...', 4, 5, 6, '...', 10]\n  const middlePages = Array.from(\n    { length: rightSibling - leftSibling + 1 },\n    (_, i) => leftSibling + i,\n  )\n  return [1, 'ellipsis', ...middlePages, 'ellipsis', total]\n}\n\n/* ------------------------------------------------------------------ */\n/*  PaginationNav — controlled convenience wrapper                    */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props for PaginationNav — a fully self-contained controlled pagination component that renders\n * Previous / page numbers (with ellipsis) / Next — using `generatePagination` internally.\n *\n * **1-indexed:** `currentPage` starts at 1 (not 0). `onPageChange` also receives 1-indexed values.\n *\n * **`siblingCount`:** Number of page buttons shown on each side of the current page (default 1).\n * A wider `siblingCount` shows more page buttons before switching to ellipsis.\n *\n * @example\n * // Basic controlled pagination:\n * <PaginationNav\n *   totalPages={24}\n *   currentPage={currentPage}\n *   onPageChange={setCurrentPage}\n * />\n *\n * @example\n * // Wider sibling range for a results grid (shows more page context):\n * <PaginationNav\n *   totalPages={100}\n *   currentPage={currentPage}\n *   onPageChange={setCurrentPage}\n *   siblingCount={2}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface PaginationNavProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Total number of pages */\n  totalPages: number\n  /** Current active page (1-indexed) */\n  currentPage: number\n  /** Called when the user requests a different page */\n  onPageChange: (page: number) => void\n  /** Number of sibling page buttons shown on each side of the current page (default: 1) */\n  siblingCount?: number\n}\n\nconst PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(\n  (\n    {\n      totalPages,\n      currentPage,\n      onPageChange,\n      siblingCount = 1,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const pages = generatePagination(currentPage, totalPages, siblingCount)\n\n    return (\n      <PaginationRoot ref={ref} className={className} {...props}>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious\n              onClick={() => onPageChange(Math.max(1, currentPage - 1))}\n              disabled={currentPage <= 1}\n            />\n          </PaginationItem>\n\n          {pages.map((page, i) =>\n            page === 'ellipsis' ? (\n              <PaginationItem key={`e${i}`}>\n                <PaginationEllipsis />\n              </PaginationItem>\n            ) : (\n              <PaginationItem key={page}>\n                <PaginationLink\n                  isActive={page === currentPage}\n                  onClick={() => onPageChange(page)}\n                >\n                  {page}\n                </PaginationLink>\n              </PaginationItem>\n            ),\n          )}\n\n          <PaginationItem>\n            <PaginationNext\n              onClick={() =>\n                onPageChange(Math.min(totalPages, currentPage + 1))\n              }\n              disabled={currentPage >= totalPages}\n            />\n          </PaginationItem>\n        </PaginationContent>\n      </PaginationRoot>\n    )\n  },\n)\nPaginationNav.displayName = 'PaginationNav'\n\nexport {\n  PaginationRoot,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n  PaginationNav,\n  generatePagination,\n}\n"],"mappings":"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"}