@diwauhris/ui 1.0.0

package/lib/index53.cjs

@@ -0,0 +1,120 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/menu/Menu.tsx
+/**
+* Menu — Design System Component
+*
+* A dropdown menu anchored to a trigger. Opens on trigger click,
+* closes on outside-click or Escape. Full keyboard navigation:
+* ArrowDown/ArrowUp to move between items, Home/End for first/last,
+* Escape to close.
+*
+* Follows WAI-ARIA Menu Button pattern:
+*   - trigger: role="button", aria-haspopup="menu", aria-expanded
+*   - panel:   role="menu"
+*   - items:   role="menuitem"
+*
+* Usage:
+*   <Menu
+*     trigger={<button>Actions</button>}
+*     items={[
+*       { label: 'Edit',   icon: <Pencil size={14} />, onClick: handleEdit },
+*       { label: 'Delete', icon: <Trash2 size={14} />, onClick: handleDelete, tone: 'danger' },
+*     ]}
+*   />
+*/
+function Menu({ trigger, items, ariaLabel = "Menu", align = "right" }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const containerRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const itemRefs = (0, react.useRef)([]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const handlePointerDown = (e) => {
+			if (containerRef.current && !containerRef.current.contains(e.target)) {
+				setOpen(false);
+				(triggerRef.current?.querySelector("button,a,[tabindex]"))?.focus();
+			}
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				setOpen(false);
+				(triggerRef.current?.querySelector("button,a,[tabindex]"))?.focus();
+			}
+		};
+		document.addEventListener("mousedown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		window.setTimeout(() => {
+			itemRefs.current.find((r) => r && !r.disabled)?.focus();
+		}, 0);
+		return () => {
+			document.removeEventListener("mousedown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [open]);
+	const focusItem = (index) => {
+		const next = (index % items.length + items.length) % items.length;
+		itemRefs.current[next]?.focus();
+	};
+	const handleItemKeyDown = (e, index) => {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			focusItem(index + 1);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			focusItem(index - 1);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			focusItem(0);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			focusItem(items.length - 1);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative inline-block",
+		ref: containerRef,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: triggerRef,
+			"aria-expanded": open,
+			"aria-haspopup": "menu",
+			onClick: () => setOpen((v) => !v),
+			className: "cursor-pointer",
+			children: trigger
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "menu",
+			"aria-label": ariaLabel,
+			className: `absolute top-full ${align === "left" ? "left-0" : "right-0"} z-30 mt-1 min-w-[11rem] overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl`,
+			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				ref: (node) => {
+					itemRefs.current[index] = node;
+				},
+				type: "button",
+				role: "menuitem",
+				disabled: item.disabled,
+				onClick: () => {
+					setOpen(false);
+					item.onClick();
+				},
+				onKeyDown: (e) => handleItemKeyDown(e, index),
+				className: [
+					"flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-sm font-semibold transition",
+					"border-l-2 border-transparent",
+					"focus-visible:outline-none focus-visible:bg-[#eef2f8]",
+					"disabled:cursor-not-allowed disabled:opacity-40",
+					item.tone === "danger" ? "text-rose-600 hover:bg-rose-50 hover:border-l-rose-400" : "text-slate-700 hover:bg-[#eef2f8] hover:border-l-brand-blue"
+				].filter(Boolean).join(" "),
+				children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "shrink-0 text-current opacity-60",
+					"aria-hidden": "true",
+					children: item.icon
+				}), item.label]
+			}, item.label))
+		})]
+	});
+}
+//#endregion
+exports.Menu = Menu;
+
+//# sourceMappingURL=index53.cjs.map

package/lib/index53.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index53.cjs","names":[],"sources":["../src/ui-library/gallery/menu/Menu.tsx"],"sourcesContent":["/**\n * Menu — Design System Component\n *\n * A dropdown menu anchored to a trigger. Opens on trigger click,\n * closes on outside-click or Escape. Full keyboard navigation:\n * ArrowDown/ArrowUp to move between items, Home/End for first/last,\n * Escape to close.\n *\n * Follows WAI-ARIA Menu Button pattern:\n *   - trigger: role=\"button\", aria-haspopup=\"menu\", aria-expanded\n *   - panel:   role=\"menu\"\n *   - items:   role=\"menuitem\"\n *\n * Usage:\n *   <Menu\n *     trigger={<button>Actions</button>}\n *     items={[\n *       { label: 'Edit',   icon: <Pencil size={14} />, onClick: handleEdit },\n *       { label: 'Delete', icon: <Trash2 size={14} />, onClick: handleDelete, tone: 'danger' },\n *     ]}\n *   />\n */\n\nimport { useEffect, useRef, useState, type ReactNode } from 'react';\n\nexport type MenuItemTone = 'default' | 'danger';\n\nexport interface MenuItem {\n  label: string;\n  icon?: ReactNode;\n  onClick: () => void;\n  tone?: MenuItemTone;\n  disabled?: boolean;\n}\n\nexport interface MenuProps {\n  /** The trigger element. Should be a visible button-like control. */\n  trigger: ReactNode;\n  /** Menu items. */\n  items: MenuItem[];\n  /** Accessible label for the panel (aria-label). Defaults to \"Menu\". */\n  ariaLabel?: string;\n  /**\n   * Panel alignment relative to the trigger.\n   * 'left'  — panel left edge aligns with trigger left edge\n   * 'right' — panel right edge aligns with trigger right edge (default)\n   */\n  align?: 'left' | 'right';\n}\n\nexport function Menu({\n  trigger,\n  items,\n  ariaLabel = 'Menu',\n  align = 'right',\n}: MenuProps) {\n  const [open, setOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  // ── Outside click and Escape ────────────────────────────────────────────────\n  useEffect(() => {\n    if (!open) return;\n\n    const handlePointerDown = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setOpen(false);\n        // Return focus to the trigger's first focusable child\n        const btn = triggerRef.current?.querySelector<HTMLElement>('button,a,[tabindex]');\n        btn?.focus();\n      }\n    };\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        // Return focus to the trigger's first focusable child\n        const btn = triggerRef.current?.querySelector<HTMLElement>('button,a,[tabindex]');\n        btn?.focus();\n      }\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n    document.addEventListener('keydown', handleKeyDown);\n    // Focus first non-disabled item on open\n    window.setTimeout(() => {\n      const first = itemRefs.current.find((r) => r && !r.disabled);\n      first?.focus();\n    }, 0);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [open]);\n\n  const focusItem = (index: number) => {\n    const next = ((index % items.length) + items.length) % items.length;\n    itemRefs.current[next]?.focus();\n  };\n\n  const handleItemKeyDown = (e: React.KeyboardEvent, index: number) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      focusItem(index + 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      focusItem(index - 1);\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      focusItem(0);\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      focusItem(items.length - 1);\n    }\n  };\n\n  const panelAlign = align === 'left' ? 'left-0' : 'right-0';\n\n  return (\n    <div className=\"relative inline-block\" ref={containerRef}>\n      {/* Trigger wrapper — captures the aria-expanded/haspopup states so screen\n          readers announce menu availability, then forwards click to consumer trigger. */}\n      <div\n        ref={triggerRef}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        onClick={() => setOpen((v) => !v)}\n        className=\"cursor-pointer\"\n      >\n        {trigger}\n      </div>\n\n      {/* Panel */}\n      {open && (\n        <div\n          role=\"menu\"\n          aria-label={ariaLabel}\n          className={`absolute top-full ${panelAlign} z-30 mt-1 min-w-[11rem] overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl`}\n        >\n          {items.map((item, index) => (\n            <button\n              key={item.label}\n              ref={(node) => { itemRefs.current[index] = node; }}\n              type=\"button\"\n              role=\"menuitem\"\n              disabled={item.disabled}\n              onClick={() => {\n                setOpen(false);\n                item.onClick();\n              }}\n              onKeyDown={(e) => handleItemKeyDown(e, index)}\n              className={[\n                'flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-sm font-semibold transition',\n                'border-l-2 border-transparent',\n                'focus-visible:outline-none focus-visible:bg-[#eef2f8]',\n                'disabled:cursor-not-allowed disabled:opacity-40',\n                item.tone === 'danger'\n                  ? 'text-rose-600 hover:bg-rose-50 hover:border-l-rose-400'\n                  : 'text-slate-700 hover:bg-[#eef2f8] hover:border-l-brand-blue',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {item.icon && (\n                <span className=\"shrink-0 text-current opacity-60\" aria-hidden=\"true\">\n                  {item.icon}\n                </span>\n              )}\n              {item.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/lib/index53.mjs

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/ui-library/gallery/menu/Menu.tsx
+/**
+* Menu — Design System Component
+*
+* A dropdown menu anchored to a trigger. Opens on trigger click,
+* closes on outside-click or Escape. Full keyboard navigation:
+* ArrowDown/ArrowUp to move between items, Home/End for first/last,
+* Escape to close.
+*
+* Follows WAI-ARIA Menu Button pattern:
+*   - trigger: role="button", aria-haspopup="menu", aria-expanded
+*   - panel:   role="menu"
+*   - items:   role="menuitem"
+*
+* Usage:
+*   <Menu
+*     trigger={<button>Actions</button>}
+*     items={[
+*       { label: 'Edit',   icon: <Pencil size={14} />, onClick: handleEdit },
+*       { label: 'Delete', icon: <Trash2 size={14} />, onClick: handleDelete, tone: 'danger' },
+*     ]}
+*   />
+*/
+function Menu({ trigger, items, ariaLabel = "Menu", align = "right" }) {
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef(null);
+	const triggerRef = useRef(null);
+	const itemRefs = useRef([]);
+	useEffect(() => {
+		if (!open) return;
+		const handlePointerDown = (e) => {
+			if (containerRef.current && !containerRef.current.contains(e.target)) {
+				setOpen(false);
+				(triggerRef.current?.querySelector("button,a,[tabindex]"))?.focus();
+			}
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				setOpen(false);
+				(triggerRef.current?.querySelector("button,a,[tabindex]"))?.focus();
+			}
+		};
+		document.addEventListener("mousedown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		window.setTimeout(() => {
+			itemRefs.current.find((r) => r && !r.disabled)?.focus();
+		}, 0);
+		return () => {
+			document.removeEventListener("mousedown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [open]);
+	const focusItem = (index) => {
+		const next = (index % items.length + items.length) % items.length;
+		itemRefs.current[next]?.focus();
+	};
+	const handleItemKeyDown = (e, index) => {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			focusItem(index + 1);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			focusItem(index - 1);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			focusItem(0);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			focusItem(items.length - 1);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative inline-block",
+		ref: containerRef,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: triggerRef,
+			"aria-expanded": open,
+			"aria-haspopup": "menu",
+			onClick: () => setOpen((v) => !v),
+			className: "cursor-pointer",
+			children: trigger
+		}), open && /* @__PURE__ */ jsx("div", {
+			role: "menu",
+			"aria-label": ariaLabel,
+			className: `absolute top-full ${align === "left" ? "left-0" : "right-0"} z-30 mt-1 min-w-[11rem] overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl`,
+			children: items.map((item, index) => /* @__PURE__ */ jsxs("button", {
+				ref: (node) => {
+					itemRefs.current[index] = node;
+				},
+				type: "button",
+				role: "menuitem",
+				disabled: item.disabled,
+				onClick: () => {
+					setOpen(false);
+					item.onClick();
+				},
+				onKeyDown: (e) => handleItemKeyDown(e, index),
+				className: [
+					"flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-sm font-semibold transition",
+					"border-l-2 border-transparent",
+					"focus-visible:outline-none focus-visible:bg-[#eef2f8]",
+					"disabled:cursor-not-allowed disabled:opacity-40",
+					item.tone === "danger" ? "text-rose-600 hover:bg-rose-50 hover:border-l-rose-400" : "text-slate-700 hover:bg-[#eef2f8] hover:border-l-brand-blue"
+				].filter(Boolean).join(" "),
+				children: [item.icon && /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-current opacity-60",
+					"aria-hidden": "true",
+					children: item.icon
+				}), item.label]
+			}, item.label))
+		})]
+	});
+}
+//#endregion
+export { Menu };
+
+//# sourceMappingURL=index53.mjs.map

package/lib/index53.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index53.mjs","names":[],"sources":["../src/ui-library/gallery/menu/Menu.tsx"],"sourcesContent":["/**\n * Menu — Design System Component\n *\n * A dropdown menu anchored to a trigger. Opens on trigger click,\n * closes on outside-click or Escape. Full keyboard navigation:\n * ArrowDown/ArrowUp to move between items, Home/End for first/last,\n * Escape to close.\n *\n * Follows WAI-ARIA Menu Button pattern:\n *   - trigger: role=\"button\", aria-haspopup=\"menu\", aria-expanded\n *   - panel:   role=\"menu\"\n *   - items:   role=\"menuitem\"\n *\n * Usage:\n *   <Menu\n *     trigger={<button>Actions</button>}\n *     items={[\n *       { label: 'Edit',   icon: <Pencil size={14} />, onClick: handleEdit },\n *       { label: 'Delete', icon: <Trash2 size={14} />, onClick: handleDelete, tone: 'danger' },\n *     ]}\n *   />\n */\n\nimport { useEffect, useRef, useState, type ReactNode } from 'react';\n\nexport type MenuItemTone = 'default' | 'danger';\n\nexport interface MenuItem {\n  label: string;\n  icon?: ReactNode;\n  onClick: () => void;\n  tone?: MenuItemTone;\n  disabled?: boolean;\n}\n\nexport interface MenuProps {\n  /** The trigger element. Should be a visible button-like control. */\n  trigger: ReactNode;\n  /** Menu items. */\n  items: MenuItem[];\n  /** Accessible label for the panel (aria-label). Defaults to \"Menu\". */\n  ariaLabel?: string;\n  /**\n   * Panel alignment relative to the trigger.\n   * 'left'  — panel left edge aligns with trigger left edge\n   * 'right' — panel right edge aligns with trigger right edge (default)\n   */\n  align?: 'left' | 'right';\n}\n\nexport function Menu({\n  trigger,\n  items,\n  ariaLabel = 'Menu',\n  align = 'right',\n}: MenuProps) {\n  const [open, setOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  // ── Outside click and Escape ────────────────────────────────────────────────\n  useEffect(() => {\n    if (!open) return;\n\n    const handlePointerDown = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setOpen(false);\n        // Return focus to the trigger's first focusable child\n        const btn = triggerRef.current?.querySelector<HTMLElement>('button,a,[tabindex]');\n        btn?.focus();\n      }\n    };\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        // Return focus to the trigger's first focusable child\n        const btn = triggerRef.current?.querySelector<HTMLElement>('button,a,[tabindex]');\n        btn?.focus();\n      }\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n    document.addEventListener('keydown', handleKeyDown);\n    // Focus first non-disabled item on open\n    window.setTimeout(() => {\n      const first = itemRefs.current.find((r) => r && !r.disabled);\n      first?.focus();\n    }, 0);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [open]);\n\n  const focusItem = (index: number) => {\n    const next = ((index % items.length) + items.length) % items.length;\n    itemRefs.current[next]?.focus();\n  };\n\n  const handleItemKeyDown = (e: React.KeyboardEvent, index: number) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      focusItem(index + 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      focusItem(index - 1);\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      focusItem(0);\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      focusItem(items.length - 1);\n    }\n  };\n\n  const panelAlign = align === 'left' ? 'left-0' : 'right-0';\n\n  return (\n    <div className=\"relative inline-block\" ref={containerRef}>\n      {/* Trigger wrapper — captures the aria-expanded/haspopup states so screen\n          readers announce menu availability, then forwards click to consumer trigger. */}\n      <div\n        ref={triggerRef}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        onClick={() => setOpen((v) => !v)}\n        className=\"cursor-pointer\"\n      >\n        {trigger}\n      </div>\n\n      {/* Panel */}\n      {open && (\n        <div\n          role=\"menu\"\n          aria-label={ariaLabel}\n          className={`absolute top-full ${panelAlign} z-30 mt-1 min-w-[11rem] overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl`}\n        >\n          {items.map((item, index) => (\n            <button\n              key={item.label}\n              ref={(node) => { itemRefs.current[index] = node; }}\n              type=\"button\"\n              role=\"menuitem\"\n              disabled={item.disabled}\n              onClick={() => {\n                setOpen(false);\n                item.onClick();\n              }}\n              onKeyDown={(e) => handleItemKeyDown(e, index)}\n              className={[\n                'flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-sm font-semibold transition',\n                'border-l-2 border-transparent',\n                'focus-visible:outline-none focus-visible:bg-[#eef2f8]',\n                'disabled:cursor-not-allowed disabled:opacity-40',\n                item.tone === 'danger'\n                  ? 'text-rose-600 hover:bg-rose-50 hover:border-l-rose-400'\n                  : 'text-slate-700 hover:bg-[#eef2f8] hover:border-l-brand-blue',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {item.icon && (\n                <span className=\"shrink-0 text-current opacity-60\" aria-hidden=\"true\">\n                  {item.icon}\n                </span>\n              )}\n              {item.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,KAAK,EACnB,SACA,OACA,YAAY,QACZ,QAAQ,WACI;CACZ,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,WAAW,OAAwC,CAAC,CAAC;CAG3D,gBAAgB;EACd,IAAI,CAAC,MAAM;EAEX,MAAM,qBAAqB,MAAkB;GAC3C,IAAI,aAAa,WAAW,CAAC,aAAa,QAAQ,SAAS,EAAE,MAAc,GAAG;IAC5E,QAAQ,KAAK;IAGb,CADY,WAAW,SAAS,cAA2B,qBAAqB,EAAA,EAC3E,MAAM;GACb;EACF;EACA,MAAM,iBAAiB,MAAqB;GAC1C,IAAI,EAAE,QAAQ,UAAU;IACtB,EAAE,eAAe;IACjB,QAAQ,KAAK;IAGb,CADY,WAAW,SAAS,cAA2B,qBAAqB,EAAA,EAC3E,MAAM;GACb;EACF;EAEA,SAAS,iBAAiB,aAAa,iBAAiB;EACxD,SAAS,iBAAiB,WAAW,aAAa;EAElD,OAAO,iBAAiB;GAEtB,SADuB,QAAQ,MAAM,MAAM,KAAK,CAAC,EAAE,QACnD,CAAA,EAAO,MAAM;EACf,GAAG,CAAC;EAEJ,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB;GAC3D,SAAS,oBAAoB,WAAW,aAAa;EACvD;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aAAa,UAAkB;EACnC,MAAM,QAAS,QAAQ,MAAM,SAAU,MAAM,UAAU,MAAM;EAC7D,SAAS,QAAQ,KAAK,EAAE,MAAM;CAChC;CAEA,MAAM,qBAAqB,GAAwB,UAAkB;EACnE,IAAI,EAAE,QAAQ,aAAa;GACzB,EAAE,eAAe;GACjB,UAAU,QAAQ,CAAC;EACrB,OAAO,IAAI,EAAE,QAAQ,WAAW;GAC9B,EAAE,eAAe;GACjB,UAAU,QAAQ,CAAC;EACrB,OAAO,IAAI,EAAE,QAAQ,QAAQ;GAC3B,EAAE,eAAe;GACjB,UAAU,CAAC;EACb,OAAO,IAAI,EAAE,QAAQ,OAAO;GAC1B,EAAE,eAAe;GACjB,UAAU,MAAM,SAAS,CAAC;EAC5B;CACF;CAIA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAwB,KAAK;EAA5C,UAAA,CAGE,oBAAC,OAAD;GACE,KAAK;GACL,iBAAe;GACf,iBAAc;GACd,eAAe,SAAS,MAAM,CAAC,CAAC;GAChC,WAAU;GAET,UAAA;EACE,CAAA,GAGJ,QACC,oBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAW,qBArBA,UAAU,SAAS,WAAW,UAqBE;GAE1C,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,UAAD;IAEE,MAAM,SAAS;KAAE,SAAS,QAAQ,SAAS;IAAM;IACjD,MAAK;IACL,MAAK;IACL,UAAU,KAAK;IACf,eAAe;KACb,QAAQ,KAAK;KACb,KAAK,QAAQ;IACf;IACA,YAAY,MAAM,kBAAkB,GAAG,KAAK;IAC5C,WAAW;KACT;KACA;KACA;KACA;KACA,KAAK,SAAS,WACV,2DACA;IACN,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IArBb,UAAA,CAuBG,KAAK,QACJ,oBAAC,QAAD;KAAM,WAAU;KAAmC,eAAY;KAC5D,UAAA,KAAK;IACF,CAAA,GAEP,KAAK,KACA;GA5BD,GAAA,KAAK,KA4BJ,CACT;EACE,CAAA,CAEJ;;AAET"}

package/lib/index54.cjs

@@ -0,0 +1,53 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/card/Card.tsx
+var VARIANT_CLASS = {
+	default: "border border-slate-200 bg-white",
+	outlined: "border-2 border-slate-200 bg-white",
+	elevated: "border border-slate-100 bg-white shadow-lg shadow-slate-100",
+	interactive: "border border-slate-200 bg-white cursor-pointer transition hover:border-brand-blue/40 hover:shadow-md active:scale-[.99]"
+};
+function Card({ variant = "default", children, className = "", onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(onClick ? "button" : "div", {
+		type: onClick ? "button" : void 0,
+		onClick,
+		className: `overflow-hidden rounded-lg ${VARIANT_CLASS[variant]} ${className}`,
+		children
+	});
+}
+function CardHeader({ title, description, actions }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-start justify-between gap-3 px-5 py-4 border-b-2 border-slate-100",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "font-heading text-sm font-bold text-slate-900 truncate",
+				children: title
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-0.5 text-xs font-medium text-slate-400 leading-relaxed",
+				children: description
+			})]
+		}), actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "shrink-0",
+			children: actions
+		})]
+	});
+}
+function CardContent({ children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `px-5 py-4 ${className}`,
+		children
+	});
+}
+function CardFooter({ children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `flex items-center justify-end gap-2 border-t border-slate-100 px-5 py-3 ${className}`,
+		children
+	});
+}
+//#endregion
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+
+//# sourceMappingURL=index54.cjs.map

package/lib/index54.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index54.cjs","names":[],"sources":["../src/ui-library/gallery/card/Card.tsx"],"sourcesContent":["/**\n * Card — Design System Component\n *\n * An elevated surface for grouping related content.\n *\n * Composition:\n *   <Card>\n *     <CardHeader title=\"…\" description=\"…\" actions={…} />\n *     <CardContent>…</CardContent>\n *     <CardFooter>…</CardFooter>\n *   </Card>\n *\n * Variants:  default | outlined | elevated | interactive\n */\n\nimport type { ReactNode } from 'react';\n\nexport type CardVariant = 'default' | 'outlined' | 'elevated' | 'interactive';\n\nexport interface CardProps {\n  variant?: CardVariant;\n  children: ReactNode;\n  className?: string;\n  /** When variant=\"interactive\", called on click */\n  onClick?: () => void;\n}\n\nexport interface CardHeaderProps {\n  title: string;\n  description?: string;\n  /** Optional content aligned to the right (badge, menu, button) */\n  actions?: ReactNode;\n}\n\nexport interface CardContentProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport interface CardFooterProps {\n  children: ReactNode;\n  className?: string;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\nconst VARIANT_CLASS: Record<CardVariant, string> = {\n  default:     'border border-slate-200 bg-white',\n  outlined:    'border-2 border-slate-200 bg-white',\n  elevated:    'border border-slate-100 bg-white shadow-lg shadow-slate-100',\n  interactive: 'border border-slate-200 bg-white cursor-pointer transition hover:border-brand-blue/40 hover:shadow-md active:scale-[.99]',\n};\n\n// ── Components ────────────────────────────────────────────────────────────────\n\nexport function Card({ variant = 'default', children, className = '', onClick }: CardProps) {\n  const Tag = onClick ? 'button' : 'div';\n  return (\n    <Tag\n      type={onClick ? 'button' : undefined}\n      onClick={onClick}\n      className={`overflow-hidden rounded-lg ${VARIANT_CLASS[variant]} ${className}`}\n    >\n      {children}\n    </Tag>\n  );\n}\n\nexport function CardHeader({ title, description, actions }: CardHeaderProps) {\n  return (\n    <div className=\"flex items-start justify-between gap-3 px-5 py-4 border-b-2 border-slate-100\">\n      <div className=\"min-w-0\">\n        <h3 className=\"font-heading text-sm font-bold text-slate-900 truncate\">{title}</h3>\n        {description && (\n          <p className=\"mt-0.5 text-xs font-medium text-slate-400 leading-relaxed\">{description}</p>\n        )}\n      </div>\n      {actions && <div className=\"shrink-0\">{actions}</div>}\n    </div>\n  );\n}\n\nexport function CardContent({ children, className = '' }: CardContentProps) {\n  return <div className={`px-5 py-4 ${className}`}>{children}</div>;\n}\n\nexport function CardFooter({ children, className = '' }: CardFooterProps) {\n  return (\n    <div className={`flex items-center justify-end gap-2 border-t border-slate-100 px-5 py-3 ${className}`}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;AA8CA,IAAM,gBAA6C;CACjD,SAAa;CACb,UAAa;CACb,UAAa;CACb,aAAa;AACf;AAIA,SAAgB,KAAK,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,WAAsB;CAE1F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAFU,UAAU,WAAW,OAE/B;EACE,MAAM,UAAU,WAAW,KAAA;EAClB;EACT,WAAW,8BAA8B,cAAc,SAAS,GAAG;EAElE;CACE,CAAA;AAET;AAEA,SAAgB,WAAW,EAAE,OAAO,aAAa,WAA4B;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,WAAU;IAA0D,UAAA;GAAU,CAAA,GACjF,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,WAAU;IAA6D,UAAA;GAAe,CAAA,CAExF;EACJ,CAAA,GAAA,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GAAY,UAAA;EAAa,CAAA,CACjD;;AAET;AAEA,SAAgB,YAAY,EAAE,UAAU,YAAY,MAAwB;CAC1E,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,aAAa;EAAc;CAAc,CAAA;AAClE;AAEA,SAAgB,WAAW,EAAE,UAAU,YAAY,MAAuB;CACxE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,2EAA2E;EACxF;CACE,CAAA;AAET"}

package/lib/index54.mjs

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/card/Card.tsx
+var VARIANT_CLASS = {
+	default: "border border-slate-200 bg-white",
+	outlined: "border-2 border-slate-200 bg-white",
+	elevated: "border border-slate-100 bg-white shadow-lg shadow-slate-100",
+	interactive: "border border-slate-200 bg-white cursor-pointer transition hover:border-brand-blue/40 hover:shadow-md active:scale-[.99]"
+};
+function Card({ variant = "default", children, className = "", onClick }) {
+	return /* @__PURE__ */ jsx(onClick ? "button" : "div", {
+		type: onClick ? "button" : void 0,
+		onClick,
+		className: `overflow-hidden rounded-lg ${VARIANT_CLASS[variant]} ${className}`,
+		children
+	});
+}
+function CardHeader({ title, description, actions }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between gap-3 px-5 py-4 border-b-2 border-slate-100",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "font-heading text-sm font-bold text-slate-900 truncate",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "mt-0.5 text-xs font-medium text-slate-400 leading-relaxed",
+				children: description
+			})]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			children: actions
+		})]
+	});
+}
+function CardContent({ children, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `px-5 py-4 ${className}`,
+		children
+	});
+}
+function CardFooter({ children, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `flex items-center justify-end gap-2 border-t border-slate-100 px-5 py-3 ${className}`,
+		children
+	});
+}
+//#endregion
+export { Card, CardContent, CardFooter, CardHeader };
+
+//# sourceMappingURL=index54.mjs.map

package/lib/index54.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index54.mjs","names":[],"sources":["../src/ui-library/gallery/card/Card.tsx"],"sourcesContent":["/**\n * Card — Design System Component\n *\n * An elevated surface for grouping related content.\n *\n * Composition:\n *   <Card>\n *     <CardHeader title=\"…\" description=\"…\" actions={…} />\n *     <CardContent>…</CardContent>\n *     <CardFooter>…</CardFooter>\n *   </Card>\n *\n * Variants:  default | outlined | elevated | interactive\n */\n\nimport type { ReactNode } from 'react';\n\nexport type CardVariant = 'default' | 'outlined' | 'elevated' | 'interactive';\n\nexport interface CardProps {\n  variant?: CardVariant;\n  children: ReactNode;\n  className?: string;\n  /** When variant=\"interactive\", called on click */\n  onClick?: () => void;\n}\n\nexport interface CardHeaderProps {\n  title: string;\n  description?: string;\n  /** Optional content aligned to the right (badge, menu, button) */\n  actions?: ReactNode;\n}\n\nexport interface CardContentProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport interface CardFooterProps {\n  children: ReactNode;\n  className?: string;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\nconst VARIANT_CLASS: Record<CardVariant, string> = {\n  default:     'border border-slate-200 bg-white',\n  outlined:    'border-2 border-slate-200 bg-white',\n  elevated:    'border border-slate-100 bg-white shadow-lg shadow-slate-100',\n  interactive: 'border border-slate-200 bg-white cursor-pointer transition hover:border-brand-blue/40 hover:shadow-md active:scale-[.99]',\n};\n\n// ── Components ────────────────────────────────────────────────────────────────\n\nexport function Card({ variant = 'default', children, className = '', onClick }: CardProps) {\n  const Tag = onClick ? 'button' : 'div';\n  return (\n    <Tag\n      type={onClick ? 'button' : undefined}\n      onClick={onClick}\n      className={`overflow-hidden rounded-lg ${VARIANT_CLASS[variant]} ${className}`}\n    >\n      {children}\n    </Tag>\n  );\n}\n\nexport function CardHeader({ title, description, actions }: CardHeaderProps) {\n  return (\n    <div className=\"flex items-start justify-between gap-3 px-5 py-4 border-b-2 border-slate-100\">\n      <div className=\"min-w-0\">\n        <h3 className=\"font-heading text-sm font-bold text-slate-900 truncate\">{title}</h3>\n        {description && (\n          <p className=\"mt-0.5 text-xs font-medium text-slate-400 leading-relaxed\">{description}</p>\n        )}\n      </div>\n      {actions && <div className=\"shrink-0\">{actions}</div>}\n    </div>\n  );\n}\n\nexport function CardContent({ children, className = '' }: CardContentProps) {\n  return <div className={`px-5 py-4 ${className}`}>{children}</div>;\n}\n\nexport function CardFooter({ children, className = '' }: CardFooterProps) {\n  return (\n    <div className={`flex items-center justify-end gap-2 border-t border-slate-100 px-5 py-3 ${className}`}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;AA8CA,IAAM,gBAA6C;CACjD,SAAa;CACb,UAAa;CACb,UAAa;CACb,aAAa;AACf;AAIA,SAAgB,KAAK,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,WAAsB;CAE1F,OACE,oBAFU,UAAU,WAAW,OAE/B;EACE,MAAM,UAAU,WAAW,KAAA;EAClB;EACT,WAAW,8BAA8B,cAAc,SAAS,GAAG;EAElE;CACE,CAAA;AAET;AAEA,SAAgB,WAAW,EAAE,OAAO,aAAa,WAA4B;CAC3E,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,MAAD;IAAI,WAAU;IAA0D,UAAA;GAAU,CAAA,GACjF,eACC,oBAAC,KAAD;IAAG,WAAU;IAA6D,UAAA;GAAe,CAAA,CAExF;EACJ,CAAA,GAAA,WAAW,oBAAC,OAAD;GAAK,WAAU;GAAY,UAAA;EAAa,CAAA,CACjD;;AAET;AAEA,SAAgB,YAAY,EAAE,UAAU,YAAY,MAAwB;CAC1E,OAAO,oBAAC,OAAD;EAAK,WAAW,aAAa;EAAc;CAAc,CAAA;AAClE;AAEA,SAAgB,WAAW,EAAE,UAAU,YAAY,MAAuB;CACxE,OACE,oBAAC,OAAD;EAAK,WAAW,2EAA2E;EACxF;CACE,CAAA;AAET"}

package/lib/index55.cjs

@@ -0,0 +1,130 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/accordion/Accordion.tsx
+/**
+* Accordion — Design System Component
+*
+* Disclosure/accordion pattern with support for single-open and
+* multiple-open modes, controlled/uncontrolled state, and disabled items.
+*
+* WAI-ARIA Accordion pattern:
+*   - Trigger is a <button> with aria-expanded and aria-controls
+*   - Content panel has a stable id referenced by aria-controls
+*   - Disabled triggers have aria-disabled + disabled attribute
+*
+* Keyboard:
+*   - Tab moves between triggers
+*   - Enter / Space toggle the focused trigger
+*
+* Composition:
+*   <Accordion type="single" defaultValue="item-1">
+*     <AccordionItem value="item-1">
+*       <AccordionTrigger>Section heading</AccordionTrigger>
+*       <AccordionContent>Content here.</AccordionContent>
+*     </AccordionItem>
+*   </Accordion>
+*/
+var AccordionContext = (0, react.createContext)(null);
+function useAccordionContext() {
+	const ctx = (0, react.useContext)(AccordionContext);
+	if (!ctx) throw new Error("AccordionItem must be used inside <Accordion>");
+	return ctx;
+}
+var ItemContext = (0, react.createContext)(null);
+function useItemContext() {
+	const ctx = (0, react.useContext)(ItemContext);
+	if (!ctx) throw new Error("AccordionTrigger/AccordionContent must be inside <AccordionItem>");
+	return ctx;
+}
+function Accordion({ type = "single", defaultValue, value: controlledValue, onValueChange, children, className = "" }) {
+	const isControlled = controlledValue !== void 0;
+	const [uncontrolled, setUncontrolled] = (0, react.useState)(() => {
+		if (!defaultValue) return /* @__PURE__ */ new Set();
+		return new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue]);
+	});
+	const openValues = isControlled ? new Set(Array.isArray(controlledValue) ? controlledValue : [controlledValue]) : uncontrolled;
+	const toggle = (val) => {
+		let next;
+		if (type === "single") next = openValues.has(val) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([val]);
+		else {
+			next = new Set(openValues);
+			if (next.has(val)) next.delete(val);
+			else next.add(val);
+		}
+		if (!isControlled) setUncontrolled(next);
+		if (onValueChange) onValueChange(type === "single" ? next.values().next().value ?? "" : [...next]);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionContext.Provider, {
+		value: {
+			type,
+			openValues,
+			toggle
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `divide-y divide-slate-200 rounded-xl border border-slate-200 ${className}`,
+			children
+		})
+	});
+}
+function AccordionItem({ value, disabled = false, children, className = "" }) {
+	const baseId = (0, react.useId)().replace(/:/g, "");
+	const panelId = `${baseId}-panel`;
+	const triggerId = `${baseId}-trigger`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemContext.Provider, {
+		value: {
+			value,
+			disabled,
+			panelId,
+			triggerId
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `${className}`,
+			children
+		})
+	});
+}
+function AccordionTrigger({ children, className = "" }) {
+	const { openValues, toggle } = useAccordionContext();
+	const { value, disabled, panelId, triggerId } = useItemContext();
+	const isOpen = openValues.has(value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		id: triggerId,
+		type: "button",
+		"aria-expanded": isOpen,
+		"aria-controls": panelId,
+		"aria-disabled": disabled || void 0,
+		disabled,
+		onClick: () => toggle(value),
+		className: [
+			"flex w-full items-center justify-between px-5 py-4 text-left text-sm font-semibold",
+			"transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30",
+			disabled ? "cursor-not-allowed text-slate-300" : "text-slate-800 hover:bg-slate-50",
+			className
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+			size: 16,
+			"aria-hidden": "true",
+			className: `shrink-0 text-slate-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+		})]
+	});
+}
+function AccordionContent({ children, className = "" }) {
+	const { openValues } = useAccordionContext();
+	const { value, panelId, triggerId } = useItemContext();
+	if (!openValues.has(value)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		id: panelId,
+		role: "region",
+		"aria-labelledby": triggerId,
+		className: `border-t border-slate-100 px-5 py-4 text-sm font-medium text-slate-600 ${className}`,
+		children
+	});
+}
+//#endregion
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
+
+//# sourceMappingURL=index55.cjs.map

package/lib/index55.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index55.cjs","names":[],"sources":["../src/ui-library/gallery/accordion/Accordion.tsx"],"sourcesContent":["/**\n * Accordion — Design System Component\n *\n * Disclosure/accordion pattern with support for single-open and\n * multiple-open modes, controlled/uncontrolled state, and disabled items.\n *\n * WAI-ARIA Accordion pattern:\n *   - Trigger is a <button> with aria-expanded and aria-controls\n *   - Content panel has a stable id referenced by aria-controls\n *   - Disabled triggers have aria-disabled + disabled attribute\n *\n * Keyboard:\n *   - Tab moves between triggers\n *   - Enter / Space toggle the focused trigger\n *\n * Composition:\n *   <Accordion type=\"single\" defaultValue=\"item-1\">\n *     <AccordionItem value=\"item-1\">\n *       <AccordionTrigger>Section heading</AccordionTrigger>\n *       <AccordionContent>Content here.</AccordionContent>\n *     </AccordionItem>\n *   </Accordion>\n */\n\nimport { createContext, useContext, useId, useState, type ReactNode } from 'react';\nimport { ChevronDown } from 'lucide-react';\n\n// ── Context ───────────────────────────────────────────────────────────────────\n\ninterface AccordionContextValue {\n  type: 'single' | 'multiple';\n  openValues: Set<string>;\n  toggle: (value: string) => void;\n}\n\nconst AccordionContext = createContext<AccordionContextValue | null>(null);\n\nfunction useAccordionContext() {\n  const ctx = useContext(AccordionContext);\n  if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');\n  return ctx;\n}\n\ninterface ItemContextValue {\n  value: string;\n  disabled: boolean;\n  panelId: string;\n  triggerId: string;\n}\n\nconst ItemContext = createContext<ItemContextValue | null>(null);\n\nfunction useItemContext() {\n  const ctx = useContext(ItemContext);\n  if (!ctx) throw new Error('AccordionTrigger/AccordionContent must be inside <AccordionItem>');\n  return ctx;\n}\n\n// ── Accordion (root) ──────────────────────────────────────────────────────────\n\nexport interface AccordionProps {\n  /**\n   * 'single' — only one item open at a time (default)\n   * 'multiple' — any number of items can be open simultaneously\n   */\n  type?: 'single' | 'multiple';\n  /** Uncontrolled: initial open value(s) */\n  defaultValue?: string | string[];\n  /** Controlled: open value(s) */\n  value?: string | string[];\n  /** Controlled: called when open values change */\n  onValueChange?: (value: string | string[]) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Accordion({\n  type = 'single',\n  defaultValue,\n  value: controlledValue,\n  onValueChange,\n  children,\n  className = '',\n}: AccordionProps) {\n  const isControlled = controlledValue !== undefined;\n\n  const [uncontrolled, setUncontrolled] = useState<Set<string>>(() => {\n    if (!defaultValue) return new Set();\n    return new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue]);\n  });\n\n  const openValues: Set<string> = isControlled\n    ? new Set(Array.isArray(controlledValue) ? controlledValue : [controlledValue])\n    : uncontrolled;\n\n  const toggle = (val: string) => {\n    let next: Set<string>;\n    if (type === 'single') {\n      next = openValues.has(val) ? new Set() : new Set([val]);\n    } else {\n      next = new Set(openValues);\n      if (next.has(val)) next.delete(val); else next.add(val);\n    }\n    if (!isControlled) setUncontrolled(next);\n    if (onValueChange) {\n      onValueChange(type === 'single' ? (next.values().next().value ?? '') : [...next]);\n    }\n  };\n\n  return (\n    <AccordionContext.Provider value={{ type, openValues, toggle }}>\n      <div className={`divide-y divide-slate-200 rounded-xl border border-slate-200 ${className}`}>\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\n// ── AccordionItem ─────────────────────────────────────────────────────────────\n\nexport interface AccordionItemProps {\n  value: string;\n  disabled?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function AccordionItem({ value, disabled = false, children, className = '' }: AccordionItemProps) {\n  const baseId   = useId().replace(/:/g, '');\n  const panelId   = `${baseId}-panel`;\n  const triggerId = `${baseId}-trigger`;\n\n  return (\n    <ItemContext.Provider value={{ value, disabled, panelId, triggerId }}>\n      <div className={`${className}`}>\n        {children}\n      </div>\n    </ItemContext.Provider>\n  );\n}\n\n// ── AccordionTrigger ──────────────────────────────────────────────────────────\n\nexport interface AccordionTriggerProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function AccordionTrigger({ children, className = '' }: AccordionTriggerProps) {\n  const { openValues, toggle } = useAccordionContext();\n  const { value, disabled, panelId, triggerId } = useItemContext();\n  const isOpen = openValues.has(value);\n\n  return (\n    <button\n      id={triggerId}\n      type=\"button\"\n      aria-expanded={isOpen}\n      aria-controls={panelId}\n      aria-disabled={disabled || undefined}\n      disabled={disabled}\n      onClick={() => toggle(value)}\n      className={[\n        'flex w-full items-center justify-between px-5 py-4 text-left text-sm font-semibold',\n        'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30',\n        disabled\n          ? 'cursor-not-allowed text-slate-300'\n          : 'text-slate-800 hover:bg-slate-50',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <span>{children}</span>\n      <ChevronDown\n        size={16}\n        aria-hidden=\"true\"\n        className={`shrink-0 text-slate-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}\n      />\n    </button>\n  );\n}\n\n// ── AccordionContent ──────────────────────────────────────────────────────────\n\nexport interface AccordionContentProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function AccordionContent({ children, className = '' }: AccordionContentProps) {\n  const { openValues } = useAccordionContext();\n  const { value, panelId, triggerId } = useItemContext();\n  const isOpen = openValues.has(value);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      id={panelId}\n      role=\"region\"\n      aria-labelledby={triggerId}\n      className={`border-t border-slate-100 px-5 py-4 text-sm font-medium text-slate-600 ${className}`}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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"}