@ztwoint/z-ui 0.1.40 → 0.1.41

package/dist/components/assets/icons/chevron-right.d.ts

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

package/dist/components/assets/icons/chevron-right.js

@@ -1,30 +1,16 @@
-import { jsx as t } from "react/jsx-runtime";
-function h({
-  fill: o = "#5D5D5D",
-  secondaryfill: n,
-  strokewidth: s = 1,
-  width: r = "14",
-  height: e = "14",
-  ...i
-}) {
-  return /* @__PURE__ */ t(
-    "svg",
-    {
-      height: e,
-      width: r,
-      viewBox: "0 0 14 14",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...i,
-      children: /* @__PURE__ */ t(
-        "path",
-        {
-          d: "M4.95778 2.41478C5.26089 2.11174 5.75228 2.11174 6.05539 2.41478L10.0919 6.45123C10.3948 6.75435 10.3949 7.24576 10.0919 7.54885L6.05539 11.5853C5.7523 11.8882 5.26087 11.8882 4.95778 11.5853C4.65477 11.2822 4.65483 10.7908 4.95778 10.4877L8.44543 7.00004L4.95778 3.51239C4.65472 3.20925 4.65467 2.71788 4.95778 2.41478Z",
-          fill: o
-        }
-      )
-    }
-  );
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+function i({ fill: t = "currentColor", title: e = "chevron right", ...h }) {
+  return /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...h, children: [
+    /* @__PURE__ */ r("title", { children: e }),
+    /* @__PURE__ */ r("g", { fill: t, children: /* @__PURE__ */ r(
+      "path",
+      {
+        d: "M4.95778 2.41478C5.26089 2.11174 5.75228 2.11174 6.05539 2.41478L10.0919 6.45123C10.3948 6.75435 10.3949 7.24576 10.0919 7.54885L6.05539 11.5853C5.7523 11.8882 5.26087 11.8882 4.95778 11.5853C4.65477 11.2822 4.65483 10.7908 4.95778 10.4877L8.44543 7.00004L4.95778 3.51239C4.65472 3.20925 4.65467 2.71788 4.95778 2.41478Z",
+        fill: t
+      }
+    ) })
+  ] });
 }
 export {
-  h as default
+  i as default
 };

package/dist/components/button/button.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as v, Fragment as h } from "react/jsx-runtime";
 import w from "react";
-import { Slot as O } from "@radix-ui/react-slot";
-import { cva as z } from "class-variance-authority";
+import { Slot as k } from "@radix-ui/react-slot";
+import { cva as O } from "class-variance-authority";
 import { cn as d } from "../../lib/utils.js";
-const k = z(
+const z = O(
   "box-border h-7.5 leading-none-medium-sm flex items-center justify-center whitespace-nowrap rounded-lg  select-none hover:cursor-pointer active:outline-none border-solid",
   {
     variants: {
@@ -50,17 +50,17 @@ const k = z(
       {
         variant: "stroke",
         shade: "neutral",
-        class: "border-none shadow-default dark:shadow-none bg-button-secondary-surface-default text-text-neutral-primary hover:bg-button-secondary-surface-hover hover:text-text-neutral-primary active:bg-button-secondary-surface-pressed active:text-text-neutral-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
+        class: "border-none shadow-button-default disabled:shadow-none dark:shadow-none bg-button-secondary-surface-default text-text-neutral-primary hover:bg-button-secondary-surface-hover hover:text-text-neutral-primary active:bg-button-secondary-surface-pressed active:text-text-neutral-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
       },
       {
         variant: "stroke",
         shade: "danger",
-        class: "border-none shadow-default bg-button-secondary-surface-default text-text-danger-secondary hover:bg-button-secondary-surface-hover hover:text-text-secondary active:bg-button-secondary-surface-pressed active:text-text-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
+        class: "border-none shadow-button-default disabled:shadow-none dark:shadow-none bg-button-secondary-surface-default text-text-danger-secondary hover:bg-button-secondary-surface-hover hover:text-text-secondary active:bg-button-secondary-surface-pressed active:text-text-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
       },
       {
         variant: "stroke",
         shade: "brand",
-        class: "border-none shadow-default bg-button-secondary-surface-default text-text-brand-secondary hover:bg-button-secondary-surface-hover hover:text-text-secondary active:bg-button-secondary-surface-pressed active:text-text-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
+        class: "border-none shadow-button-default disabled:shadow-none dark:shadow-none bg-button-secondary-surface-default text-text-brand-secondary hover:bg-button-secondary-surface-hover hover:text-text-secondary active:bg-button-secondary-surface-pressed active:text-text-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
       },
       {
         variant: "ghost",
@@ -98,8 +98,8 @@ const k = z(
     children: u,
     ...p
   }, y) => {
-    const f = o ? O : "button", r = m || u, n = !r && !!(t || a), l = n ? t || a : null, g = d(
-      k({ shade: b, size: c, variant: x, iconOnly: n }),
+    const f = o ? k : "button", r = m || u, n = !r && !!(t || a), l = n ? t || a : null, g = d(
+      z({ shade: b, size: c, variant: x, iconOnly: n }),
       i
     ), s = "w-3.5 h-3.5 min-w-max";
     return /* @__PURE__ */ e(f, { className: g, ref: y, ...p, children: o ? u : n ? l ? /* @__PURE__ */ e("span", { className: s, children: l }) : null : /* @__PURE__ */ v(h, { children: [
@@ -112,5 +112,5 @@ const k = z(
 N.displayName = "Button";
 export {
   N as Button,
-  k as buttonVariants
+  z as buttonVariants
 };

package/dist/components/file-upload-area/file-upload-area.js

@@ -27,8 +27,8 @@ const I = ({
     "div",
     {
       className: y(
-        "flex flex-col items-center justify-center gap-8 p-12 max-w-112 w-full rounded-2xl border-[.5px] border-dashed stroke-solid-high bg-neutral-light",
-        e && "opacity-60 bg-gray-100 cursor-not-allowed",
+        "flex flex-col items-center justify-center gap-8 p-12 max-w-112 w-full rounded-3xl file-upload-12-dash-border bg-neutral-light",
+        e && "opacity-60 bg-gray-100 cursor-not-allowed disabled",
         s
       ),
       onDragOver: p,

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

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

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

@@ -9,7 +9,7 @@ export declare const PAGINATION_CSS_CLASSES: {
     readonly buttonActive: "bg-blue-600 text-white border-blue-600 hover:bg-blue-700";
     readonly buttonIcon: "flex items-center justify-center w-8 h-8 text-sm rounded border border-gray-300 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed transition-colors";
     readonly ellipsis: "flex items-center justify-center w-8 h-8 text-gray-400";
-    readonly info: "leading-none-sm text-text-neutral-secondary";
+    readonly info: "leading-none-medium-sm text-text-neutral-secondary";
     readonly jumper: "flex items-center gap-2 text-sm text-text-neutral-primary";
     readonly input: "w-16 px-2 py-1 text-sm h-6 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
 };

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

@@ -2,7 +2,7 @@ const e = {
   MAX_VISIBLE_PAGES: 6
 }, t = {
   ellipsis: "flex items-center justify-center w-8 h-8 text-gray-400",
-  info: "leading-none-sm text-text-neutral-secondary",
+  info: "leading-none-medium-sm text-text-neutral-secondary",
   jumper: "flex items-center gap-2 text-sm text-text-neutral-primary",
   input: "w-16 px-2 py-1 text-sm h-6 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
 }, o = {

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

@@ -1,106 +1,106 @@
-import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { jsxs as I, jsx as e } from "react/jsx-runtime";
 import { usePagination as A } from "./pagination.hook.js";
 import { PAGINATION_LABELS as o, PAGINATION_DEFAULTS as C, PAGINATION_CSS_CLASSES as S } from "./pagination.const.js";
-import { Button as m } from "../../../button/button.js";
-import E from "../../../assets/icons/chevron-left.js";
-import k from "../../../assets/icons/chevron-right.js";
-import y from "../../../assets/icons/double-chevron-left.js";
+import { Button as d } from "../../../button/button.js";
+import y from "../../../assets/icons/chevron-left.js";
+import E from "../../../assets/icons/chevron-right.js";
+import k from "../../../assets/icons/double-chevron-left.js";
 import L from "../../../assets/icons/double-chevron-right.js";
 import "react";
 import { cn as _ } from "../../../../lib/utils.js";
 const p = () => /* @__PURE__ */ e("span", { className: S.ellipsis, children: "..." }), $ = ({
   currentPage: t,
-  totalPage: l,
-  onChange: x,
-  disabled: r = !1
+  totalPage: r,
+  onChange: b,
+  disabled: l = !1
 }) => {
-  const { visiblePages: d, hasEllipsisStart: b, hasEllipsisEnd: N } = A({
+  const { visiblePages: m, hasEllipsisStart: x, hasEllipsisEnd: N } = A({
     currentPage: t,
-    totalPage: l,
+    totalPage: r,
     maxVisiblePages: C.MAX_VISIBLE_PAGES
   });
-  if (l <= 1)
+  if (r <= 1)
     return null;
-  const c = t === 1, f = t === l, i = (s) => {
-    !r && s !== t && s >= 1 && s <= l && x(s);
-  }, I = () => {
+  const c = t === 1, f = t === r, n = (s) => {
+    !l && s !== t && s >= 1 && s <= r && b(s);
+  }, v = () => {
     const s = [];
     let u = !1, h = !1;
-    return d.forEach((a, z) => {
-      b && a === d[1] && !u && (s.push(/* @__PURE__ */ e(p, {}, "ellipsis-start")), u = !0);
-      const n = a === t;
+    return m.forEach((a, z) => {
+      x && a === m[1] && !u && (s.push(/* @__PURE__ */ e(p, {}, "ellipsis-start")), u = !0);
+      const i = a === t;
       s.push(
         /* @__PURE__ */ e(
-          m,
+          d,
           {
-            onClick: () => i(a),
+            onClick: () => n(a),
             variant: "stroke",
-            shade: n ? "brand" : "neutral",
+            shade: i ? "brand" : "neutral",
             size: "small",
             "aria-label": `${o.page} ${a}`,
-            "aria-current": n ? "page" : void 0,
+            "aria-current": i ? "page" : void 0,
             className: _(
-              "text-text-neutral-secondary",
-              n && "border border-button-primary-brand-surface-default text-text-neutral-primary"
+              "text-text-neutral-secondary hover:bg-button-secondary-surface-pressed",
+              i && "border border-button-primary-brand-surface-default text-text-neutral-primary bg-button-secondary-surface-pressed "
             ),
             style: {
-              borderStyle: n ? "solid" : "none",
-              boxShadow: n ? "none" : ""
+              borderStyle: i ? "solid" : "none",
+              boxShadow: i ? "none" : ""
             },
             leftIcon: /* @__PURE__ */ e("span", { className: "leading-none-medium-sm", children: a })
           },
           a
         )
-      ), N && a === d[d.length - 2] && !h && (s.push(/* @__PURE__ */ e(p, {}, "ellipsis-end")), h = !0);
+      ), N && a === m[m.length - 2] && !h && (s.push(/* @__PURE__ */ e(p, {}, "ellipsis-end")), h = !0);
     }), s;
   };
-  return /* @__PURE__ */ v("div", { className: "flex gap-1.5 items-center", children: [
+  return /* @__PURE__ */ I("div", { className: "flex gap-1.5 items-center", children: [
     /* @__PURE__ */ e(
-      m,
+      d,
       {
         "aria-label": o.first,
-        onClick: () => i(1),
-        disabled: r || c,
+        onClick: () => n(1),
+        disabled: l || c,
         variant: "stroke",
         shade: "neutral",
         size: "small",
         className: "text-text-neutral-secondary",
-        leftIcon: /* @__PURE__ */ e(y, {})
+        leftIcon: /* @__PURE__ */ e(k, {})
       }
     ),
     /* @__PURE__ */ e(
-      m,
+      d,
       {
         "aria-label": o.previous,
-        onClick: () => i(t - 1),
-        disabled: r || c,
+        onClick: () => n(t - 1),
+        disabled: l || c,
         variant: "stroke",
         shade: "neutral",
         size: "small",
         className: "text-text-neutral-secondary",
-        leftIcon: /* @__PURE__ */ e(E, {})
+        leftIcon: /* @__PURE__ */ e(y, {})
       }
     ),
-    I(),
+    v(),
     /* @__PURE__ */ e(
-      m,
+      d,
       {
         "aria-label": o.next,
-        onClick: () => i(t + 1),
-        disabled: r || f,
+        onClick: () => n(t + 1),
+        disabled: l || f,
         variant: "stroke",
         shade: "neutral",
         size: "small",
         className: "text-text-neutral-secondary",
-        leftIcon: /* @__PURE__ */ e(k, {})
+        leftIcon: /* @__PURE__ */ e(E, {})
       }
     ),
     /* @__PURE__ */ e(
-      m,
+      d,
       {
         "aria-label": o.last,
-        onClick: () => i(l),
-        disabled: r || f,
+        onClick: () => n(r),
+        disabled: l || f,
         variant: "stroke",
         shade: "neutral",
         size: "small",

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

@@ -1,35 +1,37 @@
-import { PAGINATION_DEFAULTS as p } from "./pagination.const.js";
+import { PAGINATION_DEFAULTS as d } from "./pagination.const.js";
 const M = ({
   currentPage: i,
   totalPage: s,
-  maxVisiblePages: n = p.MAX_VISIBLE_PAGES
+  maxVisiblePages: n = d.MAX_VISIBLE_PAGES
 }) => {
   if (s <= n)
     return {
-      visiblePages: Array.from({ length: s }, (f, m) => m + 1),
+      visiblePages: Array.from({ length: s }, (f, u) => u + 1),
       hasEllipsisStart: !1,
       hasEllipsisEnd: !1
     };
-  const h = Math.floor((n - 3) / 2);
-  let r = Math.max(2, i - h), t = Math.min(s - 1, i + h);
-  i <= h + 2 && (t = Math.min(s - 1, n - 2), r = 2), i >= s - h - 1 && (r = Math.max(2, s - n + 3), t = s - 1);
+  const r = Math.floor((n - 3) / 2);
+  let h = Math.max(2, i - r), t = Math.min(s - 1, i + r);
+  i <= r + 2 && (t = Math.min(s - 1, n - 2), h = 2), i >= s - r - 1 && (h = Math.max(2, s - n + 3), t = s - 1);
   const c = [];
   s > 0 && c.push(1);
-  const l = r > 2;
-  for (let f = r; f <= t; f++)
+  const E = h > 2;
+  for (let f = h; f <= t; f++)
     f !== 1 && f !== s && c.push(f);
-  const E = t < s - 1;
+  const l = t < s - 1;
   return s > 1 && c.push(s), {
     visiblePages: c,
-    hasEllipsisStart: l,
-    hasEllipsisEnd: E
+    hasEllipsisStart: E,
+    hasEllipsisEnd: l
   };
-}, d = (i, s, n) => {
-  const h = (i - 1) * s + 1, r = Math.min(i * s, n);
-  return { start: h, end: r };
+}, m = (i, s, n) => {
+  if (n === 0)
+    return { start: 0, end: 0 };
+  const r = (i - 1) * s + 1, h = Math.min(i * s, n);
+  return { start: r, end: h };
 }, A = (i, s) => i >= 1 && i <= s && Number.isInteger(i);
 export {
-  d as calculateItemRange,
+  m as calculateItemRange,
   M as calculateVisiblePages,
   A as isValidPageNumber
 };

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

@@ -1,8 +1,13 @@
-import { jsx as t } from "react/jsx-runtime";
-const l = ({ children: e, className: r = "" }) => /* @__PURE__ */ t(
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { cn as a } from "../../../lib/utils.js";
+const l = ({ children: e, className: t = "" }) => /* @__PURE__ */ r(
   "div",
   {
-    className: `flex justify-between items-center bg-neutral-surface-default border-stroke-solid-light border border-t-[0.5px] gap-3 p-2 pl-4 rounded-b-xl  ${r} `,
+    className: a(
+      "flex justify-between items-center bg-neutral-surface-default gap-3 p-2 pl-4",
+      t
+    ),
     children: e
   }
 );

package/dist/components/table/components/table-header/stories/basic-header.d.ts

@@ -0,0 +1,3 @@
+import { StoryObj } from '@storybook/react';
+export declare const basicHeaderUsageCode = "import { Table, TableHeader } from '@/components/table';\n\nconst schema = [\n  {\n    key: 'id',\n    title: 'ID',\n    cellType: 'number',\n    sortable: true,\n  },\n  {\n    key: 'name',\n    title: 'Name',\n    cellType: 'text',\n    sortable: true,\n  },\n];\n\nconst data = [\n  { id: 1, name: 'John Doe' },\n  { id: 2, name: 'Jane Smith' },\n];\n\nfunction MyTable() {\n  return (\n    <Table dataSource={data} schema={schema}>\n      <table className=\"w-full\">\n        <TableHeader \n          schema={schema}\n          cell={{ cellHeight: 'small', hasBorder: true }}\n        />\n        {/* Table body goes here */}\n      </table>\n    </Table>\n  );\n}";
+export declare const BasicHeader: StoryObj;

package/dist/components/table/components/table-header/stories/custom-header-content.d.ts

@@ -0,0 +1,3 @@
+import { StoryObj } from '@storybook/react';
+export declare const customHeaderUsageCode = "import { TableHeaderWrapper, TableHeaderContent } from '@/components/table';\n\nfunction CustomHeader() {\n  return (\n    <TableHeaderWrapper>\n      <tr>\n        <TableHeaderContent className=\"font-bold text-blue-600\">\n          Custom Header 1\n        </TableHeaderContent>\n        <TableHeaderContent className=\"font-bold text-green-600\">\n          Custom Header 2\n        </TableHeaderContent>\n      </tr>\n    </TableHeaderWrapper>\n  );\n}";
+export declare const CustomHeaderContent: StoryObj;

package/dist/components/table/components/table-header/stories/header-for-sorting.d.ts

@@ -0,0 +1,3 @@
+import { StoryObj } from '@storybook/react';
+export declare const sortingUsageCode = "import { useState } from 'react';\nimport { Table, TableHeader } from '@/components/table';\nimport { SortColumn } from '@/components/table/table.type';\n\nfunction SortableTable() {\n  const [sortedColumns, setSortedColumns] = useState<SortColumn[]>([]);\n\n  const handleSort = (field: string, direction: 'asc' | 'desc' | null) => {\n    setSortedColumns(prev => {\n      if (direction === null) {\n        return prev.filter(col => col.field !== field);\n      }\n      const exists = prev.find(col => col.field === field);\n      if (exists) {\n        return prev.map(col => \n          col.field === field ? { ...col, direction } : col\n        );\n      }\n      return [...prev, { field, direction }];\n    });\n  };\n\n  return (\n    <Table dataSource={data} schema={schema}>\n      <table className=\"w-full\">\n        <TableHeader \n          schema={schema}\n          sort={{\n            sortedColumns,\n            onSort: handleSort,\n          }}\n          cell={{ cellHeight: 'small', hasBorder: true }}\n        />\n        {/* Table body goes here */}\n      </table>\n    </Table>\n  );\n}";
+export declare const HeaderWithSorting: StoryObj;

package/dist/components/table/components/table-header/table-header.storiesOld.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { TableHeaderWrapper } from '../index';
+declare const meta: Meta<typeof TableHeaderWrapper>;
+export default meta;
+export { BasicHeader } from './stories/basic-header';
+export { HeaderWithSorting } from './stories/header-for-sorting';

package/dist/components/table/components/table-header-wrapper.js

@@ -1,15 +1,11 @@
 import { jsx as t } from "react/jsx-runtime";
-const o = ({
+import "react";
+import { cn as a } from "../../../lib/utils.js";
+const s = ({
   children: e,
   className: r = ""
-}) => /* @__PURE__ */ t(
-  "div",
-  {
-    className: `p-3 gap-3 flex justify-between items-center  border-stroke-solid-medium border-1 border-b-0 rounded-t-xl ${r}`,
-    children: e
-  }
-);
+}) => /* @__PURE__ */ t("div", { className: a("p-3 gap-3 flex justify-between items-center", r), children: e });
 export {
-  o as TableHeaderWrapper,
-  o as default
+  s as TableHeaderWrapper,
+  s as default
 };

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

@@ -1,13 +1,13 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Input as c } from "../../../input/input.js";
-import { MagnifierIcon as l } from "../../../assets/icons/magnifier-icon.js";
+import { Input as p } from "../../../input/input.js";
+import { MagnifierIcon as c } from "../../../assets/icons/magnifier-icon.js";
 const h = ({ search: r, className: o = "" }) => {
   const { value: t, onChange: a, placeholder: n = "Search by Item Number or Description" } = r;
   return /* @__PURE__ */ e(
-    c,
+    p,
     {
       size: "small",
-      leftIcon: /* @__PURE__ */ e(l, { className: "w-4 h-4" }),
+      leftIcon: /* @__PURE__ */ e(c, { className: "w-[14px] h-[14px]" }),
       placeholder: n,
       value: t,
       onChange: (m) => a(m.target.value),