@ztwoint/z-ui 0.1.46 → 0.1.49

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

@@ -1,105 +1,161 @@
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-select";
-import { ChevronDownIcon as n, ChevronUpIcon as d } from "lucide-react";
-import { cn as c } from "../../lib/utils.js";
+import * as a from "@radix-ui/react-select";
+import { ChevronDownIcon as i, ChevronUpIcon as d } from "lucide-react";
+import { cn as l } from "../../lib/utils.js";
 import u from "../assets/icons/circle-check-filled.js";
-function N({ ...e }) {
-  return /* @__PURE__ */ t(r.Root, { "data-slot": "select", ...e });
+function h({ ...e }) {
+  return /* @__PURE__ */ t(a.Root, { "data-slot": "select", ...e });
 }
-function x({
+function b({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.Group,
+    a.Group,
     {
       "data-slot": "select-group",
-      className: c("z2-select-group", e),
-      ...l
+      className: l(
+        // layout
+        "flex w-full flex-col items-start gap-1 relative rounded-none",
+        e
+      ),
+      ...s
     }
   );
 }
-function S({
+function g({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.Value,
+    a.Value,
     {
       "data-slot": "select-value",
-      className: c(e, "z2-select-value"),
-      ...l
+      className: l(
+        // layout + text alignment
+        "w-full self-center items-start text-left flex gap-1",
+        e
+      ),
+      ...s
     }
   );
 }
-function g({
+function w({
   className: e,
-  size: l = "default",
-  children: s,
-  ...a
+  size: s = "default",
+  children: r,
+  ...n
 }) {
   return /* @__PURE__ */ o(
-    r.Trigger,
+    a.Trigger,
     {
       "data-slot": "select-trigger",
-      "data-size": l,
-      className: c("z2-select-trigger", e),
-      ...a,
+      "data-size": s,
+      className: l(
+        // base layout
+        "h-7.5 flex items-center justify-center w-full self-stretch transition-all cursor-pointer",
+        "gap-[6px] p-2 rounded-md",
+        // size variants
+        "data-[size=sm]:gap-1 data-[size=sm]:p-[6px]",
+        "data-[size=sm]:h-6.5",
+        //text
+        "leading-none-medium-sm text-text-neutral-primary",
+        "hover:text-text-neutral-secondary",
+        "focus:text-text-neutral-secondary",
+        "data-[state=open]:text-text-neutral-secondary",
+        "data-[disabled]:text-text-neutral-muted",
+        // focus reset
+        "focus:outline-none outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring-default",
+        // surface + stroke (default)
+        "bg-input-surface-default box-shadow-button-default",
+        // hover
+        "hover:bg-input-surface-hover",
+        "hover:box-shadow-button-default-hover",
+        // focus
+        "focus:bg-input-surface-pressed",
+        "focus:box-shadow-button-default-pressed",
+        // open
+        "data-[state=open]:bg-input-surface-pressed",
+        "data-[state=open]:box-shadow-button-default-pressed",
+        // disabled
+        "data-[disabled]:bg-input-surface-disabled data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
+        e
+      ),
+      ...n,
       children: [
-        s,
-        /* @__PURE__ */ t(r.Icon, { asChild: !0, children: /* @__PURE__ */ t(n, { className: "z2-trigger-icon" }) })
+        r,
+        /* @__PURE__ */ t(a.Icon, { asChild: !0, children: /* @__PURE__ */ t(i, { className: "shrink-0 w-[14px] h-[14px] aspect-square text-text-neutral-muted" }) })
       ]
     }
   );
 }
-function z({
+function v({
   className: e,
-  children: l,
-  position: s = "popper",
-  ...a
+  children: s,
+  position: r = "popper",
+  ...n
 }) {
-  return /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(
-    r.Content,
+  return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ t(
+    a.Content,
     {
       "data-slot": "select-content",
-      className: c("z2-select-content", e),
+      className: l(
+        "min-w-[var(--radix-select-trigger-width)] flex flex-col items-start p-1 rounded-xl",
+        // background stack (overlay on top + base)
+        "bg-dropdown-surface",
+        // elevation + hairline stroke
+        "box-shadow-medium-10",
+        e
+      ),
       sideOffset: 10,
-      position: s,
-      ...a,
-      children: /* @__PURE__ */ t(r.Viewport, { className: "!w-full ", children: l })
+      position: r,
+      ...n,
+      children: /* @__PURE__ */ t(a.Viewport, { className: "!w-full ", children: s })
     }
   ) });
 }
-function Z({
+function N({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.Label,
+    a.Label,
     {
       "data-slot": "select-label",
-      className: c("z2-select-label", e),
-      ...l
+      className: l(
+        "flex items-center gap-1 self-stretch text-text-neutral-secondary",
+        "px-2 pt-2 pb-1",
+        "leading-none-medium-sm",
+        e
+      ),
+      ...s
     }
   );
 }
-function b({ className: e, children: l, leftIcon: s, label: a, ...i }) {
+function S({ className: e, children: s, leftIcon: r, label: n, ...c }) {
   return /* @__PURE__ */ o(
-    r.Item,
+    a.Item,
     {
       "data-slot": "select-item",
-      className: c("z2-select-item", e),
-      ...i,
+      className: l(
+        "border-none w-full relative self-stretch flex items-center justify-between gap-2 cursor-pointer outline-none rounded-md",
+        "data-[disabled]:pointer-events-none",
+        "p-2",
+        // hover/active surface
+        "data-[state=active]:surface-neutral-focused hover:surface-neutral-focused",
+        e
+      ),
+      ...c,
       children: [
-        /* @__PURE__ */ t(r.ItemText, { asChild: !0, children: /* @__PURE__ */ o("div", { className: "z2-select-item-text", children: [
-          s && /* @__PURE__ */ t("div", { className: "flex w-[14px] h-[14px] items-center justify-center", children: s }),
-          /* @__PURE__ */ t("div", { className: "flex-1 overflow-hidden text-ellipsis text-[14px] font-[450] leading-[100%] tracking-[-0.2px] ", children: l || a })
+        /* @__PURE__ */ t(a.ItemText, { asChild: !0, children: /* @__PURE__ */ o("div", { className: "flex items-center justify-center gap-2 flex-1 overflow-hidden text-ellipsis leading-none-medium-sm", children: [
+          r && /* @__PURE__ */ t("div", { className: "flex w-3.5 h-3.5 items-center justify-center", children: r }),
+          /* @__PURE__ */ t("div", { className: "flex-1 overflow-hidden text-ellipsis leading-none-medium-sm", children: s || n })
         ] }) }),
         /* @__PURE__ */ t(
-          r.ItemIndicator,
+          a.ItemIndicator,
           {
             "data-slot": "select-item-indicator",
-            className: "z2-select-item-indicator",
+            className: "flex w-[14px] h-[14px] items-center justify-center",
             children: /* @__PURE__ */ t(u, { className: "w-4 h-4" })
           }
         )
@@ -107,59 +163,56 @@ function b({ className: e, children: l, leftIcon: s, label: a, ...i }) {
     }
   );
 }
-function v({
+function y({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.Separator,
+    a.Separator,
     {
       "data-slot": "select-separator",
-      className: c(
-        "border-t-[0.5px] border-solid border-[color(display-p3_0.9059_0.9059_0.9059)] my-0 -mx-1",
-        e
-      ),
-      ...l
+      className: l("border-t-[1px] border-solid border-stroke-solid-light my-1 mx-1", e),
+      ...s
     }
   );
 }
-function w({
+function Z({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.ScrollUpButton,
+    a.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: c("flex cursor-default items-center justify-center py-1", e),
-      ...l,
+      className: l("flex cursor-default items-center justify-center py-1", e),
+      ...s,
       children: /* @__PURE__ */ t(d, { className: "size-4" })
     }
   );
 }
-function C({
+function j({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.ScrollDownButton,
+    a.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: c("flex cursor-default items-center justify-center py-1", e),
-      ...l,
-      children: /* @__PURE__ */ t(n, { className: "size-4" })
+      className: l("flex cursor-default items-center justify-center py-1", e),
+      ...s,
+      children: /* @__PURE__ */ t(i, { className: "size-4" })
     }
   );
 }
 export {
-  N as Z2Select,
-  z as Z2SelectContent,
-  x as Z2SelectGroup,
-  b as Z2SelectItem,
-  Z as Z2SelectLabel,
-  C as Z2SelectScrollDownButton,
-  w as Z2SelectScrollUpButton,
-  v as Z2SelectSeparator,
-  g as Z2SelectTrigger,
-  S as Z2SelectValue
+  h as Z2Select,
+  v as Z2SelectContent,
+  b as Z2SelectGroup,
+  S as Z2SelectItem,
+  N as Z2SelectLabel,
+  j as Z2SelectScrollDownButton,
+  Z as Z2SelectScrollUpButton,
+  y as Z2SelectSeparator,
+  w as Z2SelectTrigger,
+  g as Z2SelectValue
 };

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/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>;