@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/Alert/Alert.variants.js

@@ -1,71 +1,101 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const a = t(
-  [
-    "relative",
-    "border",
-    "py-4",
-    "px-5",
-    "rounded",
-    "flex",
-    "gap-2",
-    "items-center",
-    "justify-start",
-    "[&>*]:flex",
-    "[&>*]:gap-2",
-    "[&>*]:items-center",
-    "[&>*]:justify-start",
-    "text-sm",
-    "shadow-sm",
-    "duration-300",
-    "data-[state=hidden]:animate-out",
-    "data-[state=hidden]:fade-out-0",
-    "data-[state=hidden]:zoom-out-95"
-  ],
-  {
-    variants: {
-      type: {
-        sucess: "",
-        info: [
-          "border-blue-100",
-          "bg-blue-50",
-          "text-zinc-700",
-          "[&>*>svg]:text-blue-600",
-          "shadow-blue-50/40"
-        ],
-        warning: "",
-        danger: ""
-      },
-      isVisible: {
-        true: "",
-        false: "hidden"
-      }
+import { t as e } from "../../dist-DtEbXv47.js";
+var r = e([
+  "relative",
+  "border",
+  "shadow-xs",
+  "dark:shadow-sm",
+  "p-4",
+  "rounded-lg",
+  "flex",
+  "gap-4",
+  "items-start",
+  "justify-start",
+  "text-sm",
+  "overflow-clip",
+  "duration-300",
+  "data-[state=hidden]:animate-out",
+  "data-[state=hidden]:fade-out-0",
+  "data-[state=hidden]:zoom-out-95"
+], {
+  variants: {
+    type: {
+      success: [
+        "bg-green-50",
+        "border-green-200",
+        "dark:bg-green-500/10",
+        "dark:border-green-500/20"
+      ],
+      info: [
+        "bg-blue-50",
+        "border-blue-100",
+        "dark:bg-blue-500/10",
+        "dark:border-blue-500/20"
+      ],
+      warning: [
+        "bg-yellow-50",
+        "border-yellow-200",
+        "dark:bg-yellow-500/10",
+        "dark:border-yellow-500/20"
+      ],
+      danger: [
+        "bg-red-50",
+        "border-red-200",
+        "dark:bg-red-500/10",
+        "dark:border-red-500/20"
+      ]
     },
-    defaultVariants: {
-      isVisible: !0
+    isVisible: {
+      true: "",
+      false: "hidden"
     }
-  }
-), s = t(
-  [
-    "w-4",
-    "h-4",
-    "absolute",
-    "right-2",
-    "top-2",
-    "text-inherit",
-    "cursor-pointer"
+  },
+  defaultVariants: { isVisible: !0 }
+}), a = e([
+  "text-sm",
+  "font-medium",
+  "leading-5"
+], { variants: { type: {
+  success: ["text-green-800", "dark:text-green-300"],
+  info: ["text-blue-800", "dark:text-blue-300"],
+  warning: ["text-yellow-800", "dark:text-yellow-200"],
+  danger: ["text-red-800", "dark:text-rose-300"]
+} } }), d = e([
+  "text-sm",
+  "font-normal",
+  "leading-5"
+], { variants: { type: {
+  success: ["text-green-700", "dark:text-green-100"],
+  info: ["text-blue-700", "dark:text-blue-200"],
+  warning: ["text-yellow-700", "dark:text-yellow-100"],
+  danger: ["text-red-700", "dark:text-rose-200"]
+} } }), n = e(["size-5", "shrink-0"], { variants: { type: {
+  success: ["text-green-600", "dark:text-green-400"],
+  info: [
+    "text-blue-600",
+    "dark:text-blue-400",
+    "rotate-180"
   ],
-  {
-    variants: {
-      type: {
-        sucess: "",
-        info: ["text-blue-600"],
-        warning: "",
-        danger: ""
-      }
-    }
-  }
-);
+  warning: ["text-yellow-600", "dark:text-yellow-400"],
+  danger: ["text-red-600", "dark:text-rose-400"]
+} } }), o = e([
+  "size-4",
+  "absolute",
+  "right-3",
+  "top-3",
+  "cursor-pointer",
+  "opacity-70",
+  "hover:opacity-100",
+  "transition-opacity"
+], { variants: { type: {
+  success: ["text-green-600", "dark:text-green-400"],
+  info: ["text-blue-600", "dark:text-blue-400"],
+  warning: ["text-yellow-600", "dark:text-yellow-400"],
+  danger: ["text-red-600", "dark:text-rose-400"]
+} } });
 export {
-  a as alertVariants,
-  s as closeButtonVariants
+  r as alertVariants,
+  o as closeButtonVariants,
+  d as descriptionVariants,
+  n as iconVariants,
+  a as titleVariants
 };

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { Props } from './AlertDialog.types';
+/**
+ * A confirmation dialog component built on Radix UI AlertDialog.
+ * Includes a trigger button that opens a modal with title, description, and action buttons.
+ *
+ * @example
+ * ```tsx
+ * // Basic confirmation dialog
+ * <AlertDialog
+ *   buttonTriggerText="Delete Item"
+ *   title="Confirm Deletion"
+ *   description="This action cannot be undone."
+ *   onConfirm={() => deleteItem()}
+ * />
+ *
+ * // Danger variant with custom button text
+ * <AlertDialog
+ *   buttonTriggerText="Remove"
+ *   buttonTriggerVariant="danger"
+ *   title="Remove User"
+ *   description="Are you sure you want to remove this user?"
+ *   buttonConfirm={{ text: "Yes, Remove" }}
+ *   buttonCancel={{ text: "No, Keep" }}
+ *   onConfirm={() => removeUser()}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-alertdialog--docs Storybook}
+ */
+declare const AlertDialog: FC<Props>;
+export { AlertDialog };

package/dist/components/AlertDialog/AlertDialog.js

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

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

@@ -0,0 +1,60 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { AlertDialogProps as AlertDialogPrimitiveProps } from '@radix-ui/react-alert-dialog';
+import { Theme } from '../../domain/theme';
+import { Props as ButtonProps } from '../Button/Button.types';
+type ButtonBaseProps = Partial<ButtonProps> & {
+    className?: string;
+    text?: string;
+};
+type ButtonCancelProps = ButtonBaseProps;
+type ButtonConfirmProps = ButtonBaseProps;
+/**
+ * Props for the AlertDialog component.
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog
+ *   buttonTriggerText="Delete"
+ *   buttonTriggerVariant="danger"
+ *   title="Confirm Deletion"
+ *   description="Are you sure you want to delete this item?"
+ *   onConfirm={() => handleDelete()}
+ * />
+ * ```
+ */
+export interface Props extends PropsWithChildren, AlertDialogPrimitiveProps {
+    /** Cancel button props (className, text, etc.) */
+    buttonCancel?: ButtonCancelProps;
+    /** Confirm button props (className, text, etc.) */
+    buttonConfirm?: ButtonConfirmProps;
+    /** Text for the trigger button */
+    buttonTriggerText?: string;
+    /** CSS classes for the trigger button */
+    buttonTriggerClassName?: string;
+    /** Variant for the trigger button */
+    buttonTriggerVariant?: ButtonProps['variant'];
+    /** Additional CSS classes */
+    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?: VoidFunction;
+    /** Callback when the button is clicked */
+    onClick?: VoidFunction;
+}
+/** @deprecated Use Props instead */
+export type AlertDialogProps = Props;
+export type UseAlertiDialogProps = {
+    onConfirm: Props['onConfirm'];
+};
+export {};

package/dist/components/AlertDialog/components/AlertDialogTrigger.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './AlertDialogTrigger.types';
+export declare const AlertDialogTrigger: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,7 +1,4 @@
-import "react/jsx-runtime";
-import { A as p } from "../../../index-Bn4c-gww.js";
-import "../../Button/Button.js";
-import "../../../utils/index.js";
+import { t as o } from "../../../AlertDialogTrigger-C-NMEoDd.js";
 export {
-  p as AlertDialogTrigger
+  o as AlertDialogTrigger
 };

package/dist/components/AlertDialog/components/AlertDialogTrigger.types.d.ts

@@ -0,0 +1,12 @@
+import { Props as ButtonProps } from '../../Button/Button.types';
+import { Theme } from '../../../domain/theme';
+export interface Props {
+    'data-theme'?: Theme;
+    variant?: ButtonProps['variant'];
+    className?: string;
+    text?: string;
+    onOpen: VoidFunction;
+    onClick?: VoidFunction;
+}
+/** @deprecated Use Props instead */
+export type AlertDialogTriggerProps = Props;

package/dist/components/AlertDialog/components/index.d.ts

@@ -0,0 +1 @@
+export * from './AlertDialogTrigger';

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

@@ -1,4 +1,4 @@
-import { A as g } from "../../../index-Bn4c-gww.js";
+import { t as o } from "../../../AlertDialogTrigger-C-NMEoDd.js";
 export {
-  g as AlertDialogTrigger
+  o as AlertDialogTrigger
 };

package/dist/components/AlertDialog/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useAlertDialog';

package/dist/components/AlertDialog/hooks/useAlertDialog.d.ts

@@ -0,0 +1,7 @@
+import { UseAlertiDialogProps } from '../AlertDialog.types';
+export declare const useAlertDialog: ({ onConfirm }: UseAlertiDialogProps) => {
+    isOpen: boolean;
+    handleCancel: () => void;
+    handleConfirm: () => void;
+    handleOpen: () => void;
+};

package/dist/components/AlertDialog/hooks/useAlertDialog.js

@@ -1,10 +1,15 @@
-import { useState as c, useCallback as s } from "react";
-const p = ({ onConfirm: t }) => {
-  const [n, e] = c(!1), a = s(() => e(!0), []), l = s(() => e(!1), []), o = s(() => {
-    t?.(), e(!1);
-  }, [t]);
-  return { isOpen: n, handleCancel: l, handleConfirm: o, handleOpen: a };
+import { useCallback as a, useState as n } from "react";
+var o = ({ onConfirm: l }) => {
+  const [s, e] = n(!1), t = a(() => e(!0), []);
+  return {
+    isOpen: s,
+    handleCancel: a(() => e(!1), []),
+    handleConfirm: a(() => {
+      l?.(), e(!1);
+    }, [l]),
+    handleOpen: t
+  };
 };
 export {
-  p as useAlertDialog
+  o as useAlertDialog
 };

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,31 @@
+import { Props } from './Autocomplete.types';
+/**
+ * An autocomplete/typeahead input component that suggests options as you type.
+ *
+ * @example
+ * ```tsx
+ * // Basic autocomplete
+ * <Autocomplete
+ *   label="Programming Language"
+ *   options={[
+ *     { value: 'JavaScript' },
+ *     { value: 'TypeScript' },
+ *     { value: 'Python' },
+ *   ]}
+ *   placeholder="Type to search..."
+ *   onChange={(value) => setLanguage(value)}
+ * />
+ *
+ * // With custom empty state
+ * <Autocomplete
+ *   options={users}
+ *   placeholder="Search users..."
+ *   placeHolderEmptyValues="No users found"
+ *   onChange={handleUserSelect}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-autocomplete--docs Storybook}
+ */
+declare const Autocomplete: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
+export { Autocomplete };