@konstructio/ui 0.1.2-alpha.71 → 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.types.d.ts

@@ -1,9 +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;
@@ -84,10 +86,30 @@ export type DateRangeFilterConfig = FilterConfigBase & {
     /** 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;
+export type FilterConfig = BadgeMultiSelectFilterConfig | TextMultiSelectFilterConfig | DateFilterConfig | DateRangeFilterConfig | ActionFilterConfig | TimeFilterConfig;
 /**
  * @deprecated Use FilterConfig instead
  */
@@ -157,7 +179,8 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     filters?: FilterConfig[];
     showFilter: true;
     showFilterInput?: boolean;
-    filterActions?: FilterAction[];
+    /** @deprecated Use `ActionFilterConfig` items in `filters` instead */
+    filterActions?: ActionFilterConfig[];
     showResetButton?: boolean;
     resetButtonClassName?: string;
 } | {
@@ -167,7 +190,8 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     filters?: never;
     showFilter?: false | undefined;
     showFilterInput?: never;
-    filterActions?: FilterAction[];
+    /** @deprecated Use `ActionFilterConfig` items in `filters` instead */
+    filterActions?: ActionFilterConfig[];
     showResetButton?: never;
     resetButtonClassName?: never;
 }) & ({

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -1,80 +1,107 @@
-import { jsxs as D, jsx as n } from "react/jsx-runtime";
-import { d as N } from "../../../../debounce-DJveWHr_.js";
-import { useRef as P, useMemo as m, useCallback as S } from "react";
-import { Button as I } from "../../../Button/Button.js";
-import { Filter as r } from "../../../Filter/Filter.js";
-import { Input as $ } from "../../../Input/Input.js";
-import { cn as q } from "../../../../utils/index.js";
-import { useTableContext as z } from "../../contexts/table.hook.js";
-const U = ({
-  actions: b,
+import { jsxs as S, jsx as s } from "react/jsx-runtime";
+import { d as q } from "../../../../debounce-DJveWHr_.js";
+import { useRef as z, useMemo as m, useCallback as w } from "react";
+import { Button as E } from "../../../Button/Button.js";
+import { Filter as n } from "../../../Filter/Filter.js";
+import { Input as G } from "../../../Input/Input.js";
+import { cn as H } from "../../../../utils/index.js";
+import { useTableContext as J } from "../../contexts/table.hook.js";
+const C = ({
+  actions: p,
   filters: u,
-  multiSelectFilter: p,
-  placeholder: x,
-  showFilterInput: w = !0,
-  showResetButton: M = !0,
-  resetButtonClassName: v
+  multiSelectFilter: d,
+  placeholder: T,
+  showFilterInput: v = !0,
+  showResetButton: x = !0,
+  resetButtonClassName: M
 }) => {
-  const c = P(null), {
-    termOfSearch: d,
-    multiselectSelected: i,
-    dateFilters: h,
-    dateRangeFilters: y,
-    onChangeTermOfSearch: s,
-    onSelectMultiselect: F,
+  const l = z(null), {
+    termOfSearch: i,
+    multiselectSelected: h,
+    dateFilters: y,
+    dateRangeFilters: F,
+    timeFilters: b,
+    onChangeTermOfSearch: c,
+    onSelectMultiselect: D,
     onSelectDateFilter: j,
-    onSelectDateRangeFilter: O
-  } = z(), T = m(
-    () => u ?? p?.map((e) => ({
-      ...e,
+    onSelectDateRangeFilter: O,
+    onSelectTimeFilter: A
+  } = J(), B = m(() => {
+    const e = u ?? d?.map((o) => ({
+      ...o,
       type: "badgeMultiSelect"
-    })) ?? [],
-    [u, p]
-  ), R = S(
-    (e, t) => F(
+    })) ?? [], t = p ?? [];
+    return [...e, ...t];
+  }, [u, d, p]), R = w(
+    (e, t) => D(
       e,
-      t.map((a) => a.id)
+      t.map((o) => o.id)
     ),
-    [F]
-  ), g = S(() => {
-    s(""), c.current && (c.current.value = "");
-  }, [s]), B = m(
-    () => N((e) => {
-      s(e.target.value);
+    [D]
+  ), k = w(() => {
+    c(""), l.current && (l.current.value = "");
+  }, [c]), P = m(
+    () => q((e) => {
+      c(e.target.value);
     }, 500),
-    [s]
-  ), A = m(
-    () => !!d || Object.values(i ?? {}).flat().length > 0 || Object.values(h ?? {}).some(Boolean) || Object.values(y ?? {}).some(Boolean),
-    [d, i, h, y]
-  ), k = (e) => {
-    const { key: t, label: a, position: l = "right" } = e;
-    return e.type === "textMultiSelect" ? /* @__PURE__ */ n(
-      r.TextMultiSelect,
-      {
+    [c]
+  ), N = m(
+    () => !!i || Object.values(h ?? {}).flat().length > 0 || Object.values(y ?? {}).some(Boolean) || Object.values(F ?? {}).some(Boolean) || Object.values(b ?? {}).some(Boolean),
+    [
+      i,
+      h,
+      y,
+      F,
+      b
+    ]
+  ), I = (e) => {
+    if (e.type === "action") {
+      const {
         label: a,
-        position: l,
+        appearance: _ = "compact",
+        variant: $ = "secondary",
+        type: K,
+        ...g
+      } = e;
+      return /* @__PURE__ */ s(
+        E,
+        {
+          appearance: _,
+          variant: $,
+          ...g,
+          children: a
+        },
+        a
+      );
+    }
+    const { key: t, label: o, position: r = "right" } = e;
+    return e.type === "textMultiSelect" ? /* @__PURE__ */ s(
+      n.TextMultiSelect,
+      {
+        label: o,
+        position: r,
         options: e.options,
-        onApply: (o) => {
-          R(t, o);
+        onApply: (a) => {
+          R(t, a);
         }
       },
       t
-    ) : e.type === "date" ? /* @__PURE__ */ n(
-      r.DateFilterDropdown,
+    ) : e.type === "date" ? /* @__PURE__ */ s(
+      n.DateFilterDropdown,
       {
-        label: a,
-        position: l,
+        label: o,
+        position: r,
         countryCode: e.countryCode,
-        onApply: (o) => {
-          j(t, o);
+        onApply: (a) => {
+          j(t, a);
         }
       },
       t
-    ) : e.type === "dateRange" ? /* @__PURE__ */ n(
-      r.DateRangeFilterDropdown,
+    ) : e.type === "dateRange" ? /* @__PURE__ */ s(
+      n.DateRangeFilterDropdown,
       {
-        label: a,
-        position: l,
+        label: o,
+        position: r,
         showTime: e.showTime,
         timeFormat: e.timeFormat,
         showPresets: e.showPresets,
@@ -82,61 +109,64 @@ const U = ({
         minDate: e.minDate,
         maxDate: e.maxDate,
         countryCode: e.countryCode,
-        onApply: (o) => {
-          O(t, o);
+        onApply: (a) => {
+          O(t, a);
         },
         onRangeChange: e.onRangeChange
       },
       t
-    ) : /* @__PURE__ */ n(
-      r.BadgeMultiSelect,
+    ) : e.type === "time" ? /* @__PURE__ */ s(
+      n.TimeFilterDropdown,
       {
-        label: a,
-        position: l,
+        label: o,
+        position: r,
+        format: e.format,
+        presets: e.presets,
+        showTimePicker: e.showTimePicker,
+        onApply: (a) => {
+          A(t, a);
+        }
+      },
+      t
+    ) : /* @__PURE__ */ s(
+      n.BadgeMultiSelect,
+      {
+        label: o,
+        position: r,
         options: e.options,
-        onApply: (o) => {
-          R(t, o);
+        onApply: (a) => {
+          R(t, a);
         }
       },
       t
     );
   };
-  return /* @__PURE__ */ D("div", { className: "w-full flex items-center justify-end pb-6", children: [
-    w && /* @__PURE__ */ n(
-      $,
+  return /* @__PURE__ */ S("div", { className: "w-full flex items-center justify-end pb-6", children: [
+    v && /* @__PURE__ */ s(
+      G,
       {
-        ref: c,
-        placeholder: x,
+        ref: l,
+        placeholder: T,
         isSearch: !0,
         autoComplete: "false",
         className: "w-72",
         inputMode: "search",
-        onChange: B
+        onChange: P
       }
     ),
-    /* @__PURE__ */ D(r, { children: [
-      T.map(k),
-      b?.map(({ label: e, onClick: t, variant: a = "secondary" }) => /* @__PURE__ */ n(
-        I,
-        {
-          variant: a,
-          appearance: "compact",
-          onClick: t,
-          children: e
-        },
-        e
-      )),
-      M && /* @__PURE__ */ n(
-        r.ResetButton,
+    /* @__PURE__ */ S(n, { children: [
+      B.map(I),
+      x && /* @__PURE__ */ s(
+        n.ResetButton,
         {
-          className: q("select-none", v),
-          disabled: !A,
-          onClick: g
+          className: H("select-none", M),
+          disabled: !N,
+          onClick: k
         }
       )
     ] })
   ] });
 };
 export {
-  U as Filter
+  C as Filter
 };

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

@@ -1,16 +1,13 @@
-import { ButtonProps } from '../../../Button/Button.types';
-import { FilterConfig, MultiSelectFilter } from '../../VirtualizedTable.types';
+import { ActionFilterConfig, FilterConfig, MultiSelectFilter } from '../../VirtualizedTable.types';
 export type { Option } from '../../../Filter/Filter.types';
-export type FilterAction = {
-    label: string;
-    onClick: () => void;
-    variant?: ButtonProps['variant'];
-};
+/** @deprecated Use `ActionFilterConfig` with `type: 'action'` in the `filters` array instead */
+export type FilterAction = ActionFilterConfig;
 export type Props = {
-    actions?: FilterAction[];
     filters?: FilterConfig[];
     /** @deprecated Use `filters` instead */
     multiSelectFilter?: MultiSelectFilter[];
+    /** @deprecated Use `ActionFilterConfig` items in `filters` instead */
+    actions?: FilterAction[];
     placeholder: string;
     showFilterInput?: boolean;
     showResetButton?: boolean;

package/dist/components/VirtualizedTable/components/TruncateText/TruncateText.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { P as u, R as b, T as m, C as p } from "../../../../index-DPcwqB8q.js";
+import { P as u, R as b, T as m, C as p } from "../../../../index-B7-5g1Sm.js";
 import { d as h } from "../../../../debounce-DJveWHr_.js";
 import { useRef as x, useState as w, useCallback as g, useEffect as s } from "react";
 const v = ({ getValue: l, value: i }) => {

package/dist/components/VirtualizedTable/contexts/table.context.d.ts

@@ -16,6 +16,7 @@ export type ContextType<TData extends RowData = RowData> = {
         from?: string;
         to?: string;
     } | undefined>;
+    timeFilters?: Record<string, string | undefined>;
     totalPages: number;
     isFirstLoad: boolean;
     enableExpandedRow?: boolean;
@@ -38,5 +39,6 @@ export type ContextType<TData extends RowData = RowData> = {
         from?: Date;
         to?: Date;
     }) => void;
+    onSelectTimeFilter: (key: string, time?: Date) => void;
 };
 export declare const TableContext: import('react').Context<ContextType<unknown>>;

package/dist/components/VirtualizedTable/contexts/table.context.js

@@ -26,6 +26,9 @@ const r = e({
   onSelectDateRangeFilter() {
     throw new Error("onSelectDateRangeFilter function is not implemented");
   },
+  onSelectTimeFilter() {
+    throw new Error("onSelectTimeFilter function is not implemented");
+  },
   handlePage() {
     throw new Error("handlePage function is not implemented");
   },