@ztwoint/z-ui 0.1.26 → 0.1.28

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

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as g } from "react/jsx-runtime";
+import { PAGINATION_CSS_CLASSES as n, PAGINATION_LABELS as t } from "../pagination.const.js";
+import { usePaginationQuickJumper as c } from "./pagination-quick-jumper.hook.js";
+const P = ({
+  disabled: o,
+  currentPage: e,
+  totalPage: r,
+  onChange: i
+}) => {
+  const { inputValue: u, handleInputChange: l, handleInputSubmit: s, handleKeyPress: p } = c(e, r, i);
+  return /* @__PURE__ */ a("div", { className: n.jumper, children: [
+    /* @__PURE__ */ a("span", { children: [
+      t.goToPage,
+      ":"
+    ] }),
+    /* @__PURE__ */ g(
+      "input",
+      {
+        type: "text",
+        className: n.input,
+        value: u,
+        onChange: (m) => l(m.target.value),
+        onKeyPress: p,
+        onBlur: s,
+        disabled: o,
+        placeholder: e.toString(),
+        "aria-label": t.goToPage
+      }
+    )
+  ] });
+};
+export {
+  P as PaginationQuickJumper,
+  P as default
+};

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

@@ -0,0 +1,6 @@
+export { Pagination, default } from './pagination';
+export type { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps, } from './pagination.type';
+export { usePagination } from './pagination.hook';
+export { usePaginationQuickJumper } from './components/pagination-quick-jumper.hook';
+export { calculateVisiblePages, calculateItemRange, isValidPageNumber } from './pagination.utils';
+export { PAGINATION_DEFAULTS, PAGINATION_CSS_CLASSES, PAGINATION_LABELS } from './pagination.const';

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

@@ -0,0 +1,26 @@
+export declare const PAGINATION_DEFAULTS: {
+    readonly MAX_VISIBLE_PAGES: 6;
+    readonly ITEMS_PER_PAGE: 10;
+};
+export declare const PAGINATION_CSS_CLASSES: {
+    readonly container: "flex items-center justify-between gap-4 p-4";
+    readonly navigation: "flex items-center gap-2";
+    readonly button: "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 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: "text-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 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
+};
+export declare const PAGINATION_LABELS: {
+    readonly previous: "Previous page";
+    readonly next: "Next page";
+    readonly first: "First page";
+    readonly last: "Last page";
+    readonly goToPage: "Go to page";
+    readonly page: "Page";
+    readonly of: "out of";
+    readonly showing: "Viewing";
+    readonly to: "to";
+};

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

@@ -0,0 +1,22 @@
+const e = {
+  MAX_VISIBLE_PAGES: 6
+}, t = {
+  ellipsis: "flex items-center justify-center w-8 h-8 text-gray-400",
+  info: "text-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 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+}, r = {
+  previous: "Previous page",
+  next: "Next page",
+  first: "First page",
+  last: "Last page",
+  goToPage: "Go to page",
+  page: "Page",
+  of: "out of",
+  showing: "Viewing"
+};
+export {
+  t as PAGINATION_CSS_CLASSES,
+  e as PAGINATION_DEFAULTS,
+  r as PAGINATION_LABELS
+};

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

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

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

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

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

@@ -0,0 +1,22 @@
+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]
+  );
+  return {
+    ...n,
+    goToPage: g,
+    canGoToPage: e
+  };
+};
+export {
+  u as usePagination
+};

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

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

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

@@ -0,0 +1,33 @@
+export interface PaginationProps {
+    currentPage: number;
+    totalPage: number;
+    onChange: (page: number) => void;
+    itemsPerPage?: number;
+    totalItems?: number;
+    showPageSizeSelector?: boolean;
+    showQuickJumper?: boolean;
+    showTotal?: boolean;
+    disabled?: boolean;
+}
+export interface PaginationHookProps {
+    currentPage: number;
+    totalPage: number;
+    maxVisiblePages?: number;
+}
+export interface PaginationHookReturn {
+    visiblePages: number[];
+    hasEllipsisStart: boolean;
+    hasEllipsisEnd: boolean;
+}
+export interface PaginationInfoProps {
+    showTotal: boolean;
+    totalItems?: number;
+    currentPage: number;
+    itemsPerPage: number;
+}
+export interface PaginationQuickJumperProps {
+    disabled: boolean;
+    currentPage: number;
+    totalPage: number;
+    onChange: (page: number) => void;
+}

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

@@ -0,0 +1,7 @@
+import { PaginationHookProps, PaginationHookReturn } from './pagination.type';
+export declare const calculateVisiblePages: ({ currentPage, totalPage, maxVisiblePages, }: PaginationHookProps) => PaginationHookReturn;
+export declare const calculateItemRange: (currentPage: number, itemsPerPage: number, totalItems: number) => {
+    start: number;
+    end: number;
+};
+export declare const isValidPageNumber: (page: number, totalPage: number) => boolean;

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

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

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

@@ -0,0 +1,15 @@
+import { CellValue, CellType, CellRenderer, TableProps } from '../table.type';
+import * as React from 'react';
+interface TableCellProps {
+    value: CellValue;
+    cellType: CellType;
+    cellRenderer?: CellRenderer;
+    customCells?: Record<string, CellRenderer>;
+    record: Record<string, unknown>;
+    index: number;
+    align?: 'left' | 'center' | 'right';
+    width?: string | number;
+    cell: TableProps['cell'];
+}
+export declare const TableCell: React.FC<TableCellProps>;
+export {};

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

@@ -0,0 +1,45 @@
+import { jsx as l } from "react/jsx-runtime";
+import { TABLE_CSS_CLASSES as r } from "../table.const.js";
+import { TextCell as p } from "./cell/text-cell.js";
+import { NumberCell as h } from "./cell/number-cell.js";
+import { BooleanCell as S } from "./cell/boolean-cell.js";
+import "react";
+import { cn as b } from "../../../lib/utils.js";
+const E = ({
+  value: o,
+  cellType: m,
+  cellRenderer: n,
+  record: f,
+  index: i,
+  customCells: e,
+  cell: C
+}) => {
+  const c = {
+    text: p,
+    number: h,
+    boolean: S
+  }, s = e == null ? void 0 : e[m];
+  let t;
+  if (n)
+    t = n({ value: o, record: f, index: i });
+  else if (s)
+    t = /* @__PURE__ */ l(s, { value: o, record: f, index: i });
+  else {
+    const a = c[m] ?? p;
+    t = /* @__PURE__ */ l(a, { value: o });
+  }
+  return /* @__PURE__ */ l(
+    "td",
+    {
+      className: b(
+        r.cell.default,
+        r.cell.cellHeight[C.cellHeight],
+        r.cell.hasBorder[C.hasBorder ? "true" : "false"]
+      ),
+      children: t
+    }
+  );
+};
+export {
+  E as TableCell
+};

package/dist/components/table/components/table-empty-state.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface TableEmptyStateProps {
+    colSpan: number;
+    message: string;
+}
+export declare const TableEmptyState: React.FC<TableEmptyStateProps>;
+export {};

package/dist/components/table/components/table-empty-state.js

@@ -0,0 +1,6 @@
+import { jsx as t } from "react/jsx-runtime";
+import { TABLE_CSS_CLASSES as m } from "../table.const.js";
+const a = ({ colSpan: r, message: e }) => /* @__PURE__ */ t("tbody", { children: /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: r, className: m.emptyState, children: e }) }) });
+export {
+  a as TableEmptyState
+};

package/dist/components/table/components/table-filter/filters/boolean.d.ts

@@ -0,0 +1,3 @@
+import { FilterComponentType } from '../table-filter.type';
+declare const BooleanFilter: FilterComponentType;
+export default BooleanFilter;

package/dist/components/table/components/table-filter/filters/boolean.js

@@ -0,0 +1,31 @@
+import { jsxs as a, Fragment as n, jsx as t } from "react/jsx-runtime";
+import { useEffect as u } from "react";
+const o = ["equals", "notEqual"], s = ({ value: r, onChange: l }) => (u(() => {
+  r.condition || l({ condition: o[0] });
+}, []), /* @__PURE__ */ a(n, { children: [
+  /* @__PURE__ */ t(
+    "select",
+    {
+      value: r.condition,
+      onChange: (e) => l({ condition: e.target.value }),
+      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm",
+      children: o.map((e) => /* @__PURE__ */ t("option", { value: e, children: e }, e))
+    }
+  ),
+  /* @__PURE__ */ a(
+    "select",
+    {
+      value: r.value,
+      onChange: (e) => l({ value: e.target.value }),
+      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm flex-1",
+      children: [
+        /* @__PURE__ */ t("option", { value: "", children: "Select value" }),
+        /* @__PURE__ */ t("option", { value: "true", children: "True" }),
+        /* @__PURE__ */ t("option", { value: "false", children: "False" })
+      ]
+    }
+  )
+] }));
+export {
+  s as default
+};

package/dist/components/table/components/table-filter/filters/index.d.ts

@@ -0,0 +1,3 @@
+export * from './text';
+export * from './boolean';
+export * from './number';

package/dist/components/table/components/table-filter/filters/number.d.ts

@@ -0,0 +1,3 @@
+import { FilterComponentType } from '../table-filter.type';
+declare const NumberFilter: FilterComponentType;
+export default NumberFilter;

package/dist/components/table/components/table-filter/filters/number.js

@@ -0,0 +1,28 @@
+import { jsxs as o, Fragment as u, jsx as a } from "react/jsx-runtime";
+import { useEffect as d } from "react";
+const l = [">", "<", "=", "!="], s = ({ value: t, onChange: r }) => (d(() => {
+  t.condition || r({ condition: l[0] });
+}, []), /* @__PURE__ */ o(u, { children: [
+  /* @__PURE__ */ a(
+    "select",
+    {
+      value: t.condition,
+      onChange: (e) => r({ condition: e.target.value }),
+      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm",
+      children: l.map((e) => /* @__PURE__ */ a("option", { value: e, children: e }, e))
+    }
+  ),
+  /* @__PURE__ */ a(
+    "input",
+    {
+      type: "number",
+      value: t.value,
+      onChange: (e) => r({ value: e.target.value }),
+      placeholder: "Value",
+      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary placeholder:text-text-neutral-muted rounded px-2 py-1 text-sm flex-1"
+    }
+  )
+] }));
+export {
+  s as default
+};

package/dist/components/table/components/table-filter/filters/text.d.ts

@@ -0,0 +1,3 @@
+import { FilterComponentType } from '../table-filter.type';
+declare const TextFilter: FilterComponentType;
+export default TextFilter;

package/dist/components/table/components/table-filter/filters/text.js

@@ -0,0 +1,28 @@
+import { jsxs as o, Fragment as u, jsx as a } from "react/jsx-runtime";
+import { useEffect as n } from "react";
+const l = ["contains", "notEqual", "equals"], i = ({ value: t, onChange: r }) => (n(() => {
+  t.condition || r({ condition: l[0] });
+}, []), /* @__PURE__ */ o(u, { children: [
+  /* @__PURE__ */ a(
+    "select",
+    {
+      value: t.condition,
+      onChange: (e) => r({ condition: e.target.value }),
+      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm",
+      children: l.map((e) => /* @__PURE__ */ a("option", { value: e, children: e }, e))
+    }
+  ),
+  /* @__PURE__ */ a(
+    "input",
+    {
+      type: "text",
+      value: t.value,
+      onChange: (e) => r({ value: e.target.value }),
+      placeholder: "Value",
+      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary placeholder:text-text-neutral-muted rounded px-2 py-1 text-sm flex-1"
+    }
+  )
+] }));
+export {
+  i as default
+};

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

@@ -0,0 +1 @@
+export { TableFilter } from './table-filter';

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

@@ -0,0 +1,9 @@
+import { FilterComponentType } from './table-filter.type';
+import { TableSchema, TableFilter as TableFilterType } from '../../table.type';
+import * as React from 'react';
+export interface TableFilterProps {
+    filterComponents?: Record<string, FilterComponentType>;
+    schema: TableSchema;
+    filter?: TableFilterType;
+}
+export declare const TableFilter: React.FC<TableFilterProps>;

package/dist/components/table/components/table-filter/table-filter.hook.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { TableFilterProps } from './table-filter.type';
+import { FilterRule } from '../../table.type';
+declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
+    isOpen: boolean;
+    addFilterRule: () => void;
+    updateFilterRule: (index: number, updates: Partial<FilterRule>) => void;
+    removeFilterRule: (index: number) => void;
+    applyFilters: () => void;
+    hasActiveFilters: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    tempFilters: FilterRule[];
+    filterableFields: import('../../table.type').TableSchemaColumn[];
+};
+export default useTableFilter;

package/dist/components/table/components/table-filter/table-filter.hook.js

@@ -0,0 +1,34 @@
+import u from "react";
+const h = ({ filter: t, schema: r }) => {
+  const [p, o] = u.useState(!1), [s, a] = u.useState(t.value), c = r.filter((e) => e.filterable !== !1), d = () => {
+    var l;
+    const e = {
+      field: ((l = c[0]) == null ? void 0 : l.key) || "",
+      value: ""
+    };
+    a([...s, e]);
+  }, f = (e, l) => {
+    const n = s.map((i, R) => R === e ? { ...i, ...l } : i);
+    a(n);
+  }, F = (e) => {
+    a(s.filter((l, n) => n !== e));
+  }, v = () => {
+    t.onChange(s), o(!1);
+  }, m = t.value.length > 0;
+  return u.useEffect(() => {
+    a(t.value);
+  }, [t.value]), {
+    isOpen: p,
+    addFilterRule: d,
+    updateFilterRule: f,
+    removeFilterRule: F,
+    applyFilters: v,
+    hasActiveFilters: m,
+    setIsOpen: o,
+    tempFilters: s,
+    filterableFields: c
+  };
+};
+export {
+  h as default
+};