@ztwoint/z-ui 0.1.26 → 0.1.28

package/dist/components/dropdown/z2-dropdown.js

@@ -0,0 +1,245 @@
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import * as p from "@radix-ui/react-popover";
+import D, { createContext as N, useState as v, useRef as k, useEffect as C, useMemo as E, useCallback as P, useContext as V } from "react";
+import { cn as d } from "../../lib/utils.js";
+import { SearchIcon as Z, ChevronDown as S } from "lucide-react";
+import b from "../assets/icons/circle-check.js";
+import { HoverCard as T, HoverCardTrigger as O, HoverCardContent as R } from "./helpers/hover-card.js";
+const y = N(void 0), g = () => {
+  const e = V(y);
+  if (!e)
+    throw new Error("useDropdown must be used within a Z2Dropdown");
+  return e;
+};
+function q({
+  defaultOpen: e = !1,
+  value: a,
+  onValueChange: o,
+  ...l
+}) {
+  const [r, s] = v(e), [c, f] = v(""), [h, i] = v(a || "");
+  return /* @__PURE__ */ t(
+    y.Provider,
+    {
+      value: {
+        open: r,
+        setOpen: s,
+        searchValue: c,
+        setSearchValue: f,
+        value: h,
+        setSelectedValue: i,
+        onValueChange: o
+      },
+      children: /* @__PURE__ */ t(_, { ...l })
+    }
+  );
+}
+function _({ ...e }) {
+  const { open: a } = g();
+  return /* @__PURE__ */ t(p.Root, { "data-slot": "popover", open: a, ...e });
+}
+function I({ ...e }) {
+  return /* @__PURE__ */ t(p.Trigger, { "data-slot": "popover-trigger", ...e });
+}
+function j({
+  ...e
+}) {
+  return /* @__PURE__ */ t(p.Anchor, { "data-slot": "popover-anchor", ...e });
+}
+function B({
+  onSearchChange: e,
+  placeholder: a = "Search...",
+  className: o = "",
+  selectedIcon: l
+}) {
+  const { open: r, setOpen: s, searchValue: c, setSearchValue: f, value: h } = g(), i = k(null);
+  C(() => {
+    if (r && i.current) {
+      const n = setTimeout(() => {
+        var u;
+        (u = i.current) == null || u.focus();
+      }, 10);
+      return () => clearTimeout(n);
+    }
+    !r && i.current && i.current.blur();
+  }, [r]);
+  const m = (n) => {
+    const u = n.target.value;
+    f(u), e == null || e(u);
+  }, w = E(() => r ? c : h, [r, c, h]);
+  return /* @__PURE__ */ t(j, { asChild: !0, children: /* @__PURE__ */ t(I, { onClick: () => s(!r), "data-prevent-close": !0, className: "w-full", children: /* @__PURE__ */ x(
+    "div",
+    {
+      className: d(
+        "flex items-center justify-center gap-1.5 p-2 self-stretch relative cursor-pointer rounded-lg bg-white border-[0.5px] border-[#E0E0E0] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:border-neutral-300 ",
+        o
+      ),
+      children: [
+        l && !r && /* @__PURE__ */ t("div", { className: "text-neutral-400 w-[14px] h-[14px] flex-shrink-0", children: l }),
+        r && /* @__PURE__ */ t("div", { className: "text-neutral-400 w-[14px] h-[14px] flex-shrink-0", children: /* @__PURE__ */ t(Z, { className: "w-3.5 h-3.5 flex-shrink-0" }) }),
+        /* @__PURE__ */ t("div", { className: "flex items-center justify-center px-0.5 gap-2.5 flex-1 relative h-[14px]", children: /* @__PURE__ */ t(
+          "input",
+          {
+            ref: i,
+            id: "z2-dropdown-input",
+            type: "text",
+            placeholder: a,
+            className: "w-full text-default-primary h-3.5 !text-sm bg-transparent border-none outline-none placeholder:text-default-muted overflow-visible",
+            value: w,
+            onChange: m,
+            onClick: (n) => {
+              s(!0), n.stopPropagation();
+            },
+            onKeyDown: (n) => {
+              var u;
+              n.stopPropagation(), n.key === "Escape" ? (s(!1), f(""), (u = i.current) == null || u.blur()) : n.key === "Enter" || n.key === " " || (n.key === "ArrowDown" || n.key === "ArrowUp") && n.preventDefault();
+            },
+            onKeyUp: (n) => {
+              n.stopPropagation(), n.key === " " && n.preventDefault();
+            }
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { className: "text-neutral-400 w-[14px] h-[14px] flex-shrink-0", children: /* @__PURE__ */ t(S, { className: d(r && "rotate-180", "w-3.5 h-3.5 flex-shrink-0") }) })
+      ]
+    }
+  ) }) });
+}
+function F({
+  className: e,
+  align: a = "start",
+  ...o
+}) {
+  const { setOpen: l } = g(), r = P((s) => {
+    s && setTimeout(() => {
+      const c = s.offsetHeight;
+      c > 0 && document.documentElement.style.setProperty(
+        "--radix-popover-content-height",
+        `${c}px`
+      );
+    }, 10);
+  }, []);
+  return /* @__PURE__ */ t(p.Portal, { children: /* @__PURE__ */ t(
+    p.Content,
+    {
+      ref: r,
+      onInteractOutside: (s) => {
+        if (s.target.closest("[data-prevent-close]")) {
+          s.preventDefault();
+          return;
+        }
+        l(!1);
+      },
+      "data-slot": "popover-content",
+      align: a,
+      sideOffset: 8,
+      className: d(
+        "bg-white max-w-fit w-[var(--radix-popover-trigger-width)] p-1 flex flex-col items-start rounded-2xl border-[0.5px] border-[#E0E0E0] shadow-lg z-50 min-w-fit",
+        e
+      ),
+      ...o
+    }
+  ) });
+}
+function A({
+  icon: e,
+  label: a,
+  value: o,
+  hoverComponent: l,
+  disablePopoverClose: r = !1
+}) {
+  const { onValueChange: s, value: c, setSelectedValue: f, setOpen: h } = g(), i = c === o, m = D.useMemo(() => /* @__PURE__ */ x(
+    "div",
+    {
+      onClick: (w) => {
+        w.preventDefault(), f(o), s && s(o), r || h(!1);
+      },
+      className: d(
+        i && "bg-neutral-secondary",
+        "p-2 gap-2 flex items-center rounded-lg cursor-pointer h-[30px] self-stretch",
+        "hover:bg-neutral-secondary"
+      ),
+      children: [
+        e && /* @__PURE__ */ t("span", { className: "h-3.5 w-3.5 relative", children: e }),
+        a || o,
+        /* @__PURE__ */ t(b, { className: d("ml-auto", i ? "opacity-100" : "opacity-0") })
+      ]
+    },
+    o
+  ), [
+    o,
+    i,
+    e,
+    a,
+    f,
+    s,
+    r,
+    h
+  ]);
+  return l ? /* @__PURE__ */ x(T, { openDelay: 1e3, children: [
+    /* @__PURE__ */ t(O, { className: "w-full", children: m }),
+    /* @__PURE__ */ t(R, { side: "right", sideOffset: 14, children: l })
+  ] }) : m;
+}
+function G({ ...e }) {
+  return /* @__PURE__ */ t(p.Root, { "data-slot": "popover", ...e });
+}
+function J({
+  value: e,
+  label: a,
+  icon: o,
+  isSelected: l = !1
+}) {
+  return /* @__PURE__ */ x(
+    p.Trigger,
+    {
+      "data-slot": "popover-sub-trigger",
+      className: d(
+        "!w-full",
+        "p-2 gap-2 flex items-center rounded-lg cursor-pointer h-[30px] self-stretch",
+        "hover:bg-neutral-secondary"
+      ),
+      children: [
+        o && /* @__PURE__ */ t("span", { className: "h-3.5 w-3.5 relative", children: o }),
+        a || e,
+        /* @__PURE__ */ t(b, { className: d("ml-auto", l ? "opacity-100" : "opacity-0") })
+      ]
+    }
+  );
+}
+function L({
+  className: e,
+  align: a = "start",
+  sideOffset: o = 4,
+  side: l = "right",
+  ...r
+}) {
+  return /* @__PURE__ */ t(p.Portal, { children: /* @__PURE__ */ t(
+    p.Content,
+    {
+      "data-slot": "popover-content",
+      align: a,
+      sideOffset: o,
+      side: l,
+      className: d(
+        "min-w-md min-h-fit h-[var(--radix-popover-content-height)]",
+        "bg-white w-full p-1 flex flex-col items-start rounded-2xl border-[0.5px] border-[#E0E0E0] shadow-lg z-50",
+        e
+      ),
+      ...r
+    }
+  ) });
+}
+function Q({ ...e }) {
+  return /* @__PURE__ */ t(A, { ...e });
+}
+export {
+  y as DropdownContext,
+  q as Z2Dropdown,
+  F as Z2DropdownContent,
+  B as Z2DropdownInput,
+  A as Z2DropdownItem,
+  G as Z2DropdownSub,
+  L as Z2DropdownSubContent,
+  Q as Z2DropdownSubItem,
+  J as Z2DropdownSubTrigger
+};

package/dist/components/dropdown-menu/z2-dropdown-menu.js

@@ -0,0 +1,255 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-dropdown-menu";
+import { CheckIcon as i, CircleIcon as u, ChevronRightIcon as l } from "lucide-react";
+import { cn as n } from "../../lib/utils.js";
+function b({ ...e }) {
+  return /* @__PURE__ */ t(o.Root, { "data-slot": "dropdown-menu", ...e });
+}
+function m({
+  ...e
+}) {
+  return /* @__PURE__ */ t(o.Portal, { "data-slot": "dropdown-menu-portal", ...e });
+}
+function f({
+  ...e
+}) {
+  return /* @__PURE__ */ t(o.Trigger, { "data-slot": "dropdown-menu-trigger", ...e });
+}
+function x({
+  className: e,
+  sideOffset: a = 8,
+  ...r
+}) {
+  return /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+    o.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset: a,
+      className: n(
+        "bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-800",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[12rem]",
+        "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+        "rounded-xl p-2 shadow-2xl shadow-black/10 dark:shadow-black/30",
+        "backdrop-blur-xl bg-white/95 dark:bg-gray-950/95",
+        e
+      ),
+      ...r
+    }
+  ) });
+}
+function w({ ...e }) {
+  return /* @__PURE__ */ t(o.Group, { "data-slot": "dropdown-menu-group", ...e });
+}
+function k({
+  className: e,
+  inset: a,
+  variant: r = "default",
+  ...d
+}) {
+  return /* @__PURE__ */ t(
+    o.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": a,
+      "data-variant": r,
+      className: n(
+        "relative flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
+        "outline-none select-none transition-all duration-150",
+        "hover:bg-gray-50 dark:hover:bg-gray-900/50",
+        "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+        "data-[variant=destructive]:text-red-600 dark:data-[variant=destructive]:text-red-400",
+        "data-[variant=destructive]:hover:bg-red-50 dark:data-[variant=destructive]:hover:bg-red-950/20",
+        "data-[variant=destructive]:focus:bg-red-50 dark:data-[variant=destructive]:focus:bg-red-950/30",
+        "data-[inset]:pl-10",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "[&_svg:not([class*='text-'])]:text-gray-500 dark:[&_svg:not([class*='text-'])]:text-gray-400",
+        e
+      ),
+      ...d
+    }
+  );
+}
+function h({
+  className: e,
+  children: a,
+  checked: r,
+  ...d
+}) {
+  return /* @__PURE__ */ s(
+    o.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: n(
+        "relative flex cursor-default items-center gap-3 rounded-lg py-2.5 pr-3 pl-10 text-sm font-medium",
+        "outline-none select-none transition-all duration-150",
+        "hover:bg-gray-50 dark:hover:bg-gray-900/50",
+        "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        e
+      ),
+      checked: r,
+      ...d,
+      children: [
+        /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-3 flex size-4 items-center justify-center", children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(i, { className: "size-3.5 text-blue-600 dark:text-blue-400" }) }) }),
+        a
+      ]
+    }
+  );
+}
+function v({
+  ...e
+}) {
+  return /* @__PURE__ */ t(o.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...e });
+}
+function y({
+  className: e,
+  children: a,
+  ...r
+}) {
+  return /* @__PURE__ */ s(
+    o.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: n(
+        "relative flex cursor-default items-center gap-3 rounded-lg py-2.5 pr-3 pl-10 text-sm font-medium",
+        "outline-none select-none transition-all duration-150",
+        "hover:bg-gray-50 dark:hover:bg-gray-900/50",
+        "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        e
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-3 flex size-4 items-center justify-center", children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(u, { className: "size-2 fill-blue-600 dark:fill-blue-400 text-blue-600 dark:text-blue-400" }) }) }),
+        a
+      ]
+    }
+  );
+}
+function D({
+  className: e,
+  inset: a,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    o.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": a,
+      className: n(
+        "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",
+        "data-[inset]:pl-10",
+        e
+      ),
+      ...r
+    }
+  );
+}
+function M({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    o.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: n("bg-gray-200 dark:bg-gray-800 my-2 h-px", e),
+      ...a
+    }
+  );
+}
+function z({ className: e, ...a }) {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: n(
+        "ml-auto text-xs font-mono text-gray-400 dark:text-gray-500 tracking-wider",
+        "bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded",
+        e
+      ),
+      ...a
+    }
+  );
+}
+function I({ ...e }) {
+  return /* @__PURE__ */ t(o.Sub, { "data-slot": "dropdown-menu-sub", ...e });
+}
+function Z({
+  className: e,
+  inset: a,
+  children: r,
+  ...d
+}) {
+  return /* @__PURE__ */ s(
+    o.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": a,
+      className: n(
+        "flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
+        "outline-none select-none transition-all duration-150",
+        "hover:bg-gray-50 dark:hover:bg-gray-900/50",
+        "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
+        "data-[state=open]:bg-blue-50 dark:data-[state=open]:bg-blue-950/30",
+        "data-[state=open]:text-blue-700 dark:data-[state=open]:text-blue-300",
+        "data-[inset]:pl-10",
+        e
+      ),
+      ...d,
+      children: [
+        r,
+        /* @__PURE__ */ t(l, { className: "ml-auto size-4 text-gray-400 dark:text-gray-500" })
+      ]
+    }
+  );
+}
+function N({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    o.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: n(
+        "bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-800",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin)",
+        "overflow-hidden rounded-xl p-2 shadow-2xl shadow-black/10 dark:shadow-black/30",
+        "backdrop-blur-xl bg-white/95 dark:bg-gray-950/95",
+        e
+      ),
+      ...a
+    }
+  );
+}
+export {
+  b as Z2DropdownMenu,
+  h as Z2DropdownMenuCheckboxItem,
+  x as Z2DropdownMenuContent,
+  w as Z2DropdownMenuGroup,
+  k as Z2DropdownMenuItem,
+  D as Z2DropdownMenuLabel,
+  m as Z2DropdownMenuPortal,
+  v as Z2DropdownMenuRadioGroup,
+  y as Z2DropdownMenuRadioItem,
+  M as Z2DropdownMenuSeparator,
+  z as Z2DropdownMenuShortcut,
+  I as Z2DropdownMenuSub,
+  N as Z2DropdownMenuSubContent,
+  Z as Z2DropdownMenuSubTrigger,
+  f as Z2DropdownMenuTrigger
+};

package/dist/components/nav-header/nav-header.js

@@ -1,19 +1,19 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { createContext as d } from "react";
 import n from "../assets/icons/z2-icon.js";
-import { cn as s } from "../../lib/utils.js";
+import { cn as t } from "../../lib/utils.js";
 import { NavItem as c } from "./nav-item/nav-item.js";
-const N = d({}), i = ({ className: a, children: r, ...t }) => /* @__PURE__ */ e(N.Provider, { value: {}, children: /* @__PURE__ */ l(
+const N = d({}), i = ({ className: a, children: r, ...s }) => /* @__PURE__ */ e(N.Provider, { value: {}, children: /* @__PURE__ */ l(
   "header",
   {
-    className: s(
-      "flex items-center h-14 p-3",
+    className: t(
+      "flex items-center h-12 p-3",
       "gap-6",
       // space between icon/separator/list
       "bg-[#001534]",
       a
     ),
-    ...t,
+    ...s,
     children: [
       /* @__PURE__ */ e("div", { className: "flex items-center flex-shrink-0", children: /* @__PURE__ */ e(n, { className: "shrink-0" }) }),
       /* @__PURE__ */ e("div", { className: "h-4 w-px bg-white/20", "aria-hidden": "true" }),
@@ -22,12 +22,12 @@ const N = d({}), i = ({ className: a, children: r, ...t }) => /* @__PURE__ */ e(
   }
 ) });
 i.displayName = "NavHeader.Root";
-const m = ({ className: a, children: r, ...t }) => /* @__PURE__ */ e("nav", { className: s("flex flex-row gap-2 ml-0", a), ...t, children: r });
+const m = ({ className: a, children: r, ...s }) => /* @__PURE__ */ e("nav", { className: t("flex flex-row gap-2 ml-0", a), ...s, children: r });
 m.displayName = "NavHeader.List";
 const o = ({
   className: a,
   ...r
-}) => /* @__PURE__ */ e("div", { className: s("list-none", a), children: /* @__PURE__ */ e(c, { ...r }) });
+}) => /* @__PURE__ */ e("div", { className: "list-none", children: /* @__PURE__ */ e(c, { ...r, className: t(a) }) });
 o.displayName = "NavHeader.Item";
 const H = {
   Root: i,

package/dist/components/table/components/cell/boolean-cell.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { CellValue } from '../../table.type';
+interface BooleanCellProps {
+    value: CellValue;
+}
+export declare const BooleanCell: FC<BooleanCellProps>;
+export {};

package/dist/components/table/components/cell/boolean-cell.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import o from "../../../../node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js";
+import t from "../../../../node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js";
+const l = ({ value: r }) => r == null ? null : r ? /* @__PURE__ */ e(o, { className: "text-green-500 w-4 h-4" }) : /* @__PURE__ */ e(t, { className: "text-red-500 w-4 h-4" });
+export {
+  l as BooleanCell
+};

package/dist/components/table/components/cell/index.d.ts

@@ -0,0 +1,3 @@
+export { TextCell } from './text-cell';
+export { NumberCell } from './number-cell';
+export { BooleanCell } from './boolean-cell';

package/dist/components/table/components/cell/number-cell.d.ts

@@ -0,0 +1,7 @@
+import { CellValue } from '../../table.type';
+import * as React from 'react';
+interface NumberCellProps {
+    value: CellValue;
+}
+export declare const NumberCell: React.FC<NumberCellProps>;
+export {};

package/dist/components/table/components/cell/number-cell.js

@@ -0,0 +1,5 @@
+import { jsx as t, Fragment as n } from "react/jsx-runtime";
+const o = ({ value: e }) => /* @__PURE__ */ t(n, { children: ((r) => r == null ? "" : typeof r == "number" ? new Intl.NumberFormat().format(r) : String(r))(e) });
+export {
+  o as NumberCell
+};

package/dist/components/table/components/cell/text-cell.d.ts

@@ -0,0 +1,7 @@
+import { CellValue } from '../../table.type';
+import * as React from 'react';
+interface TextCellProps {
+    value: CellValue;
+}
+export declare const TextCell: React.FC<TextCellProps>;
+export {};

package/dist/components/table/components/cell/text-cell.js

@@ -0,0 +1,5 @@
+import { jsx as e, Fragment as n } from "react/jsx-runtime";
+const i = ({ value: t }) => /* @__PURE__ */ e(n, { children: ((r) => r == null ? "" : String(r))(t) });
+export {
+  i as TextCell
+};

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

@@ -0,0 +1,11 @@
+export { TableCell } from './table-cell';
+export { TableHeader, TableSortIcon } from './table-header';
+export { TableRow } from './table-row';
+export { TableEmptyState } from './table-empty-state';
+export { TableLoadingState } from './table-loading-state';
+export { Pagination as TablePagination } from './pagination';
+export { TableHeaderWrapper } from './table-header-wrapper';
+export { TableHeaderContent } from './table-header-content';
+export { TableFooter } from './table-footer';
+export { TableFooterContent } from './table-footer-content';
+export * from './cell';

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

@@ -0,0 +1,3 @@
+export { PaginationInfo } from './pagination-info';
+export { PaginationQuickJumper } from './pagination-quick-jumper';
+export { usePaginationQuickJumper } from './pagination-quick-jumper.hook';

package/dist/components/table/components/pagination/components/pagination-info.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PaginationInfoProps } from '../pagination.type';
+export declare const PaginationInfo: React.FC<PaginationInfoProps>;
+export default PaginationInfo;

package/dist/components/table/components/pagination/components/pagination-info.js

@@ -0,0 +1,27 @@
+import { jsxs as t } from "react/jsx-runtime";
+import { calculateItemRange as s } from "../pagination.utils.js";
+import { PAGINATION_LABELS as r, PAGINATION_CSS_CLASSES as c } from "../pagination.const.js";
+const l = ({
+  showTotal: o,
+  totalItems: n,
+  currentPage: i,
+  itemsPerPage: a
+}) => {
+  if (!o || !n) return null;
+  const { start: e, end: f } = s(i, a, n);
+  return /* @__PURE__ */ t("div", { className: c.info, children: [
+    r.showing,
+    " ",
+    e,
+    "-",
+    f,
+    " ",
+    r.of,
+    " ",
+    n
+  ] });
+};
+export {
+  l as PaginationInfo,
+  l as default
+};

package/dist/components/table/components/pagination/components/pagination-quick-jumper.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PaginationQuickJumperProps } from '../pagination.type';
+export declare const PaginationQuickJumper: React.FC<PaginationQuickJumperProps>;
+export default PaginationQuickJumper;

package/dist/components/table/components/pagination/components/pagination-quick-jumper.hook.d.ts

@@ -0,0 +1,6 @@
+export declare const usePaginationQuickJumper: (currentPage: number, totalPage: number, onPageChange: (page: number) => void) => {
+    inputValue: string;
+    handleInputChange: (value: string) => void;
+    handleInputSubmit: () => void;
+    handleKeyPress: (event: React.KeyboardEvent) => void;
+};

package/dist/components/table/components/pagination/components/pagination-quick-jumper.hook.js

@@ -0,0 +1,24 @@
+import { useState as m, useCallback as s } from "react";
+import { isValidPageNumber as c } from "../pagination.utils.js";
+const l = (i, u, r) => {
+  const [e, o] = m(""), p = s((t) => {
+    (t === "" || /^\d+$/.test(t)) && o(t);
+  }, []), n = s(() => {
+    const t = parseInt(e, 10);
+    c(t, u) && t !== i && r(t), o("");
+  }, [e, u, i, r]), a = s(
+    (t) => {
+      t.key === "Enter" && n();
+    },
+    [n]
+  );
+  return {
+    inputValue: e,
+    handleInputChange: p,
+    handleInputSubmit: n,
+    handleKeyPress: a
+  };
+};
+export {
+  l as usePaginationQuickJumper
+};