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

package/dist/components/ImageUpload/ImageUpload.d.ts

@@ -0,0 +1,25 @@
+import { ImageUploadProps } from './ImageUpload.types';
+/**
+ * A file input component for uploading images with preview and validation.
+ * Supports drag states, file type validation, size limits, and upload progress.
+ *
+ * @example
+ * ```tsx
+ * <ImageUpload
+ *   label="Profile Picture"
+ *   name="avatar"
+ *   accept="image/png,image/jpeg"
+ *   maxSize={5 * 1024 * 1024}
+ *   uploadButtonText="Choose image"
+ *   onChange={(e) => console.log(e.target.files?.[0])}
+ *   onRemove={() => setAvatar(null)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-imageupload--docs Storybook}
+ */
+declare const ImageUpload: {
+    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ImageUpload };

package/dist/components/ImageUpload/ImageUpload.js

@@ -1,79 +1,74 @@
-import { jsxs as l, jsx as e, Fragment as S } from "react/jsx-runtime";
-import { useId as ee, useRef as j, useState as g, useEffect as te } from "react";
-import { S as ae } from "../../loader-juvMSJ9L.js";
+import { jsxs as l, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { useId as ee, useRef as D, useState as g, useEffect as te } from "react";
 import { Button as F } from "../Button/Button.js";
 import { cn as m } from "../../utils/index.js";
-import { labelVariants as re, inputFieldVariants as le, inputContainerVariants as ie, helperTextVariants as se, imageUploadVariants as ne } from "./ImageUpload.variants.js";
-import { c as ce } from "../../createLucideIcon-D4r5Phnh.js";
-import { Warning as oe } from "../../assets/icons/components/Warning.js";
-import { X as D } from "../../x-BXShoIAM.js";
-const de = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
-  ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
-  ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
-], me = ce("image", de);
+import { labelVariants as ae, inputFieldVariants as re, inputContainerVariants as le, helperTextVariants as ie, imageUploadVariants as se } from "./ImageUpload.variants.js";
+import { LoaderIcon as ne } from "../../assets/icons/components/Loader.js";
+import { PhotoLibraryIcon as oe } from "../../assets/icons/components/PhotoLibrary.js";
+import { WarningIcon as ce } from "../../assets/icons/components/Warning.js";
+import { X as P } from "../../x-B9bYxG31.js";
 var t = /* @__PURE__ */ ((s) => (s.Default = "default", s.Uploading = "uploading", s.Complete = "complete", s.Error = "error", s))(t || {});
-const pe = ({
+const de = ({
   className: s,
   error: b,
   fileName: T,
-  fileSize: E,
-  fileUrl: z,
+  fileSize: z,
+  fileUrl: E,
   helperText: R = "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.",
-  isRequired: L = !1,
+  isRequired: S = !1,
   label: p = "Item logo",
-  labelClassName: P,
+  labelClassName: L,
   name: A,
-  onChange: k,
+  onChange: N,
   onRemove: H,
-  status: N = t.Default,
+  status: k = t.Default,
   theme: u,
   uploadButtonText: J = "Upload logo",
   accept: M = "image/svg+xml,image/png,image/jpeg,image/jpg",
   maxSize: K = 5 * 1024 * 1024
 }) => {
-  const U = ee(), f = j(null), n = j(null), [W, c] = g(N), [_, B] = g(z), [$, C] = g(T), [X, G] = g(E);
+  const U = ee(), f = D(null), n = D(null), [W, o] = g(k), [$, B] = g(E), [X, C] = g(T), [q, G] = g(z);
   te(() => () => {
     n.current && clearTimeout(n.current);
   }, []);
-  const a = N !== t.Default ? N : W, y = z ?? _, o = T ?? $, h = E ?? X, x = !!b || a === t.Error, q = (i) => {
+  const a = k !== t.Default ? k : W, v = E ?? $, c = T ?? X, h = z ?? q, x = !!b || a === t.Error, O = (i) => {
     const r = i.target.files?.[0];
     if (!r) return;
     if (!M.split(",").map((d) => d.trim()).some((d) => {
       if (d.includes("*")) {
-        const Z = d.split("/")[0];
-        return r.type.startsWith(Z);
+        const _ = d.split("/")[0];
+        return r.type.startsWith(_);
       }
       return r.type === d;
     })) {
-      c(t.Error), k?.(i);
+      o(t.Error), N?.(i);
       return;
     }
     if (r.size > K) {
-      c(t.Error), k?.(i);
+      o(t.Error), N?.(i);
       return;
     }
-    c(t.Uploading), C(r.name), G(Q(r.size));
-    const v = new FileReader();
-    v.onloadend = () => {
-      B(v.result), n.current = setTimeout(() => {
-        c(t.Complete);
+    o(t.Uploading), C(r.name), G(Y(r.size));
+    const y = new FileReader();
+    y.onloadend = () => {
+      B(y.result), n.current = setTimeout(() => {
+        o(t.Complete);
       }, 500);
-    }, v.readAsDataURL(r), k?.(i);
-  }, V = () => {
-    n.current && (clearTimeout(n.current), n.current = null), B(void 0), C(void 0), G(void 0), c(t.Default), f.current && (f.current.value = ""), H?.();
-  }, O = () => {
+    }, y.readAsDataURL(r), N?.(i);
+  }, I = () => {
+    n.current && (clearTimeout(n.current), n.current = null), B(void 0), C(void 0), G(void 0), o(t.Default), f.current && (f.current.value = ""), H?.();
+  }, Q = () => {
     f.current?.click();
-  }, Q = (i) => {
+  }, Y = (i) => {
     if (i === 0) return "0 Bytes";
-    const r = 1024, I = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(i) / Math.log(r));
-    return `${parseFloat((i / Math.pow(r, w)).toFixed(2))}${I[w]}`;
-  }, Y = b || (x ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
+    const r = 1024, V = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(i) / Math.log(r));
+    return `${parseFloat((i / Math.pow(r, w)).toFixed(2))}${V[w]}`;
+  }, Z = b || (x ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
   return /* @__PURE__ */ l(
     "div",
     {
       className: m(
-        ne({
+        se({
           status: a,
           className: s
         })
@@ -85,14 +80,14 @@ const pe = ({
           {
             htmlFor: U,
             className: m(
-              re({
-                className: P
+              ae({
+                className: L
               }),
               "cursor-pointer"
             ),
             children: [
               p,
-              L && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
+              S && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
             ]
           }
         ),
@@ -100,7 +95,7 @@ const pe = ({
           "div",
           {
             className: m(
-              ie({
+              le({
                 status: a
               })
             ),
@@ -109,7 +104,7 @@ const pe = ({
                 "div",
                 {
                   className: m(
-                    le({
+                    re({
                       status: a
                     }),
                     {
@@ -118,29 +113,35 @@ const pe = ({
                     }
                   ),
                   children: [
-                    a === t.Uploading && /* @__PURE__ */ l(S, { children: [
-                      /* @__PURE__ */ e(ae, { className: "w-5 h-5 shrink-0 animate-spin text-metal-400" }),
-                      o && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50", children: o }),
+                    a === t.Uploading && /* @__PURE__ */ l(j, { children: [
+                      /* @__PURE__ */ e(
+                        ne,
+                        {
+                          size: 20,
+                          className: "shrink-0 animate-spin text-metal-400"
+                        }
+                      ),
+                      c && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50", children: c }),
                         h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]", children: h })
                       ] })
                     ] }),
-                    a === t.Complete && y && /* @__PURE__ */ l(S, { children: [
+                    a === t.Complete && v && /* @__PURE__ */ l(j, { children: [
                       /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 relative", children: /* @__PURE__ */ e(
                         "img",
                         {
-                          src: y,
-                          alt: o || "Uploaded image",
+                          src: v,
+                          alt: c || "Uploaded image",
                           className: "w-full h-full object-contain"
                         }
                       ) }),
-                      o && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50", children: o }),
+                      c && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50", children: c }),
                         h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-slate-400 kubefirst-dark:text-slate-400 tracking-[0.15px]", children: h })
                       ] })
                     ] }),
-                    (a === t.Default || a === t.Error && !y) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(me, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" }) }),
-                    x && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(oe, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" }) })
+                    (a === t.Default || a === t.Error && !v) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(oe, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" }) }),
+                    x && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(ce, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" }) })
                   ]
                 }
               ),
@@ -148,7 +149,7 @@ const pe = ({
                 F,
                 {
                   variant: "secondary",
-                  onClick: O,
+                  onClick: Q,
                   theme: u,
                   className: "h-10 px-4 py-2 shrink-0",
                   children: J
@@ -160,11 +161,11 @@ const pe = ({
                   variant: "secondary",
                   shape: "circle",
                   size: "medium",
-                  onClick: V,
+                  onClick: I,
                   theme: u,
                   className: "shrink-0",
                   "aria-label": "Cancel upload",
-                  children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+                  children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
                 }
               ),
               a === t.Complete && /* @__PURE__ */ e(
@@ -173,11 +174,11 @@ const pe = ({
                   variant: "secondary",
                   shape: "circle",
                   size: "medium",
-                  onClick: V,
+                  onClick: I,
                   theme: u,
                   className: "shrink-0",
                   "aria-label": "Remove file",
-                  children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+                  children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
                 }
               )
             ]
@@ -188,11 +189,11 @@ const pe = ({
             "p",
             {
               className: m(
-                se({
+                ie({
                   status: a
                 })
               ),
-              children: Y
+              children: Z
             }
           ) }),
           (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
@@ -206,7 +207,7 @@ const pe = ({
             type: "file",
             name: A,
             accept: M,
-            onChange: q,
+            onChange: O,
             className: "hidden",
             "aria-label": typeof p == "string" ? p : "File upload"
           }
@@ -215,7 +216,7 @@ const pe = ({
     }
   );
 };
-pe.displayName = "KonstructImageUpload";
+de.displayName = "KonstructImageUpload";
 export {
-  pe as ImageUpload
+  de as ImageUpload
 };

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

@@ -0,0 +1,67 @@
+import { VariantProps } from 'class-variance-authority';
+import { ChangeEvent, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { imageUploadVariants } from './ImageUpload.variants';
+/**
+ * Upload status states for the ImageUpload component.
+ */
+export declare enum ImageUploadStatus {
+    Default = "default",
+    Uploading = "uploading",
+    Complete = "complete",
+    Error = "error"
+}
+export type ImageUploadStatusType = ImageUploadStatus;
+/**
+ * Props for the ImageUpload component.
+ * A file input for uploading images with preview, validation, and status states.
+ *
+ * @example
+ * ```tsx
+ * <ImageUpload
+ *   label="Logo"
+ *   name="logo"
+ *   accept="image/png,image/svg+xml"
+ *   maxSize={2 * 1024 * 1024}
+ *   onChange={(e) => handleUpload(e.target.files?.[0])}
+ *   onRemove={() => setLogo(null)}
+ *   isRequired
+ * />
+ * ```
+ */
+export interface ImageUploadProps extends Omit<VariantProps<typeof imageUploadVariants>, 'status'> {
+    /** Additional CSS classes */
+    className?: string;
+    /** Error message to display */
+    error?: string;
+    /** Name of the uploaded file */
+    fileName?: string;
+    /** Formatted size of the uploaded file */
+    fileSize?: string;
+    /** URL or data URL of the uploaded file for preview */
+    fileUrl?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Label displayed above the input */
+    label?: string | ReactNode;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Callback fired when a file is selected */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired when the uploaded file is removed */
+    onRemove?: () => void;
+    /** Current upload status */
+    status?: ImageUploadStatusType;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Text displayed on the upload button */
+    uploadButtonText?: string;
+    /** Accepted file MIME types (comma-separated) */
+    accept?: string;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+}

package/dist/components/ImageUpload/ImageUpload.variants.d.ts

@@ -0,0 +1,13 @@
+export declare const imageUploadVariants: (props?: ({
+    status?: "error" | "default" | "uploading" | "complete" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const inputContainerVariants: (props?: ({
+    status?: "error" | "default" | "uploading" | "complete" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const inputFieldVariants: (props?: ({
+    status?: "error" | "default" | "uploading" | "complete" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const helperTextVariants: (props?: ({
+    status?: "error" | "default" | "uploading" | "complete" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,35 @@
+import { InputProps } from './Input.types';
+/**
+ * A text input component with label, error handling, and helper text support.
+ * Includes built-in password visibility toggle and search icon variant.
+ *
+ * @example
+ * ```tsx
+ * // Basic input with label
+ * <Input label="Email" placeholder="Enter your email" />
+ *
+ * // Required input with helper text
+ * <Input
+ *   label="Username"
+ *   isRequired
+ *   helperText="Choose a unique username"
+ * />
+ *
+ * // Input with error state
+ * <Input
+ *   label="Email"
+ *   value={email}
+ *   error="Please enter a valid email address"
+ * />
+ *
+ * // Password input (auto show/hide toggle)
+ * <Input label="Password" type="password" />
+ *
+ * // Search input with icon
+ * <Input placeholder="Search..." isSearch />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-input--docs Storybook}
+ */
+declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/Input/Input.js

@@ -1,10 +1,10 @@
 import { jsxs as h, jsx as s } from "react/jsx-runtime";
-import p, { forwardRef as y, useId as I, useRef as L, useState as W } from "react";
+import p, { forwardRef as y, useId as _, useRef as L, useState as W } from "react";
 import { cn as i } from "../../utils/index.js";
 import { inputVariants as $ } from "./Input.variants.js";
 import { Typography as u } from "../Typography/Typography.js";
 import { SearchIcon as T } from "../../assets/icons/components/Search.js";
-import { Warning as S } from "../../assets/icons/components/Warning.js";
+import { WarningIcon as S } from "../../assets/icons/components/Warning.js";
 import { P as l } from "../../index-BOE_3f_Z.js";
 function g() {
   return g = Object.assign || function(t) {
@@ -128,7 +128,7 @@ const B = y(
     type: f = "text",
     ...N
   }, P) => {
-    const b = I(), E = L(f === "password"), [d, z] = W(() => f !== "password"), m = typeof r == "string" && r.length >= 0, _ = d ? w : x;
+    const b = _(), E = L(f === "password"), [d, z] = W(() => f !== "password"), m = typeof r == "string" && r.length >= 0, I = d ? w : x;
     return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": k, children: [
       c ? /* @__PURE__ */ h(
         u,
@@ -227,7 +227,7 @@ const B = y(
               "top-1/2"
             ),
             children: /* @__PURE__ */ s(
-              _,
+              I,
               {
                 className: "w-5 h-5 cursor-pointer",
                 onClick: () => z(!d)

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

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { inputVariants } from './Input.variants';
+/**
+ * Props for the Input component.
+ *
+ * @example
+ * ```tsx
+ * <Input label="Email" placeholder="Enter email" />
+ * <Input label="Password" type="password" isRequired />
+ * <Input error="Invalid email" helperText="We'll never share your email" />
+ * ```
+ */
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+    /** Error message to display below the input */
+    error?: string;
+    /** Helper text displayed below the input when no error */
+    helperText?: string;
+    /** Additional CSS classes for the helper text */
+    helperTextClassName?: string;
+    /** Show required indicator (*) next to label */
+    isRequired?: boolean;
+    /** Show search icon inside the input */
+    isSearch?: boolean;
+    /** Label text or element displayed above the input */
+    label?: string | ReactNode;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+}

package/dist/components/Input/Input.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const inputVariants: (props?: ({
+    variant?: "error" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { LoadingProps } from './Loading.types';
+/**
+ * A spinning loading indicator.
+ *
+ * @example
+ * ```tsx
+ * // Default loading spinner
+ * <Loading />
+ *
+ * // Custom size
+ * <Loading className="w-8 h-8" />
+ *
+ * // In a button
+ * <Button disabled>
+ *   <Loading className="w-4 h-4 mr-2" />
+ *   Loading...
+ * </Button>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-loading--docs Storybook}
+ */
+declare const Loading: FC<LoadingProps>;
+export { Loading };

package/dist/components/Loading/Loading.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { cn as c } from "../../utils/index.js";
 import { loadingVariants as i } from "./Loading.variants.js";
-import { c as t } from "../../createLucideIcon-D4r5Phnh.js";
+import { c as t } from "../../createLucideIcon-CP-mMPfa.js";
 const d = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], m = t("loader-circle", d), n = ({ className: o, theme: a, ...r }) => /* @__PURE__ */ e(
   m,
   {

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

@@ -0,0 +1,17 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes } from 'react';
+import { Theme } from '../../domain/theme';
+import { loadingVariants } from './Loading.variants';
+/**
+ * Props for the Loading component.
+ *
+ * @example
+ * ```tsx
+ * <Loading />
+ * <Loading className="w-8 h-8" />
+ * ```
+ */
+export type LoadingProps = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
+    /** Theme override for this component */
+    theme?: Theme;
+};

package/dist/components/Loading/Loading.variants.d.ts

@@ -0,0 +1 @@
+export declare const loadingVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { ModalChildProps, ModalProps } from './Modal.types';
+/**
+ * A modal dialog component with Header, Body, and Footer sub-components.
+ * Supports keyboard navigation (Escape to close) and portals to document.body.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+ *
+ * <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Modal.Header>Confirm Action</Modal.Header>
+ *   <Modal.Body>
+ *     Are you sure you want to proceed?
+ *   </Modal.Body>
+ *   <Modal.Footer>
+ *     <Button variant="secondary" onClick={() => setIsOpen(false)}>
+ *       Cancel
+ *     </Button>
+ *     <Button onClick={handleConfirm}>Confirm</Button>
+ *   </Modal.Footer>
+ * </Modal>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-modal--docs Storybook}
+ */
+declare const Modal: FC<ModalProps> & {
+    Header: FC<ModalChildProps>;
+    Body: FC<ModalChildProps>;
+    Footer: FC<ModalChildProps>;
+};
+export { Modal };

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

@@ -0,0 +1,45 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { modalVariants } from './components/Wrapper/Wrapper.variants';
+import { Theme } from '../../domain/theme';
+/**
+ * Props for the Modal component.
+ *
+ * @example
+ * ```tsx
+ * <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Modal.Header>Title</Modal.Header>
+ *   <Modal.Body>Content</Modal.Body>
+ *   <Modal.Footer>
+ *     <Button onClick={() => setIsOpen(false)}>Close</Button>
+ *   </Modal.Footer>
+ * </Modal>
+ * ```
+ */
+export interface ModalProps extends PropsWithChildren, VariantProps<typeof modalVariants> {
+    /** CSS classes for the close button */
+    buttonCloseClassName?: string;
+    /** Additional CSS classes for the modal */
+    className?: string;
+    /** DOM element to portal the modal into (defaults to document.body) */
+    container?: Element | DocumentFragment;
+    /** Whether the modal is open */
+    isOpen?: boolean;
+    /** Show the X close button in the corner */
+    showCloseButton?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when modal is closed (Escape key or close button) */
+    onClose?: () => void;
+}
+/**
+ * Props for Modal sub-components (Header, Body, Footer).
+ */
+export type ModalChildProps = {
+    /** Content of the modal section */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Merge props onto child element */
+    asChild?: boolean;
+};

package/dist/components/Modal/components/Body/Body.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BodyProps } from './Body.types';
+export declare const Body: FC<BodyProps>;

package/dist/components/Modal/components/Body/Body.types.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export type BodyProps = PropsWithChildren & {
+    asChild?: boolean;
+    className?: string;
+};

package/dist/components/Modal/components/Footer/Footer.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FooterProps } from './Footer.types';
+export declare const Footer: FC<FooterProps>;

package/dist/components/Modal/components/Footer/Footer.types.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export type FooterProps = PropsWithChildren & {
+    asChild?: boolean;
+    className?: string;
+};

package/dist/components/Modal/components/Header/Header.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { HeaderProps } from './Header.types';
+export declare const Header: FC<HeaderProps>;

package/dist/components/Modal/components/Header/Header.types.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export type HeaderProps = PropsWithChildren & {
+    asChild?: boolean;
+    className?: string;
+};