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

package/dist/components/Filter/Filter.d.ts

@@ -1,5 +1,5 @@
 import { FilterComponentProps } from './Filter.types';
-import { BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown } from './components';
+import { BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, TextMultiSelect } from './components';
 /**
  * A compound component for building filter interfaces.
  * Includes sub-components for badge multi-select, date filtering, and reset actions.
@@ -23,4 +23,4 @@ import { BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown } from '.
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-filter--docs Storybook}
  */
 declare const Filter: FilterComponentProps;
-export { Filter, BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, };
+export { Filter, BadgeMultiSelect, TextMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, };

package/dist/components/Filter/Filter.js

@@ -1,23 +1,26 @@
 import { jsx as i } from "react/jsx-runtime";
 import { cn as m } from "../../utils/index.js";
-import { filterVariants as a } from "./Filter.variants.js";
-import { BadgeMultiSelect as l } from "./components/BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as p } from "./components/DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as n } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { filterVariants as l } from "./Filter.variants.js";
+import { BadgeMultiSelect as a } from "./components/BadgeDropdown/BadgeMultiSelect.js";
+import { TextMultiSelect as p } from "./components/TextMultiSelect/TextMultiSelect.js";
+import { DateFilterDropdown as n } from "./components/DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as c } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
 import { ResetButton as d } from "./components/ResetButton/ResetButton.js";
 const t = ({
   className: e,
   theme: o = "civo",
   children: r
-}) => /* @__PURE__ */ i("div", { className: m(a({ className: e })), "data-theme": o, children: r });
+}) => /* @__PURE__ */ i("div", { className: m(l({ className: e })), "data-theme": o, children: r });
 t.displayName = "KonstructFilter";
-t.BadgeMultiSelect = l;
-t.DateFilterDropdown = p;
-t.DateRangeFilterDropdown = n;
+t.BadgeMultiSelect = a;
+t.TextMultiSelect = p;
+t.DateFilterDropdown = n;
+t.DateRangeFilterDropdown = c;
 t.ResetButton = d;
 export {
-  l as BadgeMultiSelect,
-  p as DateFilterDropdown,
-  n as DateRangeFilterDropdown,
-  t as Filter
+  a as BadgeMultiSelect,
+  n as DateFilterDropdown,
+  c as DateRangeFilterDropdown,
+  t as Filter,
+  p as TextMultiSelect
 };

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

@@ -3,7 +3,7 @@ import { FC, PropsWithChildren } from 'react';
 import { Theme } from '../../domain/theme';
 import { BadgeProps } from '../Badge/Badge.types';
 import { filterVariants } from './Filter.variants';
-import { BadgeMultiSelectProps, DateFilterDropdownProps, DateRangeFilterDropdownProps, ResetButtonProps } from './components';
+import { BadgeMultiSelectProps, DateFilterDropdownProps, DateRangeFilterDropdownProps, ResetButtonProps, TextMultiSelectProps } from './components';
 /**
  * Configuration for a filter option.
  */
@@ -47,6 +47,7 @@ export type FilterProps = VariantProps<typeof filterVariants> & PropsWithChildre
  */
 export type FilterComponentProps = FC<FilterProps> & {
     BadgeMultiSelect: FC<BadgeMultiSelectProps>;
+    TextMultiSelect: FC<TextMultiSelectProps>;
     DateFilterDropdown: FC<DateFilterDropdownProps>;
     DateRangeFilterDropdown: FC<DateRangeFilterDropdownProps>;
     ResetButton: FC<ResetButtonProps>;

package/dist/components/Filter/components/TextMultiSelect/TextMultiSelect.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TextMultiSelectProps } from './TextMultiSelect.types';
+export declare const TextMultiSelect: FC<TextMultiSelectProps>;

package/dist/components/Filter/components/TextMultiSelect/TextMultiSelect.js

@@ -0,0 +1,122 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Badge as k } from "../../../Badge/Badge.js";
+import { Button as o } from "../../../Button/Button.js";
+import { Checkbox as v } from "../../../Checkbox/Checkbox.js";
+import { filterButtonIconVariants as C, filterButtonVariants as N } from "../../Filter.variants.js";
+import { cn as r } from "../../../../utils/index.js";
+import { useBadgeMultiSelect as y } from "../BadgeDropdown/BadgeMultiSelect.hook.js";
+import { C as w } from "../../../../chevron-down-BBFYYzZq.js";
+const $ = ({
+  options: n,
+  label: m,
+  position: i = "left",
+  onApply: p
+}) => {
+  const {
+    wrapperRef: h,
+    isOpen: l,
+    selectedOptions: f,
+    selectedCount: c,
+    handleOpen: u,
+    handleResetOptions: x,
+    handleApplyOptions: g,
+    handleSelectOption: b
+  } = y({ onApply: p });
+  return n.length === 0 ? null : /* @__PURE__ */ a("div", { ref: h, className: "relative", children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        className: r(N(), {
+          "text-slate-700 dark:text-metal-50": l
+        }),
+        onClick: u,
+        children: [
+          m,
+          c.length > 0 && /* @__PURE__ */ e(k, { label: c.length.toString() }),
+          /* @__PURE__ */ e(
+            w,
+            {
+              className: r(C(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": l
+              })
+            }
+          )
+        ]
+      }
+    ),
+    l && /* @__PURE__ */ a(
+      "div",
+      {
+        className: r(
+          "absolute",
+          "top-full",
+          "mt-1",
+          "bg-white",
+          "rounded-md",
+          "shadow-md",
+          "animate-in",
+          "fade-in-0",
+          "z-10",
+          "border",
+          "border-gray-200",
+          "dark:bg-metal-800",
+          "dark:border-metal-700",
+          {
+            "left-0": i === "left",
+            "right-0": i === "right"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ e("div", { className: "px-6 py-4", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: n.map((t) => {
+            const s = !!f.find(
+              (d) => d.id === t.id
+            );
+            return /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
+              /* @__PURE__ */ e(
+                v,
+                {
+                  defaultChecked: s,
+                  "data-label": t.id,
+                  onChange: (d) => b(t, d)
+                },
+                `${t.id}-${s}`
+              ),
+              /* @__PURE__ */ e("span", { className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap", children: t.label })
+            ] }, t.id);
+          }) }) }),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: r(
+                "flex",
+                "justify-center",
+                "items-center",
+                "gap-4",
+                "px-6",
+                "py-4",
+                "border-t",
+                "border-gray-200",
+                "dark:border-metal-700"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  o,
+                  {
+                    variant: "secondary",
+                    appearance: "compact",
+                    onClick: x,
+                    children: "Reset"
+                  }
+                ),
+                /* @__PURE__ */ e(o, { appearance: "compact", onClick: g, children: "Apply" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  $ as TextMultiSelect
+};

package/dist/components/Filter/components/TextMultiSelect/TextMultiSelect.types.d.ts

@@ -0,0 +1,7 @@
+import { Option } from '../../Filter.types';
+export type TextMultiSelectProps = {
+    label: string;
+    options: Option[];
+    position?: 'left' | 'right';
+    onApply?: (selectedOptions: Option[]) => void;
+};

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

@@ -6,3 +6,5 @@ export * from './DateRangeFilterDropdown/DateRangeFilterDropdown';
 export * from './DateRangeFilterDropdown/DateRangeFilterDropdown.types';
 export * from './ResetButton/ResetButton';
 export * from './ResetButton/ResetButton.types';
+export * from './TextMultiSelect/TextMultiSelect';
+export * from './TextMultiSelect/TextMultiSelect.types';

package/dist/components/Filter/components/index.js

@@ -1,10 +1,12 @@
-import { BadgeMultiSelect as t } from "./BadgeDropdown/BadgeMultiSelect.js";
+import { BadgeMultiSelect as o } from "./BadgeDropdown/BadgeMultiSelect.js";
 import { DateFilterDropdown as p } from "./DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as f } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { DateRangeFilterDropdown as x } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
 import { ResetButton as m } from "./ResetButton/ResetButton.js";
+import { TextMultiSelect as i } from "./TextMultiSelect/TextMultiSelect.js";
 export {
-  t as BadgeMultiSelect,
+  o as BadgeMultiSelect,
   p as DateFilterDropdown,
-  f as DateRangeFilterDropdown,
-  m as ResetButton
+  x as DateRangeFilterDropdown,
+  m as ResetButton,
+  i as TextMultiSelect
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,16 +1,16 @@
 import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { useMemo as U } from "react";
+import { useMemo as X } from "react";
 import { cn as s } from "../../utils/index.js";
-import { sendToggleRowEvent as X, sendCollapseRowEvent as Y, sendExpandRowEvent as Z } from "./events/index.js";
-import { TableProvider as _ } from "./contexts/table.provider.js";
-import { Filter as $ } from "./components/Filter/Filter.js";
-import { WrapperBody as D } from "./components/WrapperBody/WrapperBody.js";
-import { Header as L } from "./components/Header/Header.js";
-import { Body as rr } from "./components/Body/Body.js";
-import { Pagination as er } from "./components/Pagination/Pagination.js";
-import { TruncateText as or } from "./components/TruncateText/TruncateText.js";
-import { Actions as ar } from "./components/Actions/Actions.js";
-const tr = ({
+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,
@@ -37,27 +37,28 @@ const tr = ({
   showFilter: B = !1,
   showFilterInput: R,
   filterSearchPlaceholder: V = "",
-  multiSelectFilter: g,
-  filterActions: j,
-  showResetButton: k = !0,
-  resetButtonClassName: P,
+  filters: g,
+  multiSelectFilter: j,
+  filterActions: k,
+  showResetButton: P = !0,
+  resetButtonClassName: C,
   // Hover row
-  enableHoverRow: C,
-  classNameHoverRow: H,
+  enableHoverRow: H,
+  classNameHoverRow: I,
   // Expandable rows
-  enableExpandedRow: I,
-  expandedState: K,
-  defaultExpanded: M,
-  classNameExpandedRow: W,
-  classNameExpandedCell: q,
-  classNameExpandedContent: F,
-  classNameExpandedHeader: G,
-  classNameActiveExpandedRow: J,
-  onExpandedChange: O,
-  renderExpandedRow: Q,
-  keepExpandColumnVisible: S
+  enableExpandedRow: K,
+  expandedState: M,
+  defaultExpanded: W,
+  classNameExpandedRow: q,
+  classNameExpandedCell: F,
+  classNameExpandedContent: G,
+  classNameExpandedHeader: J,
+  classNameActiveExpandedRow: O,
+  onExpandedChange: Q,
+  renderExpandedRow: S,
+  keepExpandColumnVisible: U
 }) => {
-  const e = U(
+  const e = X(
     () => h || [
       t,
       i,
@@ -67,7 +68,7 @@ const tr = ({
     []
   );
   return /* @__PURE__ */ r(
-    _,
+    $,
     {
       id: c,
       columns: d,
@@ -77,33 +78,34 @@ const tr = ({
       totalItems: u,
       queryOptions: y,
       isPaginationEnabled: e,
-      enableExpandedRow: I,
-      expandedState: K,
-      onExpandedChange: O,
-      defaultExpanded: M,
-      classNameExpandedRow: W,
-      classNameExpandedCell: q,
-      classNameExpandedContent: F,
-      classNameExpandedHeader: G,
-      classNameActiveExpandedRow: J,
-      enableHoverRow: C,
-      classNameHoverRow: H,
-      renderExpandedRow: Q,
-      keepExpandColumnVisible: S,
+      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,
           {
-            actions: j,
-            multiSelectFilter: g,
+            actions: k,
+            filters: g,
+            multiSelectFilter: j,
             placeholder: V,
             showFilterInput: R,
-            showResetButton: k,
-            resetButtonClassName: P
+            showResetButton: P,
+            resetButtonClassName: C
           }
         ),
         /* @__PURE__ */ r(
-          D,
+          L,
           {
             showPagination: e,
             classNameWrapperTable: N,
@@ -119,21 +121,21 @@ const tr = ({
                 "aria-label": p,
                 children: [
                   /* @__PURE__ */ r(
-                    L,
+                    rr,
                     {
                       className: x,
                       classNameArrows: v,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(rr, { isLoading: a, showPagination: e })
+                  /* @__PURE__ */ r(er, { isLoading: a, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          er,
+          or,
           {
             showTotalItems: t,
             showDropdownPagination: i,
@@ -146,16 +148,16 @@ const tr = ({
       ] })
     }
   );
-}, o = tr;
+}, o = ir;
 o.displayName = "KonstructVirtualizedTable";
-o.TruncateText = or;
-o.Actions = ar;
+o.TruncateText = ar;
+o.Actions = tr;
 o.Events = {
-  sendExpandRowEvent: Z,
-  sendCollapseRowEvent: Y,
-  sendToggleRowEvent: X
+  sendExpandRowEvent: _,
+  sendCollapseRowEvent: Z,
+  sendToggleRowEvent: Y
 };
 export {
-  or as TruncateText,
+  ar as TruncateText,
   o as VirtualizedTable
 };

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

@@ -1,6 +1,7 @@
 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';
@@ -24,18 +25,73 @@ export type RowDataWithMeta = Record<string, unknown> & {
     meta?: RowMetadata;
 };
 /**
- * Configuration for a multi-select filter in the table.
+ * Base shape shared by all filter configurations.
  */
-export type MultiSelectFilter = {
-    /** Unique key for the filter */
+type FilterConfigBase = {
+    /** Unique key for the filter, used as query parameter key */
     key: string;
-    /** Display label for the filter */
+    /** Display label for the filter trigger button */
     label: string;
-    /** Position of the filter dropdown */
+    /** 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.
@@ -96,7 +152,9 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     totalItems?: never;
 }) & ({
     filterSearchPlaceholder?: string;
+    /** @deprecated Use `filters` instead */
     multiSelectFilter?: MultiSelectFilter[];
+    filters?: FilterConfig[];
     showFilter: true;
     showFilterInput?: boolean;
     filterActions?: FilterAction[];
@@ -104,7 +162,9 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     resetButtonClassName?: string;
 } | {
     filterSearchPlaceholder?: never;
+    /** @deprecated Use `filters` instead */
     multiSelectFilter?: never;
+    filters?: never;
     showFilter?: false | undefined;
     showFilterInput?: never;
     filterActions?: FilterAction[];
@@ -135,3 +195,4 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     renderExpandedRow?: never;
     keepExpandColumnVisible?: never;
 });
+export {};