@diwauhris/ui 1.3.1 → 1.4.0

package/lib/index1761.mjs

@@ -1,137 +0,0 @@
-import X from "./index1723.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "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=index1761.mjs.map

package/lib/index1761.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1761.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/index1762.cjs

@@ -1,130 +0,0 @@
-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=index1762.cjs.map

package/lib/index1762.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1762.cjs","names":[],"sources":["../src/ui-library/gallery/popover/Popover.tsx"],"sourcesContent":["/**\n * Popover — Design System Component\n *\n * An anchored floating panel that opens on trigger interaction.\n *\n * Behavior is provided by @radix-ui/react-popover, which handles:\n *   - Open/close state (both controlled and uncontrolled)\n *   - Trigger click interaction\n *   - Escape key closes the popover + focus returns to trigger\n *   - Outside-click (pointer-down) closes the popover\n *   - Focus moves into the content on open\n *   - Portal rendering to document.body\n *   - Viewport collision detection and automatic side-flip\n *   - aria-expanded, aria-haspopup, aria-controls wiring\n *   - role=\"dialog\" on the content panel\n *\n * DIWA continues to own:\n *   - Public API (open, onOpenChange, defaultOpen, placement, title, maxWidth, className, children)\n *   - Trigger visual treatment (button styling)\n *   - Content panel visual treatment (bg, border, radius, shadow, padding)\n *   - Placement vocabulary (DIWA names mapped internally to Radix side+align)\n *   - Typography and color tokens\n *   - Component anatomy and composition model\n *\n * Composition:\n *   <Popover>\n *     <PopoverTrigger>Open</PopoverTrigger>\n *     <PopoverContent title=\"Settings\">…</PopoverContent>\n *   </Popover>\n *\n * Placement: 'bottom-start' | 'bottom-end' | 'bottom' |\n *            'top-start'    | 'top-end'    | 'top'\n *\n * Difference from Dialog/Modal:\n *   - Popover is anchored to a trigger and positioned near it.\n *   - Dialog/Modal is centered in the viewport and blocks the page.\n *   - Tooltip shows text-only hints on hover/focus without interaction.\n */\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { type ReactNode } from 'react';\nimport { cn } from '../../../lib/utils';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type PopoverPlacement =\n  | 'bottom-start' | 'bottom' | 'bottom-end'\n  | 'top-start'    | 'top'    | 'top-end';\n\n// ── Placement → Radix side + align mapping ────────────────────────────────────\n\ntype RadixSide  = 'top' | 'bottom' | 'left' | 'right';\ntype RadixAlign = 'start' | 'center' | 'end';\n\nfunction toRadixPlacement(placement: PopoverPlacement): { side: RadixSide; align: RadixAlign } {\n  switch (placement) {\n    case 'bottom-start': return { side: 'bottom', align: 'start' };\n    case 'bottom':       return { side: 'bottom', align: 'center' };\n    case 'bottom-end':   return { side: 'bottom', align: 'end' };\n    case 'top-start':    return { side: 'top',    align: 'start' };\n    case 'top':          return { side: 'top',    align: 'center' };\n    case 'top-end':      return { side: 'top',    align: 'end' };\n  }\n}\n\n// ── Popover (root) ────────────────────────────────────────────────────────────\n\nexport interface PopoverProps {\n  /** Controlled open state */\n  open?: boolean;\n  /** Controlled: called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Uncontrolled initial open state */\n  defaultOpen?: boolean;\n  placement?: PopoverPlacement;\n  children: ReactNode;\n}\n\nexport function Popover({\n  open,\n  onOpenChange,\n  defaultOpen = false,\n  placement = 'bottom-start',\n  children,\n}: PopoverProps) {\n  const { side, align } = toRadixPlacement(placement);\n\n  return (\n    // We pass side/align down via a context-like trick: wrap in a span-level\n    // context provider so PopoverContent can pick up the resolved placement.\n    // Radix manages open state internally; controlled mode uses open/onOpenChange.\n    <PopoverPrimitive.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n    >\n      {/*\n        Render children with the resolved placement accessible via React context.\n        Because PopoverTrigger and PopoverContent are co-located in this file,\n        we can pass side/align as props through a thin internal context.\n      */}\n      <PopoverPlacementContext.Provider value={{ side, align }}>\n        {children}\n      </PopoverPlacementContext.Provider>\n    </PopoverPrimitive.Root>\n  );\n}\n\n// ── Internal placement context ────────────────────────────────────────────────\n// Not exported — Radix placement details never surface to consumers.\n\nimport { createContext, useContext } from 'react';\n\ninterface PlacementCtx { side: RadixSide; align: RadixAlign }\nconst PopoverPlacementContext = createContext<PlacementCtx>({ side: 'bottom', align: 'start' });\nfunction usePlacement() { return useContext(PopoverPlacementContext); }\n\n// ── PopoverTrigger ────────────────────────────────────────────────────────────\n\nexport interface PopoverTriggerProps {\n  children: ReactNode;\n}\n\nexport function PopoverTrigger({ children }: PopoverTriggerProps) {\n  return (\n    // asChild forwards Radix's accessibility props (aria-expanded, aria-haspopup,\n    // aria-controls) onto the inner <button> rather than creating a wrapper element.\n    <PopoverPrimitive.Trigger asChild>\n      <button\n        type=\"button\"\n        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\"\n      >\n        {children}\n      </button>\n    </PopoverPrimitive.Trigger>\n  );\n}\n\n// ── PopoverContent ────────────────────────────────────────────────────────────\n\nexport interface PopoverContentProps {\n  /** Optional title rendered in the popover header */\n  title?: string;\n  children: ReactNode;\n  /** Tailwind max-width class */\n  maxWidth?: string;\n  className?: string;\n}\n\nexport function PopoverContent({\n  title,\n  children,\n  maxWidth = 'max-w-xs',\n  className = '',\n}: PopoverContentProps) {\n  const { side, align } = usePlacement();\n\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        side={side}\n        align={align}\n        sideOffset={8}\n        // Radix will flip to the opposite side if the preferred side clips\n        // the viewport (collision detection via @floating-ui/dom internally).\n        // avoidCollisions is true by default.\n        className={cn(\n          // DIWA visual treatment — matches the pre-migration appearance exactly\n          'z-50 w-max rounded-xl border border-slate-200 bg-white shadow-lg',\n          'outline-none',\n          maxWidth,\n          className,\n        )}\n      >\n        {title && (\n          <div className=\"border-b border-slate-100 px-4 py-3\">\n            <h3 className=\"font-heading text-sm font-bold text-slate-900\">{title}</h3>\n          </div>\n        )}\n        <div className=\"px-4 py-3\">{children}</div>\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAS,iBAAiB,WAAqE;CAC7F,QAAQ,WAAR;EACE,KAAK,gBAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EAC7D,KAAK,UAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAS;EAC9D,KAAK,cAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAM;EAC3D,KAAK,aAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EAC7D,KAAK,OAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAS;EAC9D,KAAK,WAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAM;CAC7D;AACF;AAeA,SAAgB,QAAQ,EACtB,MACA,cACA,cAAc,OACd,YAAY,gBACZ,YACe;CACf,MAAM,EAAE,MAAM,UAAU,iBAAiB,SAAS;CAElD,OAIE,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,MAAlB;EACQ;EACQ;EACD;EAOb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAwB,UAAzB;GAAkC,OAAO;IAAE;IAAM;GAAM;GACpD;EAC+B,CAAA;CACb,CAAA;AAE3B;AAQA,IAAM,2BAAA,GAA0B,MAAA,cAAA,CAA4B;CAAE,MAAM;CAAU,OAAO;AAAQ,CAAC;AAC9F,SAAS,eAAe;CAAE,QAAA,GAAO,MAAA,WAAA,CAAW,uBAAuB;AAAG;AAQtE,SAAgB,eAAe,EAAE,YAAiC;CAChE,OAGE,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,SAAlB;EAA0B,SAAA;EACxB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACE,MAAK;GACL,WAAU;GAET;EACK,CAAA;CACgB,CAAA;AAE9B;AAaA,SAAgB,eAAe,EAC7B,OACA,UACA,WAAW,YACX,YAAY,MACU;CACtB,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,wBAAiB,SAAlB;EACQ;EACC;EACP,YAAY;EAIZ,WAAW,cAAA,GAET,oEACA,gBACA,UACA,SACF;EAbF,UAAA,CAeG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,WAAU;IAAiD,UAAA;GAAU,CAAA;EACtE,CAAA,GAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GAAa;EAAc,CAAA,CAClB;CACH,CAAA,EAAA,CAAA;AAE7B"}

package/lib/index1762.mjs

@@ -1,126 +0,0 @@
-import { cn } from "./index14.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-//#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__ */ jsx(PopoverPrimitive.Root, {
-		open,
-		onOpenChange,
-		defaultOpen,
-		children: /* @__PURE__ */ jsx(PopoverPlacementContext.Provider, {
-			value: {
-				side,
-				align
-			},
-			children
-		})
-	});
-}
-var PopoverPlacementContext = createContext({
-	side: "bottom",
-	align: "start"
-});
-function usePlacement() {
-	return useContext(PopoverPlacementContext);
-}
-function PopoverTrigger({ children }) {
-	return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
-		asChild: true,
-		children: /* @__PURE__ */ 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__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(PopoverPrimitive.Content, {
-		side,
-		align,
-		sideOffset: 8,
-		className: cn("z-50 w-max rounded-xl border border-slate-200 bg-white shadow-lg", "outline-none", maxWidth, className),
-		children: [title && /* @__PURE__ */ jsx("div", {
-			className: "border-b border-slate-100 px-4 py-3",
-			children: /* @__PURE__ */ jsx("h3", {
-				className: "font-heading text-sm font-bold text-slate-900",
-				children: title
-			})
-		}), /* @__PURE__ */ jsx("div", {
-			className: "px-4 py-3",
-			children
-		})]
-	}) });
-}
-//#endregion
-export { Popover, PopoverContent, PopoverTrigger };
-
-//# sourceMappingURL=index1762.mjs.map

package/lib/index1762.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1762.mjs","names":[],"sources":["../src/ui-library/gallery/popover/Popover.tsx"],"sourcesContent":["/**\n * Popover — Design System Component\n *\n * An anchored floating panel that opens on trigger interaction.\n *\n * Behavior is provided by @radix-ui/react-popover, which handles:\n *   - Open/close state (both controlled and uncontrolled)\n *   - Trigger click interaction\n *   - Escape key closes the popover + focus returns to trigger\n *   - Outside-click (pointer-down) closes the popover\n *   - Focus moves into the content on open\n *   - Portal rendering to document.body\n *   - Viewport collision detection and automatic side-flip\n *   - aria-expanded, aria-haspopup, aria-controls wiring\n *   - role=\"dialog\" on the content panel\n *\n * DIWA continues to own:\n *   - Public API (open, onOpenChange, defaultOpen, placement, title, maxWidth, className, children)\n *   - Trigger visual treatment (button styling)\n *   - Content panel visual treatment (bg, border, radius, shadow, padding)\n *   - Placement vocabulary (DIWA names mapped internally to Radix side+align)\n *   - Typography and color tokens\n *   - Component anatomy and composition model\n *\n * Composition:\n *   <Popover>\n *     <PopoverTrigger>Open</PopoverTrigger>\n *     <PopoverContent title=\"Settings\">…</PopoverContent>\n *   </Popover>\n *\n * Placement: 'bottom-start' | 'bottom-end' | 'bottom' |\n *            'top-start'    | 'top-end'    | 'top'\n *\n * Difference from Dialog/Modal:\n *   - Popover is anchored to a trigger and positioned near it.\n *   - Dialog/Modal is centered in the viewport and blocks the page.\n *   - Tooltip shows text-only hints on hover/focus without interaction.\n */\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { type ReactNode } from 'react';\nimport { cn } from '../../../lib/utils';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type PopoverPlacement =\n  | 'bottom-start' | 'bottom' | 'bottom-end'\n  | 'top-start'    | 'top'    | 'top-end';\n\n// ── Placement → Radix side + align mapping ────────────────────────────────────\n\ntype RadixSide  = 'top' | 'bottom' | 'left' | 'right';\ntype RadixAlign = 'start' | 'center' | 'end';\n\nfunction toRadixPlacement(placement: PopoverPlacement): { side: RadixSide; align: RadixAlign } {\n  switch (placement) {\n    case 'bottom-start': return { side: 'bottom', align: 'start' };\n    case 'bottom':       return { side: 'bottom', align: 'center' };\n    case 'bottom-end':   return { side: 'bottom', align: 'end' };\n    case 'top-start':    return { side: 'top',    align: 'start' };\n    case 'top':          return { side: 'top',    align: 'center' };\n    case 'top-end':      return { side: 'top',    align: 'end' };\n  }\n}\n\n// ── Popover (root) ────────────────────────────────────────────────────────────\n\nexport interface PopoverProps {\n  /** Controlled open state */\n  open?: boolean;\n  /** Controlled: called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Uncontrolled initial open state */\n  defaultOpen?: boolean;\n  placement?: PopoverPlacement;\n  children: ReactNode;\n}\n\nexport function Popover({\n  open,\n  onOpenChange,\n  defaultOpen = false,\n  placement = 'bottom-start',\n  children,\n}: PopoverProps) {\n  const { side, align } = toRadixPlacement(placement);\n\n  return (\n    // We pass side/align down via a context-like trick: wrap in a span-level\n    // context provider so PopoverContent can pick up the resolved placement.\n    // Radix manages open state internally; controlled mode uses open/onOpenChange.\n    <PopoverPrimitive.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n    >\n      {/*\n        Render children with the resolved placement accessible via React context.\n        Because PopoverTrigger and PopoverContent are co-located in this file,\n        we can pass side/align as props through a thin internal context.\n      */}\n      <PopoverPlacementContext.Provider value={{ side, align }}>\n        {children}\n      </PopoverPlacementContext.Provider>\n    </PopoverPrimitive.Root>\n  );\n}\n\n// ── Internal placement context ────────────────────────────────────────────────\n// Not exported — Radix placement details never surface to consumers.\n\nimport { createContext, useContext } from 'react';\n\ninterface PlacementCtx { side: RadixSide; align: RadixAlign }\nconst PopoverPlacementContext = createContext<PlacementCtx>({ side: 'bottom', align: 'start' });\nfunction usePlacement() { return useContext(PopoverPlacementContext); }\n\n// ── PopoverTrigger ────────────────────────────────────────────────────────────\n\nexport interface PopoverTriggerProps {\n  children: ReactNode;\n}\n\nexport function PopoverTrigger({ children }: PopoverTriggerProps) {\n  return (\n    // asChild forwards Radix's accessibility props (aria-expanded, aria-haspopup,\n    // aria-controls) onto the inner <button> rather than creating a wrapper element.\n    <PopoverPrimitive.Trigger asChild>\n      <button\n        type=\"button\"\n        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\"\n      >\n        {children}\n      </button>\n    </PopoverPrimitive.Trigger>\n  );\n}\n\n// ── PopoverContent ────────────────────────────────────────────────────────────\n\nexport interface PopoverContentProps {\n  /** Optional title rendered in the popover header */\n  title?: string;\n  children: ReactNode;\n  /** Tailwind max-width class */\n  maxWidth?: string;\n  className?: string;\n}\n\nexport function PopoverContent({\n  title,\n  children,\n  maxWidth = 'max-w-xs',\n  className = '',\n}: PopoverContentProps) {\n  const { side, align } = usePlacement();\n\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        side={side}\n        align={align}\n        sideOffset={8}\n        // Radix will flip to the opposite side if the preferred side clips\n        // the viewport (collision detection via @floating-ui/dom internally).\n        // avoidCollisions is true by default.\n        className={cn(\n          // DIWA visual treatment — matches the pre-migration appearance exactly\n          'z-50 w-max rounded-xl border border-slate-200 bg-white shadow-lg',\n          'outline-none',\n          maxWidth,\n          className,\n        )}\n      >\n        {title && (\n          <div className=\"border-b border-slate-100 px-4 py-3\">\n            <h3 className=\"font-heading text-sm font-bold text-slate-900\">{title}</h3>\n          </div>\n        )}\n        <div className=\"px-4 py-3\">{children}</div>\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAS,iBAAiB,WAAqE;CAC7F,QAAQ,WAAR;EACE,KAAK,gBAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EAC7D,KAAK,UAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAS;EAC9D,KAAK,cAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAM;EAC3D,KAAK,aAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EAC7D,KAAK,OAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAS;EAC9D,KAAK,WAAgB,OAAO;GAAE,MAAM;GAAU,OAAO;EAAM;CAC7D;AACF;AAeA,SAAgB,QAAQ,EACtB,MACA,cACA,cAAc,OACd,YAAY,gBACZ,YACe;CACf,MAAM,EAAE,MAAM,UAAU,iBAAiB,SAAS;CAElD,OAIE,oBAAC,iBAAiB,MAAlB;EACQ;EACQ;EACD;EAOb,UAAA,oBAAC,wBAAwB,UAAzB;GAAkC,OAAO;IAAE;IAAM;GAAM;GACpD;EAC+B,CAAA;CACb,CAAA;AAE3B;AAQA,IAAM,0BAA0B,cAA4B;CAAE,MAAM;CAAU,OAAO;AAAQ,CAAC;AAC9F,SAAS,eAAe;CAAE,OAAO,WAAW,uBAAuB;AAAG;AAQtE,SAAgB,eAAe,EAAE,YAAiC;CAChE,OAGE,oBAAC,iBAAiB,SAAlB;EAA0B,SAAA;EACxB,UAAA,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GAET;EACK,CAAA;CACgB,CAAA;AAE9B;AAaA,SAAgB,eAAe,EAC7B,OACA,UACA,WAAW,YACX,YAAY,MACU;CACtB,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,OACE,oBAAC,iBAAiB,QAAlB,EAAA,UACE,qBAAC,iBAAiB,SAAlB;EACQ;EACC;EACP,YAAY;EAIZ,WAAW,GAET,oEACA,gBACA,UACA,SACF;EAbF,UAAA,CAeG,SACC,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,MAAD;IAAI,WAAU;IAAiD,UAAA;GAAU,CAAA;EACtE,CAAA,GAEP,oBAAC,OAAD;GAAK,WAAU;GAAa;EAAc,CAAA,CAClB;CACH,CAAA,EAAA,CAAA;AAE7B"}

package/lib/index1763.cjs

@@ -1,60 +0,0 @@
-const require_runtime = require("./index2.cjs");
-const require_utils = require("./index14.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-require("react");
-let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
-_radix_ui_react_tooltip = require_runtime.__toESM(_radix_ui_react_tooltip, 1);
-//#region src/ui-library/gallery/tooltip/Tooltip.tsx
-/**
-* Tooltip — Design System Component
-*
-* A short, text-only label that appears on hover or focus to describe
-* an element.
-*
-* Behavior is provided by @radix-ui/react-tooltip, which handles:
-*   - Trigger scoping (fires only on the direct trigger, not descendants)
-*   - Viewport collision detection and automatic side-flip
-*   - Correct aria-describedby wiring
-*   - Keyboard: Escape closes, focus/blur open/close
-*   - Pointer events (hover, touch)
-*   - Portal rendering to document.body
-*   - Delay management
-*
-* DIWA continues to own:
-*   - Component API (content, placement, delayMs, children, className)
-*   - Visual classes (dark surface, brand-sky bottom accent)
-*   - Typography and spacing
-*
-* Rules:
-*   - Tooltip content must be TEXT only. No interactive elements inside.
-*   - Do not put ESSENTIAL information only in a tooltip.
-*   - Use for supplementary descriptions: icon button labels, abbrev. meanings.
-*
-* Placement: 'top' | 'bottom' | 'left' | 'right'
-*
-* Difference from Popover:
-*   - Tooltip is text-only, triggered by hover/focus, no interaction inside.
-*   - Popover contains interactive content, triggered by explicit click.
-*/
-function Tooltip({ content, placement = "top", delayMs = 400, children, className = "" }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Provider, {
-		delayDuration: delayMs,
-		skipDelayDuration: 0,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_tooltip.Root, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Trigger, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: require_utils.cn("inline-flex", className),
-				children
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Content, {
-			side: placement,
-			sideOffset: 8,
-			className: require_utils.cn("pointer-events-none z-50 whitespace-nowrap", "rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-semibold text-white shadow-lg", "border-b-2 border-brand-sky/60"),
-			children: content
-		}) })] })
-	});
-}
-//#endregion
-exports.Tooltip = Tooltip;
-
-//# sourceMappingURL=index1763.cjs.map

package/lib/index1763.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1763.cjs","names":[],"sources":["../src/ui-library/gallery/tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * Tooltip — Design System Component\n *\n * A short, text-only label that appears on hover or focus to describe\n * an element.\n *\n * Behavior is provided by @radix-ui/react-tooltip, which handles:\n *   - Trigger scoping (fires only on the direct trigger, not descendants)\n *   - Viewport collision detection and automatic side-flip\n *   - Correct aria-describedby wiring\n *   - Keyboard: Escape closes, focus/blur open/close\n *   - Pointer events (hover, touch)\n *   - Portal rendering to document.body\n *   - Delay management\n *\n * DIWA continues to own:\n *   - Component API (content, placement, delayMs, children, className)\n *   - Visual classes (dark surface, brand-sky bottom accent)\n *   - Typography and spacing\n *\n * Rules:\n *   - Tooltip content must be TEXT only. No interactive elements inside.\n *   - Do not put ESSENTIAL information only in a tooltip.\n *   - Use for supplementary descriptions: icon button labels, abbrev. meanings.\n *\n * Placement: 'top' | 'bottom' | 'left' | 'right'\n *\n * Difference from Popover:\n *   - Tooltip is text-only, triggered by hover/focus, no interaction inside.\n *   - Popover contains interactive content, triggered by explicit click.\n */\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { type ReactNode } from 'react';\nimport { cn } from '../../../lib/utils';\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface TooltipProps {\n  /** The text content shown in the tooltip */\n  content: string;\n  /** Placement relative to the trigger */\n  placement?: TooltipPlacement;\n  /** Delay before showing the tooltip, in ms */\n  delayMs?: number;\n  /** The element that triggers the tooltip */\n  children: ReactNode;\n  className?: string;\n}\n\n// ── Radix side → DIWA placement mapping ──────────────────────────────────────\n// Radix uses 'top' | 'bottom' | 'left' | 'right' directly — exact match.\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Tooltip({\n  content,\n  placement = 'top',\n  delayMs = 400,\n  children,\n  className = '',\n}: TooltipProps) {\n  return (\n    // Provider is wrapped here so each Tooltip instance is self-contained.\n    // Radix supports nested providers; this avoids requiring app-level setup.\n    <TooltipPrimitive.Provider delayDuration={delayMs} skipDelayDuration={0}>\n      <TooltipPrimitive.Root>\n        {/*\n          asChild forwards all props (including focus/hover handling) to the\n          actual child element rather than wrapping it in an extra DOM node.\n          This eliminates the previous issue where onFocusCapture on the wrapper\n          span would fire for any focusable descendant.\n        */}\n        <TooltipPrimitive.Trigger asChild>\n          <span className={cn('inline-flex', className)}>\n            {children}\n          </span>\n        </TooltipPrimitive.Trigger>\n\n        <TooltipPrimitive.Portal>\n          <TooltipPrimitive.Content\n            side={placement}\n            sideOffset={8}\n            // Radix adds data-state and data-side attributes for animation hooks.\n            // We keep the presentation simple: instant visibility, no transition.\n            className={cn(\n              // Base layout\n              'pointer-events-none z-50 whitespace-nowrap',\n              // DIWA visual treatment — dark surface, brand typography\n              'rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-semibold text-white shadow-lg',\n              // DIWA structural accent (Phase 2 visual signature)\n              'border-b-2 border-brand-sky/60',\n            )}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,SAAgB,QAAQ,EACtB,SACA,YAAY,OACZ,UAAU,KACV,UACA,YAAY,MACG;CACf,OAGE,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,UAAlB;EAA2B,eAAe;EAAS,mBAAmB;EACpE,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,wBAAiB,MAAlB,EAAA,UAAA,CAOE,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,SAAlB;GAA0B,SAAA;GACxB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAW,cAAA,GAAG,eAAe,SAAS;IACzC;GACG,CAAA;EACkB,CAAA,GAE1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAiB,SAAlB;GACE,MAAM;GACN,YAAY;GAGZ,WAAW,cAAA,GAET,8CAEA,oFAEA,gCACF;GAEC,UAAA;EACuB,CAAA,EACH,CAAA,CACJ,EAAA,CAAA;CACE,CAAA;AAE/B"}

package/lib/index1763.mjs

@@ -1,58 +0,0 @@
-import { cn } from "./index14.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-//#region src/ui-library/gallery/tooltip/Tooltip.tsx
-/**
-* Tooltip — Design System Component
-*
-* A short, text-only label that appears on hover or focus to describe
-* an element.
-*
-* Behavior is provided by @radix-ui/react-tooltip, which handles:
-*   - Trigger scoping (fires only on the direct trigger, not descendants)
-*   - Viewport collision detection and automatic side-flip
-*   - Correct aria-describedby wiring
-*   - Keyboard: Escape closes, focus/blur open/close
-*   - Pointer events (hover, touch)
-*   - Portal rendering to document.body
-*   - Delay management
-*
-* DIWA continues to own:
-*   - Component API (content, placement, delayMs, children, className)
-*   - Visual classes (dark surface, brand-sky bottom accent)
-*   - Typography and spacing
-*
-* Rules:
-*   - Tooltip content must be TEXT only. No interactive elements inside.
-*   - Do not put ESSENTIAL information only in a tooltip.
-*   - Use for supplementary descriptions: icon button labels, abbrev. meanings.
-*
-* Placement: 'top' | 'bottom' | 'left' | 'right'
-*
-* Difference from Popover:
-*   - Tooltip is text-only, triggered by hover/focus, no interaction inside.
-*   - Popover contains interactive content, triggered by explicit click.
-*/
-function Tooltip({ content, placement = "top", delayMs = 400, children, className = "" }) {
-	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
-		delayDuration: delayMs,
-		skipDelayDuration: 0,
-		children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { children: [/* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx("span", {
-				className: cn("inline-flex", className),
-				children
-			})
-		}), /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
-			side: placement,
-			sideOffset: 8,
-			className: cn("pointer-events-none z-50 whitespace-nowrap", "rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-semibold text-white shadow-lg", "border-b-2 border-brand-sky/60"),
-			children: content
-		}) })] })
-	});
-}
-//#endregion
-export { Tooltip };
-
-//# sourceMappingURL=index1763.mjs.map

package/lib/index1763.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1763.mjs","names":[],"sources":["../src/ui-library/gallery/tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * Tooltip — Design System Component\n *\n * A short, text-only label that appears on hover or focus to describe\n * an element.\n *\n * Behavior is provided by @radix-ui/react-tooltip, which handles:\n *   - Trigger scoping (fires only on the direct trigger, not descendants)\n *   - Viewport collision detection and automatic side-flip\n *   - Correct aria-describedby wiring\n *   - Keyboard: Escape closes, focus/blur open/close\n *   - Pointer events (hover, touch)\n *   - Portal rendering to document.body\n *   - Delay management\n *\n * DIWA continues to own:\n *   - Component API (content, placement, delayMs, children, className)\n *   - Visual classes (dark surface, brand-sky bottom accent)\n *   - Typography and spacing\n *\n * Rules:\n *   - Tooltip content must be TEXT only. No interactive elements inside.\n *   - Do not put ESSENTIAL information only in a tooltip.\n *   - Use for supplementary descriptions: icon button labels, abbrev. meanings.\n *\n * Placement: 'top' | 'bottom' | 'left' | 'right'\n *\n * Difference from Popover:\n *   - Tooltip is text-only, triggered by hover/focus, no interaction inside.\n *   - Popover contains interactive content, triggered by explicit click.\n */\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { type ReactNode } from 'react';\nimport { cn } from '../../../lib/utils';\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface TooltipProps {\n  /** The text content shown in the tooltip */\n  content: string;\n  /** Placement relative to the trigger */\n  placement?: TooltipPlacement;\n  /** Delay before showing the tooltip, in ms */\n  delayMs?: number;\n  /** The element that triggers the tooltip */\n  children: ReactNode;\n  className?: string;\n}\n\n// ── Radix side → DIWA placement mapping ──────────────────────────────────────\n// Radix uses 'top' | 'bottom' | 'left' | 'right' directly — exact match.\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Tooltip({\n  content,\n  placement = 'top',\n  delayMs = 400,\n  children,\n  className = '',\n}: TooltipProps) {\n  return (\n    // Provider is wrapped here so each Tooltip instance is self-contained.\n    // Radix supports nested providers; this avoids requiring app-level setup.\n    <TooltipPrimitive.Provider delayDuration={delayMs} skipDelayDuration={0}>\n      <TooltipPrimitive.Root>\n        {/*\n          asChild forwards all props (including focus/hover handling) to the\n          actual child element rather than wrapping it in an extra DOM node.\n          This eliminates the previous issue where onFocusCapture on the wrapper\n          span would fire for any focusable descendant.\n        */}\n        <TooltipPrimitive.Trigger asChild>\n          <span className={cn('inline-flex', className)}>\n            {children}\n          </span>\n        </TooltipPrimitive.Trigger>\n\n        <TooltipPrimitive.Portal>\n          <TooltipPrimitive.Content\n            side={placement}\n            sideOffset={8}\n            // Radix adds data-state and data-side attributes for animation hooks.\n            // We keep the presentation simple: instant visibility, no transition.\n            className={cn(\n              // Base layout\n              'pointer-events-none z-50 whitespace-nowrap',\n              // DIWA visual treatment — dark surface, brand typography\n              'rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-semibold text-white shadow-lg',\n              // DIWA structural accent (Phase 2 visual signature)\n              'border-b-2 border-brand-sky/60',\n            )}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,SAAgB,QAAQ,EACtB,SACA,YAAY,OACZ,UAAU,KACV,UACA,YAAY,MACG;CACf,OAGE,oBAAC,iBAAiB,UAAlB;EAA2B,eAAe;EAAS,mBAAmB;EACpE,UAAA,qBAAC,iBAAiB,MAAlB,EAAA,UAAA,CAOE,oBAAC,iBAAiB,SAAlB;GAA0B,SAAA;GACxB,UAAA,oBAAC,QAAD;IAAM,WAAW,GAAG,eAAe,SAAS;IACzC;GACG,CAAA;EACkB,CAAA,GAE1B,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;GACE,MAAM;GACN,YAAY;GAGZ,WAAW,GAET,8CAEA,oFAEA,gCACF;GAEC,UAAA;EACuB,CAAA,EACH,CAAA,CACJ,EAAA,CAAA;CACE,CAAA;AAE/B"}