@nebula-demo/ui 0.1.3

package/dist/components/InputSearch/InputSearch.js

@@ -0,0 +1,289 @@
+import { jsxs as s, jsx as i, Fragment as ra } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as n } from "../../utils/cn.js";
+import { FOCUS_WITHIN_RING as ca } from "../../utils/focusRing.js";
+import { labelText as ta, labelRow as na, errorIcon as sa, errorRow as oa, inputWrapper as la } from "../Input/Input.variants.js";
+import { Icon as E } from "../Icon/Icon.js";
+import { Tag as da } from "../Tag/Tag.js";
+const ua = ({ showStatus: v }) => /* @__PURE__ */ s("div", { className: "cai-flex cai-items-center cai-gap-2 cai-px-3 cai-py-2", children: [
+  v && /* @__PURE__ */ i("div", { className: "cai-h-2 cai-w-2 cai-rounded-full cai-bg-secondary cai-animate-pulse" }),
+  /* @__PURE__ */ i("div", { className: "cai-h-xl cai-flex-1 cai-rounded cai-bg-secondary cai-animate-pulse" })
+] }), pa = r.forwardRef(
+  ({
+    items: v = [],
+    onChange: A,
+    onSearchValueChange: d,
+    selectedValue: N,
+    isLoading: $ = !1,
+    showStatus: k = !1,
+    statusVariants: z = {},
+    alphabeticalSort: F = !0,
+    clearAllLabel: H = "Clear All",
+    placeholder: M = "Search...",
+    label: f,
+    disabled: w = !1,
+    error: I,
+    customLoader: K,
+    open: L = !1,
+    id: U,
+    className: W
+  }, G) => {
+    const J = r.useId(), C = U ?? J, O = `${C}-input`, h = `${C}-listbox`, [o, S] = r.useState(""), [l, D] = r.useState(L), [P, Q] = r.useState([]), [u, b] = r.useState(0), c = N ?? P, p = r.useCallback(
+      (a) => {
+        N || Q(a), A?.(a);
+      },
+      [N, A]
+    ), x = r.useRef(null), y = r.useMemo(() => {
+      const a = [...v];
+      return F && a.sort((e, t) => e.label.localeCompare(t.label)), a;
+    }, [v, F]), m = r.useMemo(() => {
+      const a = y.filter((e) => !c.includes(e.value));
+      return o ? a.filter(
+        (e) => e.label.toLowerCase().includes(o.toLowerCase())
+      ) : a;
+    }, [y, c, o]), _ = r.useMemo(
+      () => y.filter((a) => c.includes(a.value)),
+      [y, c]
+    ), X = r.useCallback(
+      (a) => {
+        const e = a.target.value;
+        S(e), d?.(e), l || D(!0);
+      },
+      [d, l]
+    ), Y = r.useCallback(() => {
+      S(""), d?.(""), x.current?.focus();
+    }, [d]), R = r.useCallback(
+      (a) => {
+        c.includes(a) || p([...c, a]), S(""), d?.(""), x.current?.focus();
+      },
+      [c, p, d]
+    ), T = r.useCallback(
+      (a) => {
+        p(c.filter((e) => e !== a));
+      },
+      [c, p]
+    ), Z = r.useCallback(() => {
+      p([]), x.current?.focus();
+    }, [p]), V = r.useCallback(() => {
+      l || D(!0);
+    }, [l]);
+    r.useEffect(() => {
+      b(0);
+    }, [o, c]);
+    const aa = r.useCallback(
+      (a) => {
+        if (a.key === "Escape") {
+          D(!1);
+          return;
+        }
+        if (a.key === "Backspace" && !o && c.length > 0) {
+          T(c[c.length - 1]);
+          return;
+        }
+        if (!l) return;
+        const e = m.length;
+        if (e !== 0) {
+          if (a.key === "ArrowDown")
+            a.preventDefault(), b((t) => (t + 1) % e);
+          else if (a.key === "ArrowUp")
+            a.preventDefault(), b((t) => (t - 1 + e) % e);
+          else if (a.key === "Home")
+            a.preventDefault(), b(0);
+          else if (a.key === "End")
+            a.preventDefault(), b(e - 1);
+          else if (a.key === "Enter") {
+            a.preventDefault();
+            const t = m[u];
+            t && !t.disabled && R(t.value);
+          }
+        }
+      },
+      [o, c, T, l, m, u, R]
+    ), j = I ? `${C}-error` : void 0, q = !!I, ea = _.length > 0, g = l && !w;
+    return /* @__PURE__ */ s("div", { ref: G, className: n(la({ disabled: w }), W), children: [
+      f && /* @__PURE__ */ i("span", { className: na(), children: /* @__PURE__ */ i("label", { htmlFor: O, className: n(ta(), "cai-flex-1"), children: f }) }),
+      q && /* @__PURE__ */ s("span", { className: oa(), id: j, role: "alert", children: [
+        /* @__PURE__ */ i("span", { className: sa(), children: /* @__PURE__ */ i(E, { name: "alert-circle", size: 14, "aria-hidden": "true" }) }),
+        /* @__PURE__ */ i("span", { className: "cai-font-sans cai-text-xs cai-font-medium cai-text-error", children: I })
+      ] }),
+      /* @__PURE__ */ s(
+        "div",
+        {
+          className: n(
+            "cai-rounded-md cai-border cai-overflow-hidden cai-transition-colors",
+            ca,
+            q ? "cai-border-error-alt" : l ? "cai-border-nonary" : "cai-border-septenary hover:cai-bg-secondary hover:cai-border-nonary focus-within:cai-bg-transparent focus-within:cai-border-nonary"
+          ),
+          children: [
+            /* @__PURE__ */ s("div", { className: "cai-flex cai-items-center cai-gap-2 cai-px-3 cai-py-2", children: [
+              /* @__PURE__ */ i("span", { className: "cai-flex cai-items-center cai-text-icon-primary cai-shrink-0", children: /* @__PURE__ */ i(E, { name: "search-md", size: 16, "aria-hidden": "true" }) }),
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  ref: x,
+                  id: O,
+                  type: "text",
+                  role: "combobox",
+                  "aria-expanded": g,
+                  "aria-controls": h,
+                  "aria-autocomplete": "list",
+                  "aria-activedescendant": g && m[u] ? `${h}-opt-${u}` : void 0,
+                  "aria-describedby": j,
+                  "aria-label": f ? void 0 : M,
+                  placeholder: M,
+                  disabled: w,
+                  value: o,
+                  onChange: X,
+                  onFocus: V,
+                  onKeyDown: aa,
+                  className: n(
+                    "cai-flex-1 cai-bg-transparent cai-border-none cai-outline-none",
+                    "cai-font-sans cai-text-[12px] cai-font-medium cai-text-primary",
+                    "placeholder:cai-text-primary placeholder:cai-opacity-45"
+                  )
+                }
+              ),
+              o && /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  onClick: Y,
+                  "aria-label": "Clear search",
+                  className: "cai-flex cai-items-center cai-text-icon-primary cai-cursor-pointer cai-shrink-0",
+                  children: /* @__PURE__ */ i(E, { name: "x-close", size: 14, "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            ea && /* @__PURE__ */ s("div", { className: "cai-border-t cai-border-quaternary cai-px-3 cai-py-2.5", children: [
+              /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  onClick: Z,
+                  className: n(
+                    "cai-mb-2 cai-font-sans cai-text-xs cai-text-tertiary",
+                    "cai-underline cai-cursor-pointer cai-bg-transparent cai-border-none cai-p-0",
+                    "hover:cai-text-secondary"
+                  ),
+                  children: H
+                }
+              ),
+              /* @__PURE__ */ i("div", { className: "cai-flex cai-flex-wrap cai-gap-1.5", children: _.map((a) => {
+                const e = a.error === !0, t = !e && a.variant === "avatar" && a.avatar, ia = !e && k && a.status ? /* @__PURE__ */ i(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: n(
+                      "cai-inline-block cai-w-1.5 cai-h-1.5 cai-rounded-full cai-shrink-0 cai-mr-1",
+                      z[a.status] ?? "cai-bg-icon-information"
+                    )
+                  }
+                ) : null, B = /* @__PURE__ */ s(
+                  da,
+                  {
+                    size: "sm",
+                    variant: e ? "error" : "primary",
+                    isClose: !0,
+                    onClose: () => T(a.value),
+                    labelClose: "Remove",
+                    avatar: t ? a.avatar : void 0,
+                    children: [
+                      ia,
+                      a.label
+                    ]
+                  }
+                );
+                return e ? /* @__PURE__ */ s("span", { className: "cai-relative cai-group/tag", children: [
+                  B,
+                  /* @__PURE__ */ i(
+                    "span",
+                    {
+                      className: n(
+                        "cai-absolute cai-bottom-full cai-left-1/2 cai--translate-x-1/2 cai-mb-2",
+                        "cai-hidden group-hover/tag:cai-block",
+                        "cai-bg-quaternary cai-text-primary-invert",
+                        "cai-text-[11px] cai-leading-snug cai-px-2.5 cai-py-1.5",
+                        "cai-rounded-md cai-w-[220px] cai-text-center",
+                        "cai-shadow-medium cai-pointer-events-none cai-z-10"
+                      ),
+                      children: a.errorTooltipLabel ?? "Invalid Entry"
+                    }
+                  )
+                ] }, a.value) : r.cloneElement(B, { key: a.value });
+              }) })
+            ] })
+          ]
+        }
+      ),
+      g && !$ && /* @__PURE__ */ i(
+        "div",
+        {
+          id: h,
+          role: "listbox",
+          "aria-label": f ?? "Search results",
+          className: n(
+            "cai-mt-1 cai-rounded-md cai-border cai-border-tertiary cai-bg-primary-invert",
+            "cai-p-lg cai-shadow-shallow",
+            "cai-max-h-[220px] cai-overflow-y-auto"
+          ),
+          children: m.length === 0 ? /* @__PURE__ */ i(
+            "div",
+            {
+              role: "status",
+              className: "cai-p-lg cai-font-sans cai-text-subbody cai-font-medium cai-text-tertiary",
+              children: "No results available"
+            }
+          ) : m.map((a, e) => /* @__PURE__ */ s(
+            "div",
+            {
+              id: `${h}-opt-${e}`,
+              role: "option",
+              "aria-selected": e === u,
+              "aria-disabled": a.disabled,
+              onClick: () => !a.disabled && R(a.value),
+              className: n(
+                "cai-flex cai-items-center cai-gap-2 cai-rounded-md cai-border cai-border-transparent cai-p-lg",
+                "cai-font-sans cai-text-subbody cai-font-medium cai-text-primary",
+                "cai-cursor-pointer cai-transition-colors",
+                "hover:cai-bg-tertiary",
+                e === u && "cai-bg-tertiary",
+                a.disabled && "cai-opacity-40 cai-pointer-events-none"
+              ),
+              children: [
+                k && a.status && /* @__PURE__ */ i(
+                  "span",
+                  {
+                    className: n(
+                      "cai-w-2 cai-h-2 cai-rounded-full cai-shrink-0",
+                      z[a.status] ?? "cai-bg-icon-information"
+                    )
+                  }
+                ),
+                a.variant === "avatar" && a.avatar && /* @__PURE__ */ i("span", { className: "cai-shrink-0", children: a.avatar }),
+                a.variant === "icon" && a.icon && /* @__PURE__ */ i("span", { className: "cai-shrink-0 cai-text-icon-primary", children: a.icon }),
+                /* @__PURE__ */ i("span", { className: "cai-flex-1 cai-truncate", children: a.label }),
+                a.supportText && /* @__PURE__ */ i("span", { className: "cai-text-tertiary cai-text-sm cai-truncate cai-shrink-0", children: a.supportText })
+              ]
+            },
+            a.value
+          ))
+        }
+      ),
+      g && $ && /* @__PURE__ */ i(
+        "div",
+        {
+          id: h,
+          role: "listbox",
+          "aria-label": f ?? "Search results",
+          "aria-busy": "true",
+          className: "cai-mt-1 cai-rounded-md cai-border cai-border-tertiary cai-bg-primary-invert cai-p-lg cai-shadow-shallow cai-overflow-hidden",
+          children: K ?? /* @__PURE__ */ i(ra, { children: Array.from({ length: 5 }).map((a, e) => /* @__PURE__ */ i(ua, { showStatus: k }, e)) })
+        }
+      )
+    ] });
+  }
+);
+pa.displayName = "InputSearch";
+export {
+  pa as InputSearch
+};

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

@@ -0,0 +1,3 @@
+export { InputSearch } from './InputSearch';
+export type { InputSearchProps, InputSearchItemProps } from './InputSearch';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InputSearch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/Line/Line.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),s=require("../../utils/cn.cjs");function y(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const g=y(b),u={primary:"cai-bg-border-secondary",secondary:"cai-bg-border-quaternary"},j={primary:"cai-text-primary",secondary:"cai-text-tertiary"},h={header:"cai-text-body1 cai-font-semibold",text:"cai-text-subbody cai-font-medium"},f=g.forwardRef(({variant:e="primary",display:a="default",decorative:t=!0,children:c,className:i,...n},o)=>{const m=s.cn(u[e],"cai-h-px cai-w-full"),l=t?{"aria-hidden":!0}:{role:"separator"};if(a==="default")return r.jsx("div",{ref:o,...l,className:s.cn(m,i),...n});const p="cai-flex cai-items-center cai-gap-x-lg cai-w-full",d=s.cn(u[e],"cai-h-px cai-flex-1"),x=s.cn(h[a],j[e]);return r.jsxs("div",{ref:o,...l,className:s.cn(p,i),...n,children:[r.jsx("div",{"aria-hidden":"true",className:d}),r.jsx("span",{className:x,children:c}),r.jsx("div",{"aria-hidden":"true",className:d})]})});f.displayName="Line";exports.Line=f;

package/dist/components/Line/Line.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface LineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 'primary' | 'secondary' — line color (default: primary) */
+    variant?: 'primary' | 'secondary';
+    /** 'default' | 'header' | 'text' — label display mode */
+    display?: 'default' | 'header' | 'text';
+    /** boolean — true skips separator semantics (default: true) */
+    decorative?: boolean;
+    /** ReactNode — label text (used with header / text display) */
+    children?: React.ReactNode;
+    /** string — additional classes on root */
+    className?: string;
+}
+declare const Line: React.ForwardRefExoticComponent<LineProps & React.RefAttributes<HTMLDivElement>>;
+export { Line };
+//# sourceMappingURL=Line.d.ts.map

package/dist/components/Line/Line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../src/components/Line/Line.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACvF,8DAA8D;IAC9D,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;IACvC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAyBD,QAAA,MAAM,IAAI,kFA2BT,CAAA;AAID,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/Line/Line.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import * as y from "react";
+import { cn as a } from "../../utils/cn.js";
+const l = {
+  primary: "cai-bg-border-secondary",
+  secondary: "cai-bg-border-quaternary"
+}, b = {
+  primary: "cai-text-primary",
+  secondary: "cai-text-tertiary"
+}, h = {
+  header: "cai-text-body1 cai-font-semibold",
+  text: "cai-text-subbody cai-font-medium"
+}, C = y.forwardRef(
+  ({ variant: s = "primary", display: r = "default", decorative: d = !0, children: m, className: i, ...t }, c) => {
+    const p = a(l[s], "cai-h-px cai-w-full"), o = d ? { "aria-hidden": !0 } : { role: "separator" };
+    if (r === "default")
+      return /* @__PURE__ */ e("div", { ref: c, ...o, className: a(p, i), ...t });
+    const x = "cai-flex cai-items-center cai-gap-x-lg cai-w-full", n = a(l[s], "cai-h-px cai-flex-1"), f = a(h[r], b[s]);
+    return /* @__PURE__ */ u("div", { ref: c, ...o, className: a(x, i), ...t, children: [
+      /* @__PURE__ */ e("div", { "aria-hidden": "true", className: n }),
+      /* @__PURE__ */ e("span", { className: f, children: m }),
+      /* @__PURE__ */ e("div", { "aria-hidden": "true", className: n })
+    ] });
+  }
+);
+C.displayName = "Line";
+export {
+  C as Line
+};

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

@@ -0,0 +1,3 @@
+export { Line } from './Line';
+export type { LineProps } from './Line';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Line/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/Pagination/Pagination.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),D=require("react"),p=require("../../utils/cn.cjs"),u=require("../../utils/focusRing.cjs"),x=require("../Icon/Icon.cjs");function E(r){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(a,n,c.get?c:{enumerable:!0,get:()=>r[n]})}}return a.default=r,Object.freeze(a)}const f=E(D),G=7,M=`cai-flex cai-h-8 cai-w-8 cai-items-center cai-justify-center cai-rounded-xs cai-border cai-border-transparent cai-text-body2 cai-font-medium cai-text-primary cai-transition-colors cai-outline-none ${u.FOCUS_RING}`,g=({className:r,...a})=>t.jsx("nav",{role:"navigation",className:p.cn("cai-mx-auto cai-flex cai-w-full cai-justify-center",r),...a});g.displayName="PaginationWrapper";const m=f.forwardRef(({className:r,...a},n)=>t.jsx("ul",{ref:n,className:p.cn("cai-flex cai-flex-row cai-items-center cai-gap-x-xs",r),...a}));m.displayName="PaginationContent";const d=f.forwardRef(({className:r,...a},n)=>t.jsx("li",{ref:n,className:p.cn("cai-flex cai-items-center",r),...a}));d.displayName="PaginationItem";const P=({className:r,isActive:a=!1,children:n,...c})=>t.jsx("a",{"aria-current":a?"page":void 0,className:p.cn(M,a?"cai-bg-secondary":"hover:cai-border-primary",r),...c,children:n});P.displayName="PaginationLink";const v=({className:r,isVisible:a=!0,previousText:n="Previous",...c})=>t.jsxs("a",{"aria-hidden":!a,"aria-disabled":!a,tabIndex:a?0:-1,className:p.cn("cai-flex cai-items-center cai-gap-x-xs cai-px-md cai-h-8 cai-rounded-xs cai-text-body2 cai-font-semibold cai-text-primary cai-transition-colors cai-outline-none cai-cursor-pointer hover:cai-bg-secondary",u.FOCUS_RING,!a&&"cai-invisible cai-pointer-events-none",r),...c,children:[t.jsx(x.Icon,{name:"chevron-left",size:16,"aria-hidden":"true"}),t.jsx("span",{children:n})]});v.displayName="PaginationPrevious";const j=({className:r,isVisible:a=!0,nextText:n="Next",...c})=>t.jsxs("a",{"aria-hidden":!a,"aria-disabled":!a,tabIndex:a?0:-1,className:p.cn("cai-flex cai-items-center cai-gap-x-xs cai-px-md cai-h-8 cai-rounded-xs cai-text-body2 cai-font-semibold cai-text-primary cai-transition-colors cai-outline-none cai-cursor-pointer hover:cai-bg-secondary",u.FOCUS_RING,!a&&"cai-invisible cai-pointer-events-none",r),...c,children:[t.jsx("span",{children:n}),t.jsx(x.Icon,{name:"chevron-right",size:16,"aria-hidden":"true"})]});j.displayName="PaginationNext";const y=({className:r,...a})=>t.jsx("span",{"aria-hidden":"true",className:p.cn("cai-flex cai-h-8 cai-w-8 cai-items-center cai-justify-center cai-text-icon-primary",r),...a,children:t.jsx(x.Icon,{name:"dots-horizontal",size:16,"aria-hidden":"true"})});y.displayName="PaginationEllipsis";const I=({navAriaLabel:r="Pagination",bounded:a=!0,count:n,className:c="",defaultPage:h=1,nextAriaLabel:O="Next page",nextText:k="Next",pageAriaLabel:N="Page",previousAriaLabel:S="Previous page",previousText:R="Previous",onPageChange:_})=>{const[s,b]=f.useState(h);f.useEffect(()=>{h>0&&h<=n&&b(h)},[h]);const w=i=>{b(i),_(i)},q=(i,e)=>{i.preventDefault(),w(e)},C=(i,e)=>{i.preventDefault(),w(e)},o=f.useCallback(i=>t.jsx(d,{children:t.jsx(P,{isActive:i===s,href:"#",onClick:e=>q(e,i),"aria-label":`${N} ${i}`,children:i})},i),[s,N]),l=f.useCallback(i=>t.jsx(d,{children:t.jsx(y,{})},i),[]),z=()=>{const i=[];if(a&&i.push(t.jsx(d,{children:t.jsx(v,{"aria-label":S,isVisible:s>1,previousText:R,href:"#",onClick:e=>C(e,s-1)})},"previous")),n<=G)if(a)for(let e=1;e<=n;e++)i.push(o(e));else{for(let e=1;e<=n-1;e++)i.push(o(e));i.push(l("overflow-right"))}else if(a){if(i.push(o(1)),s<=4){for(let e=2;e<=5;e++)i.push(o(e));i.push(l("overflow-right"))}else if(s>=n-3){i.push(l("overflow-left"));for(let e=n-4;e<=n-1;e++)i.push(o(e))}else{i.push(l("overflow-left"));for(let e=s-1;e<=s+1;e++)i.push(o(e));i.push(l("overflow-right"))}i.push(o(n))}else if(s<=6){for(let e=1;e<=Math.min(n-1,6);e++)i.push(o(e));i.push(l("overflow-right"))}else if(s>=n-2){i.push(o(1)),i.push(l("overflow-left"));for(let e=n-4;e<=n-1;e++)i.push(o(e));i.push(l("overflow-right"))}else{i.push(o(1)),i.push(l("overflow-left"));for(let e=s-1;e<=s+2;e++)i.push(o(e));i.push(l("overflow-right"))}return a&&i.push(t.jsx(d,{children:t.jsx(j,{"aria-label":O,isVisible:s<n,nextText:k,href:"#",onClick:e=>C(e,s+1)})},"next")),i};return t.jsx(g,{"aria-label":r,className:c,children:t.jsx(m,{children:z()})})};I.displayName="Pagination";exports.Pagination=I;exports.PaginationContent=m;exports.PaginationEllipsis=y;exports.PaginationItem=d;exports.PaginationLink=P;exports.PaginationNext=j;exports.PaginationPrevious=v;exports.PaginationWrapper=g;

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+export interface PaginationProps {
+    /** boolean — when true shows prev/next controls and bookend page numbers */
+    bounded?: boolean;
+    /** number — total number of pages (required) */
+    count: number;
+    /** string — extra classes applied to the outer nav landmark */
+    className?: string;
+    /** number — initial page, defaults to 1 */
+    defaultPage?: number;
+    /** string — accessible label for the wrapping nav */
+    navAriaLabel?: string;
+    /** string — accessible label for the next page control */
+    nextAriaLabel?: string;
+    /** string — visible text for the next page control */
+    nextText?: string;
+    /** string — accessible label for the previous page control */
+    previousAriaLabel?: string;
+    /** string — visible text for the previous page control */
+    previousText?: string;
+    /** string — prefix used for per-page aria labels, e.g. "Page 3" */
+    pageAriaLabel?: string;
+    /** (newValue: number) => void — fires whenever the active page changes */
+    onPageChange: (newValue: number) => void;
+}
+interface PaginationItemProps extends React.HTMLAttributes<HTMLLIElement> {
+}
+interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    isActive?: boolean;
+}
+interface PaginationPrevNextProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    isVisible?: boolean;
+}
+interface PaginationPreviousProps extends PaginationPrevNextProps {
+    previousText?: string;
+}
+interface PaginationNextProps extends PaginationPrevNextProps {
+    nextText?: string;
+}
+declare const PaginationWrapper: React.FC<React.HTMLAttributes<HTMLElement>>;
+declare const PaginationContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
+declare const PaginationItem: React.ForwardRefExoticComponent<PaginationItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const PaginationLink: React.FC<PaginationLinkProps>;
+declare const PaginationPrevious: React.FC<PaginationPreviousProps>;
+declare const PaginationNext: React.FC<PaginationNextProps>;
+declare const PaginationEllipsis: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
+export declare const Pagination: React.FC<PaginationProps>;
+export { PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationWrapper, };
+//# 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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,eAAe;IAC9B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,0EAA0E;IAC1E,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC;AAED,UAAU,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;CAAG;AAE5E,UAAU,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,uBAAwB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,UAAU,uBAAwB,SAAQ,uBAAuB;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,UAAU,mBAAoB,SAAQ,uBAAuB;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAcD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CASlE,CAAA;AAQD,QAAA,MAAM,iBAAiB,iHASrB,CAAA;AAQF,QAAA,MAAM,cAAc,2FAInB,CAAA;AAQD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBjD,CAAA;AAQD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuBzD,CAAA;AAQD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuBjD,CAAA;AAQD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAcvE,CAAA;AAQD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6IhD,CAAA;AAID,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,CAAA"}

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,225 @@
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import * as p from "react";
+import { cn as h } from "../../utils/cn.js";
+import { FOCUS_RING as m } from "../../utils/focusRing.js";
+import { Icon as u } from "../Icon/Icon.js";
+const _ = 7, $ = `cai-flex cai-h-8 cai-w-8 cai-items-center cai-justify-center cai-rounded-xs cai-border cai-border-transparent cai-text-body2 cai-font-medium cai-text-primary cai-transition-colors cai-outline-none ${m}`, N = ({
+  className: t,
+  ...a
+}) => /* @__PURE__ */ n(
+  "nav",
+  {
+    role: "navigation",
+    className: h("cai-mx-auto cai-flex cai-w-full cai-justify-center", t),
+    ...a
+  }
+);
+N.displayName = "PaginationWrapper";
+const w = p.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ n(
+  "ul",
+  {
+    ref: r,
+    className: h("cai-flex cai-flex-row cai-items-center cai-gap-x-xs", t),
+    ...a
+  }
+));
+w.displayName = "PaginationContent";
+const d = p.forwardRef(
+  ({ className: t, ...a }, r) => /* @__PURE__ */ n("li", { ref: r, className: h("cai-flex cai-items-center", t), ...a })
+);
+d.displayName = "PaginationItem";
+const b = ({
+  className: t,
+  isActive: a = !1,
+  children: r,
+  ...l
+}) => /* @__PURE__ */ n(
+  "a",
+  {
+    "aria-current": a ? "page" : void 0,
+    className: h(
+      $,
+      a ? "cai-bg-secondary" : "hover:cai-border-primary",
+      t
+    ),
+    ...l,
+    children: r
+  }
+);
+b.displayName = "PaginationLink";
+const C = ({
+  className: t,
+  isVisible: a = !0,
+  previousText: r = "Previous",
+  ...l
+}) => /* @__PURE__ */ y(
+  "a",
+  {
+    "aria-hidden": !a,
+    "aria-disabled": !a,
+    tabIndex: a ? 0 : -1,
+    className: h(
+      "cai-flex cai-items-center cai-gap-x-xs cai-px-md cai-h-8 cai-rounded-xs cai-text-body2 cai-font-semibold cai-text-primary cai-transition-colors cai-outline-none cai-cursor-pointer hover:cai-bg-secondary",
+      m,
+      !a && "cai-invisible cai-pointer-events-none",
+      t
+    ),
+    ...l,
+    children: [
+      /* @__PURE__ */ n(u, { name: "chevron-left", size: 16, "aria-hidden": "true" }),
+      /* @__PURE__ */ n("span", { children: r })
+    ]
+  }
+);
+C.displayName = "PaginationPrevious";
+const k = ({
+  className: t,
+  isVisible: a = !0,
+  nextText: r = "Next",
+  ...l
+}) => /* @__PURE__ */ y(
+  "a",
+  {
+    "aria-hidden": !a,
+    "aria-disabled": !a,
+    tabIndex: a ? 0 : -1,
+    className: h(
+      "cai-flex cai-items-center cai-gap-x-xs cai-px-md cai-h-8 cai-rounded-xs cai-text-body2 cai-font-semibold cai-text-primary cai-transition-colors cai-outline-none cai-cursor-pointer hover:cai-bg-secondary",
+      m,
+      !a && "cai-invisible cai-pointer-events-none",
+      t
+    ),
+    ...l,
+    children: [
+      /* @__PURE__ */ n("span", { children: r }),
+      /* @__PURE__ */ n(u, { name: "chevron-right", size: 16, "aria-hidden": "true" })
+    ]
+  }
+);
+k.displayName = "PaginationNext";
+const I = ({
+  className: t,
+  ...a
+}) => /* @__PURE__ */ n(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: h(
+      "cai-flex cai-h-8 cai-w-8 cai-items-center cai-justify-center cai-text-icon-primary",
+      t
+    ),
+    ...a,
+    children: /* @__PURE__ */ n(u, { name: "dots-horizontal", size: 16, "aria-hidden": "true" })
+  }
+);
+I.displayName = "PaginationEllipsis";
+const A = ({
+  navAriaLabel: t = "Pagination",
+  bounded: a = !0,
+  count: r,
+  className: l = "",
+  defaultPage: f = 1,
+  nextAriaLabel: j = "Next page",
+  nextText: z = "Next",
+  pageAriaLabel: x = "Page",
+  previousAriaLabel: O = "Previous page",
+  previousText: R = "Previous",
+  onPageChange: S
+}) => {
+  const [o, g] = p.useState(f);
+  p.useEffect(() => {
+    f > 0 && f <= r && g(f);
+  }, [f]);
+  const v = (e) => {
+    g(e), S(e);
+  }, E = (e, i) => {
+    e.preventDefault(), v(i);
+  }, P = (e, i) => {
+    e.preventDefault(), v(i);
+  }, s = p.useCallback(
+    (e) => /* @__PURE__ */ n(d, { children: /* @__PURE__ */ n(
+      b,
+      {
+        isActive: e === o,
+        href: "#",
+        onClick: (i) => E(i, e),
+        "aria-label": `${x} ${e}`,
+        children: e
+      }
+    ) }, e),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [o, x]
+  ), c = p.useCallback(
+    (e) => /* @__PURE__ */ n(d, { children: /* @__PURE__ */ n(I, {}) }, e),
+    []
+  );
+  return /* @__PURE__ */ n(N, { "aria-label": t, className: l, children: /* @__PURE__ */ n(w, { children: (() => {
+    const e = [];
+    if (a && e.push(
+      /* @__PURE__ */ n(d, { children: /* @__PURE__ */ n(
+        C,
+        {
+          "aria-label": O,
+          isVisible: o > 1,
+          previousText: R,
+          href: "#",
+          onClick: (i) => P(i, o - 1)
+        }
+      ) }, "previous")
+    ), r <= _)
+      if (a)
+        for (let i = 1; i <= r; i++) e.push(s(i));
+      else {
+        for (let i = 1; i <= r - 1; i++) e.push(s(i));
+        e.push(c("overflow-right"));
+      }
+    else if (a) {
+      if (e.push(s(1)), o <= 4) {
+        for (let i = 2; i <= 5; i++) e.push(s(i));
+        e.push(c("overflow-right"));
+      } else if (o >= r - 3) {
+        e.push(c("overflow-left"));
+        for (let i = r - 4; i <= r - 1; i++) e.push(s(i));
+      } else {
+        e.push(c("overflow-left"));
+        for (let i = o - 1; i <= o + 1; i++) e.push(s(i));
+        e.push(c("overflow-right"));
+      }
+      e.push(s(r));
+    } else if (o <= 6) {
+      for (let i = 1; i <= Math.min(r - 1, 6); i++) e.push(s(i));
+      e.push(c("overflow-right"));
+    } else if (o >= r - 2) {
+      e.push(s(1)), e.push(c("overflow-left"));
+      for (let i = r - 4; i <= r - 1; i++) e.push(s(i));
+      e.push(c("overflow-right"));
+    } else {
+      e.push(s(1)), e.push(c("overflow-left"));
+      for (let i = o - 1; i <= o + 2; i++) e.push(s(i));
+      e.push(c("overflow-right"));
+    }
+    return a && e.push(
+      /* @__PURE__ */ n(d, { children: /* @__PURE__ */ n(
+        k,
+        {
+          "aria-label": j,
+          isVisible: o < r,
+          nextText: z,
+          href: "#",
+          onClick: (i) => P(i, o + 1)
+        }
+      ) }, "next")
+    ), e;
+  })() }) });
+};
+A.displayName = "Pagination";
+export {
+  A as Pagination,
+  w as PaginationContent,
+  I as PaginationEllipsis,
+  d as PaginationItem,
+  b as PaginationLink,
+  k as PaginationNext,
+  C as PaginationPrevious,
+  N as PaginationWrapper
+};

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

@@ -0,0 +1,3 @@
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationWrapper, } from './Pagination';
+export type { PaginationProps } from './Pagination';
+//# 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,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,cAAc,CAAA;AACrB,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}