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

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

@@ -1,4 +1,4 @@
 export declare const progressBarTrackVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const progressBarFillVariants: (props?: ({
-    status?: "warning" | "error" | "default" | "success" | null | undefined;
+    status?: "success" | "warning" | "error" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,3 +1,3 @@
 export declare const radioCardGroupVariants: (props?: ({
-    direction?: "col" | "row" | null | undefined;
+    direction?: "row" | "col" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,3 +1,3 @@
 export declare const radioGroupVariants: (props?: ({
-    direction?: "col" | "row" | null | undefined;
+    direction?: "row" | "col" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -5,7 +5,7 @@ export declare const contentVariants: (props?: ({
     variant?: "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const listVariants: (props?: ({
-    variant?: "default" | "horizontal" | "vertical" | null | undefined;
+    variant?: "horizontal" | "vertical" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const triggerVariants: (props?: ({
     variant?: "default" | "active" | "inactive" | null | undefined;

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

@@ -1,5 +1,5 @@
 export declare const toastVariants: (props?: ({
-    variant?: "warning" | "error" | "success" | null | undefined;
+    variant?: "success" | "warning" | "error" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const viewportToastVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const closeToastVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -2,26 +2,21 @@ import { FC } from 'react';
 import { TooltipProps } from './Tooltip.types';
 /**
  * A tooltip component that shows on hover.
- * Wraps any element and displays content on mouse enter.
+ * Built on Radix UI for accessible, well-positioned tooltips.
  *
  * @example
  * ```tsx
- * // Basic tooltip
  * <Tooltip content="Click to save">
  *   <Button>Save</Button>
  * </Tooltip>
  *
- * // Tooltip with position
- * <Tooltip content="More information" position="bottom">
+ * <Tooltip content="More information" side="bottom">
  *   <InfoIcon />
  * </Tooltip>
  *
- * // Tooltip on text
- * <Tooltip content="This is a helpful tip">
- *   <span>Hover me</span>
+ * <Tooltip content="Danger!" bgClassName="bg-red-500">
+ *   <Button variant="danger">Delete</Button>
  * </Tooltip>
  * ```
- *
- * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tooltip--docs Storybook}
  */
 export declare const Tooltip: FC<TooltipProps>;

package/dist/components/Tooltip/Tooltip.js

@@ -1,35 +1,37 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { S as u } from "../../index-BvoZGpli.js";
-import { forwardRef as v, useRef as N, useImperativeHandle as h, useMemo as w, isValidElement as x } from "react";
-import { cn as o } from "../../utils/index.js";
-import { arrowVariants as R, tooltipVariants as V } from "./Tooltip.variants.js";
-import { useTooltip as T } from "./hooks/useTooltip.js";
-import { Typography as b } from "../Typography/Typography.js";
-const I = v(
-  ({ children: r, content: i, className: m, theme: l, position: a, wrapperClassName: n }, p) => {
-    const c = N(null), { isVisible: f, componentRef: t } = T();
-    h(p, () => t.current, [t]);
-    const d = w(
-      () => x(r) ? r : /* @__PURE__ */ e("p", { className: "p-2", children: r }),
-      [r]
-    );
-    return /* @__PURE__ */ e("div", { className: o("w-full", n), "data-theme": l, children: /* @__PURE__ */ s("div", { className: "relative w-max", children: [
-      /* @__PURE__ */ e(u, { ref: t, className: o("cursor-pointer ", m), children: d }),
-      /* @__PURE__ */ s(
-        "div",
-        {
-          ref: c,
-          className: o(V({ position: a })),
-          "data-visible": f,
-          children: [
-            /* @__PURE__ */ e("span", { className: o(R({ position: a })) }),
-            /* @__PURE__ */ e(b, { variant: "tooltip", className: "text-white", children: i })
-          ]
-        }
-      )
-    ] }) });
-  }
-);
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { P as p, R as c, T as h, C as x, A as f } from "../../index-B7-5g1Sm.js";
+import { cn as g } from "../../utils/index.js";
+const j = ({
+  content: s,
+  children: t,
+  side: o = "top",
+  sideOffset: a = 4,
+  bgClassName: i = "bg-slate-700",
+  arrowClassName: n = "fill-slate-700",
+  textClassName: l = "text-white",
+  className: d,
+  delayDuration: m = 0
+}) => /* @__PURE__ */ e(p, { delayDuration: m, children: /* @__PURE__ */ r(c, { children: [
+  /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("span", { children: t }) }),
+  /* @__PURE__ */ r(
+    x,
+    {
+      side: o,
+      sideOffset: a,
+      className: g(
+        "rounded px-2 py-1 text-xs shadow-md",
+        "animate-in fade-in-0",
+        i,
+        l,
+        d
+      ),
+      children: [
+        s,
+        /* @__PURE__ */ e(f, { className: n })
+      ]
+    }
+  )
+] }) });
 export {
-  I as Tooltip
+  j as Tooltip
 };

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

@@ -1,7 +1,4 @@
-import { VariantProps } from 'class-variance-authority';
-import { PropsWithChildren, ReactNode } from 'react';
-import { Theme } from '../../domain/theme';
-import { tooltipVariants } from './Tooltip.variants';
+import { ReactNode } from 'react';
 /**
  * Props for the Tooltip component.
  *
@@ -11,18 +8,32 @@ import { tooltipVariants } from './Tooltip.variants';
  *   <Button>Edit</Button>
  * </Tooltip>
  *
- * <Tooltip content="More info here" position="bottom">
+ * <Tooltip content="More info here" side="bottom">
  *   <InfoIcon />
  * </Tooltip>
+ *
+ * <Tooltip content="Danger!" bgClassName="bg-red-500">
+ *   <Button variant="danger">Delete</Button>
+ * </Tooltip>
  * ```
  */
-export interface TooltipProps extends PropsWithChildren, VariantProps<typeof tooltipVariants> {
+export interface TooltipProps {
     /** Tooltip text or content */
     content: ReactNode | string;
-    /** CSS classes for the trigger element */
+    /** The trigger element */
+    children: ReactNode;
+    /** Tooltip position relative to trigger */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Distance from trigger in px */
+    sideOffset?: number;
+    /** Background color class for tooltip (e.g. 'bg-slate-700', 'bg-red-500') */
+    bgClassName?: string;
+    /** Arrow fill color class (e.g. 'fill-slate-700', 'fill-red-500'). Should match bgClassName */
+    arrowClassName?: string;
+    /** Text color class (e.g. 'text-white') */
+    textClassName?: string;
+    /** Additional className for tooltip content */
     className?: string;
-    /** CSS classes for the tooltip wrapper */
-    wrapperClassName?: string;
-    /** Theme override for this component */
-    theme?: Theme;
+    /** Delay before showing tooltip in ms */
+    delayDuration?: number;
 }

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

@@ -1,3 +1,3 @@
 export declare const typographyVariants: (props?: ({
-    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "tooltip" | "subtitle1" | "subtitle2" | "subtitle3" | "labelLarge" | "labelMedium" | "labelSmall" | "buttonSmall" | "body1" | "body2" | "body3" | null | undefined;
+    variant?: "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "labelLarge" | "labelMedium" | "labelSmall" | "buttonSmall" | "body1" | "body2" | "body3" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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,8 +1,11 @@
 import { ColumnDef as ColumnDefPrimitive, ExpandedState, OnChangeFn, RowData as RowDataPrimitive } from '@tanstack/react-table';
 import { VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
+import { 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 { FilterAction, Option } from './components/Filter/Filter.types';
+import { Option } from './components/Filter/Filter.types';
 import { UseQueryOptions } from '@tanstack/react-query';
 /** Base row data type from TanStack Table */
 export type RowData = RowDataPrimitive;
@@ -24,18 +27,93 @@ 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;
+};
+/**
+ * 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;
+} & 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.
@@ -96,18 +174,24 @@ 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[];
+    /** @deprecated Use `ActionFilterConfig` items in `filters` instead */
+    filterActions?: ActionFilterConfig[];
     showResetButton?: boolean;
     resetButtonClassName?: string;
 } | {
     filterSearchPlaceholder?: never;
+    /** @deprecated Use `filters` instead */
     multiSelectFilter?: never;
+    filters?: never;
     showFilter?: false | undefined;
     showFilterInput?: never;
-    filterActions?: FilterAction[];
+    /** @deprecated Use `ActionFilterConfig` items in `filters` instead */
+    filterActions?: ActionFilterConfig[];
     showResetButton?: never;
     resetButtonClassName?: never;
 }) & ({
@@ -135,3 +219,4 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     renderExpandedRow?: never;
     keepExpandColumnVisible?: never;
 });
+export {};