@diwauhris/ui 1.0.0

package/lib/index38.mjs

@@ -0,0 +1,102 @@
+import { cn } from "./index14.mjs";
+import { typography } from "./index36.mjs";
+import { 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/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__ */ jsx("div", {
+		className: `min-h-0 overflow-y-auto overscroll-contain px-6 py-4 ${className}`,
+		children
+	});
+}
+function DialogFooter({ children, className = "" }) {
+	return /* @__PURE__ */ 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__ */ jsx(DialogPrimitive.Root, {
+		open,
+		onOpenChange: (isOpen) => {
+			if (!isOpen && !preventClose) 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 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__ */ jsxs("div", {
+					className: "shrink-0 border-b-2 border-slate-100 px-6 py-5 pr-14",
+					children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
+						className: cn(typography.titleOverlay, "text-slate-900"),
+						children: title
+					}), hasDesc && /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+						className: "mt-0.5 text-sm font-medium text-slate-500",
+						children: description
+					})]
+				}) : /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+					className: "sr-only",
+					children: "Dialog"
+				}),
+				!preventClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+					asChild: true,
+					children: /* @__PURE__ */ 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__ */ jsx(X, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					})
+				}),
+				children
+			]
+		})] })
+	});
+}
+//#endregion
+export { Dialog, DialogBody, DialogFooter };
+
+//# sourceMappingURL=index38.mjs.map

package/lib/index38.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index38.mjs","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,oBAAC,OAAD;EAAK,WAAW,wDAAwD;EACrE;CACE,CAAA;AAET;AAEA,SAAgB,aAAa,EAAE,UAAU,YAAY,MAAyB;CAC5E,OACE,oBAAC,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,oBAAC,gBAAgB,MAAjB;EACQ;EACN,eAAe,WAAW;GAGxB,IAAI,CAAC,UAAU,CAAC,cAAc,QAAQ;EACxC;EAEA,UAAA,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CAEE,oBAAC,gBAAgB,SAAjB,EACE,WAAU,uDACX,CAAA,GAGD,qBAAC,gBAAgB,SAAjB;GACE,WAAW,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,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,gBAAgB,OAAjB;MAAuB,WAAW,GAAG,WAAW,cAAc,gBAAgB;MAC3E,UAAA;KACoB,CAAA,GACtB,WACC,oBAAC,gBAAgB,aAAjB;MAA6B,WAAU;MACpC,UAAA;KAC0B,CAAA,CAE5B;IAGL,CAAA,IAAA,oBAAC,gBAAgB,OAAjB;KAAuB,WAAU;KAAU,UAAA;IAEpB,CAAA;IAKxB,CAAC,gBACA,oBAAC,gBAAgB,OAAjB;KAAuB,SAAA;KACrB,UAAA,oBAAC,UAAD;MACE,MAAK;MACL,cAAW;MACX,WAAU;MAEV,UAAA,oBAAC,GAAD;OAAG,MAAM;OAAI,eAAY;MAAQ,CAAA;KAC3B,CAAA;IACa,CAAA;IAIxB;GACsB;EACH,CAAA,CAAA,EAAA,CAAA;CACJ,CAAA;AAE1B"}

package/lib/index39.cjs

@@ -0,0 +1,137 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lucide_react = require("lucide-react");
+let react_dom = require("react-dom");
+//#region src/ui-library/gallery/drawer/Drawer.tsx
+/**
+* Drawer — Design System Component
+*
+* A slide-in panel anchored to the screen edge. Supports right (default)
+* and bottom placements.
+*
+* Adaptation note: framer-motion animation replaced with CSS transitions
+* (translate + opacity) for the standalone gallery which does not include
+* framer-motion as a dependency.
+*/
+var FOCUSABLE = "a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
+var PLACEMENT_PANEL_CLASS = {
+	right: "fixed top-0 right-0 bottom-0 flex flex-col",
+	bottom: "fixed bottom-0 left-0 right-0 flex flex-col rounded-t-xl"
+};
+function Drawer({ open, onClose, title, description, placement = "right", width = "w-80", maxHeight = "max-h-[85vh]", closeLabel = "Close drawer", children }) {
+	const panelRef = (0, react.useRef)(null);
+	const titleId = (0, react.useId)();
+	const [rendered, setRendered] = (0, react.useState)(open);
+	const [visible, setVisible] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (open) {
+			setRendered(true);
+			requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+		} else {
+			setVisible(false);
+			const timer = window.setTimeout(() => setRendered(false), 300);
+			return () => window.clearTimeout(timer);
+		}
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const prevOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		const timer = window.setTimeout(() => {
+			const panel = panelRef.current;
+			((panel ? Array.from(panel.querySelectorAll(FOCUSABLE)) : [])[0] ?? panel)?.focus();
+		}, 0);
+		return () => {
+			window.clearTimeout(timer);
+			document.body.style.overflow = prevOverflow;
+			previousFocus?.focus();
+		};
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onClose();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			const panel = panelRef.current;
+			if (!panel) return;
+			const focusable = Array.from(panel.querySelectorAll(FOCUSABLE));
+			if (!focusable.length) {
+				e.preventDefault();
+				panel.focus();
+				return;
+			}
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			if (e.shiftKey && document.activeElement === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && document.activeElement === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose]);
+	if (!rendered) return null;
+	const panelClass = [
+		PLACEMENT_PANEL_CLASS[placement],
+		placement === "right" ? width : maxHeight,
+		"bg-white shadow-xl focus:outline-none",
+		placement === "bottom" ? "overflow-y-auto" : "overflow-hidden",
+		"transition-transform duration-300 ease-out",
+		placement === "right" ? visible ? "translate-x-0" : "translate-x-full" : visible ? "translate-y-0" : "translate-y-full"
+	].filter(Boolean).join(" ");
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "fixed inset-0 z-50",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `fixed inset-0 bg-brand-navy/50 backdrop-blur-sm transition-opacity duration-200 ${visible ? "opacity-100" : "opacity-0"}`,
+			onClick: onClose,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: panelRef,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			"aria-describedby": description ? `${titleId}-desc` : void 0,
+			tabIndex: -1,
+			className: panelClass,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between px-5 py-4 border-b-2 border-slate-100 shrink-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						id: titleId,
+						className: "font-heading text-base font-bold text-slate-900 truncate",
+						children: title
+					}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						id: `${titleId}-desc`,
+						className: "text-xs text-slate-500 mt-0.5",
+						children: description
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: onClose,
+					"aria-label": closeLabel,
+					className: "ml-3 shrink-0 flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700 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.jsx)("div", {
+				className: "flex-1 overflow-y-auto px-5 py-4",
+				children
+			})]
+		})]
+	}), document.body);
+}
+//#endregion
+exports.Drawer = Drawer;
+
+//# sourceMappingURL=index39.cjs.map

package/lib/index39.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index39.cjs","names":[],"sources":["../src/ui-library/gallery/drawer/Drawer.tsx"],"sourcesContent":["/**\n * Drawer — Design System Component\n *\n * A slide-in panel anchored to the screen edge. Supports right (default)\n * and bottom placements.\n *\n * Adaptation note: framer-motion animation replaced with CSS transitions\n * (translate + opacity) for the standalone gallery which does not include\n * framer-motion as a dependency.\n */\n\nimport { useEffect, useId, useRef, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { X } from 'lucide-react';\n\nexport type DrawerPlacement = 'right' | 'bottom';\n\nexport interface DrawerProps {\n  open: boolean;\n  onClose: () => void;\n  title: ReactNode;\n  description?: string;\n  placement?: DrawerPlacement;\n  width?: string;\n  maxHeight?: string;\n  closeLabel?: string;\n  children: ReactNode;\n}\n\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nconst PLACEMENT_PANEL_CLASS: Record<DrawerPlacement, string> = {\n  right:  'fixed top-0 right-0 bottom-0 flex flex-col',\n  bottom: 'fixed bottom-0 left-0 right-0 flex flex-col rounded-t-xl',\n};\n\nexport function Drawer({\n  open,\n  onClose,\n  title,\n  description,\n  placement = 'right',\n  width = 'w-80',\n  maxHeight = 'max-h-[85vh]',\n  closeLabel = 'Close drawer',\n  children,\n}: DrawerProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const titleId  = useId();\n  // rendered tracks whether the portal is mounted at all\n  const [rendered, setRendered] = useState(open);\n  // visible tracks the CSS transition state\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setRendered(true);\n      // Allow the element to mount before starting the transition\n      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));\n    } else {\n      setVisible(false);\n      // Remove from DOM after transition completes\n      const timer = window.setTimeout(() => setRendered(false), 300);\n      return () => window.clearTimeout(timer);\n    }\n  }, [open]);\n\n  // Effect 1: scroll lock + initial focus + focus restoration\n  useEffect(() => {\n    if (!open) return;\n    const previousFocus = document.activeElement instanceof HTMLElement\n      ? document.activeElement : null;\n    const prevOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n\n    const timer = window.setTimeout(() => {\n      const panel = panelRef.current;\n      const focusable = panel ? Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE)) : [];\n      (focusable[0] ?? panel)?.focus();\n    }, 0);\n\n    return () => {\n      window.clearTimeout(timer);\n      document.body.style.overflow = prevOverflow;\n      previousFocus?.focus();\n    };\n  }, [open]);\n\n  // Effect 2: keyboard — Escape + focus trap\n  useEffect(() => {\n    if (!open) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') { e.preventDefault(); onClose(); return; }\n      if (e.key !== 'Tab') return;\n      const panel = panelRef.current;\n      if (!panel) return;\n      const focusable = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE));\n      if (!focusable.length) { e.preventDefault(); panel.focus(); return; }\n      const first = focusable[0];\n      const last  = focusable[focusable.length - 1];\n      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }\n      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open, onClose]);\n\n  if (!rendered) return null;\n\n  const panelClass = [\n    PLACEMENT_PANEL_CLASS[placement],\n    placement === 'right' ? width : maxHeight,\n    'bg-white shadow-xl focus:outline-none',\n    placement === 'bottom' ? 'overflow-y-auto' : 'overflow-hidden',\n    'transition-transform duration-300 ease-out',\n    placement === 'right'\n      ? (visible ? 'translate-x-0' : 'translate-x-full')\n      : (visible ? 'translate-y-0' : 'translate-y-full'),\n  ].filter(Boolean).join(' ');\n\n  return createPortal(\n    <div className=\"fixed inset-0 z-50\">\n      {/* Backdrop */}\n      <div\n        className={`fixed inset-0 bg-brand-navy/50 backdrop-blur-sm transition-opacity duration-200 ${visible ? 'opacity-100' : 'opacity-0'}`}\n        onClick={onClose}\n        aria-hidden=\"true\"\n      />\n\n      {/* Panel */}\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={description ? `${titleId}-desc` : undefined}\n        tabIndex={-1}\n        className={panelClass}\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-5 py-4 border-b-2 border-slate-100 shrink-0\">\n          <div className=\"min-w-0\">\n            <h2 id={titleId} className=\"font-heading text-base font-bold text-slate-900 truncate\">\n              {title}\n            </h2>\n            {description && (\n              <p id={`${titleId}-desc`} className=\"text-xs text-slate-500 mt-0.5\">\n                {description}\n              </p>\n            )}\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            aria-label={closeLabel}\n            className=\"ml-3 shrink-0 flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700 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        </div>\n\n        {/* Scrollable body */}\n        <div className=\"flex-1 overflow-y-auto px-5 py-4\">\n          {children}\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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"}

package/lib/index39.mjs

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { createPortal } from "react-dom";
+//#region src/ui-library/gallery/drawer/Drawer.tsx
+/**
+* Drawer — Design System Component
+*
+* A slide-in panel anchored to the screen edge. Supports right (default)
+* and bottom placements.
+*
+* Adaptation note: framer-motion animation replaced with CSS transitions
+* (translate + opacity) for the standalone gallery which does not include
+* framer-motion as a dependency.
+*/
+var FOCUSABLE = "a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
+var PLACEMENT_PANEL_CLASS = {
+	right: "fixed top-0 right-0 bottom-0 flex flex-col",
+	bottom: "fixed bottom-0 left-0 right-0 flex flex-col rounded-t-xl"
+};
+function Drawer({ open, onClose, title, description, placement = "right", width = "w-80", maxHeight = "max-h-[85vh]", closeLabel = "Close drawer", children }) {
+	const panelRef = useRef(null);
+	const titleId = useId();
+	const [rendered, setRendered] = useState(open);
+	const [visible, setVisible] = useState(false);
+	useEffect(() => {
+		if (open) {
+			setRendered(true);
+			requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+		} else {
+			setVisible(false);
+			const timer = window.setTimeout(() => setRendered(false), 300);
+			return () => window.clearTimeout(timer);
+		}
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const prevOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		const timer = window.setTimeout(() => {
+			const panel = panelRef.current;
+			((panel ? Array.from(panel.querySelectorAll(FOCUSABLE)) : [])[0] ?? panel)?.focus();
+		}, 0);
+		return () => {
+			window.clearTimeout(timer);
+			document.body.style.overflow = prevOverflow;
+			previousFocus?.focus();
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onClose();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			const panel = panelRef.current;
+			if (!panel) return;
+			const focusable = Array.from(panel.querySelectorAll(FOCUSABLE));
+			if (!focusable.length) {
+				e.preventDefault();
+				panel.focus();
+				return;
+			}
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			if (e.shiftKey && document.activeElement === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && document.activeElement === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose]);
+	if (!rendered) return null;
+	const panelClass = [
+		PLACEMENT_PANEL_CLASS[placement],
+		placement === "right" ? width : maxHeight,
+		"bg-white shadow-xl focus:outline-none",
+		placement === "bottom" ? "overflow-y-auto" : "overflow-hidden",
+		"transition-transform duration-300 ease-out",
+		placement === "right" ? visible ? "translate-x-0" : "translate-x-full" : visible ? "translate-y-0" : "translate-y-full"
+	].filter(Boolean).join(" ");
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-50",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: `fixed inset-0 bg-brand-navy/50 backdrop-blur-sm transition-opacity duration-200 ${visible ? "opacity-100" : "opacity-0"}`,
+			onClick: onClose,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: panelRef,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			"aria-describedby": description ? `${titleId}-desc` : void 0,
+			tabIndex: -1,
+			className: panelClass,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-5 py-4 border-b-2 border-slate-100 shrink-0",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: "font-heading text-base font-bold text-slate-900 truncate",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						id: `${titleId}-desc`,
+						className: "text-xs text-slate-500 mt-0.5",
+						children: description
+					})]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClose,
+					"aria-label": closeLabel,
+					className: "ml-3 shrink-0 flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700 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__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto px-5 py-4",
+				children
+			})]
+		})]
+	}), document.body);
+}
+//#endregion
+export { Drawer };
+
+//# sourceMappingURL=index39.mjs.map

package/lib/index39.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index39.mjs","names":[],"sources":["../src/ui-library/gallery/drawer/Drawer.tsx"],"sourcesContent":["/**\n * Drawer — Design System Component\n *\n * A slide-in panel anchored to the screen edge. Supports right (default)\n * and bottom placements.\n *\n * Adaptation note: framer-motion animation replaced with CSS transitions\n * (translate + opacity) for the standalone gallery which does not include\n * framer-motion as a dependency.\n */\n\nimport { useEffect, useId, useRef, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { X } from 'lucide-react';\n\nexport type DrawerPlacement = 'right' | 'bottom';\n\nexport interface DrawerProps {\n  open: boolean;\n  onClose: () => void;\n  title: ReactNode;\n  description?: string;\n  placement?: DrawerPlacement;\n  width?: string;\n  maxHeight?: string;\n  closeLabel?: string;\n  children: ReactNode;\n}\n\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nconst PLACEMENT_PANEL_CLASS: Record<DrawerPlacement, string> = {\n  right:  'fixed top-0 right-0 bottom-0 flex flex-col',\n  bottom: 'fixed bottom-0 left-0 right-0 flex flex-col rounded-t-xl',\n};\n\nexport function Drawer({\n  open,\n  onClose,\n  title,\n  description,\n  placement = 'right',\n  width = 'w-80',\n  maxHeight = 'max-h-[85vh]',\n  closeLabel = 'Close drawer',\n  children,\n}: DrawerProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const titleId  = useId();\n  // rendered tracks whether the portal is mounted at all\n  const [rendered, setRendered] = useState(open);\n  // visible tracks the CSS transition state\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setRendered(true);\n      // Allow the element to mount before starting the transition\n      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));\n    } else {\n      setVisible(false);\n      // Remove from DOM after transition completes\n      const timer = window.setTimeout(() => setRendered(false), 300);\n      return () => window.clearTimeout(timer);\n    }\n  }, [open]);\n\n  // Effect 1: scroll lock + initial focus + focus restoration\n  useEffect(() => {\n    if (!open) return;\n    const previousFocus = document.activeElement instanceof HTMLElement\n      ? document.activeElement : null;\n    const prevOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n\n    const timer = window.setTimeout(() => {\n      const panel = panelRef.current;\n      const focusable = panel ? Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE)) : [];\n      (focusable[0] ?? panel)?.focus();\n    }, 0);\n\n    return () => {\n      window.clearTimeout(timer);\n      document.body.style.overflow = prevOverflow;\n      previousFocus?.focus();\n    };\n  }, [open]);\n\n  // Effect 2: keyboard — Escape + focus trap\n  useEffect(() => {\n    if (!open) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') { e.preventDefault(); onClose(); return; }\n      if (e.key !== 'Tab') return;\n      const panel = panelRef.current;\n      if (!panel) return;\n      const focusable = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE));\n      if (!focusable.length) { e.preventDefault(); panel.focus(); return; }\n      const first = focusable[0];\n      const last  = focusable[focusable.length - 1];\n      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }\n      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open, onClose]);\n\n  if (!rendered) return null;\n\n  const panelClass = [\n    PLACEMENT_PANEL_CLASS[placement],\n    placement === 'right' ? width : maxHeight,\n    'bg-white shadow-xl focus:outline-none',\n    placement === 'bottom' ? 'overflow-y-auto' : 'overflow-hidden',\n    'transition-transform duration-300 ease-out',\n    placement === 'right'\n      ? (visible ? 'translate-x-0' : 'translate-x-full')\n      : (visible ? 'translate-y-0' : 'translate-y-full'),\n  ].filter(Boolean).join(' ');\n\n  return createPortal(\n    <div className=\"fixed inset-0 z-50\">\n      {/* Backdrop */}\n      <div\n        className={`fixed inset-0 bg-brand-navy/50 backdrop-blur-sm transition-opacity duration-200 ${visible ? 'opacity-100' : 'opacity-0'}`}\n        onClick={onClose}\n        aria-hidden=\"true\"\n      />\n\n      {/* Panel */}\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={description ? `${titleId}-desc` : undefined}\n        tabIndex={-1}\n        className={panelClass}\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-5 py-4 border-b-2 border-slate-100 shrink-0\">\n          <div className=\"min-w-0\">\n            <h2 id={titleId} className=\"font-heading text-base font-bold text-slate-900 truncate\">\n              {title}\n            </h2>\n            {description && (\n              <p id={`${titleId}-desc`} className=\"text-xs text-slate-500 mt-0.5\">\n                {description}\n              </p>\n            )}\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            aria-label={closeLabel}\n            className=\"ml-3 shrink-0 flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700 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        </div>\n\n        {/* Scrollable body */}\n        <div className=\"flex-1 overflow-y-auto px-5 py-4\">\n          {children}\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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"}

package/lib/index4.cjs

@@ -0,0 +1,24 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/icon-button/IconButton.tsx
+var BASE = "inline-flex items-center justify-center rounded-lg p-2 text-slate-400 transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100 select-none";
+var VARIANT_STYLES = {
+	default: "hover:bg-slate-100  hover:text-slate-700  focus-visible:ring-brand-blue/20",
+	edit: "hover:bg-blue-50    hover:text-brand-blue focus-visible:ring-brand-blue/20",
+	danger: "hover:bg-rose-50    hover:text-rose-600   focus-visible:ring-rose-100"
+};
+function IconButton({ icon, variant = "default", className = "", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: [
+			BASE,
+			VARIANT_STYLES[variant],
+			className
+		].filter(Boolean).join(" "),
+		...props,
+		children: icon
+	});
+}
+//#endregion
+exports.IconButton = IconButton;
+
+//# sourceMappingURL=index4.cjs.map

package/lib/index4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index4.cjs","names":[],"sources":["../src/ui-library/gallery/icon-button/IconButton.tsx"],"sourcesContent":["/**\n * IconButton — Design System Component\n *\n * A square icon-only button with three visual variants.\n *\n * Accessibility:\n *   - aria-label is REQUIRED — icon buttons have no visible text.\n *   - Mark the icon inside aria-hidden=\"true\" to avoid double-announcement.\n *   - Focus ring is focus-visible only (keyboard, not mouse click).\n *   - disabled attribute prevents interaction and announces via AT.\n *   - title provides a browser tooltip as a secondary affordance but is NOT\n *     a substitute for aria-label.\n *\n * Usage:\n *   <IconButton icon={<Pencil size={16} aria-hidden=\"true\" />} aria-label=\"Edit Engineering\" variant=\"edit\" />\n *   <IconButton icon={<Trash2 size={16} aria-hidden=\"true\" />} aria-label=\"Delete record\" variant=\"danger\" />\n *   <IconButton icon={<Settings size={16} aria-hidden=\"true\" />} aria-label=\"Open settings\" />\n */\n\nimport type { ReactNode } from 'react';\n\nexport type IconButtonVariant = 'default' | 'edit' | 'danger';\n\nexport interface IconButtonProps extends React.ComponentProps<'button'> {\n  /** Icon element. Use aria-hidden=\"true\" on the icon to avoid double-announcement. */\n  icon: ReactNode;\n  /** Visual variant. Default: \"default\" (slate hover) */\n  variant?: IconButtonVariant;\n}\n\n// ── Style maps ─────────────────────────────────────────────────────────────\n\nconst BASE =\n  'inline-flex items-center justify-center rounded-lg p-2 text-slate-400 transition-all duration-150 ease-out' +\n  ' active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1' +\n  ' disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100 select-none';\n\nconst VARIANT_STYLES: Record<IconButtonVariant, string> = {\n  default: 'hover:bg-slate-100  hover:text-slate-700  focus-visible:ring-brand-blue/20',\n  edit:    'hover:bg-blue-50    hover:text-brand-blue focus-visible:ring-brand-blue/20',\n  danger:  'hover:bg-rose-50    hover:text-rose-600   focus-visible:ring-rose-100',\n};\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nexport function IconButton({\n  icon,\n  variant = 'default',\n  className = '',\n  ...props\n}: IconButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className={[BASE, VARIANT_STYLES[variant], className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {icon}\n    </button>\n  );\n}\n"],"mappings":";;AAgCA,IAAM,OACJ;AAIF,IAAM,iBAAoD;CACxD,SAAS;CACT,MAAS;CACT,QAAS;AACX;AAIA,SAAgB,WAAW,EACzB,MACA,UAAU,WACV,YAAY,IACZ,GAAG,SACe;CAClB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,MAAK;EACL,WAAW;GAAC;GAAM,eAAe;GAAU;EAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC9E,GAAI;EAEH,UAAA;CACK,CAAA;AAEZ"}

package/lib/index4.mjs

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/ui-library/gallery/icon-button/IconButton.tsx
+var BASE = "inline-flex items-center justify-center rounded-lg p-2 text-slate-400 transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100 select-none";
+var VARIANT_STYLES = {
+	default: "hover:bg-slate-100  hover:text-slate-700  focus-visible:ring-brand-blue/20",
+	edit: "hover:bg-blue-50    hover:text-brand-blue focus-visible:ring-brand-blue/20",
+	danger: "hover:bg-rose-50    hover:text-rose-600   focus-visible:ring-rose-100"
+};
+function IconButton({ icon, variant = "default", className = "", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: [
+			BASE,
+			VARIANT_STYLES[variant],
+			className
+		].filter(Boolean).join(" "),
+		...props,
+		children: icon
+	});
+}
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=index4.mjs.map

package/lib/index4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index4.mjs","names":[],"sources":["../src/ui-library/gallery/icon-button/IconButton.tsx"],"sourcesContent":["/**\n * IconButton — Design System Component\n *\n * A square icon-only button with three visual variants.\n *\n * Accessibility:\n *   - aria-label is REQUIRED — icon buttons have no visible text.\n *   - Mark the icon inside aria-hidden=\"true\" to avoid double-announcement.\n *   - Focus ring is focus-visible only (keyboard, not mouse click).\n *   - disabled attribute prevents interaction and announces via AT.\n *   - title provides a browser tooltip as a secondary affordance but is NOT\n *     a substitute for aria-label.\n *\n * Usage:\n *   <IconButton icon={<Pencil size={16} aria-hidden=\"true\" />} aria-label=\"Edit Engineering\" variant=\"edit\" />\n *   <IconButton icon={<Trash2 size={16} aria-hidden=\"true\" />} aria-label=\"Delete record\" variant=\"danger\" />\n *   <IconButton icon={<Settings size={16} aria-hidden=\"true\" />} aria-label=\"Open settings\" />\n */\n\nimport type { ReactNode } from 'react';\n\nexport type IconButtonVariant = 'default' | 'edit' | 'danger';\n\nexport interface IconButtonProps extends React.ComponentProps<'button'> {\n  /** Icon element. Use aria-hidden=\"true\" on the icon to avoid double-announcement. */\n  icon: ReactNode;\n  /** Visual variant. Default: \"default\" (slate hover) */\n  variant?: IconButtonVariant;\n}\n\n// ── Style maps ─────────────────────────────────────────────────────────────\n\nconst BASE =\n  'inline-flex items-center justify-center rounded-lg p-2 text-slate-400 transition-all duration-150 ease-out' +\n  ' active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1' +\n  ' disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100 select-none';\n\nconst VARIANT_STYLES: Record<IconButtonVariant, string> = {\n  default: 'hover:bg-slate-100  hover:text-slate-700  focus-visible:ring-brand-blue/20',\n  edit:    'hover:bg-blue-50    hover:text-brand-blue focus-visible:ring-brand-blue/20',\n  danger:  'hover:bg-rose-50    hover:text-rose-600   focus-visible:ring-rose-100',\n};\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nexport function IconButton({\n  icon,\n  variant = 'default',\n  className = '',\n  ...props\n}: IconButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className={[BASE, VARIANT_STYLES[variant], className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {icon}\n    </button>\n  );\n}\n"],"mappings":";;AAgCA,IAAM,OACJ;AAIF,IAAM,iBAAoD;CACxD,SAAS;CACT,MAAS;CACT,QAAS;AACX;AAIA,SAAgB,WAAW,EACzB,MACA,UAAU,WACV,YAAY,IACZ,GAAG,SACe;CAClB,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW;GAAC;GAAM,eAAe;GAAU;EAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC9E,GAAI;EAEH,UAAA;CACK,CAAA;AAEZ"}

package/lib/index40.cjs

@@ -0,0 +1,130 @@
+const require_runtime = require("./index2.cjs");
+const require_utils = require("./index14.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _radix_ui_react_popover = require("@radix-ui/react-popover");
+_radix_ui_react_popover = require_runtime.__toESM(_radix_ui_react_popover, 1);
+//#region src/ui-library/gallery/popover/Popover.tsx
+/**
+* Popover — Design System Component
+*
+* An anchored floating panel that opens on trigger interaction.
+*
+* Behavior is provided by @radix-ui/react-popover, which handles:
+*   - Open/close state (both controlled and uncontrolled)
+*   - Trigger click interaction
+*   - Escape key closes the popover + focus returns to trigger
+*   - Outside-click (pointer-down) closes the popover
+*   - Focus moves into the content on open
+*   - Portal rendering to document.body
+*   - Viewport collision detection and automatic side-flip
+*   - aria-expanded, aria-haspopup, aria-controls wiring
+*   - role="dialog" on the content panel
+*
+* DIWA continues to own:
+*   - Public API (open, onOpenChange, defaultOpen, placement, title, maxWidth, className, children)
+*   - Trigger visual treatment (button styling)
+*   - Content panel visual treatment (bg, border, radius, shadow, padding)
+*   - Placement vocabulary (DIWA names mapped internally to Radix side+align)
+*   - Typography and color tokens
+*   - Component anatomy and composition model
+*
+* Composition:
+*   <Popover>
+*     <PopoverTrigger>Open</PopoverTrigger>
+*     <PopoverContent title="Settings">…</PopoverContent>
+*   </Popover>
+*
+* Placement: 'bottom-start' | 'bottom-end' | 'bottom' |
+*            'top-start'    | 'top-end'    | 'top'
+*
+* Difference from Dialog/Modal:
+*   - Popover is anchored to a trigger and positioned near it.
+*   - Dialog/Modal is centered in the viewport and blocks the page.
+*   - Tooltip shows text-only hints on hover/focus without interaction.
+*/
+function toRadixPlacement(placement) {
+	switch (placement) {
+		case "bottom-start": return {
+			side: "bottom",
+			align: "start"
+		};
+		case "bottom": return {
+			side: "bottom",
+			align: "center"
+		};
+		case "bottom-end": return {
+			side: "bottom",
+			align: "end"
+		};
+		case "top-start": return {
+			side: "top",
+			align: "start"
+		};
+		case "top": return {
+			side: "top",
+			align: "center"
+		};
+		case "top-end": return {
+			side: "top",
+			align: "end"
+		};
+	}
+}
+function Popover({ open, onOpenChange, defaultOpen = false, placement = "bottom-start", children }) {
+	const { side, align } = toRadixPlacement(placement);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
+		open,
+		onOpenChange,
+		defaultOpen,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverPlacementContext.Provider, {
+			value: {
+				side,
+				align
+			},
+			children
+		})
+	});
+}
+var PopoverPlacementContext = (0, react.createContext)({
+	side: "bottom",
+	align: "start"
+});
+function usePlacement() {
+	return (0, react.useContext)(PopoverPlacementContext);
+}
+function PopoverTrigger({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: "inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children
+		})
+	});
+}
+function PopoverContent({ title, children, maxWidth = "max-w-xs", className = "" }) {
+	const { side, align } = usePlacement();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_popover.Content, {
+		side,
+		align,
+		sideOffset: 8,
+		className: require_utils.cn("z-50 w-max rounded-xl border border-slate-200 bg-white shadow-lg", "outline-none", maxWidth, className),
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-b border-slate-100 px-4 py-3",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "font-heading text-sm font-bold text-slate-900",
+				children: title
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "px-4 py-3",
+			children
+		})]
+	}) });
+}
+//#endregion
+exports.Popover = Popover;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
+
+//# sourceMappingURL=index40.cjs.map