@ztwoint/z-ui 0.1.45 → 0.1.47

package/dist/components/assets/icons/check.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+export declare function Check({ title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Check;

package/dist/components/assets/icons/check.js

@@ -0,0 +1,17 @@
+import { jsxs as e, jsx as l } from "react/jsx-runtime";
+function s({ title: r = "badge 13", ...t }) {
+  return /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+    /* @__PURE__ */ l("title", { children: r }),
+    /* @__PURE__ */ l("g", { fill: "currentColor", children: /* @__PURE__ */ l(
+      "path",
+      {
+        d: "M16,0C7.163,0,0,7.163,0,16s7.163,16,16,16,16-7.163,16-16C31.974,7.174,24.826,.026,16,0Zm7.707,11.707l-10,10c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-4-4c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l3.293,3.293,9.293-9.293c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414Z",
+        fill: "currentColor"
+      }
+    ) })
+  ] });
+}
+export {
+  s as Check,
+  s as default
+};

package/dist/components/assets/icons/x-mark.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+export declare function XMark({ title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default XMark;

package/dist/components/assets/icons/x-mark.js

@@ -0,0 +1,17 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+function i({ title: r = "badge 13", ...t }) {
+  return /* @__PURE__ */ s("svg", { height: "48", width: "48", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+    /* @__PURE__ */ l("title", { children: r }),
+    /* @__PURE__ */ l("g", { fill: "currentColor", children: /* @__PURE__ */ l(
+      "path",
+      {
+        d: "M24,1C11.3,1,1,11.3,1,24s10.3,23,23,23s23-10.3,23-23S36.7,1,24,1z M32.7,31.3c0.4,0.4,0.4,1,0,1.4 C32.5,32.9,32.3,33,32,33s-0.5-0.1-0.7-0.3L24,25.4l-7.3,7.3C16.5,32.9,16.3,33,16,33s-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4 l7.3-7.3l-7.3-7.3c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l7.3,7.3l7.3-7.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L25.4,24L32.7,31.3z",
+        fill: "currentColor"
+      }
+    ) })
+  ] });
+}
+export {
+  i as XMark,
+  i as default
+};

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { RootProps, LabelProps } from '../../../avatar/avatar';
+import { CellValue } from '../../table.type';
+export interface AvatarCellProps {
+    avatar: {
+        label: LabelProps['label'];
+        color: RootProps['color'];
+    };
+    value: CellValue;
+    rightIcon?: React.ReactNode;
+    className?: string;
+    helperText?: string;
+    description?: string;
+}
+export declare const AvatarCell: FC<AvatarCellProps>;

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

@@ -0,0 +1,74 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+/* empty css                              */
+import "react";
+import { cn as r } from "../../../../lib/utils.js";
+import "../../../alert/alert.const.js";
+import "../../../button/button.js";
+import "../../../collapsible-side-nav-bar/side-nav-bar-provider.js";
+import "../../../collapsible-side-nav-bar/side-nav-bar.js";
+import "../../../collapsible-side-nav-bar/side-nav-bar-header.js";
+import "../../../collapsible-side-nav-bar/side-nav-bar-content.js";
+import "../../../collapsible-side-nav-bar/side-nav-bar-footer.js";
+import "../../../collapsible-side-nav-bar/side-nav-bar-group.js";
+import "../../../collapsible-side-nav-bar/side-nav-bar-item.js";
+import "../../../collapsible-side-nav-bar/side-nav-bar-separator.js";
+import "../../../collapsible-side-nav-bar/context.js";
+import "../../../collapsible-side-nav-bar/popover/popover.js";
+import "react-country-flag";
+import "classnames";
+import "@radix-ui/react-dialog";
+import "../../../dropdown/z2-dropdown.js";
+import "@radix-ui/react-dropdown-menu";
+import "lucide-react";
+import "../../../input/input.js";
+import "../../../nav-header/nav-header.js";
+import "../../../nav-header/nav-item/nav-item.js";
+import "@radix-ui/react-select";
+import "../../../stepper/stepper.js";
+import "../../../stepper-item/stepper-item.js";
+import "@radix-ui/react-tabs";
+import "../../table-provider.js";
+import { Avatar as p } from "../../../avatar/avatar.js";
+import "../../table.context.js";
+import "../../../tooltip/tooltip.js";
+import "../../../badge/badge.js";
+const V = ({
+  avatar: m,
+  value: a,
+  rightIcon: e,
+  className: s,
+  helperText: o,
+  description: l
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: r(
+      "flex flex-col gap-2.5  items-center hover:bg-background-neutral-light h-full min-w-full  leading-none-medium-sm p-3",
+      s
+    ),
+    children: [
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: r(
+            "text-text-neutral-primary flex justify-between  gap-2.5 min-w-full items-center"
+          ),
+          children: [
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-2 h-full", children: [
+              /* @__PURE__ */ t(p.Root, { size: "xxs", color: m.color, children: /* @__PURE__ */ t(p.Label, { label: m.label }) }),
+              a
+            ] }),
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-2.5", children: [
+              o && /* @__PURE__ */ t("span", { className: "text-text-neutral-secondary", children: o }),
+              e && /* @__PURE__ */ t("span", { className: r("min-h-max min-w-max"), children: e })
+            ] })
+          ]
+        }
+      ),
+      l && /* @__PURE__ */ t("div", { className: "text-text-neutral-secondary w-full", children: l })
+    ]
+  }
+);
+export {
+  V as AvatarCell
+};

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

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

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

@@ -1,7 +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" });
+import { jsx as r } from "react/jsx-runtime";
+import { Check as t } from "../../../assets/icons/check.js";
+import { XMark as l } from "../../../assets/icons/x-mark.js";
+const s = ({ value: e }) => e == null ? null : /* @__PURE__ */ r("div", { className: "flex items-center  p-3 h-full", children: e ? /* @__PURE__ */ r(t, { className: "text-green-500 w-3.5 h-3.5" }) : /* @__PURE__ */ r(l, { className: "text-red-500 w-3.5 h-3.5" }) });
 export {
-  l as BooleanCell
+  s as BooleanCell
 };

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

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

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

@@ -0,0 +1,16 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../../../lib/utils.js";
+const i = ({ value: e, className: t }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: l(
+      "text-text-neutral-secondary p-3 w-full h-full items-center flex hover:bg-background-neutral-light",
+      "leading-[24px] text-[14px]",
+      t
+    ),
+    children: e
+  }
+);
+export {
+  i as DescriptionCell
+};

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

@@ -1,3 +1,12 @@
-export { TextCell } from './text-cell';
 export { NumberCell } from './number-cell';
 export { BooleanCell } from './boolean-cell';
+export { LinkCell } from './link-cell';
+export { DescriptionCell } from './description-cell';
+export { AvatarCell } from './avatar-cell';
+export { LabelCell } from './label-cell';
+export type { NumberCellProps } from './number-cell';
+export type { BooleanCellProps } from './boolean-cell';
+export type { LinkCellProps } from './link-cell';
+export type { AvatarCellProps } from './avatar-cell';
+export type { LabelCellProps } from './label-cell';
+export type { DescriptionCellProps } from './description-cell';

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

@@ -0,0 +1,10 @@
+import { CellValue } from '../../table.type';
+export interface LabelCellProps {
+    value: CellValue;
+    rightIcon?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    className?: string;
+    helperText?: string;
+    description?: string;
+}
+export declare const LabelCell: React.FC<LabelCellProps>;

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

@@ -0,0 +1,47 @@
+import { jsxs as e, jsx as l } from "react/jsx-runtime";
+import "react";
+import { cn as a } from "../../../../lib/utils.js";
+const u = ({
+  value: i,
+  leftIcon: n,
+  rightIcon: t,
+  className: c,
+  helperText: m,
+  description: s
+}) => {
+  const r = "min-h-max min-w-max";
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: a(
+        "flex flex-row gap-2.5  items-center hover:bg-background-neutral-light h-full min-w-full  leading-none-medium-sm p-3",
+        s && "flex-col",
+        c
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: a(
+              "text-text-neutral-primary flex justify-between  gap-2.5 min-w-full items-center"
+            ),
+            children: [
+              /* @__PURE__ */ e("div", { className: "flex items-center gap-2.5 h-full", children: [
+                n && /* @__PURE__ */ l("span", { className: a(r), children: n }),
+                i
+              ] }),
+              /* @__PURE__ */ e("div", { className: "flex items-center gap-2.5", children: [
+                m && /* @__PURE__ */ l("span", { className: "text-text-neutral-secondary", children: m }),
+                t && /* @__PURE__ */ l("span", { className: a(r), children: t })
+              ] })
+            ]
+          }
+        ),
+        s && /* @__PURE__ */ l("div", { className: "text-text-neutral-secondary w-full", children: s })
+      ]
+    }
+  );
+};
+export {
+  u as LabelCell
+};

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

@@ -0,0 +1,10 @@
+import { CellValue } from '../../table.type';
+export interface LinkCellProps {
+    value: CellValue;
+    href: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rightIcon?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    className?: string;
+}
+export declare const LinkCell: React.FC<LinkCellProps>;

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

@@ -0,0 +1,35 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import "react";
+import { cn as e } from "../../../../lib/utils.js";
+const p = ({
+  value: i,
+  href: m,
+  target: t = "_self",
+  leftIcon: n,
+  rightIcon: r,
+  className: o
+}) => {
+  const l = "min-h-max min-w-max";
+  return /* @__PURE__ */ s(
+    "a",
+    {
+      href: m,
+      target: t,
+      rel: "noopener noreferrer",
+      className: e(
+        "text-text-brand-secondary p-3 leading-none-medium-sm flex flex-row justify-between  hover:bg-background-neutral-light gap-2.5 min-w-full min-h-full items-center",
+        o
+      ),
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-2.5 h-full", children: [
+          n && /* @__PURE__ */ a("span", { className: e(l), children: n }),
+          i
+        ] }),
+        r && /* @__PURE__ */ a("span", { className: e(l), children: r })
+      ]
+    }
+  );
+};
+export {
+  p as LinkCell
+};

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

@@ -1,7 +1,9 @@
 import { CellValue } from '../../table.type';
-import * as React from 'react';
-interface NumberCellProps {
+export interface NumberCellProps {
     value: CellValue;
+    rightIcon?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    className?: string;
+    helperText?: string;
 }
 export declare const NumberCell: React.FC<NumberCellProps>;
-export {};

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

@@ -1,5 +1,42 @@
-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) });
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import "react";
+import { cn as l } from "../../../../lib/utils.js";
+const u = ({
+  value: r,
+  leftIcon: s,
+  rightIcon: n,
+  className: t,
+  helperText: i
+}) => {
+  const m = "min-h-max min-w-max";
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: l(
+        "flex  gap-2.5 items-center hover:bg-background-neutral-light h-full min-w-full   leading-none-medium-sm p-3",
+        t
+      ),
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          className: l(
+            "text-text-neutral-primary flex justify-between  gap-2.5 min-w-full items-center"
+          ),
+          children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2.5 h-full", children: [
+              s && /* @__PURE__ */ e("span", { className: l(m), children: s }),
+              i && /* @__PURE__ */ e("span", { className: "text-text-neutral-secondary", children: i })
+            ] }),
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2.5", children: [
+              r,
+              n && /* @__PURE__ */ e("span", { className: l(m), children: n })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
 export {
-  o as NumberCell
+  u as NumberCell
 };

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

@@ -1,5 +1,5 @@
 export { TableCell } from './table-cell';
-export { TextCell, NumberCell, BooleanCell } from './cell';
+export { NumberCell, BooleanCell, AvatarCell, DescriptionCell, LabelCell, LinkCell } from './cell';
 export { TableHeader } from './table-header';
 export { TableRow } from './table-row';
 export { TableEmptyState } from './table-empty-state';

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

@@ -1,4 +1,5 @@
 export { Pagination, default } from './pagination';
+export { PaginationInfo, PaginationQuickJumper } from './components';
 export type { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps, } from './pagination.type';
 export { usePagination } from './pagination.hook';
 export { usePaginationQuickJumper } from './components/pagination-quick-jumper.hook';

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

@@ -1,5 +1,5 @@
 import { PaginationHookProps, PaginationHookReturn } from './pagination.type';
-export declare const usePagination: (props: PaginationHookProps) => PaginationHookReturn & {
+export declare const usePagination: ({ currentPage, totalPage, maxVisiblePages, }: PaginationHookProps) => PaginationHookReturn & {
     goToPage: (page: number) => boolean;
     canGoToPage: (page: number) => boolean;
 };

package/dist/components/table/components/pagination/pagination.hook.js

@@ -1,22 +1,26 @@
-import { useMemo as i, useCallback as o } from "react";
-import { calculateVisiblePages as l, isValidPageNumber as P } from "./pagination.utils.js";
-const u = (a) => {
-  const n = i(
-    () => l(a),
-    [a.currentPage, a.totalPage, a.maxVisiblePages]
-  ), e = o(
-    (t) => P(t, a.totalPage),
-    [a.totalPage]
-  ), g = o(
-    (t) => e(t),
-    [e]
+import { useMemo as u, useCallback as s } from "react";
+import { calculateVisiblePages as a, isValidPageNumber as m } from "./pagination.utils.js";
+const f = ({
+  currentPage: e,
+  totalPage: o,
+  maxVisiblePages: i
+}) => {
+  const t = u(
+    () => a({ currentPage: e, totalPage: o, maxVisiblePages: i }),
+    [e, o, i]
+  ), n = s(
+    (r) => m(r, o),
+    [o]
+  ), c = s(
+    (r) => n(r),
+    [n]
   );
   return {
-    ...n,
-    goToPage: g,
-    canGoToPage: e
+    ...t,
+    goToPage: c,
+    canGoToPage: n
   };
 };
 export {
-  u as usePagination
+  f as usePagination
 };

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

@@ -1,7 +1,7 @@
 import { CellValue, CellType, CellRenderer, TableProps } from '../table.type';
 import * as React from 'react';
 interface TableCellProps {
-    value: CellValue;
+    value: CellValue | Record<string, unknown>;
     cellType: CellType;
     cellRenderer?: CellRenderer;
     customCells?: Record<string, CellRenderer>;

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

@@ -1,46 +1,55 @@
-import { jsx as l } from "react/jsx-runtime";
-import { TABLE_CSS_CLASSES as r } from "../table.const.js";
-import { TextCell as m } from "./cell/text-cell.js";
-import { NumberCell as h } from "./cell/number-cell.js";
-import { BooleanCell as b } from "./cell/boolean-cell.js";
+import { jsx as t } from "react/jsx-runtime";
+import { TABLE_CSS_CLASSES as s } from "../table.const.js";
+import { NumberCell as S } from "./cell/number-cell.js";
+import { BooleanCell as C } from "./cell/boolean-cell.js";
+import { LinkCell as d } from "./cell/link-cell.js";
+import { DescriptionCell as h } from "./cell/description-cell.js";
+import { AvatarCell as u } from "./cell/avatar-cell.js";
+import { LabelCell as c } from "./cell/label-cell.js";
 import "react";
-import { cn as S } from "../../../lib/utils.js";
-const E = ({
-  value: t,
-  cellType: n,
-  cellRenderer: f,
+import { cn as B } from "../../../lib/utils.js";
+const T = ({
+  value: o,
+  cellType: m,
+  cellRenderer: n,
   record: i,
-  index: C,
+  index: a,
   customCells: e,
-  cell: s
+  cell: b
 }) => {
-  const p = {
-    text: m,
-    number: h,
-    boolean: b,
-    checkbox: m
-  }, a = e == null ? void 0 : e[n];
-  let o;
-  if (f)
-    o = f({ value: t, record: i, index: C });
-  else if (a)
-    o = /* @__PURE__ */ l(a, { value: t, record: i, index: C });
+  const A = {
+    text: c,
+    number: S,
+    boolean: C,
+    checkbox: C,
+    link: d,
+    avatar: u,
+    label: c
+  }, f = e == null ? void 0 : e[m];
+  let r;
+  if (n)
+    r = n({ value: o, record: i, index: a });
+  else if (f)
+    r = /* @__PURE__ */ t(f, { value: o, record: i, index: a });
   else {
-    const c = p[n] ?? m;
-    o = /* @__PURE__ */ l(c, { value: t });
+    const l = A[m] ?? h;
+    if (typeof o == "object" && o !== null && !Array.isArray(o)) {
+      const p = o, L = { value: p.value ?? "", ...p };
+      r = /* @__PURE__ */ t(l, { ...L });
+    } else
+      r = /* @__PURE__ */ t(l, { value: o ?? "" });
   }
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ t(
     "td",
     {
-      className: S(
-        r.cell.default,
-        r.cell.cellHeight[s.cellHeight],
-        r.cell.hasBorder[s.hasBorder ? "true" : "false"]
+      className: B(
+        s.cell.default,
+        s.cell.hasBorder[b.hasBorder ? "true" : "false"]
       ),
-      children: o
+      children: r
     }
   );
 };
 export {
-  E as TableCell
+  T as TableCell
 };