@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/pagination.agent-BkZQl45y.js

@@ -0,0 +1,422 @@
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import { forwardRef as m, useState as O, useEffect as Q, useCallback as L, useMemo as W, useId as X } from "react";
+import * as c from "@radix-ui/react-select";
+import { c as Y } from "./index-D2ZczOXr.js";
+import { useTranslation as x } from "react-i18next";
+import { E as Z } from "./ellipsis-rgGdiK_9.js";
+import { C as R } from "./chevron-right-BrpYejk0.js";
+import { C as D } from "./chevron-left-CX1jqD2M.js";
+import { C as ee, a as se } from "./chevrons-right-d9MwesPG.js";
+import { C as ae } from "./check-DPdL_Sm7.js";
+const ie = [
+  "ds:inline-flex ds:items-center ds:justify-center",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:border ds:border-transparent",
+  "ds:font-[var(--font-weight-medium)]",
+  "ds:text-[var(--foreground)]",
+  "ds:select-none",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+  "ds:hover:bg-[var(--muted)]/20",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+  "ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50"
+].join(" "), y = Y(ie, {
+  variants: {
+    size: {
+      sm: "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)] ds:text-[length:var(--font-size-sm)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]",
+      md: "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)] ds:text-[length:var(--font-size-base)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+      lg: "ds:min-w-[3rem] ds:min-h-[3rem] ds:text-[length:var(--font-size-lg)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]"
+    },
+    active: {
+      true: "ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)] ds:font-[var(--font-weight-bold)] ds:outline ds:outline-1 ds:outline-[var(--primary)] ds:hover:bg-[var(--primary-hover)]",
+      false: ""
+    }
+  },
+  defaultVariants: { size: "md", active: !1 }
+});
+function w(e, a) {
+  const t = [];
+  for (let s = e; s <= a; s++) t.push(s);
+  return t;
+}
+function te(e, a, t = 1, s = 1) {
+  if (a <= 0) return [];
+  if (t = Math.max(0, t), s = Math.max(1, s), s * 2 + t * 2 + 3 >= a) return w(1, a);
+  const r = w(1, s), n = w(a - s + 1, a), p = Math.max(
+    Math.min(e - t, a - s - t * 2 - 1),
+    s + 2
+  ), f = Math.min(
+    Math.max(e + t, s + t * 2 + 2),
+    n[0] - 2
+  ), l = [...r];
+  return p > s + 2 ? l.push("ellipsis-start") : s + 1 < a - s && l.push(s + 1), l.push(...w(p, f)), f < a - s - 1 ? l.push("ellipsis-end") : a - s > s && l.push(a - s), l.push(...n), l;
+}
+const ne = m(
+  ({
+    totalPages: e,
+    page: a,
+    defaultPage: t = 1,
+    onPageChange: s,
+    siblingCount: d = 1,
+    boundaryCount: r = 1,
+    size: n = "md",
+    showEndpoints: p = !1,
+    align: f = "center",
+    pageSize: l,
+    useLocaleDigits: z = !1,
+    locale: I,
+    className: $,
+    id: k,
+    ...H
+  }, U) => {
+    const { t: M, i18n: T } = x(), h = a !== void 0, [q, G] = O(t), g = h ? a : q;
+    Q(() => {
+      h && t !== 1 && console.warn(
+        "[Pagination] Both `page` and `defaultPage` were supplied. The `page` prop wins; remove `defaultPage` for controlled usage."
+      );
+    }, [h, t]);
+    const b = L(
+      (o) => {
+        const N = Math.min(Math.max(o, 1), Math.max(1, e));
+        h || G(N), s == null || s(N);
+      },
+      [h, s, e]
+    ), S = L(
+      (o) => {
+        if (!z) return String(o);
+        try {
+          return new Intl.NumberFormat(I ?? T.language).format(o);
+        } catch {
+          return String(o);
+        }
+      },
+      [T.language, I, z]
+    ), J = W(
+      () => te(g, e, d, r),
+      [g, e, d, r]
+    ), E = g <= 1, B = g >= e, K = f === "start" ? "ds:justify-start" : f === "end" ? "ds:justify-end" : "ds:justify-center";
+    return /* @__PURE__ */ v(
+      "nav",
+      {
+        ref: U,
+        "aria-label": M("ui.navigation.pagination.label"),
+        id: k,
+        "data-component": "pagination",
+        "data-component-id": k,
+        className: [
+          "ds:flex ds:items-center",
+          K,
+          "ds:gap-[var(--spacing-sm)]",
+          "ds:flex-wrap",
+          $ ?? ""
+        ].filter(Boolean).join(" "),
+        ...H,
+        children: [
+          /* @__PURE__ */ v(V, { size: n, children: [
+            p ? /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(
+              j,
+              {
+                type: "first",
+                size: n,
+                disabled: E,
+                onClick: () => b(1)
+              }
+            ) }) : null,
+            /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(
+              A,
+              {
+                size: n,
+                disabled: E,
+                onClick: () => b(g - 1)
+              }
+            ) }),
+            J.map((o, N) => o === "ellipsis-start" || o === "ellipsis-end" ? /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(F, {}) }, `e-${N}`) : /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(
+              _,
+              {
+                size: n,
+                isActive: o === g,
+                "aria-label": M("ui.navigation.pagination.pageN", { n: o }),
+                onClick: () => b(o),
+                children: S(o)
+              }
+            ) }, `p-${o}`)),
+            /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(
+              C,
+              {
+                size: n,
+                disabled: B,
+                onClick: () => b(g + 1)
+              }
+            ) }),
+            p ? /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(
+              j,
+              {
+                type: "last",
+                size: n,
+                disabled: B,
+                onClick: () => b(e)
+              }
+            ) }) : null
+          ] }),
+          l ? /* @__PURE__ */ i(
+            le,
+            {
+              size: n,
+              value: l.value,
+              options: l.options ?? [10, 25, 50, 100],
+              onChange: l.onChange,
+              formatNumber: S
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ne.displayName = "Pagination";
+const V = m(
+  ({ children: e, className: a, ...t }, s) => /* @__PURE__ */ i(
+    "ul",
+    {
+      ref: s,
+      className: [
+        "ds:flex ds:items-center",
+        "ds:gap-[var(--spacing-xs)]",
+        "ds:m-0 ds:ps-0",
+        "ds:list-none",
+        a ?? ""
+      ].filter(Boolean).join(" "),
+      ...t,
+      children: e
+    }
+  )
+);
+V.displayName = "PaginationList";
+const u = m(
+  ({ children: e, className: a, ...t }, s) => /* @__PURE__ */ i("li", { ref: s, className: a, ...t, children: e })
+);
+u.displayName = "PaginationItem";
+const _ = m(
+  ({ isActive: e = !1, size: a = "md", className: t, children: s, ...d }, r) => /* @__PURE__ */ i(
+    "button",
+    {
+      ref: r,
+      type: "button",
+      "aria-current": e ? "page" : void 0,
+      className: y({
+        size: a,
+        active: e,
+        className: t
+      }),
+      ...d,
+      children: s
+    }
+  )
+);
+_.displayName = "PaginationLink";
+const P = "ds:size-4 ds:rtl:-scale-x-100", A = m(
+  ({ size: e = "md", disabled: a, onClick: t }, s) => {
+    const { t: d } = x(), r = d("ui.navigation.pagination.previous");
+    return /* @__PURE__ */ i(
+      "button",
+      {
+        ref: s,
+        type: "button",
+        "aria-label": r,
+        "aria-disabled": a || void 0,
+        disabled: a,
+        onClick: t,
+        className: y({ size: e }),
+        children: /* @__PURE__ */ i(D, { "aria-hidden": "true", className: P })
+      }
+    );
+  }
+);
+A.displayName = "PaginationPrevious";
+const C = m(
+  ({ size: e = "md", disabled: a, onClick: t }, s) => {
+    const { t: d } = x(), r = d("ui.navigation.pagination.next");
+    return /* @__PURE__ */ i(
+      "button",
+      {
+        ref: s,
+        type: "button",
+        "aria-label": r,
+        "aria-disabled": a || void 0,
+        disabled: a,
+        onClick: t,
+        className: y({ size: e }),
+        children: /* @__PURE__ */ i(R, { "aria-hidden": "true", className: P })
+      }
+    );
+  }
+);
+C.displayName = "PaginationNext";
+const j = m(
+  ({ type: e, size: a = "md", disabled: t, onClick: s }, d) => {
+    const { t: r } = x(), n = r(e === "first" ? "ui.navigation.pagination.first" : "ui.navigation.pagination.last"), p = e === "first" ? ee : se;
+    return /* @__PURE__ */ i(
+      "button",
+      {
+        ref: d,
+        type: "button",
+        "aria-label": n,
+        "aria-disabled": t || void 0,
+        disabled: t,
+        onClick: s,
+        className: y({ size: a }),
+        children: /* @__PURE__ */ i(p, { "aria-hidden": "true", className: P })
+      }
+    );
+  }
+);
+j.displayName = "PaginationEndpoint";
+const F = m(
+  ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+    "span",
+    {
+      ref: t,
+      "aria-hidden": "true",
+      role: "presentation",
+      className: [
+        "ds:inline-flex ds:items-center ds:justify-center",
+        "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
+        "ds:text-[var(--muted-foreground)]",
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      ...a,
+      children: /* @__PURE__ */ i(Z, { "aria-hidden": "true", className: "ds:size-4" })
+    }
+  )
+);
+F.displayName = "PaginationEllipsis";
+const re = [
+  "ds:inline-flex ds:items-center ds:justify-between ds:gap-[var(--spacing-xs)]",
+  "ds:rounded-[var(--radius-sm)] ds:border ds:border-[var(--border)] ds:bg-[var(--background)]",
+  "ds:text-[var(--foreground)]",
+  "ds:min-h-[var(--min-target-size)] ds:min-w-[6rem]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+  "ds:text-[var(--font-size-sm)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+].join(" "), de = [
+  "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
+  "ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)]",
+  "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+  "ds:shadow-[var(--shadow-lg)]",
+  "ds:animate-in ds:fade-in ds:zoom-in-95 ds:motion-reduce:animate-none"
+].join(" "), oe = [
+  "ds:relative ds:flex ds:cursor-pointer ds:items-center",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:ps-[var(--spacing-xl)] ds:pe-[var(--spacing-sm)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:text-[var(--foreground)] ds:outline-none ds:select-none",
+  "ds:data-[highlighted]:bg-[var(--muted)]/20",
+  "ds:data-[disabled]:pointer-events-none ds:data-[disabled]:opacity-50"
+].join(" ");
+function le({ value: e, options: a, onChange: t, formatNumber: s }) {
+  const { t: d } = x(), r = X();
+  return /* @__PURE__ */ v("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+    /* @__PURE__ */ i(
+      "span",
+      {
+        id: r,
+        className: "type-label ds:text-[var(--muted-foreground)]",
+        children: d("ui.navigation.pagination.rowsPerPage")
+      }
+    ),
+    /* @__PURE__ */ v(
+      c.Root,
+      {
+        value: String(e),
+        onValueChange: (n) => t(Number(n)),
+        children: [
+          /* @__PURE__ */ v(
+            c.Trigger,
+            {
+              "aria-labelledby": r,
+              className: re,
+              children: [
+                /* @__PURE__ */ i(c.Value, {}),
+                /* @__PURE__ */ i(c.Icon, { asChild: !0, children: /* @__PURE__ */ i(R, { "aria-hidden": "true", className: "ds:size-3 ds:rotate-90" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(c.Portal, { children: /* @__PURE__ */ i(c.Content, { className: de, position: "popper", children: /* @__PURE__ */ i(c.Viewport, { className: "ds:p-[var(--spacing-xs)]", children: a.map((n) => /* @__PURE__ */ v(
+            c.Item,
+            {
+              value: String(n),
+              className: oe,
+              children: [
+                /* @__PURE__ */ i(c.ItemIndicator, { className: "ds:absolute ds:inline-flex ds:items-center ds:justify-center ds:start-[var(--spacing-sm)]", children: /* @__PURE__ */ i(ae, { "aria-hidden": "true", className: "ds:size-3.5" }) }),
+                /* @__PURE__ */ i(c.ItemText, { children: s(n) })
+              ]
+            },
+            n
+          )) }) }) })
+        ]
+      }
+    )
+  ] });
+}
+const xe = {
+  id: "pagination",
+  capabilities: ["paginate", "range_navigate"],
+  state: {
+    currentPage: {
+      type: "number",
+      description: "Current page index (1-based).",
+      read: (e) => e.getCurrentPage()
+    },
+    totalPages: {
+      type: "number",
+      description: "Total number of pages.",
+      read: (e) => e.getTotalPages()
+    }
+  },
+  actions: {
+    go_to_page: {
+      safety: "read",
+      argsType: "{ page: number }",
+      description: "Navigate to a specific 1-indexed page.",
+      invoke: (e, a) => {
+        e.goToPage(a.page);
+      }
+    },
+    next: {
+      safety: "read",
+      description: "Advance to the next page.",
+      invoke: (e) => {
+        e.next();
+      }
+    },
+    previous: {
+      safety: "read",
+      description: "Step back to the previous page.",
+      invoke: (e) => {
+        e.previous();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "pagination" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+export {
+  ne as P,
+  F as a,
+  u as b,
+  _ as c,
+  V as d,
+  C as e,
+  A as f,
+  te as g,
+  xe as p
+};
+//# sourceMappingURL=pagination.agent-BkZQl45y.js.map