@ztwoint/z-ui 0.1.45 → 0.1.47

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

@@ -3,22 +3,24 @@ export declare const TABLE_CSS_CLASSES: {
     readonly table: "w-full";
     readonly header: "bg-background-neutral-medium 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 default: "p-0 align-middle relative h-4";
         readonly hasBorder: {
-            readonly true: "border border-stroke-solid-light";
+            readonly true: "border-r border-b 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 headerCell: {
+        readonly default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider";
+        readonly hasBorder: {
+            readonly true: "border-none [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)]";
+            readonly false: "border-none [box-shadow:inset_0_-1px_0_0_var(--color-stroke-solid-light)]";
+        };
+    };
     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 row: " 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/types/components/table/table.type.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { FilterComponentType } from './components/table-filter/table-filter.type';
-export type CellType = 'text' | 'number' | 'boolean' | 'checkbox';
+export type CellType = 'number' | 'boolean' | 'checkbox' | 'link' | 'avatar' | 'label' | 'description' | 'text';
 export type CellValue = string | number | boolean | null | undefined;
 export type CellRendererProps = {
     value: CellValue;
@@ -17,6 +17,7 @@ export type FilterRule = {
 export type FilterOption = {
     label: string;
     value: string;
+    total?: number;
 };
 export type TableFilter = {
     value: FilterRule[];
@@ -45,21 +46,52 @@ export type TableSort = {
     sortedColumns: SortColumn[];
     onSort: (field: string, direction: SortDirection) => void;
 };
-export type TableSchemaColumn = {
+import type { NumberCellProps } from './components/cell/number-cell';
+import type { BooleanCellProps } from './components/cell/boolean-cell';
+import type { LinkCellProps } from './components/cell/link-cell';
+import type { AvatarCellProps } from './components/cell/avatar-cell';
+import type { LabelCellProps } from './components/cell/label-cell';
+import type { DescriptionCellProps } from './components/cell/description-cell';
+type CellPropsByType = {
+    number: Omit<NumberCellProps, 'value'>;
+    boolean: Omit<BooleanCellProps, 'value'>;
+    checkbox: Omit<BooleanCellProps, 'value'>;
+    link: Omit<LinkCellProps, 'value' | 'href'> & {
+        href: string;
+    };
+    avatar: Omit<AvatarCellProps, 'value'>;
+    label: Omit<LabelCellProps, 'value'>;
+    description: Omit<DescriptionCellProps, 'value'>;
+};
+type ColumnBase<T extends CellType> = {
     key: string;
     title: string;
-    cellType: CellType;
+    cellType: T;
     cellRenderer?: CellRenderer;
     filterable?: boolean;
     hideable?: boolean;
     sortable?: boolean;
     filterOptions?: FilterOption[];
 };
+export type TableSchemaColumn = (ColumnBase<'number'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['number'];
+}) | (ColumnBase<'boolean'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['boolean'];
+}) | (ColumnBase<'checkbox'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['checkbox'];
+}) | (ColumnBase<'link'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['link'];
+}) | (ColumnBase<'avatar'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['avatar'];
+}) | (ColumnBase<'label'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['label'];
+}) | (ColumnBase<'description'> & {
+    valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['description'];
+});
 export type TableSchema = TableSchemaColumn[];
 export type TableProps = {
     cell?: {
         hasBorder?: boolean;
-        cellHeight?: 'small' | 'large';
     };
     dataSource: Record<string, unknown>[];
     schema: TableSchema;
@@ -71,3 +103,4 @@ export type TableProps = {
     sort?: TableSort;
     customCells?: Record<string, CellRenderer>;
 };
+export {};

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

@@ -1,3 +1,2 @@
 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;
+export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue | Record<string, unknown>;

package/dist/types/components/table-card/table-card.type.d.ts

@@ -12,7 +12,10 @@ export interface TableCardProps {
     search?: Partial<TableSearch> & {
         className?: string;
     };
-    filter?: Partial<TableFilter>;
+    filter?: Partial<TableFilter> & {
+        quickFilters?: string[];
+        showFilterButton?: boolean;
+    };
     headerLeftContent?: React.ReactNode;
     headerActions?: React.ReactNode;
     body?: {
@@ -23,12 +26,9 @@ export interface TableCardProps {
     };
     showFooter?: boolean;
     footerClassName?: string;
-    pagination?: Partial<PaginationProps>;
-    paginationInfo?: Partial<Omit<PaginationInfoProps, 'itemsPerPage' | 'totalItems'>> & {
-        itemsPerPage: number;
-        totalItems: number;
-    };
-    paginationQuickJumper?: Partial<PaginationQuickJumperProps>;
+    pagination?: PaginationProps;
+    paginationInfo?: PaginationInfoProps;
+    paginationQuickJumper?: PaginationQuickJumperProps;
     loading?: boolean;
     emptyMessage?: string;
 }

package/dist/types/hooks/useClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const useClickOutside: (ref: React.RefObject<HTMLElement | null>, callback: () => void) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -35,6 +35,7 @@
     "lint": "eslint \"src/components/**/*.{js,jsx,ts,tsx}\" --ignore-pattern \"**/*.d.ts\" --ignore-pattern \"**/*.stories.tsx\"",
     "lint:fix": "eslint \"src/components/**/*.{js,jsx,ts,tsx}\" --ignore-pattern \"**/*.d.ts\" --ignore-pattern \"**/*.stories.tsx\" --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "type-check": "tsc --noEmit --pretty",
     "prepare": "husky"
   },
   "devDependencies": {

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

@@ -1,7 +0,0 @@
-import { CellValue } from '../../table.type';
-import * as React from 'react';
-interface TextCellProps {
-    value: CellValue;
-}
-export declare const TextCell: React.FC<TextCellProps>;
-export {};

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

@@ -1,5 +0,0 @@
-import { jsx as e, Fragment as n } from "react/jsx-runtime";
-const i = ({ value: t }) => /* @__PURE__ */ e(n, { children: ((r) => r == null ? "" : String(r))(t) });
-export {
-  i as TextCell
-};

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

@@ -1,9 +0,0 @@
-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.js

@@ -1,120 +0,0 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { Button as i } from "../../../button/button.js";
-import T from "./table-filter.hook.js";
-import C from "./filters/text.js";
-import j from "./filters/boolean.js";
-import z from "./filters/number/number.js";
-import A from "./filters/checkbox.js";
-import O from "../../../assets/icons/circle-check-filled.js";
-const E = ({
-  filterComponents: n = {},
-  schema: d,
-  filter: o
-}) => {
-  const {
-    selectedColumn: r,
-    setSelectedColumn: p,
-    getFilterForColumn: x,
-    hasFilterForColumn: b,
-    updateColumnFilter: f,
-    clearAllFilters: v,
-    applyFilters: k,
-    hasActiveFilters: s,
-    isOpen: m,
-    setIsOpen: u,
-    filterableFields: y
-  } = T({ schema: d, filter: o || { value: [], onChange: () => {
-  } } });
-  if (!o)
-    return null;
-  const N = () => {
-    if (!r) return null;
-    const e = d.find((c) => c.key === r), F = {
-      boolean: j,
-      text: C,
-      number: z,
-      checkbox: A
-    }, h = (n == null ? void 0 : n[(e == null ? void 0 : e.cellType) || ""]) || F[(e == null ? void 0 : e.cellType) || "text"];
-    if (!h)
-      return 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", "checkbox".`
-      ), null;
-    const a = x(r), g = {
-      condition: (a == null ? void 0 : a.condition) || "",
-      value: (a == null ? void 0 : a.value) || ""
-    };
-    return /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ t("div", { className: "", children: /* @__PURE__ */ t(
-      h,
-      {
-        value: g,
-        onChange: ({ condition: c, value: w }) => f(r, c, w),
-        filterOptions: e == null ? void 0 : e.filterOptions
-      },
-      e == null ? void 0 : e.key
-    ) }) }) });
-  };
-  return /* @__PURE__ */ l("div", { className: "relative", children: [
-    /* @__PURE__ */ l(
-      i,
-      {
-        onClick: () => u(!m),
-        variant: s ? "filled" : "stroke",
-        shade: s ? "brand" : "neutral",
-        size: "small",
-        children: [
-          "Filter ",
-          s && `(${o.value.length})`
-        ]
-      }
-    ),
-    m && /* @__PURE__ */ l("div", { className: "absolute top-full left-0 mt-2 min-w-[600px] bg-surface-neutral-default border border-stroke-solid-medium rounded-md shadow-default z-10", children: [
-      /* @__PURE__ */ l("div", { className: "flex min-h-[300px]", children: [
-        /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-medium", children: [
-          /* @__PURE__ */ t("div", { className: "p-3 border-b border-stroke-solid-medium", children: /* @__PURE__ */ t("h3", { className: "text-sm font-medium text-text-neutral-primary", children: "Columns" }) }),
-          /* @__PURE__ */ t("div", { className: "py-2", children: y.map((e) => /* @__PURE__ */ l(
-            "button",
-            {
-              onClick: () => p(e.key),
-              className: `w-full text-left px-3 py-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hovered transition-colors ${r === e.key ? "bg-surface-brand-subtle text-text-brand-primary" : "text-text-neutral-primary"}`,
-              children: [
-                /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
-                b(e.key) && /* @__PURE__ */ t(O, { className: "w-4 h-4 text-icon-brand-primary flex-shrink-0 ml-2" })
-              ]
-            },
-            e.key
-          )) })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? N() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
-      ] }),
-      /* @__PURE__ */ l("div", { className: "flex justify-between items-center p-4 border-t border-stroke-solid-medium", children: [
-        /* @__PURE__ */ t(
-          i,
-          {
-            onClick: v,
-            variant: "ghost",
-            shade: "neutral",
-            size: "small",
-            disabled: !s,
-            children: "Clear All"
-          }
-        ),
-        /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ t(
-            i,
-            {
-              onClick: () => u(!1),
-              variant: "stroke",
-              shade: "neutral",
-              size: "small",
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ t(i, { onClick: k, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-export {
-  E as TableFilter
-};

package/dist/node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js

@@ -1,26 +0,0 @@
-import * as e from "react";
-function n({
-  title: l,
-  titleId: a,
-  ...r
-}, t) {
-  return /* @__PURE__ */ e.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon",
-    ref: t,
-    "aria-labelledby": a
-  }, r), l ? /* @__PURE__ */ e.createElement("title", {
-    id: a
-  }, l) : null, /* @__PURE__ */ e.createElement("path", {
-    fillRule: "evenodd",
-    d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z",
-    clipRule: "evenodd"
-  }));
-}
-const o = /* @__PURE__ */ e.forwardRef(n);
-export {
-  o as default
-};

package/dist/node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js

@@ -1,26 +0,0 @@
-import * as e from "react";
-function n({
-  title: l,
-  titleId: a,
-  ...r
-}, t) {
-  return /* @__PURE__ */ e.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon",
-    ref: t,
-    "aria-labelledby": a
-  }, r), l ? /* @__PURE__ */ e.createElement("title", {
-    id: a
-  }, l) : null, /* @__PURE__ */ e.createElement("path", {
-    fillRule: "evenodd",
-    d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z",
-    clipRule: "evenodd"
-  }));
-}
-const o = /* @__PURE__ */ e.forwardRef(n);
-export {
-  o as default
-};

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { CellValue } from '../../table.type';
-interface TextCellProps {
-    value: CellValue;
-}
-export declare const TextCell: React.FC<TextCellProps>;
-export {};

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

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