@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

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

@@ -0,0 +1,228 @@
+import { ColumnDef as ColumnDefPrimitive, ExpandedState, OnChangeFn, RowData as RowDataPrimitive } from '@tanstack/react-table';
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { Props as ButtonProps } from '../Button/Button.types';
+import { DateRange, DateRangeWithTime } from '../DateRangePicker/DateRangePicker.types';
+import { TimePreset } from '../Filter/components/TimeFilterDropdown/TimeFilterDropdown.types';
+import { virtualizeTableVariants } from './VirtualizedTable.variants';
+import { 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;
+};
+/**
+ * Configuration for an action button rendered inline with filters.
+ */
+export type ActionFilterConfig = {
+    type: 'action';
+    /** Text displayed inside the button. Also used as the React key. */
+    label: string;
+    /** Icon rendered before the label */
+    leftIcon?: ReactNode;
+    /** Icon rendered after the label */
+    rightIcon?: ReactNode;
+} & Omit<ButtonProps, 'children' | 'type'>;
+/**
+ * Configuration for a time filter with optional presets and a TimePicker.
+ */
+export type TimeFilterConfig = FilterConfigBase & {
+    type: 'time';
+    /** Time format: '12' for AM/PM or '24' for military time (default: '12') */
+    format?: '12' | '24';
+    /** Preset time options for quick selection */
+    presets?: TimePreset[];
+    /** Whether to show the TimePicker for custom time selection (default: true) */
+    showTimePicker?: boolean;
+};
+/**
+ * Union of all supported filter configurations.
+ */
+export type FilterConfig = BadgeMultiSelectFilterConfig | TextMultiSelectFilterConfig | DateFilterConfig | DateRangeFilterConfig | ActionFilterConfig | TimeFilterConfig;
+/**
+ * @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>, signal?: AbortSignal) => 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;
+    /** @deprecated Use `ActionFilterConfig` items in `filters` instead */
+    filterActions?: ActionFilterConfig[];
+    showResetButton?: boolean;
+    resetButtonClassName?: string;
+    closeOnApply?: boolean;
+} | {
+    filterSearchPlaceholder?: never;
+    /** @deprecated Use `filters` instead */
+    multiSelectFilter?: never;
+    filters?: never;
+    showFilter?: false | undefined;
+    showFilterInput?: never;
+    /** @deprecated Use `ActionFilterConfig` items in `filters` instead */
+    filterActions?: ActionFilterConfig[];
+    showResetButton?: never;
+    resetButtonClassName?: never;
+    closeOnApply?: 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/VirtualizedTable.variants.js

@@ -1,5 +1,5 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const t = a([]);
+import { t as a } from "../../dist-DtEbXv47.js";
+var t = a([]);
 export {
   t as virtualizeTableVariants
 };

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-down.js

@@ -1,25 +1,16 @@
 import { jsx as o } from "react/jsx-runtime";
-const l = ({
-  className: t,
-  onClick: e
-}) => /* @__PURE__ */ o(
-  "svg",
-  {
-    width: "7",
-    height: "5",
-    viewBox: "0 0 7 5",
-    fill: "none",
-    className: t,
-    onClick: e,
-    children: /* @__PURE__ */ o(
-      "path",
-      {
-        d: "M0.8225 0L3.5 2.67167L6.1775 0L7 0.8225L3.5 4.3225L0 0.8225L0.8225 0Z",
-        fill: "currentColor"
-      }
-    )
-  }
-);
+var i = ({ className: e, onClick: r }) => /* @__PURE__ */ o("svg", {
+  width: "7",
+  height: "5",
+  viewBox: "0 0 7 5",
+  fill: "none",
+  className: e,
+  onClick: r,
+  children: /* @__PURE__ */ o("path", {
+    d: "M0.8225 0L3.5 2.67167L6.1775 0L7 0.8225L3.5 4.3225L0 0.8225L0.8225 0Z",
+    fill: "currentColor"
+  })
+});
 export {
-  l as default
+  i as default
 };

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/chevron-up.js

@@ -1,25 +1,16 @@
-import { jsx as o } from "react/jsx-runtime";
-const l = ({
-  className: r,
-  onClick: t
-}) => /* @__PURE__ */ o(
-  "svg",
-  {
-    width: "7",
-    height: "5",
-    viewBox: "0 0 7 5",
-    fill: "currentColor",
-    className: r,
-    onClick: t,
-    children: /* @__PURE__ */ o(
-      "path",
-      {
-        d: "M0.8225 4.99999L3.5 2.32832L6.1775 4.99999L7 4.17749L3.5 0.67749L0 4.17749L0.8225 4.99999Z",
-        fill: "currentColor"
-      }
-    )
-  }
-);
+import { jsx as r } from "react/jsx-runtime";
+var l = ({ className: o, onClick: t }) => /* @__PURE__ */ r("svg", {
+  width: "7",
+  height: "5",
+  viewBox: "0 0 7 5",
+  fill: "currentColor",
+  className: o,
+  onClick: t,
+  children: /* @__PURE__ */ r("path", {
+    d: "M0.8225 4.99999L3.5 2.32832L6.1775 4.99999L7 4.17749L3.5 0.67749L0 4.17749L0.8225 4.99999Z",
+    fill: "currentColor"
+  })
+});
 export {
   l as default
 };

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/assets/index.js

@@ -1,6 +1,6 @@
-import { default as r } from "./chevron-up.js";
-import { default as f } from "./chevron-down.js";
+import n from "./chevron-up.js";
+import m from "./chevron-down.js";
 export {
-  f as ChevronDown,
-  r as ChevronUp
+  m as ChevronDown,
+  n as ChevronUp
 };

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,37 @@
-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,
-    {
-      variant: "text",
-      shape: "circle",
-      size: "large",
-      className: "text-slate-400 group-hover:text-slate-800 group-hover:bg-aurora-50",
-      role: "presentation",
-      children: [
-        /* @__PURE__ */ e(n, { "aria-hidden": "true", className: "w-7 h-7" }),
-        /* @__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,
-    {
-      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
-  )) }) })
-] }) : null;
+import { t as r } from "../../../../utils-DHuiYnx1.js";
+import { Button as o } from "../../../Button/Button.js";
+import { t as x } from "../../../../ellipsis-vertical-My0S9QY5.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+var y = ({ actions: t, wrapperClassName: n, triggerButtonClassName: l, iconTriggerButtonClassName: s, wrapperActionsClassName: d, wrapperContentActionsClassName: m, ...p }) => t ? /* @__PURE__ */ i("div", {
+  className: r("relative group", n),
+  children: [/* @__PURE__ */ i(o, {
+    variant: "link",
+    shape: "circle",
+    size: "large",
+    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(x, {
+      "aria-hidden": "true",
+      className: r("w-7 h-7", s)
+    }), /* @__PURE__ */ e("span", {
+      className: "sr-only",
+      children: "Show Actions"
+    })]
+  }), /* @__PURE__ */ e("div", {
+    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", m),
+      children: t.map(({ id: c, label: a, className: h, component: u = o, 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(p.row.original),
+        ...g,
+        children: a
+      }, c ?? (typeof a == "string" ? a : `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;

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -1,25 +1,54 @@
-import { jsx as e } from "react/jsx-runtime";
-import { f as d } from "../../../../index-Dx2grAuN.js";
-import { useTableContext as m } from "../../contexts/table.hook.js";
-const p = () => {
-  const { table: r } = m();
-  return /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: r.getRowModel().rows.map(({ id: a, getVisibleCells: o }) => /* @__PURE__ */ e(
-    "tr",
-    {
-      className: "border border-x-transparent border-t-gray-200 border-b-transparent table w-full table-fixed",
-      children: o().map(({ id: l, column: t, getContext: s }) => /* @__PURE__ */ e(
-        "td",
-        {
-          className: "px-4 py-1 text-sm",
-          style: { width: t.getSize() },
-          children: d(t.columnDef.cell, s())
-        },
-        l
-      ))
-    },
-    a
-  )) });
+import { t as l } from "../../../../utils-DHuiYnx1.js";
+import { n as A } from "../../../../table.provider-4OQNqxH3.js";
+import { useTableContext as B } from "../../contexts/table.hook.js";
+import { Skeleton as H } from "../Skeleton/Skeleton.js";
+import { ExpandableRow as M } from "../ExpandableRow/ExpandableRow.js";
+import { Fragment as O } from "react";
+import { jsx as a, jsxs as V } from "react/jsx-runtime";
+var U = ({ isLoading: g, showPagination: t }) => {
+  const { table: i, pageSize: h, tableFetching: w, enableExpandedRow: N, classNameExpandedRow: R, classNameExpandedCell: k, classNameExpandedContent: E, enableHoverRow: p, classNameHoverRow: v, classNameActiveExpandedRow: C, renderExpandedRow: b, isBorderOnAdjacentCell: D, isExpandColumnVisible: y } = B();
+  if (g || w) return /* @__PURE__ */ a(H, {
+    numberOfRows: h,
+    table: i
+  });
+  const d = i.getRowModel().rows ?? [];
+  return /* @__PURE__ */ a("tbody", {
+    className: l("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+    children: d.map((x, s) => {
+      const { id: m, original: c, getVisibleCells: j } = x, { meta: o = {} } = c, n = j(), e = N && x.getIsExpanded(), z = !!o.expandedRow || !!b, u = n[0]?.column.id !== "__expand" || y ? 0 : D ? 1 : null;
+      return /* @__PURE__ */ V(O, { children: [/* @__PURE__ */ a("tr", {
+        className: l({ "group/row": p }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", o.className),
+        "data-row-id": m,
+        ...o.attributes ?? {},
+        children: n.map(({ id: F, column: r, getContext: S }, f) => {
+          const _ = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(c) : r.columnDef.meta?.className;
+          return /* @__PURE__ */ a("td", {
+            className: l("px-4", "py-1", "text-sm", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", {
+              "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": p,
+              [l("bg-zinc-100 dark:bg-metal-800", C)]: !!e
+            }, v, _, {
+              "rounded-bl-lg": s === d.length - 1 && u !== null && f === u && !t && !e,
+              "rounded-br-lg": s === d.length - 1 && f === n.length - 1 && !t && !e,
+              "dark:[tr:last-child_&]:border-b": !t
+            }),
+            "data-expanded": e ? !0 : void 0,
+            ...r.columnDef.meta?.attributes ?? {},
+            children: A(r.columnDef.cell, S())
+          }, F);
+        })
+      }), z && /* @__PURE__ */ a(M, {
+        classNameExpandedCell: k,
+        classNameExpandedContent: E,
+        classNameExpandedRow: R,
+        colSpan: n.length,
+        id: m,
+        isExpanded: !!e,
+        isLastRow: s === d.length - 1 && !t,
+        children: o.expandedRow ?? b?.(c)
+      })] }, m);
+    })
+  });
 };
 export {
-  p as Body
+  U as Body
 };

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

@@ -0,0 +1,5 @@
+import { RowData } from '../../VirtualizedTable.types';
+export type BodyProps<_TData extends RowData = RowData> = {
+    isLoading?: boolean;
+    showPagination?: boolean;
+};

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

@@ -0,0 +1 @@
+export declare const DotPaginate: () => import("react/jsx-runtime").JSX.Element;