@ztwoint/z-ui 0.1.26 → 0.1.28

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

@@ -0,0 +1,105 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { Button as s } from "../../../button/button.js";
+import N from "./table-filter.hook.js";
+import T from "./filters/text.js";
+import z from "./filters/boolean.js";
+import w from "./filters/number.js";
+const C = ({
+  filterComponents: o = {},
+  schema: c,
+  filter: n
+}) => {
+  const {
+    addFilterRule: b,
+    applyFilters: y,
+    filterableFields: k,
+    hasActiveFilters: d,
+    isOpen: m,
+    removeFilterRule: F,
+    setIsOpen: p,
+    tempFilters: x,
+    updateFilterRule: u
+  } = N({ schema: c, filter: n || { value: [], onChange: () => {
+  } } });
+  return n ? /* @__PURE__ */ r("div", { className: "relative mb-4", children: [
+    /* @__PURE__ */ r(
+      s,
+      {
+        onClick: () => p(!m),
+        variant: d ? "filled" : "stroke",
+        shade: d ? "brand" : "neutral",
+        size: "small",
+        children: [
+          "Filter ",
+          d && `(${n.value.length})`
+        ]
+      }
+    ),
+    m && /* @__PURE__ */ t("div", { className: "absolute top-full left-0 mt-2 min-w-96 bg-surface-neutral-default border border-stroke-solid-medium rounded-md shadow-default z-10 p-4", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      x.map((i, a) => {
+        const e = c.find((l) => l.key === i.field), h = {
+          boolean: z,
+          text: T,
+          number: w
+        }, v = (o == null ? void 0 : o[(e == null ? void 0 : e.cellType) || ""]) || h[(e == null ? void 0 : e.cellType) || "text"];
+        v || console.warn(
+          `No filter component found for column "${e == null ? void 0 : e.key}" with cellType "${e == null ? void 0 : e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean".`
+        );
+        const g = v ?? h.text;
+        return /* @__PURE__ */ r("div", { className: "flex gap-2 items-center", children: [
+          /* @__PURE__ */ t(
+            "select",
+            {
+              value: i.field,
+              onChange: (l) => u(a, { field: l.target.value, condition: void 0 }),
+              className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm flex-1",
+              children: k.map((l) => /* @__PURE__ */ t("option", { value: l.key, children: l.title }, l.key))
+            }
+          ),
+          /* @__PURE__ */ t(
+            g,
+            {
+              onChange: ({ condition: l, value: f }) => {
+                u(a, {
+                  ...l ? { condition: l } : {},
+                  ...f ? { value: f } : {}
+                });
+              },
+              value: { value: i.value, condition: i.condition }
+            },
+            a
+          ),
+          /* @__PURE__ */ t(
+            s,
+            {
+              onClick: () => F(a),
+              variant: "ghost",
+              shade: "danger",
+              size: "small",
+              className: "!px-2 !py-1",
+              children: "×"
+            }
+          )
+        ] }, a);
+      }),
+      /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ t(s, { onClick: b, variant: "stroke", shade: "neutral", size: "small", children: "+ Add" }),
+        /* @__PURE__ */ t("div", { className: "flex-1" }),
+        /* @__PURE__ */ t(
+          s,
+          {
+            onClick: () => p(!1),
+            variant: "stroke",
+            shade: "neutral",
+            size: "small",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ t(s, { onClick: y, variant: "filled", shade: "brand", size: "small", children: "Apply" })
+      ] })
+    ] }) })
+  ] }) : null;
+};
+export {
+  C as TableFilter
+};

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

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { TableFilter, TableSchema } from '../../table.type';
+export interface TableFilterProps {
+    schema: TableSchema;
+    filter: TableFilter;
+    filterComponents?: Record<string, FilterComponentType>;
+}
+export type FilterComponentProps = {
+    onChange: (input: {
+        condition?: string;
+        value?: string;
+    }) => void;
+    value: {
+        condition?: string;
+        value: string;
+    };
+};
+export type FilterComponentType = FC<FilterComponentProps>;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { TableHeader } from './table-header';
+export { TableSortIcon } from './table-sort-icon';

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

@@ -0,0 +1,9 @@
+import { TableSchemaColumn, TableSort, TableProps } from '../../table.type';
+import * as React from 'react';
+interface TableHeaderProps {
+    schema: TableSchemaColumn[];
+    sort?: TableSort;
+    cell: TableProps['cell'];
+}
+export declare const TableHeader: React.FC<TableHeaderProps>;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { TABLE_CSS_CLASSES as t } from "../../table.const.js";
+import { TableSortIcon as c } from "./table-sort-icon.js";
+import { getCurrentSortDirection as n, isSortActive as h, handleSortClick as p } from "./table-header.utils.js";
+import "react";
+import { cn as C } from "../../../../lib/utils.js";
+const y = ({ schema: a, sort: i, cell: o }) => /* @__PURE__ */ r("thead", { className: t.header, children: /* @__PURE__ */ r("tr", { children: a.map((e) => {
+  const s = n(e.key, i), l = h(e.key, i);
+  return /* @__PURE__ */ r(
+    "th",
+    {
+      className: C(
+        e.sortable ? t.sortableHeaderCell : t.headerCell,
+        t.cell.hasBorder[o.hasBorder ? "true" : "false"]
+      ),
+      onClick: e.sortable ? () => p(e.key, i) : void 0,
+      children: /* @__PURE__ */ d("div", { className: t.headerCellContent, children: [
+        /* @__PURE__ */ r("span", { children: e.title }),
+        e.sortable && /* @__PURE__ */ r(c, { direction: s, isActive: l })
+      ] })
+    },
+    e.key
+  );
+}) }) });
+export {
+  y as TableHeader
+};

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

@@ -0,0 +1,5 @@
+import { TableSort, SortDirection } from '../../table.type';
+export declare const getCurrentSortDirection: (field: string, sort?: TableSort) => SortDirection;
+export declare const getNextSortDirection: (currentDirection: SortDirection) => SortDirection;
+export declare const isSortActive: (field: string, sort?: TableSort) => boolean;
+export declare const handleSortClick: (field: string, sort?: TableSort) => void;

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,6 +103,21 @@
     color: var(--color-neutral-400);
   }
 
+  .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;
+    gap: 4px;
+    align-self: stretch;
+    color: var(--color-neutral-600);
+    /* text small/leading-none/medium */
+    font-size: var(--base-sizes-small-font-size, 14px);
+    font-style: normal;
+    font-weight: var(--font-weight-medium, 450);
+    line-height: 100%; /* 14px */
+    letter-spacing: var(--font-letter-spacing-bittight, -0.2px);
+  }
+
   .z2-select-item-text {
     @apply flex items-center justify-center gap-2 flex-1 overflow-hidden text-ellipsis text-[14px] font-[450] leading-[100%] tracking-[-0.2px];
   }