@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,99 +1,163 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { useMemo as V } from "react";
-import { cn as g } from "../../utils/index.js";
-import { TableProvider as j } from "./contexts/table.provider.js";
-import { Filter as w } from "./components/Filter/Filter.js";
-import { Header as y } from "./components/Header/Header.js";
-import { Body as B } from "./components/Body/Body.js";
-import { Pagination as H } from "./components/Pagination/Pagination.js";
-import { TruncateText as K } from "./components/TruncateText/TruncateText.js";
-import { Actions as M } from "./components/Actions/Actions.js";
-const P = ({
-  id: s,
-  ariaLabel: c,
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { useMemo as X } from "react";
+import { cn as s } from "../../utils/index.js";
+import { sendToggleRowEvent as Y, sendCollapseRowEvent as Z, sendExpandRowEvent as _ } from "./events/index.js";
+import { TableProvider as $ } from "./contexts/table.provider.js";
+import { Filter as D } from "./components/Filter/Filter.js";
+import { WrapperBody as L } from "./components/WrapperBody/WrapperBody.js";
+import { Header as rr } from "./components/Header/Header.js";
+import { Body as er } from "./components/Body/Body.js";
+import { Pagination as or } from "./components/Pagination/Pagination.js";
+import { TruncateText as ar } from "./components/TruncateText/TruncateText.js";
+import { Actions as tr } from "./components/Actions/Actions.js";
+const ir = ({
+  id: c,
+  ariaLabel: p,
   columns: d,
-  data: n,
-  totalItems: f,
-  classNameHeaderTable: p,
-  classNameHeaderArrows: u,
-  classNameHeaderActiveArrows: b,
-  fetchData: T,
+  data: f,
+  totalItems: u = -1 / 0,
+  className: b,
+  classNameHeaderActiveArrows: T,
+  classNameHeaderArrows: v,
+  classNameHeaderTable: x,
+  classNameTable: E,
+  classNameWrapperTable: N,
+  isLoading: a,
+  getRowId: w,
+  fetchData: A,
+  queryOptions: y,
   // Pagination
-  showPagination: N,
-  showTotalItems: o,
-  showDropdownPagination: l,
-  showDotPagination: a,
-  showFormPagination: i,
-  pageSizes: h,
+  showPagination: h,
+  showTotalItems: t,
+  showDropdownPagination: i,
+  showDotPagination: l,
+  showFormPagination: m,
+  pageSizes: z,
   // Filter
-  showFilter: x = !1,
-  showFilterInput: A,
-  filterSearchPlaceholder: v = "",
-  multiSelectFilter: z
+  showFilter: B = !1,
+  showFilterInput: R,
+  filterSearchPlaceholder: V = "",
+  filters: g,
+  multiSelectFilter: j,
+  filterActions: k,
+  showResetButton: P = !0,
+  resetButtonClassName: C,
+  // Hover row
+  enableHoverRow: H,
+  classNameHoverRow: I,
+  // Expandable rows
+  enableExpandedRow: K,
+  expandedState: M,
+  defaultExpanded: W,
+  classNameExpandedRow: q,
+  classNameExpandedCell: F,
+  classNameExpandedContent: G,
+  classNameExpandedHeader: J,
+  classNameActiveExpandedRow: O,
+  onExpandedChange: Q,
+  renderExpandedRow: S,
+  keepExpandColumnVisible: U
 }) => {
-  const t = V(
-    () => N || [
-      o,
+  const e = X(
+    () => h || [
+      t,
+      i,
       l,
-      a,
-      i
+      m
     ].some(Boolean),
     []
   );
   return /* @__PURE__ */ r(
-    j,
+    $,
     {
-      id: s,
+      id: c,
       columns: d,
-      data: n,
-      fetchData: T,
-      totalItems: f,
-      children: /* @__PURE__ */ m("section", { children: [
-        x && /* @__PURE__ */ r(
-          w,
+      data: f,
+      getRowId: w,
+      fetchData: A,
+      totalItems: u,
+      queryOptions: y,
+      isPaginationEnabled: e,
+      enableExpandedRow: K,
+      expandedState: M,
+      onExpandedChange: Q,
+      defaultExpanded: W,
+      classNameExpandedRow: q,
+      classNameExpandedCell: F,
+      classNameExpandedContent: G,
+      classNameExpandedHeader: J,
+      classNameActiveExpandedRow: O,
+      enableHoverRow: H,
+      classNameHoverRow: I,
+      renderExpandedRow: S,
+      keepExpandColumnVisible: U,
+      children: /* @__PURE__ */ n("section", { className: s("w-full min-w-fit", b), children: [
+        B && /* @__PURE__ */ r(
+          D,
           {
-            placeholder: v,
-            multiSelectFilter: z,
-            showFilterInput: A
+            actions: k,
+            filters: g,
+            multiSelectFilter: j,
+            placeholder: V,
+            showFilterInput: R,
+            showResetButton: P,
+            resetButtonClassName: C
           }
         ),
         /* @__PURE__ */ r(
-          "div",
+          L,
           {
-            className: g("shadow rounded-t-lg", {
-              "overflow-hidden rounded-lg": !t
-            }),
-            children: /* @__PURE__ */ m("table", { className: "w-full border-collapse", "aria-label": c, children: [
-              /* @__PURE__ */ r(
-                y,
-                {
-                  className: p,
-                  classNameArrows: u,
-                  classNameActiveArrows: b
-                }
-              ),
-              /* @__PURE__ */ r(B, {})
-            ] })
+            showPagination: e,
+            classNameWrapperTable: N,
+            isLoading: a,
+            children: /* @__PURE__ */ n(
+              "table",
+              {
+                className: s(
+                  "w-full border-collapse table-auto",
+                  "dark:border-separate dark:border-spacing-0",
+                  E
+                ),
+                "aria-label": p,
+                children: [
+                  /* @__PURE__ */ r(
+                    rr,
+                    {
+                      className: x,
+                      classNameArrows: v,
+                      classNameActiveArrows: T
+                    }
+                  ),
+                  /* @__PURE__ */ r(er, { isLoading: a, showPagination: e })
+                ]
+              }
+            )
           }
         ),
-        t && /* @__PURE__ */ r(
-          H,
+        e && /* @__PURE__ */ r(
+          or,
           {
-            showTotalItems: o,
-            showDropdownPagination: l,
-            showDotPagination: a,
-            showFormPagination: i,
-            pageSizes: h
+            showTotalItems: t,
+            showDropdownPagination: i,
+            showDotPagination: l,
+            showFormPagination: m,
+            pageSizes: z,
+            isLoading: a
           }
         )
       ] })
     }
   );
-}, e = P;
-e.displayName = "KonstructVirtualizedTable";
-e.TruncateText = K;
-e.Actions = M;
+}, o = ir;
+o.displayName = "KonstructVirtualizedTable";
+o.TruncateText = ar;
+o.Actions = tr;
+o.Events = {
+  sendExpandRowEvent: _,
+  sendCollapseRowEvent: Z,
+  sendToggleRowEvent: Y
+};
 export {
-  K as TruncateText,
-  e as VirtualizedTable
+  ar as TruncateText,
+  o as VirtualizedTable
 };

package/dist/components/VirtualizedTable/VirtualizedTable.types.d.ts

@@ -0,0 +1,198 @@
+import { ColumnDef as ColumnDefPrimitive, ExpandedState, OnChangeFn, RowData as RowDataPrimitive } from '@tanstack/react-table';
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { DateRange, DateRangeWithTime } from '../DateRangePicker/DateRangePicker.types';
+import { virtualizeTableVariants } from './VirtualizedTable.variants';
+import { FilterAction, Option } from './components/Filter/Filter.types';
+import { UseQueryOptions } from '@tanstack/react-query';
+/** Base row data type from TanStack Table */
+export type RowData = RowDataPrimitive;
+export type ColumnDef<TData extends RowData> = ColumnDefPrimitive<TData, string>;
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        className?: string | ((row: TData) => string);
+        attributes?: Record<string, string | number | boolean>;
+        headerClassName?: string;
+    }
+}
+export interface RowMetadata {
+    className?: string;
+    attributes?: Record<string, string | number | boolean>;
+    expandedRow?: ReactNode;
+    [key: string]: unknown;
+}
+export type RowDataWithMeta = Record<string, unknown> & {
+    meta?: RowMetadata;
+};
+/**
+ * Base shape shared by all filter configurations.
+ */
+type FilterConfigBase = {
+    /** Unique key for the filter, used as query parameter key */
+    key: string;
+    /** Display label for the filter trigger button */
+    label: string;
+    /** Position of the dropdown relative to the button */
+    position?: 'right' | 'left';
+};
+/**
+ * Configuration for a badge multi-select filter.
+ * Options are displayed with Badge components.
+ */
+export type BadgeMultiSelectFilterConfig = FilterConfigBase & {
+    /** Filter type — defaults to 'badgeMultiSelect' when omitted */
+    type?: 'badgeMultiSelect';
+    /** Available filter options */
+    options: Option[];
+};
+/**
+ * Configuration for a text multi-select filter.
+ * Options are displayed as plain text labels.
+ */
+export type TextMultiSelectFilterConfig = FilterConfigBase & {
+    type: 'textMultiSelect';
+    /** Available filter options */
+    options: Option[];
+};
+/**
+ * Configuration for a single date filter.
+ */
+export type DateFilterConfig = FilterConfigBase & {
+    type: 'date';
+    /** Country code for locale formatting (default: 'US') */
+    countryCode?: string;
+};
+/**
+ * Configuration for a date range filter.
+ */
+export type DateRangeFilterConfig = FilterConfigBase & {
+    type: 'dateRange';
+    /** Whether to show time inputs (default: false) */
+    showTime?: boolean;
+    /** Time format: '12' for 12-hour or '24' for 24-hour */
+    timeFormat?: '12' | '24';
+    /** Whether to show preset options (default: true) */
+    showPresets?: boolean;
+    /** Initial date range */
+    defaultRange?: DateRange;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Country code for locale formatting (default: 'US') */
+    countryCode?: string;
+    /** Callback when the date range changes */
+    onRangeChange?: (range: DateRangeWithTime) => void;
+};
+/**
+ * Union of all supported filter configurations.
+ */
+export type FilterConfig = BadgeMultiSelectFilterConfig | TextMultiSelectFilterConfig | DateFilterConfig | DateRangeFilterConfig;
+/**
+ * @deprecated Use FilterConfig instead
+ */
+export type MultiSelectFilter = BadgeMultiSelectFilterConfig;
+/**
+ * Props for the VirtualizedTable component.
+ * A feature-rich data table with filtering, pagination, and sorting.
+ *
+ * @example
+ * ```tsx
+ * <VirtualizedTable
+ *   id="users-table"
+ *   ariaLabel="Users list"
+ *   columns={[
+ *     { accessorKey: 'name', header: 'Name' },
+ *     { accessorKey: 'email', header: 'Email' },
+ *   ]}
+ *   data={users}
+ *   totalItems={totalUsers}
+ *   showPagination
+ *   showFilter
+ *   showFilterInput
+ *   filterSearchPlaceholder="Search users..."
+ * />
+ * ```
+ */
+export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtualizeTableVariants> & {
+    id: string | string[];
+    ariaLabel?: string;
+    columns: ColumnDefPrimitive<TData, string>[];
+    data: TData[];
+    className?: string;
+    classNameHeaderActiveArrows?: string;
+    classNameHeaderArrows?: string;
+    classNameHeaderTable?: string;
+    classNameTable?: string;
+    classNameWrapperTable?: string;
+    enableHoverRow?: boolean;
+    classNameHoverRow?: string;
+    queryOptions?: Omit<UseQueryOptions<any, any, any, any>, 'queryKey' | 'queryFn'>;
+    isLoading?: boolean;
+    getRowId?: (originalRow: TData, index: number) => string;
+    fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>) => Promise<{
+        data: TData[];
+        totalItemsCount?: number;
+    }>;
+} & ({
+    showPagination: true;
+    showTotalItems?: boolean;
+    showDropdownPagination?: boolean;
+    showDotPagination?: boolean;
+    showFormPagination?: boolean;
+    pageSizes?: number[] | string[];
+    totalItems: number;
+} | {
+    showPagination?: false | undefined;
+    showTotalItems?: never;
+    showDropdownPagination?: never;
+    showDotPagination?: never;
+    showFormPagination?: never;
+    pageSizes?: never;
+    totalItems?: never;
+}) & ({
+    filterSearchPlaceholder?: string;
+    /** @deprecated Use `filters` instead */
+    multiSelectFilter?: MultiSelectFilter[];
+    filters?: FilterConfig[];
+    showFilter: true;
+    showFilterInput?: boolean;
+    filterActions?: FilterAction[];
+    showResetButton?: boolean;
+    resetButtonClassName?: string;
+} | {
+    filterSearchPlaceholder?: never;
+    /** @deprecated Use `filters` instead */
+    multiSelectFilter?: never;
+    filters?: never;
+    showFilter?: false | undefined;
+    showFilterInput?: never;
+    filterActions?: FilterAction[];
+    showResetButton?: never;
+    resetButtonClassName?: never;
+}) & ({
+    enableExpandedRow: true;
+    expandedState?: ExpandedState;
+    defaultExpanded?: ExpandedState;
+    classNameExpandedRow?: string;
+    classNameExpandedCell?: string;
+    classNameExpandedContent?: string;
+    classNameExpandedHeader?: string;
+    classNameActiveExpandedRow?: string;
+    onExpandedChange?: OnChangeFn<ExpandedState>;
+    renderExpandedRow?: (data: TData) => ReactNode;
+    keepExpandColumnVisible?: boolean | Record<string, boolean>;
+} | {
+    enableExpandedRow?: false | undefined;
+    expandedState?: never;
+    defaultExpanded?: never;
+    classNameExpandedRow?: never;
+    classNameExpandedCell?: never;
+    classNameExpandedContent?: never;
+    classNameExpandedHeader?: never;
+    classNameActiveExpandedRow?: never;
+    onExpandedChange?: never;
+    renderExpandedRow?: never;
+    keepExpandColumnVisible?: never;
+});
+export {};

package/dist/components/VirtualizedTable/VirtualizedTable.variants.d.ts

@@ -0,0 +1 @@
+export declare const virtualizeTableVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/VirtualizedTable/assets/chevron-down.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+declare const SvgComponent: FC<{
+    className: string;
+    onClick: VoidFunction;
+}>;
+export default SvgComponent;

package/dist/components/VirtualizedTable/assets/chevron-up.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+declare const SvgComponent: FC<{
+    className: string;
+    onClick: VoidFunction;
+}>;
+export default SvgComponent;

package/dist/components/VirtualizedTable/assets/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ChevronUp } from './chevron-up';
+import { default as ChevronDown } from './chevron-down';
+export { ChevronUp, ChevronDown };

package/dist/components/VirtualizedTable/components/Actions/Actions.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from '../../VirtualizedTable.types';
+import { Props } from './Actions.types';
+export declare const Actions: <TData extends RowData>({ actions, wrapperClassName, triggerButtonClassName, iconTriggerButtonClassName, wrapperActionsClassName, wrapperContentActionsClassName, ...delegated }: Props<TData>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VirtualizedTable/components/Actions/Actions.js

@@ -1,46 +1,118 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Button as r } from "../../../Button/Button.js";
-import { c } from "../../../../createLucideIcon-D2CN7Ma9.js";
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const s = [
-  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
-  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
-  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
-], n = c("ellipsis-vertical", s), u = ({
-  actions: t,
-  ...o
-}) => t ? /* @__PURE__ */ l("div", { className: "relative group w-fit", children: [
-  /* @__PURE__ */ l(
-    r,
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Button as n } from "../../../Button/Button.js";
+import { cn as r } from "../../../../utils/index.js";
+import { E as x } from "../../../../ellipsis-vertical-Cl3yNtOy.js";
+const y = ({
+  actions: a,
+  wrapperClassName: i,
+  triggerButtonClassName: l,
+  iconTriggerButtonClassName: s,
+  wrapperActionsClassName: d,
+  wrapperContentActionsClassName: c,
+  ...m
+}) => a ? /* @__PURE__ */ t("div", { className: r("relative group", i), children: [
+  /* @__PURE__ */ t(
+    n,
     {
-      variant: "text",
+      variant: "link",
       shape: "circle",
       size: "large",
-      className: "text-slate-400 group-hover:text-slate-800 group-hover:bg-aurora-50",
+      className: r(
+        "text-slate-400",
+        "group-hover:text-slate-800",
+        "group-hover:bg-aurora-50",
+        "dark:text-metal-400",
+        "dark:group-hover:text-aurora-500",
+        "dark:group-hover:bg-aurora-900",
+        l
+      ),
       role: "presentation",
       children: [
-        /* @__PURE__ */ e(n, { "aria-hidden": "true", className: "w-7 h-7" }),
+        /* @__PURE__ */ e(
+          x,
+          {
+            "aria-hidden": "true",
+            className: r("w-7 h-7", s)
+          }
+        ),
         /* @__PURE__ */ e("span", { className: "sr-only", children: "Show Actions" })
       ]
     }
   ),
-  /* @__PURE__ */ e("div", { className: "absolute top-full right-0 w-[215px] hidden group-hover:block z-10", children: /* @__PURE__ */ e("div", { className: "bg-white mt-0.5 py-2 rounded-lg shadow-lg border border-zinc-100 animate-in fade-in-0", children: t.map(({ label: i, onClick: a }) => /* @__PURE__ */ e(
-    r,
+  /* @__PURE__ */ e(
+    "div",
     {
-      className: "w-full text-slate-800 cursor-pointer p-0 h-9 flex gap-2 text-sm font-normal justify-start hover:bg-gray-50 hover:text-slate-800 rounded-none px-6",
-      variant: "text",
-      asChild: !0,
-      role: "presentation",
-      children: /* @__PURE__ */ e(r, { onClick: () => a(o.row.original), children: i })
-    },
-    i
-  )) }) })
+      className: r(
+        "absolute",
+        "top-full",
+        "right-0",
+        "w-53.75",
+        "hidden",
+        "group-hover:block",
+        "z-10",
+        d
+      ),
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: r(
+            "bg-white",
+            "mt-0.5",
+            "py-2",
+            "rounded-lg",
+            "shadow-lg",
+            "border",
+            "border-zinc-100",
+            "animate-in",
+            "fade-in-0",
+            "dark:bg-metal-800",
+            "dark:border-metal-700",
+            c
+          ),
+          children: a.map(
+            ({
+              id: p,
+              label: o,
+              className: h,
+              component: u = n,
+              componentProps: g,
+              onClick: v
+            }, f) => /* @__PURE__ */ e(
+              u,
+              {
+                className: r(
+                  "w-full",
+                  "text-slate-800",
+                  "cursor-pointer",
+                  "p-0",
+                  "h-9",
+                  "flex",
+                  "gap-2",
+                  "text-sm",
+                  "font-normal",
+                  "justify-start",
+                  "rounded-none",
+                  "px-6",
+                  "hover:bg-gray-50",
+                  "hover:text-slate-800",
+                  "hover:no-underline",
+                  "dark:hover:bg-metal-700",
+                  h
+                ),
+                variant: "link",
+                role: "presentation",
+                onClick: () => v(m.row.original),
+                ...g,
+                children: o
+              },
+              p ?? (typeof o == "string" ? o : `action-${f}`)
+            )
+          )
+        }
+      )
+    }
+  )
 ] }) : null;
 export {
-  u as Actions
+  y as Actions
 };

package/dist/components/VirtualizedTable/components/Actions/Actions.types.d.ts

@@ -0,0 +1,24 @@
+import { CellContext } from '@tanstack/react-table';
+import { FC, ReactNode } from 'react';
+import { RowData } from '../../VirtualizedTable.types';
+export type Action<TData> = {
+    className?: string;
+    id?: string;
+    onClick: (rowData: TData) => void;
+} & ({
+    component: FC;
+    label?: string | ReactNode;
+    componentProps?: Record<string, unknown>;
+} | {
+    component?: undefined;
+    label: string | ReactNode;
+    componentProps?: never;
+});
+export type Props<TData extends RowData> = CellContext<TData, unknown> & {
+    actions: Action<TData>[];
+    iconTriggerButtonClassName?: string;
+    triggerButtonClassName?: string;
+    wrapperActionsClassName?: string;
+    wrapperClassName?: string;
+    wrapperContentActionsClassName?: string;
+};

package/dist/components/VirtualizedTable/components/Body/Body.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from '../../VirtualizedTable.types';
+import { BodyProps } from './Body.types';
+export declare const Body: <TData extends RowData = RowData>({ isLoading, showPagination, }: BodyProps<TData>) => import("react/jsx-runtime").JSX.Element;