@konstructio/ui 0.1.2-alpha.75 → 0.1.2-alpha.77

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,49 +1,16 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const t = a(
-  [
-    "rounded-md",
-    "p-4",
-    "flex",
-    "flex-row",
-    "relative",
-    "overflow-hidden",
-    "h-14",
-    "items-center",
-    "gap-8",
-    "data-[state=open]:animate-slide-in",
-    "data-[state=closed]:animate-hide",
-    "data-[swipe=move]:translate-x-4",
-    "data-[swipe=cancel]:translate-x-0",
-    "data-[swipe=end]:animate-swipe-out",
-    "text-white",
-    "shadow-[0px_2px_4px_0px_rgba(100,116,139,0.25)]"
-  ],
-  {
-    variants: {
-      variant: {
-        success: ["bg-green-800"],
-        error: ["bg-red-800"],
-        warning: ["bg-amber-800"]
-      }
-    },
-    defaultVariants: {
-      variant: "success"
+const t = a(["rounded-md", "p-4", "flex", "flex-row", "relative", "overflow-hidden", "h-14", "items-center", "gap-8", "data-[state=open]:animate-slide-in", "data-[state=closed]:animate-hide", "data-[swipe=move]:translate-x-4", "data-[swipe=cancel]:translate-x-0", "data-[swipe=end]:animate-swipe-out", "text-white", "shadow-[0px_2px_4px_0px_rgba(100,116,139,0.25)]"], {
+  variants: {
+    variant: {
+      success: ["bg-green-800"],
+      error: ["bg-red-800"],
+      warning: ["bg-amber-800"]
     }
+  },
+  defaultVariants: {
+    variant: "success"
   }
-), s = a([
-  "fixed",
-  "bottom-0",
-  "right-0",
-  "flex",
-  "flex-col",
-  "p-[var(--viewport-padding)]",
-  "gap-8",
-  "w-[390px]",
-  "max-w-[100vw]",
-  "m-0",
-  "z-50",
-  "outline-none"
-]), i = a(["w-4", "h-4", "text-white"]);
+}), s = a(["fixed", "bottom-0", "right-0", "flex", "flex-col", "p-[var(--viewport-padding)]", "gap-8", "w-[390px]", "max-w-[100vw]", "m-0", "z-50", "outline-none"]), i = a(["w-4", "h-4", "text-white"]);
 export {
   i as closeToastVariants,
   t as toastVariants,

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,37 +1,38 @@
-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 })
-      ]
-    }
-  )
-] }) });
+import { jsx as l, jsxs as y } from "react/jsx-runtime";
+import { c as R } from "../../compiler-runtime-DA41awpA.js";
+import { T, A as j, P as A, C as D, R as O, a as E } from "../../index-CiACf4ao.js";
+import { cn as $ } from "../../utils/index.js";
+const F = (P) => {
+  const e = R.c(20), {
+    content: n,
+    children: d,
+    side: N,
+    sideOffset: v,
+    bgClassName: u,
+    arrowClassName: g,
+    textClassName: w,
+    className: c,
+    delayDuration: b
+  } = P, m = N === void 0 ? "top" : N, f = v === void 0 ? 4 : v, p = u === void 0 ? "bg-slate-700" : u, x = g === void 0 ? "fill-slate-700" : g, h = w === void 0 ? "text-white" : w, C = b === void 0 ? 0 : b;
+  let t;
+  e[0] !== d ? (t = /* @__PURE__ */ l(T, { asChild: !0, children: /* @__PURE__ */ l("span", { children: d }) }), e[0] = d, e[1] = t) : t = e[1];
+  let s;
+  e[2] !== p || e[3] !== c || e[4] !== h ? (s = $("rounded px-2 py-1 text-xs shadow-md", "animate-in fade-in-0", p, h, c), e[2] = p, e[3] = c, e[4] = h, e[5] = s) : s = e[5];
+  let o;
+  e[6] !== x ? (o = /* @__PURE__ */ l(j, { className: x }), e[6] = x, e[7] = o) : o = e[7];
+  let a;
+  e[8] !== n || e[9] !== m || e[10] !== f || e[11] !== s || e[12] !== o ? (a = /* @__PURE__ */ l(A, { children: /* @__PURE__ */ y(D, { side: m, sideOffset: f, className: s, children: [
+    n,
+    o
+  ] }) }), e[8] = n, e[9] = m, e[10] = f, e[11] = s, e[12] = o, e[13] = a) : a = e[13];
+  let i;
+  e[14] !== a || e[15] !== t ? (i = /* @__PURE__ */ y(O, { children: [
+    t,
+    a
+  ] }), e[14] = a, e[15] = t, e[16] = i) : i = e[16];
+  let r;
+  return e[17] !== C || e[18] !== i ? (r = /* @__PURE__ */ l(E, { delayDuration: C, children: i }), e[17] = C, e[18] = i, e[19] = r) : r = e[19], r;
+};
 export {
-  j as Tooltip
+  F 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.js

@@ -1,26 +1,29 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { cn as c } from "../../utils/index.js";
-import { typographyVariants as f } from "./Typography.variants.js";
-const h = y(({ className: r, theme: p, children: t, variant: o, component: m, ...e }, s) => {
-  const a = m ?? (o?.includes("h") ? o : "p");
-  return /* @__PURE__ */ n(
-    a,
-    {
-      ref: s,
-      "data-theme": p,
-      className: c(
-        f({
-          className: r,
-          variant: o
-        })
-      ),
-      ...e,
-      children: t
-    }
-  );
+import { jsx as f } from "react/jsx-runtime";
+import { c as d } from "../../compiler-runtime-DA41awpA.js";
+import { forwardRef as h } from "react";
+import { cn as y } from "../../utils/index.js";
+import { typographyVariants as g } from "./Typography.variants.js";
+const u = h((i, n) => {
+  const e = d.c(17);
+  let o, r, p, m, a, t;
+  e[0] !== i ? ({
+    className: r,
+    theme: a,
+    children: o,
+    variant: t,
+    component: p,
+    ...m
+  } = i, e[0] = i, e[1] = o, e[2] = r, e[3] = p, e[4] = m, e[5] = a, e[6] = t) : (o = e[1], r = e[2], p = e[3], m = e[4], a = e[5], t = e[6]);
+  const c = p ?? (t?.includes("h") ? t : "p");
+  let l;
+  e[7] !== r || e[8] !== t ? (l = y(g({
+    className: r,
+    variant: t
+  })), e[7] = r, e[8] = t, e[9] = l) : l = e[9];
+  let s;
+  return e[10] !== c || e[11] !== o || e[12] !== m || e[13] !== n || e[14] !== l || e[15] !== a ? (s = /* @__PURE__ */ f(c, { ref: n, "data-theme": a, className: l, ...m, children: o }), e[10] = c, e[11] = o, e[12] = m, e[13] = n, e[14] = l, e[15] = a, e[16] = s) : s = e[16], s;
 });
-h.displayName = "KonstructTypography";
+u.displayName = "KonstructTypography";
 export {
-  h as Typography
+  u as 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/Typography/Typography.variants.js

@@ -1,65 +1,30 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const a = t(
-  ["text-slate-800", "dark:text-metal-50"],
-  {
-    variants: {
-      variant: {
-        h1: ["text-[57px]", "leading-16"],
-        h2: ["text-[45px]", "leading-13"],
-        h3: ["text-4xl", "leading-11"],
-        h4: ["text-[32px]", "leading-10"],
-        h5: ["text-[28px]", "leading-9"],
-        h6: ["text-2xl", "font-medium", "leading-8", "tracking-[0.15px]"],
-        subtitle1: ["text-[22px]", "leading-7"],
-        subtitle2: [
-          "text-[16px]",
-          "font-medium",
-          "leading-6",
-          "tracking-[0.15px]"
-        ],
-        subtitle3: [
-          "text-[14px]",
-          "font-medium",
-          "leading-5",
-          "tracking-[0.1px]"
-        ],
-        labelLarge: [
-          "text-sm",
-          "font-medium",
-          "text-slate-500",
-          "dark:text-metal-50"
-        ],
-        labelMedium: [
-          "text-[12px]",
-          "font-medium",
-          "leading-4",
-          "tracking-[0.5px]",
-          "uppercase"
-        ],
-        labelSmall: [
-          "text-[11px]",
-          "font-medium",
-          "leading-4",
-          "tracking-[0.5px]",
-          "uppercase"
-        ],
-        buttonSmall: [
-          "text-[14px]",
-          "font-semibold",
-          "leading-5",
-          "tracking-[0.25px]"
-        ],
-        body1: ["text-base", "leading-6", "tracking-[0.5px]"],
-        body2: ["text-sm", "leading-5", "tracking-[0.25px]"],
-        body3: ["text-xs", "leading-4", "tracking-[0.4px]"],
-        tooltip: ["text-sm", "leading-5.5"]
-      }
-    },
-    defaultVariants: {
-      variant: "body1"
+const a = t(["text-slate-800", "dark:text-metal-50"], {
+  variants: {
+    variant: {
+      h1: ["text-[57px]", "leading-16"],
+      h2: ["text-[45px]", "leading-13"],
+      h3: ["text-4xl", "leading-11"],
+      h4: ["text-[32px]", "leading-10"],
+      h5: ["text-[28px]", "leading-9"],
+      h6: ["text-2xl", "font-medium", "leading-8", "tracking-[0.15px]"],
+      subtitle1: ["text-[22px]", "leading-7"],
+      subtitle2: ["text-[16px]", "font-medium", "leading-6", "tracking-[0.15px]"],
+      subtitle3: ["text-[14px]", "font-medium", "leading-5", "tracking-[0.1px]"],
+      labelLarge: ["text-sm", "font-medium", "text-slate-500", "dark:text-metal-50"],
+      labelMedium: ["text-[12px]", "font-medium", "leading-4", "tracking-[0.5px]", "uppercase"],
+      labelSmall: ["text-[11px]", "font-medium", "leading-4", "tracking-[0.5px]", "uppercase"],
+      buttonSmall: ["text-[14px]", "font-semibold", "leading-5", "tracking-[0.25px]"],
+      body1: ["text-base", "leading-6", "tracking-[0.5px]"],
+      body2: ["text-sm", "leading-5", "tracking-[0.25px]"],
+      body3: ["text-xs", "leading-4", "tracking-[0.4px]"],
+      tooltip: ["text-sm", "leading-5.5"]
     }
+  },
+  defaultVariants: {
+    variant: "body1"
   }
-);
+});
 export {
   a as typographyVariants
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -59,97 +59,15 @@ const lr = ({
   renderExpandedRow: U,
   keepExpandColumnVisible: X
 }) => {
-  const e = Y(
-    () => h || [
-      a,
-      i,
-      l,
-      m
-    ].some(Boolean),
-    []
-  );
-  return /* @__PURE__ */ r(
-    D,
-    {
-      id: c,
-      columns: d,
-      data: f,
-      getRowId: w,
-      fetchData: A,
-      totalItems: u,
-      queryOptions: y,
-      isPaginationEnabled: e,
-      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(
-          L,
-          {
-            actions: k,
-            filters: g,
-            multiSelectFilter: j,
-            placeholder: V,
-            showFilterInput: R,
-            showResetButton: P,
-            resetButtonClassName: C,
-            closeOnApply: H
-          }
-        ),
-        /* @__PURE__ */ r(
-          rr,
-          {
-            showPagination: e,
-            classNameWrapperTable: N,
-            isLoading: t,
-            children: /* @__PURE__ */ n(
-              "table",
-              {
-                className: s(
-                  "w-full border-collapse table-auto",
-                  "dark:border-separate dark:border-spacing-0",
-                  E
-                ),
-                "aria-label": p,
-                children: [
-                  /* @__PURE__ */ r(
-                    er,
-                    {
-                      className: x,
-                      classNameArrows: v,
-                      classNameActiveArrows: T
-                    }
-                  ),
-                  /* @__PURE__ */ r(or, { isLoading: t, showPagination: e })
-                ]
-              }
-            )
-          }
-        ),
-        e && /* @__PURE__ */ r(
-          tr,
-          {
-            showTotalItems: a,
-            showDropdownPagination: i,
-            showDotPagination: l,
-            showFormPagination: m,
-            pageSizes: z,
-            isLoading: t
-          }
-        )
-      ] })
-    }
-  );
+  const e = Y(() => h || [a, i, l, m].some(Boolean), []);
+  return /* @__PURE__ */ r(D, { id: c, columns: d, data: f, getRowId: w, fetchData: A, totalItems: u, queryOptions: y, isPaginationEnabled: e, 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(L, { actions: k, filters: g, multiSelectFilter: j, placeholder: V, showFilterInput: R, showResetButton: P, resetButtonClassName: C, closeOnApply: H }),
+    /* @__PURE__ */ r(rr, { showPagination: e, classNameWrapperTable: N, isLoading: t, children: /* @__PURE__ */ n("table", { className: s("w-full border-collapse table-auto", "dark:border-separate dark:border-spacing-0", E), "aria-label": p, children: [
+      /* @__PURE__ */ r(er, { className: x, classNameArrows: v, classNameActiveArrows: T }),
+      /* @__PURE__ */ r(or, { isLoading: t, showPagination: e })
+    ] }) }),
+    e && /* @__PURE__ */ r(tr, { showTotalItems: a, showDropdownPagination: i, showDotPagination: l, showFormPagination: m, pageSizes: z, isLoading: t })
+  ] }) });
 }, o = lr;
 o.displayName = "KonstructVirtualizedTable";
 o.TruncateText = ar;

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';

package/dist/components/VirtualizedTable/assets/chevron-down.js

@@ -1,25 +1,15 @@
-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"
-      }
-    )
-  }
-);
+import { jsx as i } from "react/jsx-runtime";
+import { c } from "../../../compiler-runtime-DA41awpA.js";
+const a = (n) => {
+  const e = c.c(4), {
+    className: l,
+    onClick: r
+  } = n;
+  let t;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ i("path", { d: "M0.8225 0L3.5 2.67167L6.1775 0L7 0.8225L3.5 4.3225L0 0.8225L0.8225 0Z", fill: "currentColor" }), e[0] = t) : t = e[0];
+  let o;
+  return e[1] !== l || e[2] !== r ? (o = /* @__PURE__ */ i("svg", { width: "7", height: "5", viewBox: "0 0 7 5", fill: "none", className: l, onClick: r, children: t }), e[1] = l, e[2] = r, e[3] = o) : o = e[3], o;
+};
 export {
-  l as default
+  a as default
 };

package/dist/components/VirtualizedTable/assets/chevron-up.js

@@ -1,25 +1,15 @@
-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",
+import { jsx as c } from "react/jsx-runtime";
+import { c as n } from "../../../compiler-runtime-DA41awpA.js";
+const a = (i) => {
+  const e = n.c(4), {
     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"
-      }
-    )
-  }
-);
+    onClick: l
+  } = i;
+  let t;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ c("path", { d: "M0.8225 4.99999L3.5 2.32832L6.1775 4.99999L7 4.17749L3.5 0.67749L0 4.17749L0.8225 4.99999Z", fill: "currentColor" }), e[0] = t) : t = e[0];
+  let o;
+  return e[1] !== r || e[2] !== l ? (o = /* @__PURE__ */ c("svg", { width: "7", height: "5", viewBox: "0 0 7 5", fill: "currentColor", className: r, onClick: l, children: t }), e[1] = r, e[2] = l, e[3] = o) : o = e[3], o;
+};
 export {
-  l as default
+  a as default
 };