@diwauhris/ui 1.0.0

package/lib/index36.cjs

@@ -0,0 +1,54 @@
+//#region src/ui-library/tokens/typography.ts
+var typography_exports = /* @__PURE__ */ require("./index2.cjs").__exportAll({ typography: () => typography });
+/**
+* DIWA Typography Tokens
+*
+* Formalizes the typographic vocabulary identified in the Phase 9 audit.
+* Values are Tailwind utility class strings.
+*
+* Two brand typefaces (defined in tailwind.config.js):
+*   font-heading  — Barlow (700/800) — headings, titles, overlay headers
+*   font-body     — Libre Franklin (variable) — all other UI text (inherited)
+*
+* Known inconsistency resolved in Phase 11:
+*   Modal and Dialog titles now both use typography.titleOverlay.
+*   Drawer title uses font-heading text-base font-bold directly — align in a future pass.
+*/
+var typography = {
+	/**
+	* Overlay title (Modal, Dialog, Drawer).
+	* Applied to: Modal (DialogPrimitive.Title) and Dialog (DialogPrimitive.Title).
+	* Drawer title uses font-heading text-base font-bold directly — align in a future pass.
+	*/
+	titleOverlay: "font-heading text-base font-bold leading-tight",
+	/**
+	* Section/card heading.
+	*/
+	titleSection: "font-heading text-sm font-bold text-slate-900",
+	/**
+	* Uppercase field label — used above form inputs.
+	*/
+	labelUppercase: "text-xs font-bold uppercase tracking-wide text-slate-500",
+	/**
+	* Helper/error text below form fields.
+	*/
+	helper: "text-xs font-medium",
+	/**
+	* Primary UI text — buttons, body, inputs, descriptions.
+	*/
+	body: "text-sm font-medium",
+	/**
+	* Secondary/supporting text.
+	*/
+	secondary: "text-xs font-medium text-slate-500"
+};
+//#endregion
+exports.typography = typography;
+Object.defineProperty(exports, "typography_exports", {
+	enumerable: true,
+	get: function() {
+		return typography_exports;
+	}
+});
+
+//# sourceMappingURL=index36.cjs.map

package/lib/index36.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index36.cjs","names":[],"sources":["../src/ui-library/tokens/typography.ts"],"sourcesContent":["/**\n * DIWA Typography Tokens\n *\n * Formalizes the typographic vocabulary identified in the Phase 9 audit.\n * Values are Tailwind utility class strings.\n *\n * Two brand typefaces (defined in tailwind.config.js):\n *   font-heading  — Barlow (700/800) — headings, titles, overlay headers\n *   font-body     — Libre Franklin (variable) — all other UI text (inherited)\n *\n * Known inconsistency resolved in Phase 11:\n *   Modal and Dialog titles now both use typography.titleOverlay.\n *   Drawer title uses font-heading text-base font-bold directly — align in a future pass.\n */\n\nexport const typography = {\n  // ── Heading roles ─────────────────────────────────────────────────────────\n\n  /**\n   * Overlay title (Modal, Dialog, Drawer).\n   * Applied to: Modal (DialogPrimitive.Title) and Dialog (DialogPrimitive.Title).\n   * Drawer title uses font-heading text-base font-bold directly — align in a future pass.\n   */\n  titleOverlay:   'font-heading text-base font-bold leading-tight',\n\n  /**\n   * Section/card heading.\n   */\n  titleSection:   'font-heading text-sm font-bold text-slate-900',\n\n  // ── Label roles ───────────────────────────────────────────────────────────\n\n  /**\n   * Uppercase field label — used above form inputs.\n   */\n  labelUppercase: 'text-xs font-bold uppercase tracking-wide text-slate-500',\n\n  /**\n   * Helper/error text below form fields.\n   */\n  helper:         'text-xs font-medium',\n\n  // ── Body roles ────────────────────────────────────────────────────────────\n\n  /**\n   * Primary UI text — buttons, body, inputs, descriptions.\n   */\n  body:           'text-sm font-medium',\n\n  /**\n   * Secondary/supporting text.\n   */\n  secondary:      'text-xs font-medium text-slate-500',\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,IAAa,aAAa;;;;;;CAQxB,cAAgB;;;;CAKhB,cAAgB;;;;CAOhB,gBAAgB;;;;CAKhB,QAAgB;;;;CAOhB,MAAgB;;;;CAKhB,WAAgB;AAClB"}

package/lib/index36.mjs

@@ -0,0 +1,49 @@
+import { __exportAll } from "./index2.mjs";
+//#region src/ui-library/tokens/typography.ts
+var typography_exports = /* @__PURE__ */ __exportAll({ typography: () => typography });
+/**
+* DIWA Typography Tokens
+*
+* Formalizes the typographic vocabulary identified in the Phase 9 audit.
+* Values are Tailwind utility class strings.
+*
+* Two brand typefaces (defined in tailwind.config.js):
+*   font-heading  — Barlow (700/800) — headings, titles, overlay headers
+*   font-body     — Libre Franklin (variable) — all other UI text (inherited)
+*
+* Known inconsistency resolved in Phase 11:
+*   Modal and Dialog titles now both use typography.titleOverlay.
+*   Drawer title uses font-heading text-base font-bold directly — align in a future pass.
+*/
+var typography = {
+	/**
+	* Overlay title (Modal, Dialog, Drawer).
+	* Applied to: Modal (DialogPrimitive.Title) and Dialog (DialogPrimitive.Title).
+	* Drawer title uses font-heading text-base font-bold directly — align in a future pass.
+	*/
+	titleOverlay: "font-heading text-base font-bold leading-tight",
+	/**
+	* Section/card heading.
+	*/
+	titleSection: "font-heading text-sm font-bold text-slate-900",
+	/**
+	* Uppercase field label — used above form inputs.
+	*/
+	labelUppercase: "text-xs font-bold uppercase tracking-wide text-slate-500",
+	/**
+	* Helper/error text below form fields.
+	*/
+	helper: "text-xs font-medium",
+	/**
+	* Primary UI text — buttons, body, inputs, descriptions.
+	*/
+	body: "text-sm font-medium",
+	/**
+	* Secondary/supporting text.
+	*/
+	secondary: "text-xs font-medium text-slate-500"
+};
+//#endregion
+export { typography, typography_exports };
+
+//# sourceMappingURL=index36.mjs.map

package/lib/index36.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index36.mjs","names":[],"sources":["../src/ui-library/tokens/typography.ts"],"sourcesContent":["/**\n * DIWA Typography Tokens\n *\n * Formalizes the typographic vocabulary identified in the Phase 9 audit.\n * Values are Tailwind utility class strings.\n *\n * Two brand typefaces (defined in tailwind.config.js):\n *   font-heading  — Barlow (700/800) — headings, titles, overlay headers\n *   font-body     — Libre Franklin (variable) — all other UI text (inherited)\n *\n * Known inconsistency resolved in Phase 11:\n *   Modal and Dialog titles now both use typography.titleOverlay.\n *   Drawer title uses font-heading text-base font-bold directly — align in a future pass.\n */\n\nexport const typography = {\n  // ── Heading roles ─────────────────────────────────────────────────────────\n\n  /**\n   * Overlay title (Modal, Dialog, Drawer).\n   * Applied to: Modal (DialogPrimitive.Title) and Dialog (DialogPrimitive.Title).\n   * Drawer title uses font-heading text-base font-bold directly — align in a future pass.\n   */\n  titleOverlay:   'font-heading text-base font-bold leading-tight',\n\n  /**\n   * Section/card heading.\n   */\n  titleSection:   'font-heading text-sm font-bold text-slate-900',\n\n  // ── Label roles ───────────────────────────────────────────────────────────\n\n  /**\n   * Uppercase field label — used above form inputs.\n   */\n  labelUppercase: 'text-xs font-bold uppercase tracking-wide text-slate-500',\n\n  /**\n   * Helper/error text below form fields.\n   */\n  helper:         'text-xs font-medium',\n\n  // ── Body roles ────────────────────────────────────────────────────────────\n\n  /**\n   * Primary UI text — buttons, body, inputs, descriptions.\n   */\n  body:           'text-sm font-medium',\n\n  /**\n   * Secondary/supporting text.\n   */\n  secondary:      'text-xs font-medium text-slate-500',\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,IAAa,aAAa;;;;;;CAQxB,cAAgB;;;;CAKhB,cAAgB;;;;CAOhB,gBAAgB;;;;CAKhB,QAAgB;;;;CAOhB,MAAgB;;;;CAKhB,WAAgB;AAClB"}

package/lib/index37.cjs

@@ -0,0 +1,130 @@
+const require_runtime = require("./index2.cjs");
+const require_utils = require("./index14.cjs");
+const require_typography = require("./index36.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("react");
+let lucide_react = require("lucide-react");
+let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+_radix_ui_react_dialog = require_runtime.__toESM(_radix_ui_react_dialog, 1);
+//#region src/ui-library/gallery/modal/Modal.tsx
+/**
+* Modal — Gallery-native dialog component.
+*
+* Behavior is provided by @radix-ui/react-dialog, which handles:
+*   - Focus trap (Tab / Shift+Tab contained within panel)
+*   - Focus restoration on close (correct on every open/close cycle)
+*   - Initial focus (first focusable element on open)
+*   - Escape key closes the modal
+*   - Outside-click (pointer-down) closes the modal
+*   - Body scroll lock while open
+*   - Portal rendering to document.body
+*   - role="dialog" + aria-modal + aria-labelledby + aria-describedby
+*
+* DIWA continues to own:
+*   - Public API: isOpen, onClose, title, icon, subtitle, headerMeta,
+*                 footer, onSubmit, submitLabel, submittingLabel, submitting,
+*                 danger, error, maxWidth, closeLabel, children
+*   - Backdrop visual treatment
+*   - Panel visual treatment (border, radius, shadow, max-height, max-width)
+*   - Header layout: icon badge, title, subtitle, headerMeta
+*   - Form wrapper (onSubmit branch)
+*   - Default footer buttons (Cancel + Submit)
+*   - Error display
+*   - Close button styling
+*   - Danger tone (rose badge, rose title, rose submit button)
+*/
+function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, footer, onSubmit, submitLabel = "Submit", submittingLabel = "Saving...", submitting = false, danger = false, error, maxWidth = "max-w-xl", closeLabel = "Close" }) {
+	const open = isOpen !== false;
+	const defaultFooter = onSubmit ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-end gap-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: onClose,
+			className: "px-4 py-2 text-sm font-bold text-slate-600 border border-slate-200 rounded-md hover:bg-slate-50 hover:border-slate-300 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children: "Cancel"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "submit",
+			disabled: submitting,
+			className: require_utils.cn("px-4 py-2 text-sm font-bold text-white rounded-md transition-all focus-visible:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed", danger ? "bg-rose-600 hover:bg-rose-700 focus-visible:ring-rose-300" : "bg-brand-blue hover:bg-brand-navy focus-visible:ring-brand-blue/30"),
+			children: submitting ? submittingLabel : submitLabel
+		})]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex items-center justify-end",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: onClose,
+			className: "px-4 py-2 text-sm font-bold text-slate-600 border border-slate-200 rounded-md hover:bg-slate-50 hover:border-slate-300 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children: "Cancel"
+		})
+	});
+	const resolvedFooter = footer ?? defaultFooter;
+	const iconBadgeClass = danger ? "flex h-8 w-8 items-center justify-center rounded-lg bg-rose-50 text-rose-600 shrink-0" : "flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-brand-blue shrink-0";
+	const bodyContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mb-4 rounded-lg border border-rose-100 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700",
+		children: error
+	}), children] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
+		open,
+		onOpenChange: (isOpen) => {
+			if (!isOpen) onClose();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+			className: require_utils.cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", "p-4", maxWidth),
+			style: { padding: 0 },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": closeLabel,
+						className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2.5",
+						children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: iconBadgeClass,
+							children: icon
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
+							className: require_utils.cn(require_typography.typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
+							children: title
+						}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
+							className: "text-xs text-slate-500 mt-0.5",
+							children: subtitle
+						})] })]
+					}), headerMeta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mt-2",
+						children: headerMeta
+					})]
+				}),
+				onSubmit ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					onSubmit,
+					className: "flex flex-col min-h-0 flex-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex-1 overflow-y-auto px-6 py-5",
+						children: bodyContent
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "px-6 py-4 border-t border-slate-100",
+						children: resolvedFooter
+					})]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex-1 overflow-y-auto px-6 py-5",
+					children: bodyContent
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "px-6 py-4 border-t border-slate-100",
+					children: resolvedFooter
+				})] })
+			]
+		})] })
+	});
+}
+//#endregion
+exports.default = Modal;
+
+//# sourceMappingURL=index37.cjs.map

package/lib/index37.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index37.cjs","names":[],"sources":["../src/ui-library/gallery/modal/Modal.tsx"],"sourcesContent":["/**\n * Modal — Gallery-native dialog component.\n *\n * Behavior is provided by @radix-ui/react-dialog, which handles:\n *   - Focus trap (Tab / Shift+Tab contained within panel)\n *   - Focus restoration on close (correct on every open/close cycle)\n *   - Initial focus (first focusable element on open)\n *   - Escape key closes the modal\n *   - Outside-click (pointer-down) closes the modal\n *   - Body scroll lock while open\n *   - Portal rendering to document.body\n *   - role=\"dialog\" + aria-modal + aria-labelledby + aria-describedby\n *\n * DIWA continues to own:\n *   - Public API: isOpen, onClose, title, icon, subtitle, headerMeta,\n *                 footer, onSubmit, submitLabel, submittingLabel, submitting,\n *                 danger, error, maxWidth, closeLabel, children\n *   - Backdrop visual treatment\n *   - Panel visual treatment (border, radius, shadow, max-height, max-width)\n *   - Header layout: icon badge, title, subtitle, headerMeta\n *   - Form wrapper (onSubmit branch)\n *   - Default footer buttons (Cancel + Submit)\n *   - Error display\n *   - Close button styling\n *   - Danger tone (rose badge, rose title, rose submit button)\n */\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { type ReactNode } from 'react';\nimport { X } from 'lucide-react';\nimport { cn } from '../../../lib/utils';\nimport { typography } from '../../tokens/typography';\n\nexport interface ModalProps {\n  isOpen?: boolean;\n  onClose: () => void;\n  title: ReactNode;\n  children: ReactNode;\n  icon?: ReactNode;\n  subtitle?: ReactNode;\n  headerMeta?: ReactNode;\n  footer?: ReactNode;\n  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;\n  submitLabel?: string;\n  submittingLabel?: string;\n  submitting?: boolean;\n  danger?: boolean;\n  error?: string;\n  maxWidth?: string;\n  closeLabel?: string;\n}\n\nexport default function Modal({\n  isOpen,\n  onClose,\n  title,\n  children,\n  icon,\n  subtitle,\n  headerMeta,\n  footer,\n  onSubmit,\n  submitLabel     = 'Submit',\n  submittingLabel = 'Saving...',\n  submitting      = false,\n  danger          = false,\n  error,\n  maxWidth        = 'max-w-xl',\n  closeLabel      = 'Close',\n}: ModalProps) {\n  // Radix open state: undefined isOpen means \"always mounted\" (the consumer\n  // controls mount/unmount externally). false means explicitly closed.\n  const open = isOpen !== false;\n\n  // Default footer — DIWA-owned form actions, no Radix involvement\n  const defaultFooter = onSubmit ? (\n    <div className=\"flex items-center justify-end gap-3\">\n      <button\n        type=\"button\"\n        onClick={onClose}\n        className=\"px-4 py-2 text-sm font-bold text-slate-600 border border-slate-200 rounded-md hover:bg-slate-50 hover:border-slate-300 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n      >\n        Cancel\n      </button>\n      <button\n        type=\"submit\"\n        disabled={submitting}\n        className={cn(\n          'px-4 py-2 text-sm font-bold text-white rounded-md transition-all focus-visible:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed',\n          danger\n            ? 'bg-rose-600 hover:bg-rose-700 focus-visible:ring-rose-300'\n            : 'bg-brand-blue hover:bg-brand-navy focus-visible:ring-brand-blue/30',\n        )}\n      >\n        {submitting ? submittingLabel : submitLabel}\n      </button>\n    </div>\n  ) : (\n    <div className=\"flex items-center justify-end\">\n      <button\n        type=\"button\"\n        onClick={onClose}\n        className=\"px-4 py-2 text-sm font-bold text-slate-600 border border-slate-200 rounded-md hover:bg-slate-50 hover:border-slate-300 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n      >\n        Cancel\n      </button>\n    </div>\n  );\n\n  const resolvedFooter = footer ?? defaultFooter;\n\n  const iconBadgeClass = danger\n    ? 'flex h-8 w-8 items-center justify-center rounded-lg bg-rose-50 text-rose-600 shrink-0'\n    : 'flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-brand-blue shrink-0';\n\n  const bodyContent = (\n    <>\n      {error && (\n        <div className=\"mb-4 rounded-lg border border-rose-100 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700\">\n          {error}\n        </div>\n      )}\n      {children}\n    </>\n  );\n\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      // Radix calls onOpenChange(false) on Escape or outside click.\n      // Route to DIWA's onClose — the existing behavior is always-closeable.\n      onOpenChange={(isOpen) => { if (!isOpen) onClose(); }}\n    >\n      <DialogPrimitive.Portal>\n        {/* Backdrop — DIWA visual treatment */}\n        <DialogPrimitive.Overlay\n          className=\"fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm\"\n        />\n\n        {/* Panel — DIWA visual treatment */}\n        <DialogPrimitive.Content\n          className={cn(\n            'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n            'flex w-full flex-col',\n            'rounded-lg border border-slate-200 bg-white shadow-xl',\n            'max-h-[85vh] outline-none',\n            'p-4',\n            maxWidth,\n          )}\n          style={{ padding: 0 }}\n          // Modal is always closeable — no preventClose equivalent in this API.\n          // Radix default (close on Escape + outside click) matches existing behavior.\n        >\n          {/* Close button — Radix Dialog.Close triggers onOpenChange(false) */}\n          <DialogPrimitive.Close asChild>\n            <button\n              type=\"button\"\n              aria-label={closeLabel}\n              className=\"absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n            >\n              <X size={16} aria-hidden=\"true\" />\n            </button>\n          </DialogPrimitive.Close>\n\n          {/* Header — DIWA-owned layout */}\n          <div className=\"px-6 pt-6 pb-4 border-b-2 border-slate-100\">\n            <div className=\"flex items-center gap-2.5\">\n              {icon && (\n                <div className={iconBadgeClass}>\n                  {icon}\n                </div>\n              )}\n              <div>\n                {/*\n                  DialogPrimitive.Title provides the aria-labelledby relationship\n                  automatically. DIWA visual classes are applied via className.\n                  title is ReactNode — can be string or JSX (e.g. with a badge).\n                */}\n                <DialogPrimitive.Title\n                  className={cn(\n                    typography.titleOverlay,\n                    danger ? 'text-rose-700' : 'text-slate-900',\n                  )}\n                >\n                  {title}\n                </DialogPrimitive.Title>\n                {subtitle && (\n                  // DialogPrimitive.Description provides aria-describedby when subtitle is present.\n                  <DialogPrimitive.Description className=\"text-xs text-slate-500 mt-0.5\">\n                    {subtitle}\n                  </DialogPrimitive.Description>\n                )}\n              </div>\n            </div>\n            {headerMeta && (\n              <div className=\"mt-2\">{headerMeta}</div>\n            )}\n          </div>\n\n          {/* Body + footer — form branch vs non-form branch, DIWA-owned */}\n          {onSubmit ? (\n            <form onSubmit={onSubmit} className=\"flex flex-col min-h-0 flex-1\">\n              <div className=\"flex-1 overflow-y-auto px-6 py-5\">\n                {bodyContent}\n              </div>\n              <div className=\"px-6 py-4 border-t border-slate-100\">\n                {resolvedFooter}\n              </div>\n            </form>\n          ) : (\n            <>\n              <div className=\"flex-1 overflow-y-auto px-6 py-5\">\n                {bodyContent}\n              </div>\n              <div className=\"px-6 py-4 border-t border-slate-100\">\n                {resolvedFooter}\n              </div>\n            </>\n          )}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/lib/index37.mjs

@@ -0,0 +1,128 @@
+import { cn } from "./index14.mjs";
+import { typography } from "./index36.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { X } from "lucide-react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+//#region src/ui-library/gallery/modal/Modal.tsx
+/**
+* Modal — Gallery-native dialog component.
+*
+* Behavior is provided by @radix-ui/react-dialog, which handles:
+*   - Focus trap (Tab / Shift+Tab contained within panel)
+*   - Focus restoration on close (correct on every open/close cycle)
+*   - Initial focus (first focusable element on open)
+*   - Escape key closes the modal
+*   - Outside-click (pointer-down) closes the modal
+*   - Body scroll lock while open
+*   - Portal rendering to document.body
+*   - role="dialog" + aria-modal + aria-labelledby + aria-describedby
+*
+* DIWA continues to own:
+*   - Public API: isOpen, onClose, title, icon, subtitle, headerMeta,
+*                 footer, onSubmit, submitLabel, submittingLabel, submitting,
+*                 danger, error, maxWidth, closeLabel, children
+*   - Backdrop visual treatment
+*   - Panel visual treatment (border, radius, shadow, max-height, max-width)
+*   - Header layout: icon badge, title, subtitle, headerMeta
+*   - Form wrapper (onSubmit branch)
+*   - Default footer buttons (Cancel + Submit)
+*   - Error display
+*   - Close button styling
+*   - Danger tone (rose badge, rose title, rose submit button)
+*/
+function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, footer, onSubmit, submitLabel = "Submit", submittingLabel = "Saving...", submitting = false, danger = false, error, maxWidth = "max-w-xl", closeLabel = "Close" }) {
+	const open = isOpen !== false;
+	const defaultFooter = onSubmit ? /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-end gap-3",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onClose,
+			className: "px-4 py-2 text-sm font-bold text-slate-600 border border-slate-200 rounded-md hover:bg-slate-50 hover:border-slate-300 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx("button", {
+			type: "submit",
+			disabled: submitting,
+			className: cn("px-4 py-2 text-sm font-bold text-white rounded-md transition-all focus-visible:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed", danger ? "bg-rose-600 hover:bg-rose-700 focus-visible:ring-rose-300" : "bg-brand-blue hover:bg-brand-navy focus-visible:ring-brand-blue/30"),
+			children: submitting ? submittingLabel : submitLabel
+		})]
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-end",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onClose,
+			className: "px-4 py-2 text-sm font-bold text-slate-600 border border-slate-200 rounded-md hover:bg-slate-50 hover:border-slate-300 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children: "Cancel"
+		})
+	});
+	const resolvedFooter = footer ?? defaultFooter;
+	const iconBadgeClass = danger ? "flex h-8 w-8 items-center justify-center rounded-lg bg-rose-50 text-rose-600 shrink-0" : "flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-brand-blue shrink-0";
+	const bodyContent = /* @__PURE__ */ jsxs(Fragment, { children: [error && /* @__PURE__ */ jsx("div", {
+		className: "mb-4 rounded-lg border border-rose-100 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700",
+		children: error
+	}), children] });
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		open,
+		onOpenChange: (isOpen) => {
+			if (!isOpen) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm" }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+			className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", "p-4", maxWidth),
+			style: { padding: 0 },
+			children: [
+				/* @__PURE__ */ jsx(DialogPrimitive.Close, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": closeLabel,
+						className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+						children: /* @__PURE__ */ jsx(X, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2.5",
+						children: [icon && /* @__PURE__ */ jsx("div", {
+							className: iconBadgeClass,
+							children: icon
+						}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
+							className: cn(typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
+							children: title
+						}), subtitle && /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+							className: "text-xs text-slate-500 mt-0.5",
+							children: subtitle
+						})] })]
+					}), headerMeta && /* @__PURE__ */ jsx("div", {
+						className: "mt-2",
+						children: headerMeta
+					})]
+				}),
+				onSubmit ? /* @__PURE__ */ jsxs("form", {
+					onSubmit,
+					className: "flex flex-col min-h-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex-1 overflow-y-auto px-6 py-5",
+						children: bodyContent
+					}), /* @__PURE__ */ jsx("div", {
+						className: "px-6 py-4 border-t border-slate-100",
+						children: resolvedFooter
+					})]
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-y-auto px-6 py-5",
+					children: bodyContent
+				}), /* @__PURE__ */ jsx("div", {
+					className: "px-6 py-4 border-t border-slate-100",
+					children: resolvedFooter
+				})] })
+			]
+		})] })
+	});
+}
+//#endregion
+export { Modal as default };
+
+//# sourceMappingURL=index37.mjs.map

package/lib/index37.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index37.mjs","names":[],"sources":["../src/ui-library/gallery/modal/Modal.tsx"],"sourcesContent":["/**\n * Modal — Gallery-native dialog component.\n *\n * Behavior is provided by @radix-ui/react-dialog, which handles:\n *   - Focus trap (Tab / Shift+Tab contained within panel)\n *   - Focus restoration on close (correct on every open/close cycle)\n *   - Initial focus (first focusable element on open)\n *   - Escape key closes the modal\n *   - Outside-click (pointer-down) closes the modal\n *   - Body scroll lock while open\n *   - Portal rendering to document.body\n *   - role=\"dialog\" + aria-modal + aria-labelledby + aria-describedby\n *\n * DIWA continues to own:\n *   - Public API: isOpen, onClose, title, icon, subtitle, headerMeta,\n *                 footer, onSubmit, submitLabel, submittingLabel, submitting,\n *                 danger, error, maxWidth, closeLabel, children\n *   - Backdrop visual treatment\n *   - Panel visual treatment (border, radius, shadow, max-height, max-width)\n *   - Header layout: icon badge, title, subtitle, headerMeta\n *   - Form wrapper (onSubmit branch)\n *   - Default footer buttons (Cancel + Submit)\n *   - Error display\n *   - Close button styling\n *   - Danger tone (rose badge, rose title, rose submit button)\n */\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { type ReactNode } from 'react';\nimport { X } from 'lucide-react';\nimport { cn } from '../../../lib/utils';\nimport { typography } from '../../tokens/typography';\n\nexport interface ModalProps {\n  isOpen?: boolean;\n  onClose: () => void;\n  title: ReactNode;\n  children: ReactNode;\n  icon?: ReactNode;\n  subtitle?: ReactNode;\n  headerMeta?: ReactNode;\n  footer?: ReactNode;\n  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;\n  submitLabel?: string;\n  submittingLabel?: string;\n  submitting?: boolean;\n  danger?: boolean;\n  error?: string;\n  maxWidth?: string;\n  closeLabel?: string;\n}\n\nexport default function Modal({\n  isOpen,\n  onClose,\n  title,\n  children,\n  icon,\n  subtitle,\n  headerMeta,\n  footer,\n  onSubmit,\n  submitLabel     = 'Submit',\n  submittingLabel = 'Saving...',\n  submitting      = false,\n  danger          = false,\n  error,\n  maxWidth        = 'max-w-xl',\n  closeLabel      = 'Close',\n}: ModalProps) {\n  // Radix open state: undefined isOpen means \"always mounted\" (the consumer\n  // controls mount/unmount externally). false means explicitly closed.\n  const open = isOpen !== false;\n\n  // Default footer — DIWA-owned form actions, no Radix involvement\n  const defaultFooter = onSubmit ? (\n    <div className=\"flex items-center justify-end gap-3\">\n      <button\n        type=\"button\"\n        onClick={onClose}\n        className=\"px-4 py-2 text-sm font-bold text-slate-600 border border-slate-200 rounded-md hover:bg-slate-50 hover:border-slate-300 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n      >\n        Cancel\n      </button>\n      <button\n        type=\"submit\"\n        disabled={submitting}\n        className={cn(\n          'px-4 py-2 text-sm font-bold text-white rounded-md transition-all focus-visible:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed',\n          danger\n            ? 'bg-rose-600 hover:bg-rose-700 focus-visible:ring-rose-300'\n            : 'bg-brand-blue hover:bg-brand-navy focus-visible:ring-brand-blue/30',\n        )}\n      >\n        {submitting ? submittingLabel : submitLabel}\n      </button>\n    </div>\n  ) : (\n    <div className=\"flex items-center justify-end\">\n      <button\n        type=\"button\"\n        onClick={onClose}\n        className=\"px-4 py-2 text-sm font-bold text-slate-600 border border-slate-200 rounded-md hover:bg-slate-50 hover:border-slate-300 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n      >\n        Cancel\n      </button>\n    </div>\n  );\n\n  const resolvedFooter = footer ?? defaultFooter;\n\n  const iconBadgeClass = danger\n    ? 'flex h-8 w-8 items-center justify-center rounded-lg bg-rose-50 text-rose-600 shrink-0'\n    : 'flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-brand-blue shrink-0';\n\n  const bodyContent = (\n    <>\n      {error && (\n        <div className=\"mb-4 rounded-lg border border-rose-100 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700\">\n          {error}\n        </div>\n      )}\n      {children}\n    </>\n  );\n\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      // Radix calls onOpenChange(false) on Escape or outside click.\n      // Route to DIWA's onClose — the existing behavior is always-closeable.\n      onOpenChange={(isOpen) => { if (!isOpen) onClose(); }}\n    >\n      <DialogPrimitive.Portal>\n        {/* Backdrop — DIWA visual treatment */}\n        <DialogPrimitive.Overlay\n          className=\"fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm\"\n        />\n\n        {/* Panel — DIWA visual treatment */}\n        <DialogPrimitive.Content\n          className={cn(\n            'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n            'flex w-full flex-col',\n            'rounded-lg border border-slate-200 bg-white shadow-xl',\n            'max-h-[85vh] outline-none',\n            'p-4',\n            maxWidth,\n          )}\n          style={{ padding: 0 }}\n          // Modal is always closeable — no preventClose equivalent in this API.\n          // Radix default (close on Escape + outside click) matches existing behavior.\n        >\n          {/* Close button — Radix Dialog.Close triggers onOpenChange(false) */}\n          <DialogPrimitive.Close asChild>\n            <button\n              type=\"button\"\n              aria-label={closeLabel}\n              className=\"absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n            >\n              <X size={16} aria-hidden=\"true\" />\n            </button>\n          </DialogPrimitive.Close>\n\n          {/* Header — DIWA-owned layout */}\n          <div className=\"px-6 pt-6 pb-4 border-b-2 border-slate-100\">\n            <div className=\"flex items-center gap-2.5\">\n              {icon && (\n                <div className={iconBadgeClass}>\n                  {icon}\n                </div>\n              )}\n              <div>\n                {/*\n                  DialogPrimitive.Title provides the aria-labelledby relationship\n                  automatically. DIWA visual classes are applied via className.\n                  title is ReactNode — can be string or JSX (e.g. with a badge).\n                */}\n                <DialogPrimitive.Title\n                  className={cn(\n                    typography.titleOverlay,\n                    danger ? 'text-rose-700' : 'text-slate-900',\n                  )}\n                >\n                  {title}\n                </DialogPrimitive.Title>\n                {subtitle && (\n                  // DialogPrimitive.Description provides aria-describedby when subtitle is present.\n                  <DialogPrimitive.Description className=\"text-xs text-slate-500 mt-0.5\">\n                    {subtitle}\n                  </DialogPrimitive.Description>\n                )}\n              </div>\n            </div>\n            {headerMeta && (\n              <div className=\"mt-2\">{headerMeta}</div>\n            )}\n          </div>\n\n          {/* Body + footer — form branch vs non-form branch, DIWA-owned */}\n          {onSubmit ? (\n            <form onSubmit={onSubmit} className=\"flex flex-col min-h-0 flex-1\">\n              <div className=\"flex-1 overflow-y-auto px-6 py-5\">\n                {bodyContent}\n              </div>\n              <div className=\"px-6 py-4 border-t border-slate-100\">\n                {resolvedFooter}\n              </div>\n            </form>\n          ) : (\n            <>\n              <div className=\"flex-1 overflow-y-auto px-6 py-5\">\n                {bodyContent}\n              </div>\n              <div className=\"px-6 py-4 border-t border-slate-100\">\n                {resolvedFooter}\n              </div>\n            </>\n          )}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,SAAwB,MAAM,EAC5B,QACA,SACA,OACA,UACA,MACA,UACA,YACA,QACA,UACA,cAAkB,UAClB,kBAAkB,aAClB,aAAkB,OAClB,SAAkB,OAClB,OACA,WAAkB,YAClB,aAAkB,WACL;CAGb,MAAM,OAAO,WAAW;CAGxB,MAAM,gBAAgB,WACpB,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAU;GACX,UAAA;EAEO,CAAA,GACR,oBAAC,UAAD;GACE,MAAK;GACL,UAAU;GACV,WAAW,GACT,oKACA,SACI,8DACA,oEACN;GAEC,UAAA,aAAa,kBAAkB;EAC1B,CAAA,CACL;CAEL,CAAA,IAAA,oBAAC,OAAD;EAAK,WAAU;EACb,UAAA,oBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAU;GACX,UAAA;EAEO,CAAA;CACL,CAAA;CAGP,MAAM,iBAAiB,UAAU;CAEjC,MAAM,iBAAiB,SACnB,0FACA;CAEJ,MAAM,cACJ,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,OAAD;EAAK,WAAU;EACZ,UAAA;CACE,CAAA,GAEN,QACD,EAAA,CAAA;CAGJ,OACE,oBAAC,gBAAgB,MAAjB;EACQ;EAGN,eAAe,WAAW;GAAE,IAAI,CAAC,QAAQ,QAAQ;EAAG;EAEpD,UAAA,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CAEE,oBAAC,gBAAgB,SAAjB,EACE,WAAU,uDACX,CAAA,GAGD,qBAAC,gBAAgB,SAAjB;GACE,WAAW,GACT,iEACA,wBACA,yDACA,6BACA,OACA,QACF;GACA,OAAO,EAAE,SAAS,EAAE;GATtB,UAAA;IAcE,oBAAC,gBAAgB,OAAjB;KAAuB,SAAA;KACrB,UAAA,oBAAC,UAAD;MACE,MAAK;MACL,cAAY;MACZ,WAAU;MAEV,UAAA,oBAAC,GAAD;OAAG,MAAM;OAAI,eAAY;MAAQ,CAAA;KAC3B,CAAA;IACa,CAAA;IAGvB,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACG,QACC,oBAAC,OAAD;OAAK,WAAW;OACb,UAAA;MACE,CAAA,GAEP,qBAAC,OAAD,EAAA,UAAA,CAME,oBAAC,gBAAgB,OAAjB;OACE,WAAW,GACT,WAAW,cACX,SAAS,kBAAkB,gBAC7B;OAEC,UAAA;MACoB,CAAA,GACtB,YAEC,oBAAC,gBAAgB,aAAjB;OAA6B,WAAU;OACpC,UAAA;MAC0B,CAAA,CAE5B,EAAA,CAAA,CACF;KACJ,CAAA,GAAA,cACC,oBAAC,OAAD;MAAK,WAAU;MAAQ,UAAA;KAAgB,CAAA,CAEtC;;IAGJ,WACC,qBAAC,QAAD;KAAgB;KAAU,WAAU;KAApC,UAAA,CACE,oBAAC,OAAD;MAAK,WAAU;MACZ,UAAA;KACE,CAAA,GACL,oBAAC,OAAD;MAAK,WAAU;MACZ,UAAA;KACE,CAAA,CACD;IAEN,CAAA,IAAA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA,CACL,EAAA,CAAA;GAEmB;EACH,CAAA,CAAA,EAAA,CAAA;CACJ,CAAA;AAE1B"}

package/lib/index38.cjs

@@ -0,0 +1,106 @@
+const require_runtime = require("./index2.cjs");
+const require_utils = require("./index14.cjs");
+const require_typography = require("./index36.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("react");
+let lucide_react = require("lucide-react");
+let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+_radix_ui_react_dialog = require_runtime.__toESM(_radix_ui_react_dialog, 1);
+//#region src/ui-library/gallery/dialog/Dialog.tsx
+/**
+* Dialog — Design System Component
+*
+* A focus-blocking modal dialog.
+*
+* Behavior is provided by @radix-ui/react-dialog, which handles:
+*   - Focus trap (Tab / Shift+Tab contained within dialog)
+*   - Focus restoration (returns to trigger on close)
+*   - Escape key dismissal (unless preventClose)
+*   - Backdrop interaction dismissal (unless preventClose)
+*   - Body scroll lock while open
+*   - Portal rendering to document.body
+*   - role="dialog" + aria-modal + aria-labelledby + aria-describedby
+*   - Modal semantics
+*
+* DIWA continues to own:
+*   - Public API (open, onClose, title, description, size, preventClose, children)
+*   - Backdrop visual treatment
+*   - Panel visual treatment (bg, border, radius, shadow, sizing)
+*   - Header layout and typography
+*   - Close button styling
+*   - DialogBody and DialogFooter layout
+*
+* Composition:
+*   <Dialog open={open} onClose={close} title="…">
+*     <DialogBody>…</DialogBody>
+*     <DialogFooter>…</DialogFooter>
+*   </Dialog>
+*/
+var SIZE_CLASS = {
+	sm: "max-w-sm",
+	md: "max-w-lg",
+	lg: "max-w-2xl",
+	xl: "max-w-4xl"
+};
+function DialogBody({ children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `min-h-0 overflow-y-auto overscroll-contain px-6 py-4 ${className}`,
+		children
+	});
+}
+function DialogFooter({ children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `flex items-center justify-end gap-3 border-t border-slate-100 px-6 py-4 ${className}`,
+		children
+	});
+}
+function Dialog({ open, onClose, title, description, preventClose = false, size = "md", children }) {
+	const hasTitle = Boolean(title);
+	const hasDesc = Boolean(description);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
+		open,
+		onOpenChange: (isOpen) => {
+			if (!isOpen && !preventClose) onClose();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+			className: require_utils.cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", "p-4", SIZE_CLASS[size]),
+			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : void 0,
+			onInteractOutside: preventClose ? (e) => e.preventDefault() : void 0,
+			style: { padding: 0 },
+			children: [
+				hasTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "shrink-0 border-b-2 border-slate-100 px-6 py-5 pr-14",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
+						className: require_utils.cn(require_typography.typography.titleOverlay, "text-slate-900"),
+						children: title
+					}), hasDesc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
+						className: "mt-0.5 text-sm font-medium text-slate-500",
+						children: description
+					})]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
+					className: "sr-only",
+					children: "Dialog"
+				}),
+				!preventClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": "Close dialog",
+						className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					})
+				}),
+				children
+			]
+		})] })
+	});
+}
+//#endregion
+exports.Dialog = Dialog;
+exports.DialogBody = DialogBody;
+exports.DialogFooter = DialogFooter;
+
+//# sourceMappingURL=index38.cjs.map

package/lib/index38.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index38.cjs","names":[],"sources":["../src/ui-library/gallery/dialog/Dialog.tsx"],"sourcesContent":["/**\n * Dialog — Design System Component\n *\n * A focus-blocking modal dialog.\n *\n * Behavior is provided by @radix-ui/react-dialog, which handles:\n *   - Focus trap (Tab / Shift+Tab contained within dialog)\n *   - Focus restoration (returns to trigger on close)\n *   - Escape key dismissal (unless preventClose)\n *   - Backdrop interaction dismissal (unless preventClose)\n *   - Body scroll lock while open\n *   - Portal rendering to document.body\n *   - role=\"dialog\" + aria-modal + aria-labelledby + aria-describedby\n *   - Modal semantics\n *\n * DIWA continues to own:\n *   - Public API (open, onClose, title, description, size, preventClose, children)\n *   - Backdrop visual treatment\n *   - Panel visual treatment (bg, border, radius, shadow, sizing)\n *   - Header layout and typography\n *   - Close button styling\n *   - DialogBody and DialogFooter layout\n *\n * Composition:\n *   <Dialog open={open} onClose={close} title=\"…\">\n *     <DialogBody>…</DialogBody>\n *     <DialogFooter>…</DialogFooter>\n *   </Dialog>\n */\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { type ReactNode } from 'react';\nimport { X } from 'lucide-react';\nimport { cn } from '../../../lib/utils';\nimport { typography } from '../../tokens/typography';\n\nexport type DialogSize = 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface DialogProps {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  description?: string;\n  /** When true, Escape and backdrop click will not close the dialog */\n  preventClose?: boolean;\n  size?: DialogSize;\n  children?: ReactNode;\n}\n\nexport interface DialogBodyProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport interface DialogFooterProps {\n  children: ReactNode;\n  className?: string;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\nconst SIZE_CLASS: Record<DialogSize, string> = {\n  sm: 'max-w-sm',\n  md: 'max-w-lg',\n  lg: 'max-w-2xl',\n  xl: 'max-w-4xl',\n};\n\n// ── Sub-components — pure DIWA layout, no Radix involvement ──────────────────\n\nexport function DialogBody({ children, className = '' }: DialogBodyProps) {\n  return (\n    <div className={`min-h-0 overflow-y-auto overscroll-contain px-6 py-4 ${className}`}>\n      {children}\n    </div>\n  );\n}\n\nexport function DialogFooter({ children, className = '' }: DialogFooterProps) {\n  return (\n    <div className={`flex items-center justify-end gap-3 border-t border-slate-100 px-6 py-4 ${className}`}>\n      {children}\n    </div>\n  );\n}\n\n// ── Main component ────────────────────────────────────────────────────────────\n\nexport function Dialog({\n  open,\n  onClose,\n  title,\n  description,\n  preventClose = false,\n  size = 'md',\n  children,\n}: DialogProps) {\n  const hasTitle = Boolean(title);\n  const hasDesc  = Boolean(description);\n\n  return (\n    // Radix Dialog.Root drives open/close state.\n    // onOpenChange is called when Radix wants to close (Escape, outside click).\n    // We route it through DIWA's onClose, respecting preventClose.\n    <DialogPrimitive.Root\n      open={open}\n      onOpenChange={(isOpen) => {\n        // Radix calls onOpenChange(false) when closing.\n        // Ignore opening attempts from Radix (we control open externally).\n        if (!isOpen && !preventClose) onClose();\n      }}\n    >\n      <DialogPrimitive.Portal>\n        {/* Backdrop — DIWA visual treatment */}\n        <DialogPrimitive.Overlay\n          className=\"fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm\"\n        />\n\n        {/* Panel — DIWA visual treatment */}\n        <DialogPrimitive.Content\n          className={cn(\n            'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n            'flex w-full flex-col overflow-hidden',\n            'rounded-lg bg-white shadow-xl',\n            'max-h-[90vh] outline-none',\n            'p-4',\n            SIZE_CLASS[size],\n          )}\n          // Suppress Radix's own Escape/outside-click when preventClose is set.\n          // Radix calls these before triggering onOpenChange, so preventing here\n          // ensures neither the overlay nor keyboard can dismiss the dialog.\n          onEscapeKeyDown={preventClose ? (e) => e.preventDefault() : undefined}\n          onInteractOutside={preventClose ? (e) => e.preventDefault() : undefined}\n          // Remove padding added by className — override with our layout below\n          style={{ padding: 0 }}\n        >\n          {/* Radix requires Dialog.Title for accessible naming.\n              Render it visually when title prop is provided.\n              When absent, render sr-only so Radix's ARIA wiring works\n              without adding visible text the consumer didn't request. */}\n          {hasTitle ? (\n            // Header — visible when title or description are provided\n            <div className=\"shrink-0 border-b-2 border-slate-100 px-6 py-5 pr-14\">\n              <DialogPrimitive.Title className={cn(typography.titleOverlay, 'text-slate-900')}>\n                {title}\n              </DialogPrimitive.Title>\n              {hasDesc && (\n                <DialogPrimitive.Description className=\"mt-0.5 text-sm font-medium text-slate-500\">\n                  {description}\n                </DialogPrimitive.Description>\n              )}\n            </div>\n          ) : (\n            // No visible title — render sr-only for Radix ARIA requirement\n            <DialogPrimitive.Title className=\"sr-only\">\n              Dialog\n            </DialogPrimitive.Title>\n          )}\n\n          {/* Close button — uses Radix Dialog.Close so it participates\n              in the Radix open/close flow. asChild avoids an extra DOM node. */}\n          {!preventClose && (\n            <DialogPrimitive.Close asChild>\n              <button\n                type=\"button\"\n                aria-label=\"Close dialog\"\n                className=\"absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n              >\n                <X size={16} aria-hidden=\"true\" />\n              </button>\n            </DialogPrimitive.Close>\n          )}\n\n          {/* Content — children contain DialogBody + DialogFooter */}\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,IAAM,aAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,SAAgB,WAAW,EAAE,UAAU,YAAY,MAAuB;CACxE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,wDAAwD;EACrE;CACE,CAAA;AAET;AAEA,SAAgB,aAAa,EAAE,UAAU,YAAY,MAAyB;CAC5E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,2EAA2E;EACxF;CACE,CAAA;AAET;AAIA,SAAgB,OAAO,EACrB,MACA,SACA,OACA,aACA,eAAe,OACf,OAAO,MACP,YACc;CACd,MAAM,WAAW,QAAQ,KAAK;CAC9B,MAAM,UAAW,QAAQ,WAAW;CAEpC,OAIE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,MAAjB;EACQ;EACN,eAAe,WAAW;GAGxB,IAAI,CAAC,UAAU,CAAC,cAAc,QAAQ;EACxC;EAEA,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,uBAAgB,QAAjB,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,SAAjB,EACE,WAAU,uDACX,CAAA,GAGD,iBAAA,GAAA,kBAAA,KAAA,CAAC,uBAAgB,SAAjB;GACE,WAAW,cAAA,GACT,iEACA,wCACA,iCACA,6BACA,OACA,WAAW,KACb;GAIA,iBAAiB,gBAAgB,MAAM,EAAE,eAAe,IAAI,KAAA;GAC5D,mBAAmB,gBAAgB,MAAM,EAAE,eAAe,IAAI,KAAA;GAE9D,OAAO,EAAE,SAAS,EAAE;GAftB,UAAA;IAqBG,WAEC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,OAAjB;MAAuB,WAAW,cAAA,GAAG,mBAAA,WAAW,cAAc,gBAAgB;MAC3E,UAAA;KACoB,CAAA,GACtB,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,aAAjB;MAA6B,WAAU;MACpC,UAAA;KAC0B,CAAA,CAE5B;IAGL,CAAA,IAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,OAAjB;KAAuB,WAAU;KAAU,UAAA;IAEpB,CAAA;IAKxB,CAAC,gBACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,OAAjB;KAAuB,SAAA;KACrB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;MACE,MAAK;MACL,cAAW;MACX,WAAU;MAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,GAAD;OAAG,MAAM;OAAI,eAAY;MAAQ,CAAA;KAC3B,CAAA;IACa,CAAA;IAIxB;GACsB;EACH,CAAA,CAAA,EAAA,CAAA;CACJ,CAAA;AAE1B"}