@konstructio/ui 0.1.2-alpha.50 → 0.1.2-alpha.52

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,55 +1,60 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { R as j, A as T, P as w, O as K, C as P, T as z, D as B, a as E, b as S } from "../../index-D6KzX_ef.js";
-import { useRef as q, useState as F, useEffect as G } from "react";
-import { Button as s } from "../Button/Button.js";
+import { R as K, A as P, P as z, O as B, C as E, T as S, D as q, a as F, b as G } from "../../index-BqhYevy7.js";
+import { useRef as H, useState as I, useEffect as J } from "react";
+import { Button as i } from "../Button/Button.js";
 import { cn as n } from "../../utils/index.js";
-import { useAlertDialog as H } from "./hooks/useAlertDialog.js";
-const I = ({
+import { useAlertDialog as L } from "./hooks/useAlertDialog.js";
+const M = ({
   buttonCancel: {
-    className: i,
-    text: o = "Cancel",
-    ...c
+    className: o,
+    text: c = "Cancel",
+    ...d
   } = {},
   buttonConfirm: {
-    className: d,
-    text: m = "OK",
-    ...f
+    className: m,
+    text: f = "OK",
+    ...p
   } = {},
-  buttonTriggerClassName: p,
-  buttonTriggerVariant: u,
+  buttonTriggerClassName: u,
   buttonTriggerText: h,
-  description: x,
-  showCancelButton: b = !0,
+  buttonTriggerVariant: x,
+  description: b,
+  isDescriptionChild: C,
+  isTitleChild: g,
+  showCancelButton: N = !0,
   theme: a,
-  title: g,
-  wrapperClassName: C,
-  onConfirm: N,
-  ...y
+  title: y,
+  wrapperClassName: k,
+  onClick: A,
+  onConfirm: D,
+  ...l
 }) => {
-  const r = q(null), [k, A] = F(null), { isOpen: D, handleCancel: O, handleConfirm: v, handleOpen: R } = H({
-    onConfirm: N
+  const r = H(null), [O, v] = I(null), { isOpen: R, handleCancel: j, handleConfirm: T, handleOpen: w } = L({
+    onConfirm: D
   });
-  return G(() => {
+  return J(() => {
     if (!r.current || a)
       return;
-    const l = r.current.closest("[data-theme]");
-    l && A(l);
-  }, []), /* @__PURE__ */ t(j, { open: D, ...y, children: [
+    const s = r.current.closest("[data-theme]");
+    s && v(s);
+  }, []), /* @__PURE__ */ t(K, { open: R, ...l, children: [
     /* @__PURE__ */ e(
-      T,
+      P,
       {
         ref: r,
-        className: p,
-        variant: u,
+        className: u,
+        variant: x,
         text: h,
         "data-theme": a,
-        onOpen: R
+        onOpen: w,
+        onClick: A,
+        ...l
       }
     ),
-    /* @__PURE__ */ t(w, { container: k, children: [
-      /* @__PURE__ */ e(K, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }),
+    /* @__PURE__ */ t(z, { container: O, children: [
+      /* @__PURE__ */ e(B, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }),
       /* @__PURE__ */ t(
-        P,
+        E,
         {
           "data-theme": a,
           className: n(
@@ -72,32 +77,46 @@ const I = ({
             "dark:bg-metal-800",
             "dark:border-metal-700",
             "dark:border-slate-700",
-            C
+            k
           ),
           children: [
-            /* @__PURE__ */ e(z, { className: "text-base text-slate-700 font-semibold", children: g }),
-            /* @__PURE__ */ e(B, { className: "text-sm text-slate-800", children: x }),
+            /* @__PURE__ */ e(
+              S,
+              {
+                asChild: g,
+                className: "text-base text-slate-700 font-semibold",
+                children: y
+              }
+            ),
+            /* @__PURE__ */ e(
+              q,
+              {
+                asChild: C,
+                className: "text-sm text-slate-800",
+                children: b
+              }
+            ),
             /* @__PURE__ */ t("div", { className: "flex flex-row gap-2 justify-end", children: [
-              b && /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(
-                s,
+              N && /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ e(
+                i,
                 {
                   type: "button",
                   variant: "secondary",
-                  className: n(i),
-                  onClick: O,
-                  ...c,
-                  children: o
+                  className: n(o),
+                  onClick: j,
+                  ...d,
+                  children: c
                 }
               ) }),
-              /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ e(
-                s,
+              /* @__PURE__ */ e(G, { asChild: !0, children: /* @__PURE__ */ e(
+                i,
                 {
                   type: "button",
                   variant: "primary",
-                  className: n(d),
-                  onClick: v,
-                  ...f,
-                  children: m
+                  className: n(m),
+                  onClick: T,
+                  ...p,
+                  children: f
                 }
               ) })
             ] })
@@ -107,7 +126,7 @@ const I = ({
     ] })
   ] });
 };
-I.displayName = "KonstructAlertDialog";
+M.displayName = "KonstructAlertDialog";
 export {
-  I as AlertDialog
+  M as AlertDialog
 };

package/dist/components/AlertDialog/components/AlertDialogTrigger.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { A as e } from "../../../index-D6KzX_ef.js";
+import { A as e } from "../../../index-BqhYevy7.js";
 import "react";
 import "../../Button/Button.js";
 import "../../../utils/index.js";

package/dist/components/AlertDialog/components/index.js

@@ -1,4 +1,4 @@
-import { A as g } from "../../../index-D6KzX_ef.js";
+import { A as g } from "../../../index-BqhYevy7.js";
 export {
   g as AlertDialogTrigger
 };

package/dist/components/Button/Button.variants.js

@@ -185,13 +185,13 @@ const a = r(
       {
         variant: "danger",
         disabled: !0,
-        class: [
-          "text-red-700",
-          "border-red-700",
-          "bg-white",
-          "hover:bg-red-50",
-          "opacity-45"
-        ]
+        class: ["text-white", "border-red-700", "bg-red-700", "opacity-45"]
+      },
+      {
+        variant: "danger",
+        version: "alternate",
+        disabled: !0,
+        class: ["text-red-700", "border-red-700", "bg-white", "opacity-45"]
       },
       {
         variant: "link",

package/dist/components/VirtualizedTable/components/Actions/Actions.js

@@ -1,48 +1,48 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { Button as a } from "../../../Button/Button.js";
-import { cn as e } from "../../../../utils/index.js";
-import { E as u } from "../../../../ellipsis-vertical-BVPtjl5f.js";
-const b = ({
-  actions: o,
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Button as n } from "../../../Button/Button.js";
+import { cn as r } from "../../../../utils/index.js";
+import { E as x } from "../../../../ellipsis-vertical-BVPtjl5f.js";
+const y = ({
+  actions: a,
   wrapperClassName: i,
-  triggerButtonClassName: n,
+  triggerButtonClassName: l,
   iconTriggerButtonClassName: s,
   wrapperActionsClassName: d,
-  wrapperContentActionsClassName: h,
-  ...c
-}) => o ? /* @__PURE__ */ l("div", { className: e("relative group", i), children: [
-  /* @__PURE__ */ l(
-    a,
+  wrapperContentActionsClassName: c,
+  ...m
+}) => a ? /* @__PURE__ */ t("div", { className: r("relative group", i), children: [
+  /* @__PURE__ */ t(
+    n,
     {
       variant: "link",
       shape: "circle",
       size: "large",
-      className: e(
+      className: r(
         "text-slate-400",
         "group-hover:text-slate-800",
         "group-hover:bg-aurora-50",
         "dark:text-metal-400",
         "dark:group-hover:text-aurora-500",
         "dark:group-hover:bg-aurora-900",
-        n
+        l
       ),
       role: "presentation",
       children: [
-        /* @__PURE__ */ r(
-          u,
+        /* @__PURE__ */ e(
+          x,
           {
             "aria-hidden": "true",
-            className: e("w-7 h-7", s)
+            className: r("w-7 h-7", s)
           }
         ),
-        /* @__PURE__ */ r("span", { className: "sr-only", children: "Show Actions" })
+        /* @__PURE__ */ e("span", { className: "sr-only", children: "Show Actions" })
       ]
     }
   ),
-  /* @__PURE__ */ r(
+  /* @__PURE__ */ e(
     "div",
     {
-      className: e(
+      className: r(
         "absolute",
         "top-full",
         "right-0",
@@ -52,10 +52,10 @@ const b = ({
         "z-10",
         d
       ),
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ e(
         "div",
         {
-          className: e(
+          className: r(
             "bg-white",
             "mt-0.5",
             "py-2",
@@ -67,42 +67,52 @@ const b = ({
             "fade-in-0",
             "dark:bg-metal-800",
             "dark:border-metal-700",
-            h
+            c
           ),
-          children: o.map(({ label: t, className: m, onClick: p }) => /* @__PURE__ */ r(
-            a,
-            {
-              className: e(
-                "w-full",
-                "text-slate-800",
-                "cursor-pointer",
-                "p-0",
-                "h-9",
-                "flex",
-                "gap-2",
-                "text-sm",
-                "font-normal",
-                "justify-start",
-                "rounded-none",
-                "px-6",
-                "hover:bg-gray-50",
-                "hover:text-slate-800",
-                "hover:no-underline",
-                "dark:hover:bg-metal-700",
-                m
-              ),
-              variant: "link",
-              asChild: !0,
-              role: "presentation",
-              children: /* @__PURE__ */ r(a, { onClick: () => p(c.row.original), children: t })
-            },
-            t
-          ))
+          children: a.map(
+            ({
+              id: p,
+              label: o,
+              className: h,
+              component: u = n,
+              componentProps: g,
+              onClick: v
+            }, f) => /* @__PURE__ */ e(
+              u,
+              {
+                className: r(
+                  "w-full",
+                  "text-slate-800",
+                  "cursor-pointer",
+                  "p-0",
+                  "h-9",
+                  "flex",
+                  "gap-2",
+                  "text-sm",
+                  "font-normal",
+                  "justify-start",
+                  "rounded-none",
+                  "px-6",
+                  "hover:bg-gray-50",
+                  "hover:text-slate-800",
+                  "hover:no-underline",
+                  "dark:hover:bg-metal-700",
+                  h
+                ),
+                variant: "link",
+                role: "presentation",
+                onClick: () => v(m.row.original),
+                ...g,
+                children: o
+              },
+              p ?? (typeof o == "string" ? o : `action-${f}`)
+            )
+          )
         }
       )
     }
   )
 ] }) : null;
 export {
-  b as Actions
+  y as Actions
 };

package/dist/{index-D6KzX_ef.js → index-BqhYevy7.js}

@@ -38,30 +38,30 @@ var Q = "AlertDialogOverlay", y = l.forwardRef(
   }
 );
 y.displayName = Q;
-var n = "AlertDialogContent", [U, X] = z(n), Z = /* @__PURE__ */ V("AlertDialogContent"), N = l.forwardRef(
+var c = "AlertDialogContent", [U, X] = z(c), Z = /* @__PURE__ */ V("AlertDialogContent"), N = l.forwardRef(
   (r, e) => {
-    const { __scopeAlertDialog: o, children: t, ...a } = r, c = s(o), d = l.useRef(null), P = u(e, d), g = l.useRef(null);
+    const { __scopeAlertDialog: o, children: t, ...a } = r, p = s(o), n = l.useRef(null), P = u(e, n), g = l.useRef(null);
     return /* @__PURE__ */ i(
       G,
       {
-        contentName: n,
+        contentName: c,
         titleName: R,
         docsSlug: "alert-dialog",
         children: /* @__PURE__ */ i(U, { scope: o, cancelRef: g, children: /* @__PURE__ */ w(
           W,
           {
             role: "alertdialog",
-            ...c,
+            ...p,
             ...a,
             ref: P,
-            onOpenAutoFocus: M(a.onOpenAutoFocus, (p) => {
-              p.preventDefault(), g.current?.focus({ preventScroll: !0 });
+            onOpenAutoFocus: M(a.onOpenAutoFocus, (d) => {
+              d.preventDefault(), g.current?.focus({ preventScroll: !0 });
             }),
-            onPointerDownOutside: (p) => p.preventDefault(),
-            onInteractOutside: (p) => p.preventDefault(),
+            onPointerDownOutside: (d) => d.preventDefault(),
+            onInteractOutside: (d) => d.preventDefault(),
             children: [
               /* @__PURE__ */ i(Z, { children: t }),
-              /* @__PURE__ */ i(re, { contentRef: d })
+              /* @__PURE__ */ i(re, { contentRef: n })
             ]
           }
         ) })
@@ -69,7 +69,7 @@ var n = "AlertDialogContent", [U, X] = z(n), Z = /* @__PURE__ */ V("AlertDialogC
     );
   }
 );
-N.displayName = n;
+N.displayName = c;
 var R = "AlertDialogTitle", h = l.forwardRef(
   (r, e) => {
     const { __scopeAlertDialog: o, ...t } = r, a = s(o);
@@ -91,17 +91,17 @@ var ee = "AlertDialogAction", E = l.forwardRef(
 E.displayName = ee;
 var T = "AlertDialogCancel", b = l.forwardRef(
   (r, e) => {
-    const { __scopeAlertDialog: o, ...t } = r, { cancelRef: a } = X(T, o), c = s(o), d = u(e, a);
-    return /* @__PURE__ */ i(f, { ...c, ...t, ref: d });
+    const { __scopeAlertDialog: o, ...t } = r, { cancelRef: a } = X(T, o), p = s(o), n = u(e, a);
+    return /* @__PURE__ */ i(f, { ...p, ...t, ref: n });
   }
 );
 b.displayName = T;
 var re = ({ contentRef: r }) => {
-  const e = `\`${n}\` requires a description for the component to be accessible for screen reader users.
+  const e = `\`${c}\` requires a description for the component to be accessible for screen reader users.
 
-You can add a description to the \`${n}\` by passing a \`${C}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
+You can add a description to the \`${c}\` by passing a \`${C}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
 
-Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${n}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
+Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${c}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
 
 For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
   return l.useEffect(() => {
@@ -110,18 +110,22 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
     ) || console.warn(e);
   }, [e, r]), null;
 }, de = m, oe = D, ge = _, ue = y, Ae = N, fe = E, ve = b, me = h, De = S;
-const _e = I(({ "data-theme": r, className: e, text: o, variant: t, onOpen: a }, c) => /* @__PURE__ */ i(oe, { asChild: !0, children: /* @__PURE__ */ i(
-  k,
-  {
-    ref: c,
-    type: "button",
-    variant: t,
-    "data-theme": r,
-    className: q(e),
-    onClick: a,
-    children: o
-  }
-) }));
+const _e = I(
+  ({ "data-theme": r, className: e, text: o, variant: t, onOpen: a, onClick: p }, n) => /* @__PURE__ */ i(oe, { asChild: !0, children: /* @__PURE__ */ i(
+    k,
+    {
+      ref: n,
+      type: "button",
+      variant: t,
+      "data-theme": r,
+      className: q(e),
+      onClick: () => {
+        a(), p?.();
+      },
+      children: o
+    }
+  ) })
+);
 export {
   _e as A,
   Ae as C,

package/dist/index.d.ts

@@ -30,10 +30,18 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { VariantProps } from 'class-variance-authority';
 
 declare type Action<TData> = {
-    label: string | React.ReactNode;
-    onClick: (rowData: TData) => void;
     className?: string;
-};
+    id?: string;
+    onClick: (rowData: TData) => void;
+} & ({
+    component: FC;
+    label?: string | ReactNode;
+    componentProps?: Record<string, unknown>;
+} | {
+    component?: undefined;
+    label: string | ReactNode;
+    componentProps?: never;
+});
 
 /**
  * An alert component for displaying feedback messages.
@@ -125,16 +133,20 @@ declare interface AlertDialogProps extends PropsWithChildren, AlertDialogProps_2
     className?: string;
     /** Description text shown in the dialog */
     description?: string | ReactNode;
+    isDescriptionChild?: boolean;
     /** Whether to show the cancel button (default: true) */
     showCancelButton?: boolean;
     /** Theme override for this component */
     theme?: Theme;
     /** Title text shown in the dialog */
     title?: string | ReactNode;
+    isTitleChild?: boolean;
     /** CSS classes for the dialog wrapper */
     wrapperClassName?: string;
     /** Callback when confirm button is clicked */
-    onConfirm?: () => void;
+    onConfirm?: VoidFunction;
+    /** Callback when the button is clicked */
+    onClick?: VoidFunction;
 }
 
 /**

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.49",
+  "version": "0.1.2-alpha.51",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.50",
+  "version": "0.1.2-alpha.52",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",