@noambz/ui 0.7.0

package/dist/components/organisms/drawer/drawer.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Drawer } from "./drawer.js";
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+export declare const FromRight: StoryObj;
+export declare const FromLeft: StoryObj;
+export declare const FromTop: StoryObj;
+export declare const FromBottom: StoryObj;
+//# sourceMappingURL=drawer.stories.d.ts.map

package/dist/components/organisms/drawer/drawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/drawer/drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACL,MAAM,EAQP,MAAM,aAAa,CAAC;AAGrB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAI7B,CAAC;AACF,eAAe,IAAI,CAAC;AA4BpB,eAAO,MAAM,SAAS,EAAE,QAAwD,CAAC;AACjF,eAAO,MAAM,QAAQ,EAAE,QAAuD,CAAC;AAC/E,eAAO,MAAM,OAAO,EAAE,QAAsD,CAAC;AAC7E,eAAO,MAAM,UAAU,EAAE,QAAyD,CAAC"}

package/dist/components/organisms/drawer/index.d.ts

@@ -0,0 +1,3 @@
+export { Drawer, DrawerTrigger, DrawerPortal, DrawerClose, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerTitle, DrawerDescription, DrawerPanel, } from "./drawer.js";
+export type { IDrawerContentProps, IDrawerPanelProps } from "./drawer.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/organisms/drawer/index.js

@@ -0,0 +1,29 @@
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerPanel
+} from "./drawer.js";
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPanel,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger
+};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/drawer/index.ts"],"sourcesContent":["export {\n  Drawer,\n  DrawerTrigger,\n  DrawerPortal,\n  DrawerClose,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHeader,\n  DrawerBody,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerPanel,\n} from \"./drawer.js\";\nexport type { IDrawerContentProps, IDrawerPanelProps } from \"./drawer.js\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/components/organisms/file-upload/file-upload.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface IFileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "title" | "defaultValue"> {
+    /** Controlled file list. Omit for uncontrolled usage. */
+    value?: ReadonlyArray<File>;
+    /** Default files for uncontrolled usage. */
+    defaultValue?: ReadonlyArray<File>;
+    /** Native `accept` string, e.g. `"image/*"` or `".pdf,.docx"`. */
+    accept?: string;
+    /** Allow multiple files. Defaults to false. */
+    multiple?: boolean;
+    /** Max per-file size in bytes. Rejected files are passed to `onReject`. */
+    maxSizeBytes?: number;
+    /** Max total number of files. Extra files are ignored. */
+    maxFiles?: number;
+    disabled?: boolean;
+    onChange?: (files: File[]) => void;
+    onReject?: (rejected: Array<{
+        file: File;
+        reason: "size" | "type" | "count";
+    }>) => void;
+    /** Custom icon rendered in the drop zone. */
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Hide the file list underneath. */
+    hideFileList?: boolean;
+}
+/**
+ * Drag-and-drop file upload zone with a fallback click-to-browse input.
+ * Emits validated files via `onChange` and rejections (size, type, count)
+ * via `onReject`.
+ *
+ * Both controlled and uncontrolled modes are supported. Pass `value` and
+ * `onChange` to own the state in the parent; otherwise the zone manages
+ * its own file list.
+ */
+export declare const FileUpload: import("react").ForwardRefExoticComponent<IFileUploadProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/organisms/file-upload/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/file-upload/file-upload.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC;IACnF,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACnC,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACxF,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qCAAqC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAmBD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,6GAsKtB,CAAC"}

package/dist/components/organisms/file-upload/file-upload.js

@@ -0,0 +1,192 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../../utils/cn.js";
+const BYTES_PER_KB = 1024;
+const BYTES_PER_MB = BYTES_PER_KB * 1024;
+const BYTES_PER_GB = BYTES_PER_MB * 1024;
+function formatBytes(bytes) {
+  if (bytes < BYTES_PER_KB) return `${bytes} B`;
+  if (bytes < BYTES_PER_MB) return `${(bytes / BYTES_PER_KB).toFixed(1)} KB`;
+  if (bytes < BYTES_PER_GB) return `${(bytes / BYTES_PER_MB).toFixed(1)} MB`;
+  return `${(bytes / BYTES_PER_GB).toFixed(1)} GB`;
+}
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const parts = accept.split(",").map((p) => p.trim()).filter(Boolean);
+  return parts.some((pattern) => {
+    if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern.toLowerCase());
+    if (pattern.endsWith("/*")) return file.type.startsWith(pattern.slice(0, -1));
+    return file.type === pattern;
+  });
+}
+const FileUpload = forwardRef(
+  ({
+    value,
+    defaultValue,
+    accept,
+    multiple = false,
+    maxSizeBytes,
+    maxFiles,
+    disabled,
+    onChange,
+    onReject,
+    icon,
+    title = "Drop files here or click to browse",
+    description,
+    hideFileList = false,
+    className,
+    ...props
+  }, ref) => {
+    const inputId = useId();
+    const inputRef = useRef(null);
+    const [dragActive, setDragActive] = useState(false);
+    const [inner, setInner] = useState(Array.from(defaultValue ?? []));
+    const isControlled = value !== void 0;
+    const files = isControlled ? Array.from(value ?? []) : inner;
+    const setFiles = useCallback(
+      (next) => {
+        if (!isControlled) setInner(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange]
+    );
+    const accept$ = accept;
+    const validateAndMerge = useCallback(
+      (incoming) => {
+        const accepted = [];
+        const rejected = [];
+        for (const file of incoming) {
+          if (!matchesAccept(file, accept$)) {
+            rejected.push({ file, reason: "type" });
+            continue;
+          }
+          if (maxSizeBytes !== void 0 && file.size > maxSizeBytes) {
+            rejected.push({ file, reason: "size" });
+            continue;
+          }
+          accepted.push(file);
+        }
+        let merged = multiple ? [...files, ...accepted] : accepted.slice(0, 1);
+        if (maxFiles !== void 0 && merged.length > maxFiles) {
+          const overflow = merged.slice(maxFiles).map((file) => ({ file, reason: "count" }));
+          rejected.push(...overflow);
+          merged = merged.slice(0, maxFiles);
+        }
+        if (accepted.length || rejected.length) {
+          if (accepted.length) setFiles(merged);
+          if (rejected.length) onReject?.(rejected);
+        }
+      },
+      [accept$, maxSizeBytes, maxFiles, multiple, files, setFiles, onReject]
+    );
+    const handleDrop = (event) => {
+      event.preventDefault();
+      setDragActive(false);
+      if (disabled) return;
+      const dropped = Array.from(event.dataTransfer.files ?? []);
+      if (dropped.length) validateAndMerge(dropped);
+    };
+    const removeAt = (index) => {
+      setFiles(files.filter((_, i) => i !== index));
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-3", className), ...props, children: [
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          onDragOver: (event) => {
+            event.preventDefault();
+            if (!disabled) setDragActive(true);
+          },
+          onDragLeave: () => setDragActive(false),
+          onDrop: handleDrop,
+          className: cn(
+            "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors",
+            dragActive ? "border-blue-500 bg-blue-50/50 dark:bg-blue-950/30" : "border-border-base bg-surface-muted/40 hover:bg-surface-muted",
+            disabled && "pointer-events-none opacity-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-surface text-muted-foreground", children: icon ?? /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.75",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "h-5 w-5",
+                "aria-hidden": true,
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: title }),
+              description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: inputId,
+                ref: inputRef,
+                type: "file",
+                className: "sr-only",
+                accept,
+                multiple,
+                disabled,
+                onChange: (event) => {
+                  const picked = Array.from(event.target.files ?? []);
+                  if (picked.length) validateAndMerge(picked);
+                  event.target.value = "";
+                }
+              }
+            )
+          ]
+        }
+      ),
+      !hideFileList && files.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", "aria-label": "Selected files", children: files.map((file, index) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex items-center justify-between gap-3 rounded-lg border border-border-base bg-surface px-3 py-2 text-sm",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-foreground", children: file.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatBytes(file.size) })
+            ] }),
+            !disabled ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${file.name}`,
+                onClick: () => removeAt(index),
+                className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+                  /* @__PURE__ */ jsx("path", { d: "M12 4L4 12" }),
+                  /* @__PURE__ */ jsx("path", { d: "M4 4l8 8" })
+                ] })
+              }
+            ) : null
+          ]
+        },
+        `${file.name}-${index}`
+      )) }) : null
+    ] });
+  }
+);
+FileUpload.displayName = "FileUpload";
+export {
+  FileUpload
+};
+//# sourceMappingURL=file-upload.js.map

package/dist/components/organisms/file-upload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/file-upload/file-upload.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type DragEvent,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../../utils/cn.js\";\n\nconst BYTES_PER_KB = 1024;\nconst BYTES_PER_MB = BYTES_PER_KB * 1024;\nconst BYTES_PER_GB = BYTES_PER_MB * 1024;\n\nexport interface IFileUploadProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"title\" | \"defaultValue\"> {\n  /** Controlled file list. Omit for uncontrolled usage. */\n  value?: ReadonlyArray<File>;\n  /** Default files for uncontrolled usage. */\n  defaultValue?: ReadonlyArray<File>;\n  /** Native `accept` string, e.g. `\"image/*\"` or `\".pdf,.docx\"`. */\n  accept?: string;\n  /** Allow multiple files. Defaults to false. */\n  multiple?: boolean;\n  /** Max per-file size in bytes. Rejected files are passed to `onReject`. */\n  maxSizeBytes?: number;\n  /** Max total number of files. Extra files are ignored. */\n  maxFiles?: number;\n  disabled?: boolean;\n  onChange?: (files: File[]) => void;\n  onReject?: (rejected: Array<{ file: File; reason: \"size\" | \"type\" | \"count\" }>) => void;\n  /** Custom icon rendered in the drop zone. */\n  icon?: ReactNode;\n  title?: ReactNode;\n  description?: ReactNode;\n  /** Hide the file list underneath. */\n  hideFileList?: boolean;\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < BYTES_PER_KB) return `${bytes} B`;\n  if (bytes < BYTES_PER_MB) return `${(bytes / BYTES_PER_KB).toFixed(1)} KB`;\n  if (bytes < BYTES_PER_GB) return `${(bytes / BYTES_PER_MB).toFixed(1)} MB`;\n  return `${(bytes / BYTES_PER_GB).toFixed(1)} GB`;\n}\n\nfunction matchesAccept(file: File, accept?: string): boolean {\n  if (!accept) return true;\n  const parts = accept.split(\",\").map((p) => p.trim()).filter(Boolean);\n  return parts.some((pattern) => {\n    if (pattern.startsWith(\".\")) return file.name.toLowerCase().endsWith(pattern.toLowerCase());\n    if (pattern.endsWith(\"/*\")) return file.type.startsWith(pattern.slice(0, -1));\n    return file.type === pattern;\n  });\n}\n\n/**\n * Drag-and-drop file upload zone with a fallback click-to-browse input.\n * Emits validated files via `onChange` and rejections (size, type, count)\n * via `onReject`.\n *\n * Both controlled and uncontrolled modes are supported. Pass `value` and\n * `onChange` to own the state in the parent; otherwise the zone manages\n * its own file list.\n */\nexport const FileUpload = forwardRef<HTMLDivElement, IFileUploadProps>(\n  (\n    {\n      value,\n      defaultValue,\n      accept,\n      multiple = false,\n      maxSizeBytes,\n      maxFiles,\n      disabled,\n      onChange,\n      onReject,\n      icon,\n      title = \"Drop files here or click to browse\",\n      description,\n      hideFileList = false,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = useId();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const [dragActive, setDragActive] = useState(false);\n    const [inner, setInner] = useState<File[]>(Array.from(defaultValue ?? []));\n    const isControlled = value !== undefined;\n    const files = isControlled ? Array.from(value ?? []) : inner;\n\n    const setFiles = useCallback(\n      (next: File[]) => {\n        if (!isControlled) setInner(next);\n        onChange?.(next);\n      },\n      [isControlled, onChange],\n    );\n\n    const accept$ = accept;\n    const validateAndMerge = useCallback(\n      (incoming: File[]) => {\n        const accepted: File[] = [];\n        const rejected: Array<{ file: File; reason: \"size\" | \"type\" | \"count\" }> = [];\n        for (const file of incoming) {\n          if (!matchesAccept(file, accept$)) {\n            rejected.push({ file, reason: \"type\" });\n            continue;\n          }\n          if (maxSizeBytes !== undefined && file.size > maxSizeBytes) {\n            rejected.push({ file, reason: \"size\" });\n            continue;\n          }\n          accepted.push(file);\n        }\n        let merged = multiple ? [...files, ...accepted] : accepted.slice(0, 1);\n        if (maxFiles !== undefined && merged.length > maxFiles) {\n          const overflow = merged.slice(maxFiles).map((file) => ({ file, reason: \"count\" as const }));\n          rejected.push(...overflow);\n          merged = merged.slice(0, maxFiles);\n        }\n        if (accepted.length || rejected.length) {\n          if (accepted.length) setFiles(merged);\n          if (rejected.length) onReject?.(rejected);\n        }\n      },\n      [accept$, maxSizeBytes, maxFiles, multiple, files, setFiles, onReject],\n    );\n\n    const handleDrop = (event: DragEvent<HTMLLabelElement>) => {\n      event.preventDefault();\n      setDragActive(false);\n      if (disabled) return;\n      const dropped = Array.from(event.dataTransfer.files ?? []);\n      if (dropped.length) validateAndMerge(dropped);\n    };\n\n    const removeAt = (index: number) => {\n      setFiles(files.filter((_, i) => i !== index));\n    };\n\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-3\", className)} {...props}>\n        <label\n          htmlFor={inputId}\n          onDragOver={(event) => {\n            event.preventDefault();\n            if (!disabled) setDragActive(true);\n          }}\n          onDragLeave={() => setDragActive(false)}\n          onDrop={handleDrop}\n          className={cn(\n            \"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors\",\n            dragActive\n              ? \"border-blue-500 bg-blue-50/50 dark:bg-blue-950/30\"\n              : \"border-border-base bg-surface-muted/40 hover:bg-surface-muted\",\n            disabled && \"pointer-events-none opacity-50\",\n          )}\n        >\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-surface text-muted-foreground\">\n            {icon ?? (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.75\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className=\"h-5 w-5\"\n                aria-hidden\n              >\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n                <polyline points=\"17 8 12 3 7 8\" />\n                <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n              </svg>\n            )}\n          </div>\n          <div className=\"space-y-1\">\n            <p className=\"text-sm font-medium text-foreground\">{title}</p>\n            {description ? <p className=\"text-xs text-muted-foreground\">{description}</p> : null}\n          </div>\n          <input\n            id={inputId}\n            ref={inputRef}\n            type=\"file\"\n            className=\"sr-only\"\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={(event) => {\n              const picked = Array.from(event.target.files ?? []);\n              if (picked.length) validateAndMerge(picked);\n              event.target.value = \"\";\n            }}\n          />\n        </label>\n\n        {!hideFileList && files.length > 0 ? (\n          <ul className=\"flex flex-col gap-1.5\" aria-label=\"Selected files\">\n            {files.map((file, index) => (\n              <li\n                key={`${file.name}-${index}`}\n                className=\"flex items-center justify-between gap-3 rounded-lg border border-border-base bg-surface px-3 py-2 text-sm\"\n              >\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-foreground\">{file.name}</p>\n                  <p className=\"text-xs text-muted-foreground\">{formatBytes(file.size)}</p>\n                </div>\n                {!disabled ? (\n                  <button\n                    type=\"button\"\n                    aria-label={`Remove ${file.name}`}\n                    onClick={() => removeAt(index)}\n                    className=\"rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                  >\n                    <svg viewBox=\"0 0 16 16\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                      <path d=\"M12 4L4 12\" />\n                      <path d=\"M4 4l8 8\" />\n                    </svg>\n                  </button>\n                ) : null}\n              </li>\n            ))}\n          </ul>\n        ) : null}\n      </div>\n    );\n  },\n);\nFileUpload.displayName = \"FileUpload\";\n"],"mappings":"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","names":[]}

package/dist/components/organisms/file-upload/file-upload.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FileUpload } from "./file-upload.js";
+declare const meta: Meta<typeof FileUpload>;
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+export declare const Single: Story;
+export declare const Multiple: Story;
+export declare const Controlled: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=file-upload.stories.d.ts.map

package/dist/components/organisms/file-upload/file-upload.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/file-upload/file-upload.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAIjC,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAIzC,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}

package/dist/components/organisms/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export { FileUpload, type IFileUploadProps } from "./file-upload.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/file-upload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/file-upload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/organisms/file-upload/index.js

@@ -0,0 +1,5 @@
+import { FileUpload } from "./file-upload.js";
+export {
+  FileUpload
+};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/file-upload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/file-upload/index.ts"],"sourcesContent":["export { FileUpload, type IFileUploadProps } from \"./file-upload.js\";\n"],"mappings":"AAAA,SAAS,kBAAyC;","names":[]}

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

@@ -0,0 +1,15 @@
+export * from "./app-shell/index.js";
+export * from "./autocomplete/index.js";
+export * from "./charts/index.js";
+export * from "./command-palette/index.js";
+export * from "./custom-select/index.js";
+export * from "./data-grid/index.js";
+export * from "./date-picker/index.js";
+export * from "./drawer/index.js";
+export * from "./file-upload/index.js";
+export * from "./modal/index.js";
+export * from "./page-scaffolds/index.js";
+export * from "./paginated-data-grid/index.js";
+export * from "./select/index.js";
+export * from "./shortcut-help-overlay/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,kCAAkC,CAAC"}

package/dist/components/organisms/index.js

@@ -0,0 +1,15 @@
+export * from "./app-shell/index.js";
+export * from "./autocomplete/index.js";
+export * from "./charts/index.js";
+export * from "./command-palette/index.js";
+export * from "./custom-select/index.js";
+export * from "./data-grid/index.js";
+export * from "./date-picker/index.js";
+export * from "./drawer/index.js";
+export * from "./file-upload/index.js";
+export * from "./modal/index.js";
+export * from "./page-scaffolds/index.js";
+export * from "./paginated-data-grid/index.js";
+export * from "./select/index.js";
+export * from "./shortcut-help-overlay/index.js";
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/organisms/index.ts"],"sourcesContent":["export * from \"./app-shell/index.js\";\nexport * from \"./autocomplete/index.js\";\nexport * from \"./charts/index.js\";\nexport * from \"./command-palette/index.js\";\nexport * from \"./custom-select/index.js\";\nexport * from \"./data-grid/index.js\";\nexport * from \"./date-picker/index.js\";\nexport * from \"./drawer/index.js\";\nexport * from \"./file-upload/index.js\";\nexport * from \"./modal/index.js\";\nexport * from \"./page-scaffolds/index.js\";\nexport * from \"./paginated-data-grid/index.js\";\nexport * from \"./select/index.js\";\nexport * from \"./shortcut-help-overlay/index.js\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/organisms/modal/index.d.ts

@@ -0,0 +1,3 @@
+export { Modal, ModalTrigger, ModalPortal, ModalClose, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription, ModalPanel, } from "./modal.js";
+export type { IModalContentProps, IModalPanelProps } from "./modal.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,YAAY,EACZ,WAAW,EACX,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,GACX,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/organisms/modal/index.js

@@ -0,0 +1,27 @@
+import {
+  Modal,
+  ModalTrigger,
+  ModalPortal,
+  ModalClose,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalTitle,
+  ModalDescription,
+  ModalPanel
+} from "./modal.js";
+export {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalPanel,
+  ModalPortal,
+  ModalTitle,
+  ModalTrigger
+};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/modal/index.ts"],"sourcesContent":["export {\n  Modal,\n  ModalTrigger,\n  ModalPortal,\n  ModalClose,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalFooter,\n  ModalTitle,\n  ModalDescription,\n  ModalPanel,\n} from \"./modal.js\";\nexport type { IModalContentProps, IModalPanelProps } from \"./modal.js\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/components/organisms/modal/modal.d.ts

@@ -0,0 +1,38 @@
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+import { type ComponentPropsWithoutRef } from "react";
+export declare const Modal: import("react").FC<RadixDialog.DialogProps>;
+export declare const ModalTrigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ModalPortal: import("react").FC<RadixDialog.DialogPortalProps>;
+export declare const ModalClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const contentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const ModalOverlay: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface IModalContentProps extends ComponentPropsWithoutRef<typeof RadixDialog.Content>, VariantProps<typeof contentVariants> {
+    showCloseButton?: boolean;
+}
+export declare const ModalContent: import("react").ForwardRefExoticComponent<IModalContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalHeader: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => import("react").JSX.Element;
+export declare const ModalFooter: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => import("react").JSX.Element;
+export declare const ModalTitle: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const ModalDescription: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export interface IModalPanelProps extends Omit<ComponentPropsWithoutRef<typeof RadixDialog.Root>, "children"> {
+    title?: string;
+    description?: string;
+    size?: VariantProps<typeof contentVariants>["size"];
+    /** Footer content (e.g. primary/secondary action buttons). */
+    footer?: ComponentPropsWithoutRef<"div">["children"];
+    /** Hide the title visually (kept for screen readers). */
+    hideTitle?: boolean;
+    children: ComponentPropsWithoutRef<"div">["children"];
+}
+/**
+ * All-in-one modal: Root + Overlay + Content + Header (title/description) +
+ * Body (children) + optional Footer, with a close button that lives in the
+ * header row (no overlap with title text). Drop down to
+ * `<Modal><ModalContent>` for full composition control.
+ */
+export declare function ModalPanel({ title, description, size, footer, hideTitle, children, ...rootProps }: IModalPanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/organisms/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/modal/modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,WAAW,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAc,KAAK,wBAAwB,EAAmB,MAAM,OAAO,CAAC;AAGnF,eAAO,MAAM,KAAK,6CAAmB,CAAC;AACtC,eAAO,MAAM,YAAY,8HAAsB,CAAC;AAChD,eAAO,MAAM,WAAW,mDAAqB,CAAC;AAC9C,eAAO,MAAM,UAAU,4HAAoB,CAAC;AAE5C,QAAA,MAAM,eAAe;;8EAgBpB,CAAC;AAEF,eAAO,MAAM,YAAY,wLAYvB,CAAC;AAGH,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAUD,eAAO,MAAM,YAAY,+GAexB,CAAC;AAGF,eAAO,MAAM,WAAW,GAAI,yBAAyB,wBAAwB,CAAC,KAAK,CAAC,gCAEnF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yBAAyB,wBAAwB,CAAC,KAAK,CAAC,gCAEnF,CAAC;AAEF,eAAO,MAAM,UAAU,8LAKrB,CAAC;AAGH,eAAO,MAAM,gBAAgB,wMAK3B,CAAC;AAGH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;IACpD,8DAA8D;IAC9D,MAAM,CAAC,EAAE,wBAAwB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;IACrD,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,wBAAwB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;CACvD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,gBAAgB,+BA8BlB"}

package/dist/components/organisms/modal/modal.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn.js";
+const Modal = RadixDialog.Root;
+const ModalTrigger = RadixDialog.Trigger;
+const ModalPortal = RadixDialog.Portal;
+const ModalClose = RadixDialog.Close;
+const contentVariants = cva(
+  "fixed left-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 border border-border-base bg-surface p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-xl",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        full: "max-w-[calc(100vw-2rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const ModalOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  RadixDialog.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+ModalOverlay.displayName = "ModalOverlay";
+function CloseIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) });
+}
+const ModalContent = forwardRef(
+  ({ className, size, showCloseButton = true, children, ...props }, ref) => /* @__PURE__ */ jsxs(ModalPortal, { children: [
+    /* @__PURE__ */ jsx(ModalOverlay, {}),
+    /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, className: cn(contentVariants({ size }), className), ...props, children: [
+      children,
+      showCloseButton ? /* @__PURE__ */ jsxs(RadixDialog.Close, { className: "absolute end-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
+        /* @__PURE__ */ jsx(CloseIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ] }) : null
+    ] })
+  ] })
+);
+ModalContent.displayName = "ModalContent";
+const ModalHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 text-start", className), ...props });
+const ModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-end gap-2", className), ...props });
+const ModalTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixDialog.Title, { ref, className: cn("text-lg font-semibold leading-none", className), ...props }));
+ModalTitle.displayName = "ModalTitle";
+const ModalDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixDialog.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+ModalDescription.displayName = "ModalDescription";
+function ModalPanel({
+  title,
+  description,
+  size,
+  footer,
+  hideTitle,
+  children,
+  ...rootProps
+}) {
+  const hasHeader = Boolean(title || description);
+  return /* @__PURE__ */ jsx(Modal, { ...rootProps, children: /* @__PURE__ */ jsxs(ModalContent, { size, showCloseButton: !hasHeader, children: [
+    hasHeader ? /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+        title ? hideTitle ? /* @__PURE__ */ jsx(RadixDialog.Title, { className: "sr-only", children: title }) : /* @__PURE__ */ jsx(ModalTitle, { children: title }) : null,
+        description ? /* @__PURE__ */ jsx(ModalDescription, { children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(RadixDialog.Close, { className: "shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
+        /* @__PURE__ */ jsx(CloseIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ] })
+    ] }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children }),
+    footer ? /* @__PURE__ */ jsx(ModalFooter, { children: footer }) : null
+  ] }) });
+}
+export {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalPanel,
+  ModalPortal,
+  ModalTitle,
+  ModalTrigger
+};
+//# sourceMappingURL=modal.js.map

package/dist/components/organisms/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/modal/modal.tsx"],"sourcesContent":["\"use client\";\n\nimport * as RadixDialog from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport { cn } from \"../../../utils/cn.js\";\n\nexport const Modal = RadixDialog.Root;\nexport const ModalTrigger = RadixDialog.Trigger;\nexport const ModalPortal = RadixDialog.Portal;\nexport const ModalClose = RadixDialog.Close;\n\nconst contentVariants = cva(\n  \"fixed left-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 border border-border-base bg-surface p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-xl\",\n  {\n    variants: {\n      size: {\n        sm: \"max-w-sm\",\n        md: \"max-w-md\",\n        lg: \"max-w-lg\",\n        xl: \"max-w-xl\",\n        full: \"max-w-[calc(100vw-2rem)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nexport const ModalOverlay = forwardRef<\n  ElementRef<typeof RadixDialog.Overlay>,\n  ComponentPropsWithoutRef<typeof RadixDialog.Overlay>\n>(({ className, ...props }, ref) => (\n  <RadixDialog.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nModalOverlay.displayName = \"ModalOverlay\";\n\nexport interface IModalContentProps\n  extends ComponentPropsWithoutRef<typeof RadixDialog.Content>,\n    VariantProps<typeof contentVariants> {\n  showCloseButton?: boolean;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} className=\"h-4 w-4\" aria-hidden=\"true\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n  );\n}\n\nexport const ModalContent = forwardRef<ElementRef<typeof RadixDialog.Content>, IModalContentProps>(\n  ({ className, size, showCloseButton = true, children, ...props }, ref) => (\n    <ModalPortal>\n      <ModalOverlay />\n      <RadixDialog.Content ref={ref} className={cn(contentVariants({ size }), className)} {...props}>\n        {children}\n        {showCloseButton ? (\n          <RadixDialog.Close className=\"absolute end-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\">\n            <CloseIcon />\n            <span className=\"sr-only\">Close</span>\n          </RadixDialog.Close>\n        ) : null}\n      </RadixDialog.Content>\n    </ModalPortal>\n  ),\n);\nModalContent.displayName = \"ModalContent\";\n\nexport const ModalHeader = ({ className, ...props }: ComponentPropsWithoutRef<\"div\">) => (\n  <div className={cn(\"flex flex-col gap-1.5 text-start\", className)} {...props} />\n);\n\nexport const ModalFooter = ({ className, ...props }: ComponentPropsWithoutRef<\"div\">) => (\n  <div className={cn(\"flex items-center justify-end gap-2\", className)} {...props} />\n);\n\nexport const ModalTitle = forwardRef<\n  ElementRef<typeof RadixDialog.Title>,\n  ComponentPropsWithoutRef<typeof RadixDialog.Title>\n>(({ className, ...props }, ref) => (\n  <RadixDialog.Title ref={ref} className={cn(\"text-lg font-semibold leading-none\", className)} {...props} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\nexport const ModalDescription = forwardRef<\n  ElementRef<typeof RadixDialog.Description>,\n  ComponentPropsWithoutRef<typeof RadixDialog.Description>\n>(({ className, ...props }, ref) => (\n  <RadixDialog.Description ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n));\nModalDescription.displayName = \"ModalDescription\";\n\nexport interface IModalPanelProps\n  extends Omit<ComponentPropsWithoutRef<typeof RadixDialog.Root>, \"children\"> {\n  title?: string;\n  description?: string;\n  size?: VariantProps<typeof contentVariants>[\"size\"];\n  /** Footer content (e.g. primary/secondary action buttons). */\n  footer?: ComponentPropsWithoutRef<\"div\">[\"children\"];\n  /** Hide the title visually (kept for screen readers). */\n  hideTitle?: boolean;\n  children: ComponentPropsWithoutRef<\"div\">[\"children\"];\n}\n\n/**\n * All-in-one modal: Root + Overlay + Content + Header (title/description) +\n * Body (children) + optional Footer, with a close button that lives in the\n * header row (no overlap with title text). Drop down to\n * `<Modal><ModalContent>` for full composition control.\n */\nexport function ModalPanel({\n  title,\n  description,\n  size,\n  footer,\n  hideTitle,\n  children,\n  ...rootProps\n}: IModalPanelProps) {\n  const hasHeader = Boolean(title || description);\n  return (\n    <Modal {...rootProps}>\n      <ModalContent size={size} showCloseButton={!hasHeader}>\n        {hasHeader ? (\n          <ModalHeader>\n            <div className=\"flex items-start justify-between gap-2\">\n              <div className=\"flex min-w-0 flex-col gap-1\">\n                {title ? (\n                  hideTitle ? (\n                    <RadixDialog.Title className=\"sr-only\">{title}</RadixDialog.Title>\n                  ) : (\n                    <ModalTitle>{title}</ModalTitle>\n                  )\n                ) : null}\n                {description ? <ModalDescription>{description}</ModalDescription> : null}\n              </div>\n              <RadixDialog.Close className=\"shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\">\n                <CloseIcon />\n                <span className=\"sr-only\">Close</span>\n              </RadixDialog.Close>\n            </div>\n          </ModalHeader>\n        ) : null}\n        <div className=\"text-sm text-foreground\">{children}</div>\n        {footer ? <ModalFooter>{footer}</ModalFooter> : null}\n      </ModalContent>\n    </Modal>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/organisms/modal/modal.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Modal } from "./modal.js";
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;
+export declare const WithForm: Story;
+//# sourceMappingURL=modal.stories.d.ts.map

package/dist/components/organisms/modal/modal.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/modal/modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACL,KAAK,EAQN,MAAM,YAAY,CAAC;AAKpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAI5B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA4BtB,CAAC"}