@ztwoint/z-ui 0.1.27 → 0.1.28

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

@@ -0,0 +1,15 @@
+const i = (n, t) => {
+  if (!t) return null;
+  const e = t.sortedColumns.find((r) => r.field === n);
+  return (e == null ? void 0 : e.direction) || null;
+}, o = (n) => n === null ? "asc" : n === "asc" ? "desc" : null, c = (n, t) => t ? t.sortedColumns.some((e) => e.field === n && e.direction !== null) : !1, u = (n, t) => {
+  if (!t) return;
+  const e = i(n, t), r = o(e);
+  t.onSort(n, r);
+};
+export {
+  i as getCurrentSortDirection,
+  o as getNextSortDirection,
+  u as handleSortClick,
+  c as isSortActive
+};

package/dist/components/table/components/table-header/table-sort-icon.d.ts

@@ -0,0 +1,8 @@
+import { SortDirection } from '../../table.type';
+import * as React from 'react';
+interface TableSortIconProps {
+    direction: SortDirection;
+    isActive: boolean;
+}
+export declare const TableSortIcon: React.FC<TableSortIconProps>;
+export {};

package/dist/components/table/components/table-header/table-sort-icon.js

@@ -0,0 +1,13 @@
+import { jsx as e, Fragment as a, jsxs as c } from "react/jsx-runtime";
+import { ChevronUpIcon as n } from "../../../assets/icons/chevron-up-icon.js";
+import o from "../../../assets/icons/chevron-down.js";
+const f = ({ direction: r, isActive: s }) => {
+  const t = () => s ? "ml-2 w-4 h-4 text-gray-600" : "ml-2 w-4 h-4 text-gray-400";
+  return /* @__PURE__ */ e(a, { children: r === "asc" ? /* @__PURE__ */ e(n, { className: t() }) : r === "desc" ? /* @__PURE__ */ e(o, { className: t() }) : /* @__PURE__ */ c("div", { className: "ml-2 w-4 h-4 flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ e(n, { className: "w-3 h-2 text-gray-300" }),
+    /* @__PURE__ */ e(o, { className: "w-3 h-2 text-gray-300 -mt-1" })
+  ] }) });
+};
+export {
+  f as TableSortIcon
+};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TableHeaderContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TableHeaderContent: React.FC<TableHeaderContentProps>;
+export default TableHeaderContent;

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

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+const s = ({
+  children: e,
+  className: t = ""
+}) => /* @__PURE__ */ r("div", { className: `flex items-center ${t}`, children: e });
+export {
+  s as TableHeaderContent,
+  s as default
+};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TableHeaderWrapperProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TableHeaderWrapper: React.FC<TableHeaderWrapperProps>;
+export default TableHeaderWrapper;

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

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+const s = ({
+  children: e,
+  className: r = ""
+}) => /* @__PURE__ */ t("div", { className: `flex justify-between items-center ${r}`, children: e });
+export {
+  s as TableHeaderWrapper,
+  s as default
+};

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { TABLE_CSS_CLASSES as d } from "../table.const.js";
+const n = ({
+  colSpan: o,
+  message: t = "Loading..."
+}) => /* @__PURE__ */ r("tbody", { children: /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: o, className: d.loading, children: t }) }) });
+export {
+  n as TableLoadingState
+};

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

@@ -0,0 +1,11 @@
+import { CellRenderer, TableProps, TableSchemaColumn } from '../table.type';
+import * as React from 'react';
+interface TableRowProps {
+    record: Record<string, unknown>;
+    index: number;
+    schema: TableSchemaColumn[];
+    customCells?: Record<string, CellRenderer>;
+    cell: TableProps['cell'];
+}
+export declare const TableRow: React.FC<TableRowProps>;
+export {};

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

@@ -0,0 +1,23 @@
+import { jsx as l } from "react/jsx-runtime";
+import { extractCellValue as c } from "../table.utils.js";
+import { TABLE_CSS_CLASSES as i } from "../table.const.js";
+import { TableCell as s } from "./table-cell.js";
+const C = ({ record: r, index: t, schema: a, customCells: o, cell: p }) => /* @__PURE__ */ l("tr", { className: i.row, children: a.map((e) => {
+  const m = c(r, e);
+  return /* @__PURE__ */ l(
+    s,
+    {
+      value: m,
+      cellType: e.cellType,
+      cellRenderer: e.cellRenderer,
+      record: r,
+      index: t,
+      customCells: o,
+      cell: p
+    },
+    e.key
+  );
+}) });
+export {
+  C as TableRow
+};

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

@@ -0,0 +1,9 @@
+export { Table as default, Table, TableProvider } from './table-provider';
+export { TableBody } from './table';
+export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, CellRenderer, CellRendererProps, FilterRule, FilterCondition, TableFilter as TableFilterType, TablePaginationConfig, SortDirection, SortColumn, TableSort, } from './table.type';
+export { getNestedValue, extractCellValue } from './table.utils';
+export { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
+export { TableContext, useTableContext } from './table.context';
+export { TableCell, TableHeader, TableRow, TableEmptyState, TableLoadingState, TablePagination, TextCell, NumberCell, BooleanCell, TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent, } from './components';
+export { TableFilter } from './components/table-filter';
+export { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';

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

@@ -0,0 +1,26 @@
+import { TableProps } from './table.type';
+import { TableBody } from './table';
+import { TableFilter } from './components/table-filter';
+import { Pagination } from './components/pagination';
+import { TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent } from './components';
+import { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';
+import * as React from 'react';
+export interface TableProviderProps extends TableProps {
+    children: React.ReactNode;
+}
+declare const TableProvider: React.FC<TableProviderProps>;
+interface TableCompoundComponent extends React.FC<TableProviderProps> {
+    Body: typeof TableBody;
+    Filter: typeof TableFilter;
+    Pagination: typeof Pagination;
+    PaginationInfo: typeof PaginationInfo;
+    PaginationQuickJumper: typeof PaginationQuickJumper;
+    Provider: typeof TableProvider;
+    Header: typeof TableHeaderWrapper;
+    HeaderContent: typeof TableHeaderContent;
+    Footer: typeof TableFooter;
+    FooterContent: typeof TableFooterContent;
+}
+export declare const Table: TableCompoundComponent;
+export { TableProvider };
+export default Table;

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

@@ -0,0 +1,45 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as a from "react";
+import { TableContext as m } from "./table.context.js";
+import { TableBody as p } from "./table.js";
+import { TableFilter as f } from "./components/table-filter/table-filter.js";
+import { Pagination as l } from "./components/pagination/pagination.js";
+import "clsx";
+import "tailwind-merge";
+import { TableHeaderWrapper as s } from "./components/table-header-wrapper.js";
+import { TableHeaderContent as d } from "./components/table-header-content.js";
+import { TableFooter as T } from "./components/table-footer.js";
+import { TableFooterContent as b } from "./components/table-footer-content.js";
+import { PaginationInfo as u } from "./components/pagination/components/pagination-info.js";
+import { PaginationQuickJumper as c } from "./components/pagination/components/pagination-quick-jumper.js";
+const r = ({
+  children: e,
+  pagination: P,
+  sort: C,
+  filter: F,
+  filterComponents: v,
+  ...t
+}) => {
+  const i = a.useMemo(
+    () => ({
+      ...t
+    }),
+    [t]
+  );
+  return /* @__PURE__ */ n(m.Provider, { value: i, children: e });
+}, g = r, o = g;
+o.Body = p;
+o.Filter = f;
+o.Pagination = l;
+o.PaginationInfo = u;
+o.PaginationQuickJumper = c;
+o.Provider = r;
+o.Header = s;
+o.HeaderContent = d;
+o.Footer = T;
+o.FooterContent = b;
+export {
+  o as Table,
+  r as TableProvider,
+  o as default
+};

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

@@ -0,0 +1,24 @@
+export declare const DEFAULT_EMPTY_MESSAGE = "No data available";
+export declare const TABLE_CSS_CLASSES: {
+    readonly table: "w-full";
+    readonly header: "bg-neutral-25 text-text-neutral-secondary";
+    readonly cell: {
+        readonly default: "px-4 py-3 text-sm";
+        readonly cellHeight: {
+            readonly small: "p-3";
+            readonly large: "p-4";
+        };
+        readonly hasBorder: {
+            readonly true: "border border-stroke-solid-light";
+            readonly false: "border-b border-stroke-solid-light";
+        };
+    };
+    readonly headerCell: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider";
+    readonly sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200";
+    readonly headerCellContent: "flex items-center justify-between";
+    readonly sortIcon: "ml-2 w-4 h-4 text-gray-400";
+    readonly sortIconActive: "ml-2 w-4 h-4 text-gray-600";
+    readonly row: "hover:bg-surface-neutral-hover transition-colors duration-200 text-text-neutral-primary";
+    readonly emptyState: "px-4 py-8 text-center text-gray-500";
+    readonly loading: "px-4 py-8 text-center text-gray-500";
+};

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

@@ -0,0 +1,27 @@
+const e = "No data available", t = {
+  table: "w-full",
+  header: "bg-neutral-25 text-text-neutral-secondary",
+  cell: {
+    default: "px-4 py-3 text-sm",
+    cellHeight: {
+      small: "p-3",
+      large: "p-4"
+    },
+    hasBorder: {
+      true: "border border-stroke-solid-light",
+      false: "border-b border-stroke-solid-light"
+    }
+  },
+  headerCell: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider",
+  sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200",
+  headerCellContent: "flex items-center justify-between",
+  sortIcon: "ml-2 w-4 h-4 text-gray-400",
+  sortIconActive: "ml-2 w-4 h-4 text-gray-600",
+  row: "hover:bg-surface-neutral-hover transition-colors duration-200 text-text-neutral-primary",
+  emptyState: "px-4 py-8 text-center text-gray-500",
+  loading: "px-4 py-8 text-center text-gray-500"
+};
+export {
+  e as DEFAULT_EMPTY_MESSAGE,
+  t as TABLE_CSS_CLASSES
+};

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

@@ -0,0 +1,7 @@
+import { TableProps } from './table.type';
+import * as React from 'react';
+export interface TableContextValue extends TableProps {
+    updateSort?: (sort: TableProps['sort']) => void;
+}
+export declare const TableContext: React.Context<TableContextValue | null>;
+export declare const useTableContext: () => TableContextValue;

package/dist/components/table/table.context.js

@@ -0,0 +1,11 @@
+import * as e from "react";
+const o = e.createContext(null), n = () => {
+  const t = e.useContext(o);
+  if (!t)
+    throw new Error("useTableContext must be used within a TableProvider");
+  return t;
+};
+export {
+  o as TableContext,
+  n as useTableContext
+};

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

@@ -0,0 +1,4 @@
+import { TableProps } from './table.type';
+import * as React from 'react';
+export declare const TableBody: React.FC<Partial<TableProps>>;
+export default TableBody;

package/dist/components/table/table.js

@@ -0,0 +1,39 @@
+import { jsxs as S, jsx as e } from "react/jsx-runtime";
+import * as d from "react";
+import { DEFAULT_EMPTY_MESSAGE as b, TABLE_CSS_CLASSES as T } from "./table.const.js";
+import { TableHeader as u } from "./components/table-header/table-header.js";
+import { TableRow as g } from "./components/table-row.js";
+import { TableEmptyState as h } from "./components/table-empty-state.js";
+import { TableLoadingState as E } from "./components/table-loading-state.js";
+import { TableContext as x } from "./table.context.js";
+const j = ({
+  cell: r = { cellHeight: "small", hasBorder: !0 },
+  sort: l,
+  ...m
+}) => {
+  const s = d.useContext(x), {
+    dataSource: o = [],
+    schema: t = [],
+    loading: n = !1,
+    emptyMessage: c = b,
+    customCells: i
+  } = s || m, p = () => n ? /* @__PURE__ */ e(E, { colSpan: t.length }) : !o || o.length === 0 ? /* @__PURE__ */ e(h, { colSpan: t.length, message: c }) : /* @__PURE__ */ e("tbody", { children: o.map((f, a) => /* @__PURE__ */ e(
+    g,
+    {
+      record: f,
+      index: a,
+      schema: t,
+      customCells: i,
+      cell: r
+    },
+    a
+  )) });
+  return /* @__PURE__ */ S("table", { className: T.table, children: [
+    /* @__PURE__ */ e(u, { schema: t, sort: l, cell: r }),
+    p()
+  ] });
+};
+export {
+  j as TableBody,
+  j as default
+};

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

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import { FilterComponentType } from './components/table-filter/table-filter.type';
+export type CellType = 'text' | 'number' | 'boolean';
+export type CellValue = string | number | boolean | null | undefined;
+export type CellRendererProps = {
+    value: CellValue;
+    record: Record<string, unknown>;
+    index: number;
+};
+export type CellRenderer = FC<CellRendererProps>;
+export type FilterCondition = 'contains' | 'notEqual' | 'equal' | '>' | '<' | '=' | '!=';
+export type FilterRule = {
+    field: string;
+    condition?: string;
+    value: string;
+};
+export type TableFilter = {
+    value: FilterRule[];
+    onChange: (filters: FilterRule[]) => void;
+};
+export type TablePaginationConfig = {
+    currentPage: number;
+    totalPage: number;
+    onChange: (page: number) => void;
+    itemsPerPage?: number;
+    totalItems?: number;
+    showQuickJumper?: boolean;
+    showTotal?: boolean;
+};
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortColumn = {
+    field: string;
+    direction: SortDirection;
+};
+export type TableSort = {
+    sortedColumns: SortColumn[];
+    onSort: (field: string, direction: SortDirection) => void;
+};
+export type TableSchemaColumn = {
+    key: string;
+    title: string;
+    cellType: CellType;
+    cellRenderer?: CellRenderer;
+    filterable?: boolean;
+    hideable?: boolean;
+    sortable?: boolean;
+};
+export type TableSchema = TableSchemaColumn[];
+export type TableProps = {
+    cell?: {
+        hasBorder?: boolean;
+        cellHeight?: 'small' | 'large';
+    };
+    dataSource: Record<string, unknown>[];
+    schema: TableSchema;
+    loading?: boolean;
+    emptyMessage?: string;
+    filter?: TableFilter;
+    filterComponents?: Record<string, FilterComponentType>;
+    pagination?: TablePaginationConfig;
+    sort?: TableSort;
+    customCells?: Record<string, CellRenderer>;
+};

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

@@ -0,0 +1,3 @@
+import { CellValue, TableSchemaColumn } from './table.type';
+export declare const getNestedValue: (object: Record<string, unknown>, path: string) => CellValue;
+export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue;

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

@@ -0,0 +1,5 @@
+const s = (t, l) => l.split(".").reduce((e, o) => e && typeof e == "object" && o in e ? e[o] : void 0, t), u = (t, l) => s(t, l.key);
+export {
+  u as extractCellValue,
+  s as getNestedValue
+};

package/dist/css/config/colors/components/select.css

@@ -103,7 +103,7 @@
     color: var(--color-neutral-400);
   }
 
-  .z2-select-label{
+  .z2-select-label {
     display: flex;
     padding: var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-1, 4px) var(--spacing-2, 8px);
     align-items: center;