@diwauhris/ui 1.0.0

package/lib/index40.cjs.map

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

@@ -0,0 +1,126 @@
+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=index40.mjs.map

package/lib/index40.mjs.map

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

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

package/lib/index41.cjs.map

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

@@ -0,0 +1,58 @@
+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=index41.mjs.map

package/lib/index41.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index41.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"}

package/lib/index42.cjs

@@ -0,0 +1,105 @@
+const require_Dialog = require("./index38.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/confirm-dialog/ConfirmDialog.tsx
+/**
+* ConfirmDialog — Design System Component
+*
+* A focused confirmation dialog for irreversible or high-impact actions.
+* Composes the gallery Dialog component.
+*
+* Accessibility:
+*   - role="dialog" + aria-modal from Dialog
+*   - title → aria-labelledby (Dialog's header id)
+*   - description → aria-describedby (Dialog's desc id)
+*   - Focus trapped within dialog
+*   - Escape dismisses (unless loading)
+*   - Confirm button is focused on open (first focusable element)
+*   - Destructive tone uses both color AND a warning icon — never color alone
+*
+* Usage:
+*   <ConfirmDialog
+*     open={open}
+*     title="Delete department?"
+*     description="This cannot be undone."
+*     confirmLabel="Delete"
+*     tone="danger"
+*     onConfirm={handleDelete}
+*     onClose={() => setOpen(false)}
+*   />
+*/
+var ICON_WRAPPER = {
+	danger: "bg-rose-50 text-rose-500",
+	primary: "bg-blue-50 text-brand-blue"
+};
+var BTN_CONFIRM = {
+	danger: [
+		"inline-flex items-center justify-center gap-2 rounded-md",
+		"bg-rose-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-rose-100",
+		"transition hover:bg-rose-700 active:scale-[.98]",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300",
+		"disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
+	].join(" "),
+	primary: [
+		"inline-flex items-center justify-center gap-2 rounded-md",
+		"bg-brand-blue px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-brand-blue/20",
+		"transition hover:bg-brand-navy active:scale-[.98]",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+		"disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
+	].join(" ")
+};
+var BTN_CANCEL = [
+	"inline-flex items-center justify-center gap-2 rounded-md border border-slate-300 bg-white",
+	"px-4 py-2.5 text-sm font-bold text-slate-600 shadow-sm transition",
+	"hover:border-slate-400 hover:bg-slate-50 active:scale-[.98]",
+	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/15",
+	"disabled:cursor-not-allowed disabled:opacity-60"
+].join(" ");
+function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger" }) {
+	const [loading, setLoading] = (0, react.useState)(false);
+	const handleConfirm = async () => {
+		setLoading(true);
+		try {
+			await onConfirm();
+			onClose();
+		} catch {} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Dialog.Dialog, {
+		open,
+		onClose: loading ? () => void 0 : onClose,
+		preventClose: loading,
+		title,
+		description: typeof description === "string" ? description : void 0,
+		size: "sm",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.DialogBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${ICON_WRAPPER[tone]}`,
+				"aria-hidden": "true",
+				children: tone === "danger" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertTriangle, { size: 20 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { size: 20 })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-sm font-medium leading-relaxed text-slate-600",
+				children: description
+			})]
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Dialog.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: BTN_CANCEL,
+			onClick: onClose,
+			disabled: loading,
+			children: cancelLabel
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: BTN_CONFIRM[tone],
+			onClick: () => void handleConfirm(),
+			disabled: loading,
+			children: loading ? "Processing…" : confirmLabel
+		})] })]
+	});
+}
+//#endregion
+exports.ConfirmDialog = ConfirmDialog;
+
+//# sourceMappingURL=index42.cjs.map

package/lib/index42.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index42.cjs","names":[],"sources":["../src/ui-library/gallery/confirm-dialog/ConfirmDialog.tsx"],"sourcesContent":["/**\n * ConfirmDialog — Design System Component\n *\n * A focused confirmation dialog for irreversible or high-impact actions.\n * Composes the gallery Dialog component.\n *\n * Accessibility:\n *   - role=\"dialog\" + aria-modal from Dialog\n *   - title → aria-labelledby (Dialog's header id)\n *   - description → aria-describedby (Dialog's desc id)\n *   - Focus trapped within dialog\n *   - Escape dismisses (unless loading)\n *   - Confirm button is focused on open (first focusable element)\n *   - Destructive tone uses both color AND a warning icon — never color alone\n *\n * Usage:\n *   <ConfirmDialog\n *     open={open}\n *     title=\"Delete department?\"\n *     description=\"This cannot be undone.\"\n *     confirmLabel=\"Delete\"\n *     tone=\"danger\"\n *     onConfirm={handleDelete}\n *     onClose={() => setOpen(false)}\n *   />\n */\n\nimport { useState, type ReactNode } from 'react';\nimport { AlertTriangle, Info } from 'lucide-react';\nimport { Dialog, DialogBody, DialogFooter } from '../dialog/Dialog';\n\nexport type ConfirmDialogTone = 'danger' | 'primary';\n\nexport interface ConfirmDialogProps {\n  /** Controls dialog visibility. */\n  open: boolean;\n  /** Called when the dialog should close (cancel, Escape, backdrop). */\n  onClose: () => void;\n  /**\n   * Called when the user confirms. May be async — ConfirmDialog shows a\n   * loading state until the promise resolves or rejects.\n   * Any thrown errors are swallowed here; surface them via ErrorBanner / toast.\n   */\n  onConfirm: () => void | Promise<void>;\n  /** Dialog heading. Required for accessible labeling. */\n  title: string;\n  /** Secondary explanation shown below the icon row. */\n  description?: ReactNode;\n  /** Confirm button label. Default: \"Confirm\" */\n  confirmLabel?: string;\n  /** Cancel button label. Default: \"Cancel\" */\n  cancelLabel?: string;\n  /**\n   * Visual tone for the confirm button and icon.\n   * \"danger\" — rose/destructive. \"primary\" — brand-blue.\n   * Default: \"danger\"\n   */\n  tone?: ConfirmDialogTone;\n}\n\n// ── Style maps ─────────────────────────────────────────────────────────────\n\nconst ICON_WRAPPER: Record<ConfirmDialogTone, string> = {\n  danger:  'bg-rose-50 text-rose-500',\n  primary: 'bg-blue-50 text-brand-blue',\n};\n\nconst BTN_CONFIRM: Record<ConfirmDialogTone, string> = {\n  danger: [\n    'inline-flex items-center justify-center gap-2 rounded-md',\n    'bg-rose-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-rose-100',\n    'transition hover:bg-rose-700 active:scale-[.98]',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300',\n    'disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none',\n  ].join(' '),\n  primary: [\n    'inline-flex items-center justify-center gap-2 rounded-md',\n    'bg-brand-blue px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-brand-blue/20',\n    'transition hover:bg-brand-navy active:scale-[.98]',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n    'disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none',\n  ].join(' '),\n};\n\nconst BTN_CANCEL = [\n  'inline-flex items-center justify-center gap-2 rounded-md border border-slate-300 bg-white',\n  'px-4 py-2.5 text-sm font-bold text-slate-600 shadow-sm transition',\n  'hover:border-slate-400 hover:bg-slate-50 active:scale-[.98]',\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/15',\n  'disabled:cursor-not-allowed disabled:opacity-60',\n].join(' ');\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nexport function ConfirmDialog({\n  open,\n  onClose,\n  onConfirm,\n  title,\n  description,\n  confirmLabel = 'Confirm',\n  cancelLabel = 'Cancel',\n  tone = 'danger',\n}: ConfirmDialogProps) {\n  const [loading, setLoading] = useState(false);\n\n  const handleConfirm = async () => {\n    setLoading(true);\n    try {\n      await onConfirm();\n      onClose();\n    } catch {\n      // Errors are the caller's responsibility to surface\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <Dialog\n      open={open}\n      onClose={loading ? () => undefined : onClose}\n      preventClose={loading}\n      title={title}\n      description={typeof description === 'string' ? description : undefined}\n      size=\"sm\"\n    >\n      <DialogBody>\n        <div className=\"flex items-start gap-3\">\n          <span\n            className={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${ICON_WRAPPER[tone]}`}\n            aria-hidden=\"true\"\n          >\n            {tone === 'danger'\n              ? <AlertTriangle size={20} />\n              : <Info size={20} />\n            }\n          </span>\n          <div className=\"text-sm font-medium leading-relaxed text-slate-600\">\n            {description}\n          </div>\n        </div>\n      </DialogBody>\n\n      <DialogFooter>\n        <button\n          type=\"button\"\n          className={BTN_CANCEL}\n          onClick={onClose}\n          disabled={loading}\n        >\n          {cancelLabel}\n        </button>\n        <button\n          type=\"button\"\n          className={BTN_CONFIRM[tone]}\n          onClick={() => void handleConfirm()}\n          disabled={loading}\n        >\n          {loading ? 'Processing…' : confirmLabel}\n        </button>\n      </DialogFooter>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAM,eAAkD;CACtD,QAAS;CACT,SAAS;AACX;AAEA,IAAM,cAAiD;CACrD,QAAQ;EACN;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;EACP;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,IAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAIV,SAAgB,cAAc,EAC5B,MACA,SACA,WACA,OACA,aACA,eAAe,WACf,cAAc,UACd,OAAO,YACc;CACrB,MAAM,CAAC,SAAS,eAAA,GAAc,MAAA,SAAA,CAAS,KAAK;CAE5C,MAAM,gBAAgB,YAAY;EAChC,WAAW,IAAI;EACf,IAAI;GACF,MAAM,UAAU;GAChB,QAAQ;EACV,QAAQ,CAER,UAAU;GACR,WAAW,KAAK;EAClB;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,eAAA,QAAD;EACQ;EACN,SAAS,gBAAgB,KAAA,IAAY;EACrC,cAAc;EACP;EACP,aAAa,OAAO,gBAAgB,WAAW,cAAc,KAAA;EAC7D,MAAK;EANP,UAAA,CAQE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAA,YAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,WAAW,uEAAuE,aAAa;IAC/F,eAAY;IAEX,UAAA,SAAS,WACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,eAAD,EAAe,MAAM,GAAK,CAAA,IAC1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,MAAD,EAAM,MAAM,GAAK,CAAA;GAEjB,CAAA,GACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,CACF;EACK,CAAA,EAAA,CAAA,GAEZ,iBAAA,GAAA,kBAAA,KAAA,CAAC,eAAA,cAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACE,MAAK;GACL,WAAW;GACX,SAAS;GACT,UAAU;GAET,UAAA;EACK,CAAA,GACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACE,MAAK;GACL,WAAW,YAAY;GACvB,eAAe,KAAK,cAAc;GAClC,UAAU;GAET,UAAA,UAAU,gBAAgB;EACrB,CAAA,CACI,EAAA,CAAA,CACR;;AAEZ"}

package/lib/index42.mjs

@@ -0,0 +1,105 @@
+import { Dialog, DialogBody, DialogFooter } from "./index38.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertTriangle, Info } from "lucide-react";
+//#region src/ui-library/gallery/confirm-dialog/ConfirmDialog.tsx
+/**
+* ConfirmDialog — Design System Component
+*
+* A focused confirmation dialog for irreversible or high-impact actions.
+* Composes the gallery Dialog component.
+*
+* Accessibility:
+*   - role="dialog" + aria-modal from Dialog
+*   - title → aria-labelledby (Dialog's header id)
+*   - description → aria-describedby (Dialog's desc id)
+*   - Focus trapped within dialog
+*   - Escape dismisses (unless loading)
+*   - Confirm button is focused on open (first focusable element)
+*   - Destructive tone uses both color AND a warning icon — never color alone
+*
+* Usage:
+*   <ConfirmDialog
+*     open={open}
+*     title="Delete department?"
+*     description="This cannot be undone."
+*     confirmLabel="Delete"
+*     tone="danger"
+*     onConfirm={handleDelete}
+*     onClose={() => setOpen(false)}
+*   />
+*/
+var ICON_WRAPPER = {
+	danger: "bg-rose-50 text-rose-500",
+	primary: "bg-blue-50 text-brand-blue"
+};
+var BTN_CONFIRM = {
+	danger: [
+		"inline-flex items-center justify-center gap-2 rounded-md",
+		"bg-rose-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-rose-100",
+		"transition hover:bg-rose-700 active:scale-[.98]",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300",
+		"disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
+	].join(" "),
+	primary: [
+		"inline-flex items-center justify-center gap-2 rounded-md",
+		"bg-brand-blue px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-brand-blue/20",
+		"transition hover:bg-brand-navy active:scale-[.98]",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+		"disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
+	].join(" ")
+};
+var BTN_CANCEL = [
+	"inline-flex items-center justify-center gap-2 rounded-md border border-slate-300 bg-white",
+	"px-4 py-2.5 text-sm font-bold text-slate-600 shadow-sm transition",
+	"hover:border-slate-400 hover:bg-slate-50 active:scale-[.98]",
+	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/15",
+	"disabled:cursor-not-allowed disabled:opacity-60"
+].join(" ");
+function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger" }) {
+	const [loading, setLoading] = useState(false);
+	const handleConfirm = async () => {
+		setLoading(true);
+		try {
+			await onConfirm();
+			onClose();
+		} catch {} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		onClose: loading ? () => void 0 : onClose,
+		preventClose: loading,
+		title,
+		description: typeof description === "string" ? description : void 0,
+		size: "sm",
+		children: [/* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: `mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${ICON_WRAPPER[tone]}`,
+				"aria-hidden": "true",
+				children: tone === "danger" ? /* @__PURE__ */ jsx(AlertTriangle, { size: 20 }) : /* @__PURE__ */ jsx(Info, { size: 20 })
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-sm font-medium leading-relaxed text-slate-600",
+				children: description
+			})]
+		}) }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: BTN_CANCEL,
+			onClick: onClose,
+			disabled: loading,
+			children: cancelLabel
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: BTN_CONFIRM[tone],
+			onClick: () => void handleConfirm(),
+			disabled: loading,
+			children: loading ? "Processing…" : confirmLabel
+		})] })]
+	});
+}
+//#endregion
+export { ConfirmDialog };
+
+//# sourceMappingURL=index42.mjs.map

package/lib/index42.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index42.mjs","names":[],"sources":["../src/ui-library/gallery/confirm-dialog/ConfirmDialog.tsx"],"sourcesContent":["/**\n * ConfirmDialog — Design System Component\n *\n * A focused confirmation dialog for irreversible or high-impact actions.\n * Composes the gallery Dialog component.\n *\n * Accessibility:\n *   - role=\"dialog\" + aria-modal from Dialog\n *   - title → aria-labelledby (Dialog's header id)\n *   - description → aria-describedby (Dialog's desc id)\n *   - Focus trapped within dialog\n *   - Escape dismisses (unless loading)\n *   - Confirm button is focused on open (first focusable element)\n *   - Destructive tone uses both color AND a warning icon — never color alone\n *\n * Usage:\n *   <ConfirmDialog\n *     open={open}\n *     title=\"Delete department?\"\n *     description=\"This cannot be undone.\"\n *     confirmLabel=\"Delete\"\n *     tone=\"danger\"\n *     onConfirm={handleDelete}\n *     onClose={() => setOpen(false)}\n *   />\n */\n\nimport { useState, type ReactNode } from 'react';\nimport { AlertTriangle, Info } from 'lucide-react';\nimport { Dialog, DialogBody, DialogFooter } from '../dialog/Dialog';\n\nexport type ConfirmDialogTone = 'danger' | 'primary';\n\nexport interface ConfirmDialogProps {\n  /** Controls dialog visibility. */\n  open: boolean;\n  /** Called when the dialog should close (cancel, Escape, backdrop). */\n  onClose: () => void;\n  /**\n   * Called when the user confirms. May be async — ConfirmDialog shows a\n   * loading state until the promise resolves or rejects.\n   * Any thrown errors are swallowed here; surface them via ErrorBanner / toast.\n   */\n  onConfirm: () => void | Promise<void>;\n  /** Dialog heading. Required for accessible labeling. */\n  title: string;\n  /** Secondary explanation shown below the icon row. */\n  description?: ReactNode;\n  /** Confirm button label. Default: \"Confirm\" */\n  confirmLabel?: string;\n  /** Cancel button label. Default: \"Cancel\" */\n  cancelLabel?: string;\n  /**\n   * Visual tone for the confirm button and icon.\n   * \"danger\" — rose/destructive. \"primary\" — brand-blue.\n   * Default: \"danger\"\n   */\n  tone?: ConfirmDialogTone;\n}\n\n// ── Style maps ─────────────────────────────────────────────────────────────\n\nconst ICON_WRAPPER: Record<ConfirmDialogTone, string> = {\n  danger:  'bg-rose-50 text-rose-500',\n  primary: 'bg-blue-50 text-brand-blue',\n};\n\nconst BTN_CONFIRM: Record<ConfirmDialogTone, string> = {\n  danger: [\n    'inline-flex items-center justify-center gap-2 rounded-md',\n    'bg-rose-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-rose-100',\n    'transition hover:bg-rose-700 active:scale-[.98]',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300',\n    'disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none',\n  ].join(' '),\n  primary: [\n    'inline-flex items-center justify-center gap-2 rounded-md',\n    'bg-brand-blue px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-brand-blue/20',\n    'transition hover:bg-brand-navy active:scale-[.98]',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n    'disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none',\n  ].join(' '),\n};\n\nconst BTN_CANCEL = [\n  'inline-flex items-center justify-center gap-2 rounded-md border border-slate-300 bg-white',\n  'px-4 py-2.5 text-sm font-bold text-slate-600 shadow-sm transition',\n  'hover:border-slate-400 hover:bg-slate-50 active:scale-[.98]',\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/15',\n  'disabled:cursor-not-allowed disabled:opacity-60',\n].join(' ');\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nexport function ConfirmDialog({\n  open,\n  onClose,\n  onConfirm,\n  title,\n  description,\n  confirmLabel = 'Confirm',\n  cancelLabel = 'Cancel',\n  tone = 'danger',\n}: ConfirmDialogProps) {\n  const [loading, setLoading] = useState(false);\n\n  const handleConfirm = async () => {\n    setLoading(true);\n    try {\n      await onConfirm();\n      onClose();\n    } catch {\n      // Errors are the caller's responsibility to surface\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <Dialog\n      open={open}\n      onClose={loading ? () => undefined : onClose}\n      preventClose={loading}\n      title={title}\n      description={typeof description === 'string' ? description : undefined}\n      size=\"sm\"\n    >\n      <DialogBody>\n        <div className=\"flex items-start gap-3\">\n          <span\n            className={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${ICON_WRAPPER[tone]}`}\n            aria-hidden=\"true\"\n          >\n            {tone === 'danger'\n              ? <AlertTriangle size={20} />\n              : <Info size={20} />\n            }\n          </span>\n          <div className=\"text-sm font-medium leading-relaxed text-slate-600\">\n            {description}\n          </div>\n        </div>\n      </DialogBody>\n\n      <DialogFooter>\n        <button\n          type=\"button\"\n          className={BTN_CANCEL}\n          onClick={onClose}\n          disabled={loading}\n        >\n          {cancelLabel}\n        </button>\n        <button\n          type=\"button\"\n          className={BTN_CONFIRM[tone]}\n          onClick={() => void handleConfirm()}\n          disabled={loading}\n        >\n          {loading ? 'Processing…' : confirmLabel}\n        </button>\n      </DialogFooter>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAM,eAAkD;CACtD,QAAS;CACT,SAAS;AACX;AAEA,IAAM,cAAiD;CACrD,QAAQ;EACN;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;EACP;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,IAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAIV,SAAgB,cAAc,EAC5B,MACA,SACA,WACA,OACA,aACA,eAAe,WACf,cAAc,UACd,OAAO,YACc;CACrB,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,gBAAgB,YAAY;EAChC,WAAW,IAAI;EACf,IAAI;GACF,MAAM,UAAU;GAChB,QAAQ;EACV,QAAQ,CAER,UAAU;GACR,WAAW,KAAK;EAClB;CACF;CAEA,OACE,qBAAC,QAAD;EACQ;EACN,SAAS,gBAAgB,KAAA,IAAY;EACrC,cAAc;EACP;EACP,aAAa,OAAO,gBAAgB,WAAW,cAAc,KAAA;EAC7D,MAAK;EANP,UAAA,CAQE,oBAAC,YAAD,EAAA,UACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,uEAAuE,aAAa;IAC/F,eAAY;IAEX,UAAA,SAAS,WACN,oBAAC,eAAD,EAAe,MAAM,GAAK,CAAA,IAC1B,oBAAC,MAAD,EAAM,MAAM,GAAK,CAAA;GAEjB,CAAA,GACN,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,CACF;EACK,CAAA,EAAA,CAAA,GAEZ,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,UAAD;GACE,MAAK;GACL,WAAW;GACX,SAAS;GACT,UAAU;GAET,UAAA;EACK,CAAA,GACR,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,YAAY;GACvB,eAAe,KAAK,cAAc;GAClC,UAAU;GAET,UAAA,UAAU,gBAAgB;EACrB,CAAA,CACI,EAAA,CAAA,CACR;;AAEZ"}

package/lib/index43.cjs

@@ -0,0 +1,47 @@
+//#region src/ui-library/tokens/dimension.ts
+var dimension_exports = /* @__PURE__ */ require("./index2.cjs").__exportAll({ dimension: () => dimension });
+/**
+* DIWA Dimension Tokens
+*
+* Formalizes repeating dimension values identified in the Phase 9 audit.
+* Values are numeric (pixels) or Tailwind class strings as appropriate.
+*
+* Resolved in Phase 11–12:
+*   - Dialog close icon aligned to size={16} (Phase 11).
+*   - ConfirmAction icon badge aligned to h-8 w-8 / rounded-lg (Phase 12).
+*/
+var dimension = {
+	icon: {
+		/** Standard close button icon — target 16, currently Dialog uses 18 */
+		close: 16,
+		/** Icon inside 32×32 header badge */
+		badgeSm: 16,
+		/** Alert/ConfirmDialog tone icons */
+		alert: 20,
+		/** Inline small action icons */
+		actionSm: 14,
+		/** Standard action icons in toolbars, buttons */
+		action: 16
+	},
+	iconBadge: { 
+	/** Standard 32×32 header icon container — h-8 w-8 */
+size: "h-8 w-8" },
+	control: {
+		/** Small control height */
+		sm: "h-9",
+		/** Default control height */
+		md: "h-10",
+		/** Large control height */
+		lg: "h-11"
+	}
+};
+//#endregion
+exports.dimension = dimension;
+Object.defineProperty(exports, "dimension_exports", {
+	enumerable: true,
+	get: function() {
+		return dimension_exports;
+	}
+});
+
+//# sourceMappingURL=index43.cjs.map

package/lib/index43.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index43.cjs","names":[],"sources":["../src/ui-library/tokens/dimension.ts"],"sourcesContent":["/**\n * DIWA Dimension Tokens\n *\n * Formalizes repeating dimension values identified in the Phase 9 audit.\n * Values are numeric (pixels) or Tailwind class strings as appropriate.\n *\n * Resolved in Phase 11–12:\n *   - Dialog close icon aligned to size={16} (Phase 11).\n *   - ConfirmAction icon badge aligned to h-8 w-8 / rounded-lg (Phase 12).\n */\n\nexport const dimension = {\n  // ── Icon sizes (lucide-react `size` prop values) ──────────────────────────\n\n  icon: {\n    /** Standard close button icon — target 16, currently Dialog uses 18 */\n    close:       16,\n    /** Icon inside 32×32 header badge */\n    badgeSm:     16,\n    /** Alert/ConfirmDialog tone icons */\n    alert:       20,\n    /** Inline small action icons */\n    actionSm:    14,\n    /** Standard action icons in toolbars, buttons */\n    action:      16,\n  },\n\n  // ── Icon badge containers ─────────────────────────────────────────────────\n\n  iconBadge: {\n    /** Standard 32×32 header icon container — h-8 w-8 */\n    size:   'h-8 w-8',\n  },\n\n  // ── Component heights ─────────────────────────────────────────────────────\n\n  control: {\n    /** Small control height */\n    sm: 'h-9',\n    /** Default control height */\n    md: 'h-10',\n    /** Large control height */\n    lg: 'h-11',\n  },\n} as const;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,YAAY;CAGvB,MAAM;;EAEJ,OAAa;;EAEb,SAAa;;EAEb,OAAa;;EAEb,UAAa;;EAEb,QAAa;CACf;CAIA,WAAW;;AAET,MAAQ,UACV;CAIA,SAAS;;EAEP,IAAI;;EAEJ,IAAI;;EAEJ,IAAI;CACN;AACF"}