@konstructio/ui 0.1.2-alpha.74 → 0.1.2-alpha.76

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

@@ -20,7 +20,7 @@ import { toastVariants } from './Toast.variants';
  * </Toast>
  * ```
  */
-export interface ToastProps extends PropsWithChildren, VariantProps<typeof toastVariants> {
+export interface Props extends PropsWithChildren, VariantProps<typeof toastVariants> {
     /** Additional CSS classes for the toast */
     className?: string;
     /** CSS classes for the close button */
@@ -44,3 +44,5 @@ export interface ToastProps extends PropsWithChildren, VariantProps<typeof toast
     /** Callback to update open state */
     setOpen: (open: boolean) => void;
 }
+/** @deprecated Use Props instead */
+export type ToastProps = Props;

package/dist/components/Toast/Toast.variants.js

@@ -1,5 +1,5 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const e = a(
+const t = a(
   [
     "rounded-md",
     "p-4",
@@ -30,7 +30,7 @@ const e = a(
       variant: "success"
     }
   }
-), i = a([
+), s = a([
   "fixed",
   "bottom-0",
   "right-0",
@@ -43,15 +43,9 @@ const e = a(
   "m-0",
   "z-50",
   "outline-none"
-]), s = a([
-  "top-2",
-  "right-2",
-  "w-4",
-  "h-4",
-  "text-white"
-]);
+]), i = a(["w-4", "h-4", "text-white"]);
 export {
-  s as closeToastVariants,
-  e as toastVariants,
-  i as viewportToastVariants
+  i as closeToastVariants,
+  t as toastVariants,
+  s as viewportToastVariants
 };

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { TooltipProps } from './Tooltip.types';
+import { Props } from './Tooltip.types';
 /**
  * A tooltip component that shows on hover.
  * Built on Radix UI for accessible, well-positioned tooltips.
@@ -19,4 +19,4 @@ import { TooltipProps } from './Tooltip.types';
  * </Tooltip>
  * ```
  */
-export declare const Tooltip: FC<TooltipProps>;
+export declare const Tooltip: FC<Props>;

package/dist/components/Tooltip/Tooltip.js

@@ -1,36 +1,36 @@
-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";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { P as c, R as p, T as h, a as x, C as f, A as g } from "../../index-mPinF0Ho.js";
+import { cn as w } from "../../utils/index.js";
 const j = ({
-  content: s,
-  children: t,
-  side: o = "top",
-  sideOffset: a = 4,
+  content: e,
+  children: s,
+  side: t = "top",
+  sideOffset: o = 4,
   bgClassName: i = "bg-slate-700",
-  arrowClassName: n = "fill-slate-700",
-  textClassName: l = "text-white",
+  arrowClassName: l = "fill-slate-700",
+  textClassName: n = "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,
+}) => /* @__PURE__ */ r(c, { delayDuration: m, children: /* @__PURE__ */ a(p, { children: [
+  /* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ r("span", { children: s }) }),
+  /* @__PURE__ */ r(x, { children: /* @__PURE__ */ a(
+    f,
     {
-      side: o,
-      sideOffset: a,
-      className: g(
+      side: t,
+      sideOffset: o,
+      className: w(
         "rounded px-2 py-1 text-xs shadow-md",
         "animate-in fade-in-0",
         i,
-        l,
+        n,
         d
       ),
       children: [
-        s,
-        /* @__PURE__ */ e(f, { className: n })
+        e,
+        /* @__PURE__ */ r(g, { className: l })
       ]
     }
-  )
+  ) })
 ] }) });
 export {
   j as Tooltip

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

@@ -17,7 +17,7 @@ import { ReactNode } from 'react';
  * </Tooltip>
  * ```
  */
-export interface TooltipProps {
+export interface Props {
     /** Tooltip text or content */
     content: ReactNode | string;
     /** The trigger element */
@@ -37,3 +37,5 @@ export interface TooltipProps {
     /** Delay before showing tooltip in ms */
     delayDuration?: number;
 }
+/** @deprecated Use Props instead */
+export type TooltipProps = Props;

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

@@ -1,5 +1,5 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { TypographyProps } from './Typography.types';
+import { Props } from './Typography.types';
 /**
  * A flexible typography component for consistent text styling.
  * Automatically selects semantic HTML elements based on variant.
@@ -14,5 +14,5 @@ import { TypographyProps } from './Typography.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-typography--docs Storybook}
  */
-declare const Typography: ForwardRefExoticComponent<Omit<TypographyProps, 'ref'> & RefAttributes<HTMLParagraphElement & HTMLHeadingElement & HTMLLabelElement>>;
+declare const Typography: ForwardRefExoticComponent<Omit<Props, 'ref'> & RefAttributes<HTMLParagraphElement & HTMLHeadingElement & HTMLLabelElement>>;
 export { Typography };

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

@@ -15,7 +15,7 @@ export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  * <Typography variant="h2" component="p">Styled as h2 but renders as p</Typography>
  * ```
  */
-export interface TypographyProps extends HTMLAttributes<ComponentRef<HeadingTag | 'p' | 'span'>>, VariantProps<typeof typographyVariants> {
+export interface Props extends HTMLAttributes<ComponentRef<HeadingTag | 'p' | 'span'>>, VariantProps<typeof typographyVariants> {
     /** Ref to the underlying DOM element */
     ref?: Ref<HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement>;
     /** Text content to display */
@@ -27,3 +27,5 @@ export interface TypographyProps extends HTMLAttributes<ComponentRef<HeadingTag
     /** For use with label component to associate with form input */
     htmlFor?: string;
 }
+/** @deprecated Use Props instead */
+export type TypographyProps = Props;

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,16 +1,16 @@
 import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { useMemo as X } from "react";
+import { useMemo as Y } 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 { sendToggleRowEvent as Z, sendCollapseRowEvent as _, sendExpandRowEvent as $ } from "./events/index.js";
+import { TableProvider as D } from "./contexts/table.provider.js";
+import { Filter as L } from "./components/Filter/Filter.js";
+import { WrapperBody as rr } from "./components/WrapperBody/WrapperBody.js";
+import { Header as er } from "./components/Header/Header.js";
+import { Body as or } from "./components/Body/Body.js";
+import { Pagination as tr } 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 = ({
+import { Actions as ir } from "./components/Actions/Actions.js";
+const lr = ({
   id: c,
   ariaLabel: p,
   columns: d,
@@ -22,13 +22,13 @@ const ir = ({
   classNameHeaderTable: x,
   classNameTable: E,
   classNameWrapperTable: N,
-  isLoading: a,
+  isLoading: t,
   getRowId: w,
   fetchData: A,
   queryOptions: y,
   // Pagination
   showPagination: h,
-  showTotalItems: t,
+  showTotalItems: a,
   showDropdownPagination: i,
   showDotPagination: l,
   showFormPagination: m,
@@ -42,25 +42,26 @@ const ir = ({
   filterActions: k,
   showResetButton: P = !0,
   resetButtonClassName: C,
+  closeOnApply: H = !0,
   // Hover row
-  enableHoverRow: H,
-  classNameHoverRow: I,
+  enableHoverRow: I,
+  classNameHoverRow: K,
   // Expandable rows
-  enableExpandedRow: K,
-  expandedState: M,
-  defaultExpanded: W,
-  classNameExpandedRow: q,
-  classNameExpandedCell: F,
-  classNameExpandedContent: G,
-  classNameExpandedHeader: J,
-  classNameActiveExpandedRow: O,
-  onExpandedChange: Q,
-  renderExpandedRow: S,
-  keepExpandColumnVisible: U
+  enableExpandedRow: M,
+  expandedState: W,
+  defaultExpanded: q,
+  classNameExpandedRow: F,
+  classNameExpandedCell: G,
+  classNameExpandedContent: J,
+  classNameExpandedHeader: O,
+  classNameActiveExpandedRow: Q,
+  onExpandedChange: S,
+  renderExpandedRow: U,
+  keepExpandColumnVisible: X
 }) => {
-  const e = X(
+  const e = Y(
     () => h || [
-      t,
+      a,
       i,
       l,
       m
@@ -68,7 +69,7 @@ const ir = ({
     []
   );
   return /* @__PURE__ */ r(
-    $,
+    D,
     {
       id: c,
       columns: d,
@@ -78,22 +79,22 @@ const ir = ({
       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,
+      enableExpandedRow: M,
+      expandedState: W,
+      onExpandedChange: S,
+      defaultExpanded: q,
+      classNameExpandedRow: F,
+      classNameExpandedCell: G,
+      classNameExpandedContent: J,
+      classNameExpandedHeader: O,
+      classNameActiveExpandedRow: Q,
+      enableHoverRow: I,
+      classNameHoverRow: K,
+      renderExpandedRow: U,
+      keepExpandColumnVisible: X,
       children: /* @__PURE__ */ n("section", { className: s("w-full min-w-fit", b), children: [
         B && /* @__PURE__ */ r(
-          D,
+          L,
           {
             actions: k,
             filters: g,
@@ -101,15 +102,16 @@ const ir = ({
             placeholder: V,
             showFilterInput: R,
             showResetButton: P,
-            resetButtonClassName: C
+            resetButtonClassName: C,
+            closeOnApply: H
           }
         ),
         /* @__PURE__ */ r(
-          L,
+          rr,
           {
             showPagination: e,
             classNameWrapperTable: N,
-            isLoading: a,
+            isLoading: t,
             children: /* @__PURE__ */ n(
               "table",
               {
@@ -121,41 +123,41 @@ const ir = ({
                 "aria-label": p,
                 children: [
                   /* @__PURE__ */ r(
-                    rr,
+                    er,
                     {
                       className: x,
                       classNameArrows: v,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(er, { isLoading: a, showPagination: e })
+                  /* @__PURE__ */ r(or, { isLoading: t, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          or,
+          tr,
           {
-            showTotalItems: t,
+            showTotalItems: a,
             showDropdownPagination: i,
             showDotPagination: l,
             showFormPagination: m,
             pageSizes: z,
-            isLoading: a
+            isLoading: t
           }
         )
       ] })
     }
   );
-}, o = ir;
+}, o = lr;
 o.displayName = "KonstructVirtualizedTable";
 o.TruncateText = ar;
-o.Actions = tr;
+o.Actions = ir;
 o.Events = {
-  sendExpandRowEvent: _,
-  sendCollapseRowEvent: Z,
-  sendToggleRowEvent: Y
+  sendExpandRowEvent: $,
+  sendCollapseRowEvent: _,
+  sendToggleRowEvent: Z
 };
 export {
   ar as TruncateText,

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

@@ -1,7 +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 { ButtonProps } from '../Button/Button.types';
+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';
@@ -187,6 +187,7 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     filterActions?: ActionFilterConfig[];
     showResetButton?: boolean;
     resetButtonClassName?: string;
+    closeOnApply?: boolean;
 } | {
     filterSearchPlaceholder?: never;
     /** @deprecated Use `filters` instead */
@@ -198,6 +199,7 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     filterActions?: ActionFilterConfig[];
     showResetButton?: never;
     resetButtonClassName?: never;
+    closeOnApply?: never;
 }) & ({
     enableExpandedRow: true;
     expandedState?: ExpandedState;

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

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

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

@@ -12,4 +12,5 @@ export type Props = {
     showFilterInput?: boolean;
     showResetButton?: boolean;
     resetButtonClassName?: string;
+    closeOnApply?: boolean;
 };

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

@@ -1,2 +1,2 @@
 import { Props } from './TruncateText.types';
-export declare const TruncateText: <TData>({ getValue, value }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const TruncateText: <TData>({ getValue, value, textClassName, side, sideOffset, bgClassName, arrowClassName, className, delayDuration, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;