@diwauhris/ui 1.0.0

package/lib/index50.mjs

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+//#region src/ui-library/gallery/stepper/Stepper.tsx
+function resolveState(id, currentStep, completedSteps, disabledSteps) {
+	if (disabledSteps.includes(id)) return "disabled";
+	if (completedSteps.includes(id)) return "completed";
+	if (id === currentStep) return "current";
+	return "upcoming";
+}
+function StepCircle({ state, number, icon }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-bold transition-all ${{
+			completed: "border-brand-blue bg-brand-blue text-white",
+			current: "border-brand-blue bg-white text-brand-blue shadow-md shadow-brand-blue/15",
+			upcoming: "border-slate-300 bg-white text-slate-400",
+			disabled: "border-slate-200 bg-slate-50 text-slate-300"
+		}[state]}`,
+		"aria-hidden": "true",
+		children: state === "completed" ? icon ?? /* @__PURE__ */ jsx(Check, {
+			size: 16,
+			strokeWidth: 3
+		}) : icon ?? /* @__PURE__ */ jsx("span", { children: number })
+	});
+}
+function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [], orientation = "horizontal", className = "" }) {
+	const isHorizontal = orientation === "horizontal";
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "Progress",
+		"aria-orientation": orientation,
+		className: [isHorizontal ? "flex items-start" : "flex flex-col", className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsx("ol", {
+			className: [isHorizontal ? "flex w-full items-start" : "flex flex-col"].filter(Boolean).join(" "),
+			children: steps.map((step, idx) => {
+				const state = resolveState(step.id, currentStep, completedSteps, disabledSteps);
+				const isCurrent = state === "current";
+				const isLast = idx === steps.length - 1;
+				const labelColor = {
+					completed: "text-brand-blue",
+					current: "text-brand-navy font-bold",
+					upcoming: "text-slate-500",
+					disabled: "text-slate-300"
+				};
+				return /* @__PURE__ */ jsxs("li", {
+					"aria-current": isCurrent ? "step" : void 0,
+					className: isHorizontal ? "flex flex-1 items-start" : "flex items-start gap-4 pb-8 last:pb-0",
+					children: [
+						!isHorizontal && /* @__PURE__ */ jsxs("div", {
+							className: "relative flex flex-col items-center",
+							children: [/* @__PURE__ */ jsx(StepCircle, {
+								state,
+								number: idx + 1,
+								icon: step.icon
+							}), !isLast && /* @__PURE__ */ jsx("div", {
+								className: `mt-1 w-0.5 flex-1 min-h-[32px] ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+								"aria-hidden": "true"
+							})]
+						}),
+						isHorizontal && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-1 flex-col items-center",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex w-full items-center",
+								children: [/* @__PURE__ */ jsx(StepCircle, {
+									state,
+									number: idx + 1,
+									icon: step.icon
+								}), !isLast && /* @__PURE__ */ jsx("div", {
+									className: `h-0.5 flex-1 ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+									"aria-hidden": "true"
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "mt-2 text-center px-1",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: `text-sm leading-tight ${labelColor[state]}`,
+									children: step.label
+								}), step.description && /* @__PURE__ */ jsx("p", {
+									className: "mt-0.5 text-xs text-slate-400 leading-tight",
+									children: step.description
+								})]
+							})]
+						}),
+						!isHorizontal && /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1 pt-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: `text-sm leading-tight ${labelColor[state]}`,
+								children: step.label
+							}), step.description && /* @__PURE__ */ jsx("p", {
+								className: "mt-0.5 text-xs text-slate-400 leading-tight",
+								children: step.description
+							})]
+						})
+					]
+				}, step.id);
+			})
+		})
+	});
+}
+//#endregion
+export { Stepper };
+
+//# sourceMappingURL=index50.mjs.map

package/lib/index50.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index50.mjs","names":[],"sources":["../src/ui-library/gallery/stepper/Stepper.tsx"],"sourcesContent":["/**\n * Stepper — Design System Component\n *\n * A step progress indicator for multi-step workflows.\n *\n * Step states: completed | current | upcoming | disabled\n *\n * Accessibility:\n *   - The current step receives aria-current=\"step\".\n *   - Completed steps have aria-label with a \"Completed\" suffix when no icon.\n *   - The step list is an ordered list (<ol>) — each step is an <li>.\n *   - Orientation is exposed via aria-orientation on the container.\n *\n * API:\n *   <Stepper\n *     steps={[\n *       { id: '1', label: 'Personal Details', description: 'Name and contact' },\n *       { id: '2', label: 'Employment',       description: 'IDs and dates' },\n *     ]}\n *     currentStep=\"2\"\n *     completedSteps={['1']}\n *   />\n */\n\nimport type { ReactNode } from 'react';\nimport { Check } from 'lucide-react';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type StepState = 'completed' | 'current' | 'upcoming' | 'disabled';\n\nexport interface StepDef {\n  id: string;\n  label: string;\n  description?: string;\n  icon?: ReactNode;\n}\n\nexport interface StepperProps {\n  steps: StepDef[];\n  /** The id of the currently active step */\n  currentStep: string;\n  /** IDs of steps that are completed */\n  completedSteps?: string[];\n  /** IDs of steps that are disabled */\n  disabledSteps?: string[];\n  orientation?: 'horizontal' | 'vertical';\n  className?: string;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\nfunction resolveState(\n  id: string,\n  currentStep: string,\n  completedSteps: string[],\n  disabledSteps: string[],\n): StepState {\n  if (disabledSteps.includes(id)) return 'disabled';\n  if (completedSteps.includes(id)) return 'completed';\n  if (id === currentStep) return 'current';\n  return 'upcoming';\n}\n\n// ── Step indicator circle ─────────────────────────────────────────────────────\n\nfunction StepCircle({ state, number, icon }: { state: StepState; number: number; icon?: ReactNode }) {\n  const base = 'flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-bold transition-all';\n\n  const styles: Record<StepState, string> = {\n    completed: 'border-brand-blue bg-brand-blue text-white',\n    current:   'border-brand-blue bg-white text-brand-blue shadow-md shadow-brand-blue/15',\n    upcoming:  'border-slate-300 bg-white text-slate-400',\n    disabled:  'border-slate-200 bg-slate-50 text-slate-300',\n  };\n\n  return (\n    <div className={`${base} ${styles[state]}`} aria-hidden=\"true\">\n      {state === 'completed' ? (\n        icon ?? <Check size={16} strokeWidth={3} />\n      ) : (\n        icon ?? <span>{number}</span>\n      )}\n    </div>\n  );\n}\n\n// ── Stepper ───────────────────────────────────────────────────────────────────\n\nexport function Stepper({\n  steps,\n  currentStep,\n  completedSteps = [],\n  disabledSteps  = [],\n  orientation = 'horizontal',\n  className = '',\n}: StepperProps) {\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <div\n      aria-label=\"Progress\"\n      aria-orientation={orientation}\n      className={[\n        isHorizontal\n          ? 'flex items-start'\n          : 'flex flex-col',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <ol\n        className={[\n          isHorizontal ? 'flex w-full items-start' : 'flex flex-col',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {steps.map((step, idx) => {\n          const state = resolveState(step.id, currentStep, completedSteps, disabledSteps);\n          const isCurrent = state === 'current';\n          const isLast = idx === steps.length - 1;\n\n          const labelColor: Record<StepState, string> = {\n            completed: 'text-brand-blue',\n            current:   'text-brand-navy font-bold',\n            upcoming:  'text-slate-500',\n            disabled:  'text-slate-300',\n          };\n\n          return (\n            <li\n              key={step.id}\n              aria-current={isCurrent ? 'step' : undefined}\n              className={isHorizontal ? 'flex flex-1 items-start' : 'flex items-start gap-4 pb-8 last:pb-0'}\n            >\n              {/* Vertical connector + circle column */}\n              {!isHorizontal && (\n                <div className=\"relative flex flex-col items-center\">\n                  <StepCircle state={state} number={idx + 1} icon={step.icon} />\n                  {!isLast && (\n                    <div\n                      className={`mt-1 w-0.5 flex-1 min-h-[32px] ${\n                        state === 'completed' ? 'bg-brand-blue/50' : 'bg-slate-200'\n                      }`}\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </div>\n              )}\n\n              {/* Horizontal: circle + connector */}\n              {isHorizontal && (\n                <div className=\"flex flex-1 flex-col items-center\">\n                  <div className=\"flex w-full items-center\">\n                    <StepCircle state={state} number={idx + 1} icon={step.icon} />\n                    {!isLast && (\n                      <div\n                        className={`h-0.5 flex-1 ${\n                          state === 'completed' ? 'bg-brand-blue/50' : 'bg-slate-200'\n                        }`}\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                  </div>\n                  {/* Label below circle */}\n                  <div className=\"mt-2 text-center px-1\">\n                    <p className={`text-sm leading-tight ${labelColor[state]}`}>{step.label}</p>\n                    {step.description && (\n                      <p className=\"mt-0.5 text-xs text-slate-400 leading-tight\">{step.description}</p>\n                    )}\n                  </div>\n                </div>\n              )}\n\n              {/* Vertical: label to the right */}\n              {!isHorizontal && (\n                <div className=\"min-w-0 flex-1 pt-1\">\n                  <p className={`text-sm leading-tight ${labelColor[state]}`}>{step.label}</p>\n                  {step.description && (\n                    <p className=\"mt-0.5 text-xs text-slate-400 leading-tight\">{step.description}</p>\n                  )}\n                </div>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </div>\n  );\n}\n"],"mappings":";;;AAoDA,SAAS,aACP,IACA,aACA,gBACA,eACW;CACX,IAAI,cAAc,SAAS,EAAE,GAAG,OAAO;CACvC,IAAI,eAAe,SAAS,EAAE,GAAG,OAAO;CACxC,IAAI,OAAO,aAAa,OAAO;CAC/B,OAAO;AACT;AAIA,SAAS,WAAW,EAAE,OAAO,QAAQ,QAAgE;CAUnG,OACE,oBAAC,OAAD;EAAK,WAAW,4GAAW;GAP3B,WAAW;GACX,SAAW;GACX,UAAW;GACX,UAAW;EAIgB,EAAO;EAAU,eAAY;EACrD,UAAA,UAAU,cACT,QAAQ,oBAAC,OAAD;GAAO,MAAM;GAAI,aAAa;EAAI,CAAA,IAE1C,QAAQ,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA;CAE3B,CAAA;AAET;AAIA,SAAgB,QAAQ,EACtB,OACA,aACA,iBAAiB,CAAC,GAClB,gBAAiB,CAAC,GAClB,cAAc,cACd,YAAY,MACG;CACf,MAAM,eAAe,gBAAgB;CAErC,OACE,oBAAC,OAAD;EACE,cAAW;EACX,oBAAkB;EAClB,WAAW,CACT,eACI,qBACA,iBACJ,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEX,UAAA,oBAAC,MAAD;GACE,WAAW,CACT,eAAe,4BAA4B,eAC7C,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEV,UAAA,MAAM,KAAK,MAAM,QAAQ;IACxB,MAAM,QAAQ,aAAa,KAAK,IAAI,aAAa,gBAAgB,aAAa;IAC9E,MAAM,YAAY,UAAU;IAC5B,MAAM,SAAS,QAAQ,MAAM,SAAS;IAEtC,MAAM,aAAwC;KAC5C,WAAW;KACX,SAAW;KACX,UAAW;KACX,UAAW;IACb;IAEA,OACE,qBAAC,MAAD;KAEE,gBAAc,YAAY,SAAS,KAAA;KACnC,WAAW,eAAe,4BAA4B;KAHxD,UAAA;MAMG,CAAC,gBACA,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,oBAAC,YAAD;QAAmB;QAAO,QAAQ,MAAM;QAAG,MAAM,KAAK;OAAO,CAAA,GAC5D,CAAC,UACA,oBAAC,OAAD;QACE,WAAW,kCACT,UAAU,cAAc,qBAAqB;QAE/C,eAAY;OACb,CAAA,CAEA;;MAIN,gBACC,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,qBAAC,OAAD;QAAK,WAAU;QAAf,UAAA,CACE,oBAAC,YAAD;SAAmB;SAAO,QAAQ,MAAM;SAAG,MAAM,KAAK;QAAO,CAAA,GAC5D,CAAC,UACA,oBAAC,OAAD;SACE,WAAW,gBACT,UAAU,cAAc,qBAAqB;SAE/C,eAAY;QACb,CAAA,CAEA;OAEL,CAAA,GAAA,qBAAC,OAAD;QAAK,WAAU;QAAf,UAAA,CACE,oBAAC,KAAD;SAAG,WAAW,yBAAyB,WAAW;SAAW,UAAA,KAAK;QAAS,CAAA,GAC1E,KAAK,eACJ,oBAAC,KAAD;SAAG,WAAU;SAA+C,UAAA,KAAK;QAAe,CAAA,CAE/E;OACF,CAAA,CAAA;;MAIN,CAAC,gBACA,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,oBAAC,KAAD;QAAG,WAAW,yBAAyB,WAAW;QAAW,UAAA,KAAK;OAAS,CAAA,GAC1E,KAAK,eACJ,oBAAC,KAAD;QAAG,WAAU;QAA+C,UAAA,KAAK;OAAe,CAAA,CAE/E;;KAEL;IApDG,GAAA,KAAK,EAoDR;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

package/lib/index51.cjs

@@ -0,0 +1,116 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/sidebar/Sidebar.tsx
+/**
+* Sidebar — Design System Component
+*
+* A vertical navigation panel. Supports grouped navigation sections,
+* collapsible groups, active item state, icons, and badges.
+*
+* Accessibility:
+*   - Renders a <nav> landmark with aria-label.
+*   - Active item receives aria-current="page".
+*   - Collapsible group buttons have aria-expanded.
+*   - Collapsed content is hidden with aria-hidden + display:none equivalent.
+*
+* Composition:
+*   <SidebarNav aria-label="Main navigation">
+*     <SidebarSection label="Workspace">
+*       <SidebarItem href="/dashboard" icon={<LayoutDashboard />} active>Dashboard</SidebarItem>
+*       <SidebarItem href="/employees" icon={<Users />}>Employees</SidebarItem>
+*       <SidebarItem href="/reports" icon={<BarChart2 />} badge="3">Reports</SidebarItem>
+*     </SidebarSection>
+*     <SidebarGroup label="Settings" collapsible>
+*       <SidebarItem href="/settings/profile">Profile</SidebarItem>
+*     </SidebarGroup>
+*   </SidebarNav>
+*/
+function SidebarNav({ "aria-label": ariaLabel, children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"aria-label": ariaLabel,
+		className: `flex w-full flex-col gap-1 ${className}`,
+		children
+	});
+}
+function SidebarSection({ label, children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `mb-3 ${className}`,
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "mb-1.5 px-3 text-[10px] font-bold uppercase tracking-widest text-slate-400",
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "flex flex-col gap-0.5",
+			role: "list",
+			children
+		})]
+	});
+}
+function SidebarGroup({ label, defaultExpanded = true, children, className = "" }) {
+	const [expanded, setExpanded] = (0, react.useState)(defaultExpanded);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `mb-2 ${className}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			onClick: () => setExpanded(!expanded),
+			className: "flex w-full items-center justify-between rounded-lg px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+				size: 12,
+				"aria-hidden": "true",
+				className: `transition-transform duration-200 ${expanded ? "" : "-rotate-90"}`
+			})]
+		}), expanded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "flex flex-col gap-0.5 mt-0.5",
+			role: "list",
+			children
+		})]
+	});
+}
+function SidebarItem({ href, onClick, active = false, icon, badge, disabled = false, children, className = "" }) {
+	const baseClass = [
+		"flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-semibold transition",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+		active ? "bg-blue-50 text-brand-blue" : disabled ? "cursor-not-allowed text-slate-300" : "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
+		className
+	].filter(Boolean).join(" ");
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `shrink-0 ${active ? "text-brand-blue" : "text-slate-400"}`,
+			"aria-hidden": "true",
+			children: icon
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "flex-1 truncate",
+			children
+		}),
+		badge !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `ml-auto shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-bold ${active ? "bg-blue-50 text-brand-blue" : "bg-slate-100 text-slate-500"}`,
+			"aria-label": `${badge} items`,
+			children: badge
+		})
+	] });
+	if (href && !disabled) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href,
+		"aria-current": active ? "page" : void 0,
+		className: baseClass,
+		onClick,
+		children: content
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-current": active ? "page" : void 0,
+		"aria-disabled": disabled || void 0,
+		disabled,
+		onClick: !disabled ? onClick : void 0,
+		className: baseClass,
+		children: content
+	}) });
+}
+//#endregion
+exports.SidebarGroup = SidebarGroup;
+exports.SidebarItem = SidebarItem;
+exports.SidebarNav = SidebarNav;
+exports.SidebarSection = SidebarSection;
+
+//# sourceMappingURL=index51.cjs.map

package/lib/index51.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index51.cjs","names":[],"sources":["../src/ui-library/gallery/sidebar/Sidebar.tsx"],"sourcesContent":["/**\n * Sidebar — Design System Component\n *\n * A vertical navigation panel. Supports grouped navigation sections,\n * collapsible groups, active item state, icons, and badges.\n *\n * Accessibility:\n *   - Renders a <nav> landmark with aria-label.\n *   - Active item receives aria-current=\"page\".\n *   - Collapsible group buttons have aria-expanded.\n *   - Collapsed content is hidden with aria-hidden + display:none equivalent.\n *\n * Composition:\n *   <SidebarNav aria-label=\"Main navigation\">\n *     <SidebarSection label=\"Workspace\">\n *       <SidebarItem href=\"/dashboard\" icon={<LayoutDashboard />} active>Dashboard</SidebarItem>\n *       <SidebarItem href=\"/employees\" icon={<Users />}>Employees</SidebarItem>\n *       <SidebarItem href=\"/reports\" icon={<BarChart2 />} badge=\"3\">Reports</SidebarItem>\n *     </SidebarSection>\n *     <SidebarGroup label=\"Settings\" collapsible>\n *       <SidebarItem href=\"/settings/profile\">Profile</SidebarItem>\n *     </SidebarGroup>\n *   </SidebarNav>\n */\n\nimport { useState, type ReactNode } from 'react';\nimport { ChevronDown } from 'lucide-react';\n\n// ── SidebarNav ────────────────────────────────────────────────────────────────\n\nexport interface SidebarNavProps {\n  'aria-label': string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function SidebarNav({ 'aria-label': ariaLabel, children, className = '' }: SidebarNavProps) {\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={`flex w-full flex-col gap-1 ${className}`}\n    >\n      {children}\n    </nav>\n  );\n}\n\n// ── SidebarSection ────────────────────────────────────────────────────────────\n// A non-collapsible labeled group.\n\nexport interface SidebarSectionProps {\n  label?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function SidebarSection({ label, children, className = '' }: SidebarSectionProps) {\n  return (\n    <div className={`mb-3 ${className}`}>\n      {label && (\n        <p className=\"mb-1.5 px-3 text-[10px] font-bold uppercase tracking-widest text-slate-400\">\n          {label}\n        </p>\n      )}\n      <ul className=\"flex flex-col gap-0.5\" role=\"list\">\n        {children}\n      </ul>\n    </div>\n  );\n}\n\n// ── SidebarGroup ──────────────────────────────────────────────────────────────\n// A collapsible labeled group.\n\nexport interface SidebarGroupProps {\n  label: string;\n  defaultExpanded?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function SidebarGroup({ label, defaultExpanded = true, children, className = '' }: SidebarGroupProps) {\n  const [expanded, setExpanded] = useState(defaultExpanded);\n\n  return (\n    <div className={`mb-2 ${className}`}>\n      <button\n        type=\"button\"\n        aria-expanded={expanded}\n        onClick={() => setExpanded(!expanded)}\n        className=\"flex w-full items-center justify-between rounded-lg px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n      >\n        <span>{label}</span>\n        <ChevronDown\n          size={12}\n          aria-hidden=\"true\"\n          className={`transition-transform duration-200 ${expanded ? '' : '-rotate-90'}`}\n        />\n      </button>\n      {expanded && (\n        <ul className=\"flex flex-col gap-0.5 mt-0.5\" role=\"list\">\n          {children}\n        </ul>\n      )}\n    </div>\n  );\n}\n\n// ── SidebarItem ───────────────────────────────────────────────────────────────\n\nexport interface SidebarItemProps {\n  href?: string;\n  onClick?: () => void;\n  active?: boolean;\n  icon?: ReactNode;\n  badge?: string | number;\n  disabled?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function SidebarItem({\n  href,\n  onClick,\n  active = false,\n  icon,\n  badge,\n  disabled = false,\n  children,\n  className = '',\n}: SidebarItemProps) {\n  const baseClass = [\n    'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-semibold transition',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n    active\n      ? 'bg-blue-50 text-brand-blue'\n      : disabled\n        ? 'cursor-not-allowed text-slate-300'\n        : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const content = (\n    <>\n      {icon && (\n        <span className={`shrink-0 ${active ? 'text-brand-blue' : 'text-slate-400'}`} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span className=\"flex-1 truncate\">{children}</span>\n      {badge !== undefined && (\n        <span\n          className={`ml-auto shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-bold ${\n            active ? 'bg-blue-50 text-brand-blue' : 'bg-slate-100 text-slate-500'\n          }`}\n          aria-label={`${badge} items`}\n        >\n          {badge}\n        </span>\n      )}\n    </>\n  );\n\n  if (href && !disabled) {\n    return (\n      <li>\n        <a\n          href={href}\n          aria-current={active ? 'page' : undefined}\n          className={baseClass}\n          onClick={onClick}\n        >\n          {content}\n        </a>\n      </li>\n    );\n  }\n\n  return (\n    <li>\n      <button\n        type=\"button\"\n        aria-current={active ? 'page' : undefined}\n        aria-disabled={disabled || undefined}\n        disabled={disabled}\n        onClick={!disabled ? onClick : undefined}\n        className={baseClass}\n      >\n        {content}\n      </button>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,WAAW,EAAE,cAAc,WAAW,UAAU,YAAY,MAAuB;CACjG,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,cAAY;EACZ,WAAW,8BAA8B;EAExC;CACE,CAAA;AAET;AAWA,SAAgB,eAAe,EAAE,OAAO,UAAU,YAAY,MAA2B;CACvF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,QAAQ;EAAxB,UAAA,CACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GAAG,WAAU;GACV,UAAA;EACA,CAAA,GAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAU;GAAwB,MAAK;GACxC;EACC,CAAA,CACD;;AAET;AAYA,SAAgB,aAAa,EAAE,OAAO,kBAAkB,MAAM,UAAU,YAAY,MAAyB;CAC3G,MAAM,CAAC,UAAU,gBAAA,GAAe,MAAA,SAAA,CAAS,eAAe;CAExD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,QAAQ;EAAxB,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;GACE,MAAK;GACL,iBAAe;GACf,eAAe,YAAY,CAAC,QAAQ;GACpC,WAAU;GAJZ,UAAA,CAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,aAAD;IACE,MAAM;IACN,eAAY;IACZ,WAAW,qCAAqC,WAAW,KAAK;GACjE,CAAA,CACK;EACP,CAAA,GAAA,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAU;GAA+B,MAAK;GAC/C;EACC,CAAA,CAEH;;AAET;AAeA,SAAgB,YAAY,EAC1B,MACA,SACA,SAAS,OACT,MACA,OACA,WAAW,OACX,UACA,YAAY,MACO;CACnB,MAAM,YAAY;EAChB;EACA;EACA,SACI,+BACA,WACE,sCACA;EACN;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,YAAY,SAAS,oBAAoB;GAAoB,eAAY;GACvF,UAAA;EACG,CAAA;EAER,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAmB;EAAe,CAAA;EACjD,UAAU,KAAA,KACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,WAAW,qEACT,SAAS,+BAA+B;GAE1C,cAAY,GAAG,MAAM;GAEpB,UAAA;EACG,CAAA;CAER,EAAA,CAAA;CAGJ,IAAI,QAAQ,CAAC,UACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACQ;EACN,gBAAc,SAAS,SAAS,KAAA;EAChC,WAAW;EACF;EAER,UAAA;CACA,CAAA,EACD,CAAA;CAIR,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,MAAK;EACL,gBAAc,SAAS,SAAS,KAAA;EAChC,iBAAe,YAAY,KAAA;EACjB;EACV,SAAS,CAAC,WAAW,UAAU,KAAA;EAC/B,WAAW;EAEV,UAAA;CACK,CAAA,EACN,CAAA;AAER"}

package/lib/index51.mjs

@@ -0,0 +1,113 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+//#region src/ui-library/gallery/sidebar/Sidebar.tsx
+/**
+* Sidebar — Design System Component
+*
+* A vertical navigation panel. Supports grouped navigation sections,
+* collapsible groups, active item state, icons, and badges.
+*
+* Accessibility:
+*   - Renders a <nav> landmark with aria-label.
+*   - Active item receives aria-current="page".
+*   - Collapsible group buttons have aria-expanded.
+*   - Collapsed content is hidden with aria-hidden + display:none equivalent.
+*
+* Composition:
+*   <SidebarNav aria-label="Main navigation">
+*     <SidebarSection label="Workspace">
+*       <SidebarItem href="/dashboard" icon={<LayoutDashboard />} active>Dashboard</SidebarItem>
+*       <SidebarItem href="/employees" icon={<Users />}>Employees</SidebarItem>
+*       <SidebarItem href="/reports" icon={<BarChart2 />} badge="3">Reports</SidebarItem>
+*     </SidebarSection>
+*     <SidebarGroup label="Settings" collapsible>
+*       <SidebarItem href="/settings/profile">Profile</SidebarItem>
+*     </SidebarGroup>
+*   </SidebarNav>
+*/
+function SidebarNav({ "aria-label": ariaLabel, children, className = "" }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: `flex w-full flex-col gap-1 ${className}`,
+		children
+	});
+}
+function SidebarSection({ label, children, className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `mb-3 ${className}`,
+		children: [label && /* @__PURE__ */ jsx("p", {
+			className: "mb-1.5 px-3 text-[10px] font-bold uppercase tracking-widest text-slate-400",
+			children: label
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-0.5",
+			role: "list",
+			children
+		})]
+	});
+}
+function SidebarGroup({ label, defaultExpanded = true, children, className = "" }) {
+	const [expanded, setExpanded] = useState(defaultExpanded);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `mb-2 ${className}`,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			onClick: () => setExpanded(!expanded),
+			className: "flex w-full items-center justify-between rounded-lg px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(ChevronDown, {
+				size: 12,
+				"aria-hidden": "true",
+				className: `transition-transform duration-200 ${expanded ? "" : "-rotate-90"}`
+			})]
+		}), expanded && /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-0.5 mt-0.5",
+			role: "list",
+			children
+		})]
+	});
+}
+function SidebarItem({ href, onClick, active = false, icon, badge, disabled = false, children, className = "" }) {
+	const baseClass = [
+		"flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-semibold transition",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+		active ? "bg-blue-50 text-brand-blue" : disabled ? "cursor-not-allowed text-slate-300" : "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
+		className
+	].filter(Boolean).join(" ");
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon && /* @__PURE__ */ jsx("span", {
+			className: `shrink-0 ${active ? "text-brand-blue" : "text-slate-400"}`,
+			"aria-hidden": "true",
+			children: icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "flex-1 truncate",
+			children
+		}),
+		badge !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: `ml-auto shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-bold ${active ? "bg-blue-50 text-brand-blue" : "bg-slate-100 text-slate-500"}`,
+			"aria-label": `${badge} items`,
+			children: badge
+		})
+	] });
+	if (href && !disabled) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+		href,
+		"aria-current": active ? "page" : void 0,
+		className: baseClass,
+		onClick,
+		children: content
+	}) });
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-current": active ? "page" : void 0,
+		"aria-disabled": disabled || void 0,
+		disabled,
+		onClick: !disabled ? onClick : void 0,
+		className: baseClass,
+		children: content
+	}) });
+}
+//#endregion
+export { SidebarGroup, SidebarItem, SidebarNav, SidebarSection };
+
+//# sourceMappingURL=index51.mjs.map

package/lib/index51.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index51.mjs","names":[],"sources":["../src/ui-library/gallery/sidebar/Sidebar.tsx"],"sourcesContent":["/**\n * Sidebar — Design System Component\n *\n * A vertical navigation panel. Supports grouped navigation sections,\n * collapsible groups, active item state, icons, and badges.\n *\n * Accessibility:\n *   - Renders a <nav> landmark with aria-label.\n *   - Active item receives aria-current=\"page\".\n *   - Collapsible group buttons have aria-expanded.\n *   - Collapsed content is hidden with aria-hidden + display:none equivalent.\n *\n * Composition:\n *   <SidebarNav aria-label=\"Main navigation\">\n *     <SidebarSection label=\"Workspace\">\n *       <SidebarItem href=\"/dashboard\" icon={<LayoutDashboard />} active>Dashboard</SidebarItem>\n *       <SidebarItem href=\"/employees\" icon={<Users />}>Employees</SidebarItem>\n *       <SidebarItem href=\"/reports\" icon={<BarChart2 />} badge=\"3\">Reports</SidebarItem>\n *     </SidebarSection>\n *     <SidebarGroup label=\"Settings\" collapsible>\n *       <SidebarItem href=\"/settings/profile\">Profile</SidebarItem>\n *     </SidebarGroup>\n *   </SidebarNav>\n */\n\nimport { useState, type ReactNode } from 'react';\nimport { ChevronDown } from 'lucide-react';\n\n// ── SidebarNav ────────────────────────────────────────────────────────────────\n\nexport interface SidebarNavProps {\n  'aria-label': string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function SidebarNav({ 'aria-label': ariaLabel, children, className = '' }: SidebarNavProps) {\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={`flex w-full flex-col gap-1 ${className}`}\n    >\n      {children}\n    </nav>\n  );\n}\n\n// ── SidebarSection ────────────────────────────────────────────────────────────\n// A non-collapsible labeled group.\n\nexport interface SidebarSectionProps {\n  label?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function SidebarSection({ label, children, className = '' }: SidebarSectionProps) {\n  return (\n    <div className={`mb-3 ${className}`}>\n      {label && (\n        <p className=\"mb-1.5 px-3 text-[10px] font-bold uppercase tracking-widest text-slate-400\">\n          {label}\n        </p>\n      )}\n      <ul className=\"flex flex-col gap-0.5\" role=\"list\">\n        {children}\n      </ul>\n    </div>\n  );\n}\n\n// ── SidebarGroup ──────────────────────────────────────────────────────────────\n// A collapsible labeled group.\n\nexport interface SidebarGroupProps {\n  label: string;\n  defaultExpanded?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function SidebarGroup({ label, defaultExpanded = true, children, className = '' }: SidebarGroupProps) {\n  const [expanded, setExpanded] = useState(defaultExpanded);\n\n  return (\n    <div className={`mb-2 ${className}`}>\n      <button\n        type=\"button\"\n        aria-expanded={expanded}\n        onClick={() => setExpanded(!expanded)}\n        className=\"flex w-full items-center justify-between rounded-lg px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n      >\n        <span>{label}</span>\n        <ChevronDown\n          size={12}\n          aria-hidden=\"true\"\n          className={`transition-transform duration-200 ${expanded ? '' : '-rotate-90'}`}\n        />\n      </button>\n      {expanded && (\n        <ul className=\"flex flex-col gap-0.5 mt-0.5\" role=\"list\">\n          {children}\n        </ul>\n      )}\n    </div>\n  );\n}\n\n// ── SidebarItem ───────────────────────────────────────────────────────────────\n\nexport interface SidebarItemProps {\n  href?: string;\n  onClick?: () => void;\n  active?: boolean;\n  icon?: ReactNode;\n  badge?: string | number;\n  disabled?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function SidebarItem({\n  href,\n  onClick,\n  active = false,\n  icon,\n  badge,\n  disabled = false,\n  children,\n  className = '',\n}: SidebarItemProps) {\n  const baseClass = [\n    'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-semibold transition',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n    active\n      ? 'bg-blue-50 text-brand-blue'\n      : disabled\n        ? 'cursor-not-allowed text-slate-300'\n        : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const content = (\n    <>\n      {icon && (\n        <span className={`shrink-0 ${active ? 'text-brand-blue' : 'text-slate-400'}`} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span className=\"flex-1 truncate\">{children}</span>\n      {badge !== undefined && (\n        <span\n          className={`ml-auto shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-bold ${\n            active ? 'bg-blue-50 text-brand-blue' : 'bg-slate-100 text-slate-500'\n          }`}\n          aria-label={`${badge} items`}\n        >\n          {badge}\n        </span>\n      )}\n    </>\n  );\n\n  if (href && !disabled) {\n    return (\n      <li>\n        <a\n          href={href}\n          aria-current={active ? 'page' : undefined}\n          className={baseClass}\n          onClick={onClick}\n        >\n          {content}\n        </a>\n      </li>\n    );\n  }\n\n  return (\n    <li>\n      <button\n        type=\"button\"\n        aria-current={active ? 'page' : undefined}\n        aria-disabled={disabled || undefined}\n        disabled={disabled}\n        onClick={!disabled ? onClick : undefined}\n        className={baseClass}\n      >\n        {content}\n      </button>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,WAAW,EAAE,cAAc,WAAW,UAAU,YAAY,MAAuB;CACjG,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAW,8BAA8B;EAExC;CACE,CAAA;AAET;AAWA,SAAgB,eAAe,EAAE,OAAO,UAAU,YAAY,MAA2B;CACvF,OACE,qBAAC,OAAD;EAAK,WAAW,QAAQ;EAAxB,UAAA,CACG,SACC,oBAAC,KAAD;GAAG,WAAU;GACV,UAAA;EACA,CAAA,GAEL,oBAAC,MAAD;GAAI,WAAU;GAAwB,MAAK;GACxC;EACC,CAAA,CACD;;AAET;AAYA,SAAgB,aAAa,EAAE,OAAO,kBAAkB,MAAM,UAAU,YAAY,MAAyB;CAC3G,MAAM,CAAC,UAAU,eAAe,SAAS,eAAe;CAExD,OACE,qBAAC,OAAD;EAAK,WAAW,QAAQ;EAAxB,UAAA,CACE,qBAAC,UAAD;GACE,MAAK;GACL,iBAAe;GACf,eAAe,YAAY,CAAC,QAAQ;GACpC,WAAU;GAJZ,UAAA,CAME,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GACnB,oBAAC,aAAD;IACE,MAAM;IACN,eAAY;IACZ,WAAW,qCAAqC,WAAW,KAAK;GACjE,CAAA,CACK;EACP,CAAA,GAAA,YACC,oBAAC,MAAD;GAAI,WAAU;GAA+B,MAAK;GAC/C;EACC,CAAA,CAEH;;AAET;AAeA,SAAgB,YAAY,EAC1B,MACA,SACA,SAAS,OACT,MACA,OACA,WAAW,OACX,UACA,YAAY,MACO;CACnB,MAAM,YAAY;EAChB;EACA;EACA,SACI,+BACA,WACE,sCACA;EACN;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA;EACG,QACC,oBAAC,QAAD;GAAM,WAAW,YAAY,SAAS,oBAAoB;GAAoB,eAAY;GACvF,UAAA;EACG,CAAA;EAER,oBAAC,QAAD;GAAM,WAAU;GAAmB;EAAe,CAAA;EACjD,UAAU,KAAA,KACT,oBAAC,QAAD;GACE,WAAW,qEACT,SAAS,+BAA+B;GAE1C,cAAY,GAAG,MAAM;GAEpB,UAAA;EACG,CAAA;CAER,EAAA,CAAA;CAGJ,IAAI,QAAQ,CAAC,UACX,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD;EACQ;EACN,gBAAc,SAAS,SAAS,KAAA;EAChC,WAAW;EACF;EAER,UAAA;CACA,CAAA,EACD,CAAA;CAIR,OACE,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD;EACE,MAAK;EACL,gBAAc,SAAS,SAAS,KAAA;EAChC,iBAAe,YAAY,KAAA;EACjB;EACV,SAAS,CAAC,WAAW,UAAU,KAAA;EAC/B,WAAW;EAEV,UAAA;CACK,CAAA,EACN,CAAA;AAER"}

package/lib/index52.cjs

@@ -0,0 +1,93 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/dropdown/Dropdown.tsx
+/**
+* Dropdown — Design System Component
+*
+* A controlled floating panel anchored to a trigger button.
+* The consumer owns the open state, trigger content, and panel content.
+*
+* Responsibilities:
+*   - Trigger button with aria-expanded, aria-haspopup, aria-controls
+*   - Floating panel anchored below the trigger
+*   - Close on outside click (mousedown)
+*   - Close on Escape key
+*   - Stable panel ID per instance
+*
+* This component is intentionally presentation-only. It does not:
+*   - Manage selected options
+*   - Impose role="listbox" or role="option" on children
+*   - Handle async data
+*
+* Consumers are responsible for the trigger layout, option semantics,
+* and any keyboard navigation within the panel.
+*
+* Usage:
+*   <Dropdown
+*     trigger={<><Filter size={16} /><span>Filter</span><ChevronDown size={14} /></>}
+*     isOpen={open}
+*     onToggle={() => setOpen(!open)}
+*     onClose={() => setOpen(false)}
+*   >
+*     <button onClick={() => select('all')}>All</button>
+*     <button onClick={() => select('active')}>Active</button>
+*   </Dropdown>
+*/
+function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassName = "", panelClassName = "" }) {
+	const ref = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const panelId = `${(0, react.useId)().replace(/:/g, "")}-panel`;
+	(0, react.useEffect)(() => {
+		if (!isOpen) return;
+		const handlePointerDown = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) {
+				onClose();
+				triggerRef.current?.focus();
+			}
+		};
+		document.addEventListener("mousedown", handlePointerDown);
+		return () => document.removeEventListener("mousedown", handlePointerDown);
+	}, [isOpen, onClose]);
+	(0, react.useEffect)(() => {
+		if (!isOpen) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onClose();
+				triggerRef.current?.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [isOpen, onClose]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative inline-block",
+		ref,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			ref: triggerRef,
+			type: "button",
+			onClick: onToggle,
+			"aria-expanded": isOpen,
+			"aria-haspopup": "true",
+			"aria-controls": isOpen ? panelId : void 0,
+			className: [
+				"inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-bold text-slate-600 transition-all",
+				"hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				triggerClassName
+			].filter(Boolean).join(" "),
+			children: trigger
+		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: panelId,
+			className: [
+				"absolute top-full left-0 z-20 mt-1 min-w-[180px] max-h-[280px] overflow-y-auto",
+				"rounded-xl border border-slate-200 bg-white shadow-lg",
+				panelClassName
+			].filter(Boolean).join(" "),
+			children
+		})]
+	});
+}
+//#endregion
+exports.Dropdown = Dropdown;
+
+//# sourceMappingURL=index52.cjs.map

package/lib/index52.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index52.cjs","names":[],"sources":["../src/ui-library/gallery/dropdown/Dropdown.tsx"],"sourcesContent":["/**\n * Dropdown — Design System Component\n *\n * A controlled floating panel anchored to a trigger button.\n * The consumer owns the open state, trigger content, and panel content.\n *\n * Responsibilities:\n *   - Trigger button with aria-expanded, aria-haspopup, aria-controls\n *   - Floating panel anchored below the trigger\n *   - Close on outside click (mousedown)\n *   - Close on Escape key\n *   - Stable panel ID per instance\n *\n * This component is intentionally presentation-only. It does not:\n *   - Manage selected options\n *   - Impose role=\"listbox\" or role=\"option\" on children\n *   - Handle async data\n *\n * Consumers are responsible for the trigger layout, option semantics,\n * and any keyboard navigation within the panel.\n *\n * Usage:\n *   <Dropdown\n *     trigger={<><Filter size={16} /><span>Filter</span><ChevronDown size={14} /></>}\n *     isOpen={open}\n *     onToggle={() => setOpen(!open)}\n *     onClose={() => setOpen(false)}\n *   >\n *     <button onClick={() => select('all')}>All</button>\n *     <button onClick={() => select('active')}>Active</button>\n *   </Dropdown>\n */\n\nimport { useEffect, useId, useRef, type ReactNode } from 'react';\n\nexport interface DropdownProps {\n  /** Complete trigger content — icons, label, chevron — owned by consumer. */\n  trigger: ReactNode;\n  /** Whether the panel is open. Owned by the consumer. */\n  isOpen: boolean;\n  /** Called when the trigger button is clicked. Consumer toggles isOpen. */\n  onToggle: () => void;\n  /** Called on outside click or Escape press. Consumer sets isOpen to false. */\n  onClose: () => void;\n  /** Panel content — option buttons or any children. */\n  children: ReactNode;\n  /** Optional className on the trigger button */\n  triggerClassName?: string;\n  /** Optional className on the floating panel */\n  panelClassName?: string;\n}\n\nexport function Dropdown({\n  trigger,\n  isOpen,\n  onToggle,\n  onClose,\n  children,\n  triggerClassName = '',\n  panelClassName = '',\n}: DropdownProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const uid = useId();\n  const panelId = `${uid.replace(/:/g, '')}-panel`;\n\n  // Close on outside mousedown — return focus to trigger\n  useEffect(() => {\n    if (!isOpen) return;\n    const handlePointerDown = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        onClose();\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener('mousedown', handlePointerDown);\n    return () => document.removeEventListener('mousedown', handlePointerDown);\n  }, [isOpen, onClose]);\n\n  // Close on Escape — return focus to trigger\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, onClose]);\n\n  return (\n    <div className=\"relative inline-block\" ref={ref}>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={isOpen}\n        aria-haspopup=\"true\"\n        aria-controls={isOpen ? panelId : undefined}\n        className={[\n          'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-bold text-slate-600 transition-all',\n          'hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n          triggerClassName,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {trigger}\n      </button>\n\n      {isOpen && (\n        <div\n          id={panelId}\n          className={[\n            'absolute top-full left-0 z-20 mt-1 min-w-[180px] max-h-[280px] overflow-y-auto',\n            'rounded-xl border border-slate-200 bg-white shadow-lg',\n            panelClassName,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,SAAgB,SAAS,EACvB,SACA,QACA,UACA,SACA,UACA,mBAAmB,IACnB,iBAAiB,MACD;CAChB,MAAM,OAAA,GAAM,MAAA,OAAA,CAAuB,IAAI;CACvC,MAAM,cAAA,GAAa,MAAA,OAAA,CAA0B,IAAI;CAEjD,MAAM,UAAU,IAAA,GADJ,MAAA,MAAA,CACO,CAAA,CAAI,QAAQ,MAAM,EAAE,EAAE;CAGzC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,qBAAqB,MAAkB;GAC3C,IAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,MAAc,GAAG;IAC1D,QAAQ;IACR,WAAW,SAAS,MAAM;GAC5B;EACF;EACA,SAAS,iBAAiB,aAAa,iBAAiB;EACxD,aAAa,SAAS,oBAAoB,aAAa,iBAAiB;CAC1E,GAAG,CAAC,QAAQ,OAAO,CAAC;CAGpB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,iBAAiB,MAAqB;GAC1C,IAAI,EAAE,QAAQ,UAAU;IACtB,EAAE,eAAe;IACjB,QAAQ;IACR,WAAW,SAAS,MAAM;GAC5B;EACF;EACA,SAAS,iBAAiB,WAAW,aAAa;EAClD,aAAa,SAAS,oBAAoB,WAAW,aAAa;CACpE,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAA6B;EAA5C,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACE,KAAK;GACL,MAAK;GACL,SAAS;GACT,iBAAe;GACf,iBAAc;GACd,iBAAe,SAAS,UAAU,KAAA;GAClC,WAAW;IACT;IACA;IACA;GACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEV,UAAA;EACK,CAAA,GAEP,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,IAAI;GACJ,WAAW;IACT;IACA;IACA;GACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEV;EACE,CAAA,CAEJ;;AAET"}

package/lib/index52.mjs

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+//#region src/ui-library/gallery/dropdown/Dropdown.tsx
+/**
+* Dropdown — Design System Component
+*
+* A controlled floating panel anchored to a trigger button.
+* The consumer owns the open state, trigger content, and panel content.
+*
+* Responsibilities:
+*   - Trigger button with aria-expanded, aria-haspopup, aria-controls
+*   - Floating panel anchored below the trigger
+*   - Close on outside click (mousedown)
+*   - Close on Escape key
+*   - Stable panel ID per instance
+*
+* This component is intentionally presentation-only. It does not:
+*   - Manage selected options
+*   - Impose role="listbox" or role="option" on children
+*   - Handle async data
+*
+* Consumers are responsible for the trigger layout, option semantics,
+* and any keyboard navigation within the panel.
+*
+* Usage:
+*   <Dropdown
+*     trigger={<><Filter size={16} /><span>Filter</span><ChevronDown size={14} /></>}
+*     isOpen={open}
+*     onToggle={() => setOpen(!open)}
+*     onClose={() => setOpen(false)}
+*   >
+*     <button onClick={() => select('all')}>All</button>
+*     <button onClick={() => select('active')}>Active</button>
+*   </Dropdown>
+*/
+function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassName = "", panelClassName = "" }) {
+	const ref = useRef(null);
+	const triggerRef = useRef(null);
+	const panelId = `${useId().replace(/:/g, "")}-panel`;
+	useEffect(() => {
+		if (!isOpen) return;
+		const handlePointerDown = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) {
+				onClose();
+				triggerRef.current?.focus();
+			}
+		};
+		document.addEventListener("mousedown", handlePointerDown);
+		return () => document.removeEventListener("mousedown", handlePointerDown);
+	}, [isOpen, onClose]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onClose();
+				triggerRef.current?.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [isOpen, onClose]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative inline-block",
+		ref,
+		children: [/* @__PURE__ */ jsx("button", {
+			ref: triggerRef,
+			type: "button",
+			onClick: onToggle,
+			"aria-expanded": isOpen,
+			"aria-haspopup": "true",
+			"aria-controls": isOpen ? panelId : void 0,
+			className: [
+				"inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-bold text-slate-600 transition-all",
+				"hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				triggerClassName
+			].filter(Boolean).join(" "),
+			children: trigger
+		}), isOpen && /* @__PURE__ */ jsx("div", {
+			id: panelId,
+			className: [
+				"absolute top-full left-0 z-20 mt-1 min-w-[180px] max-h-[280px] overflow-y-auto",
+				"rounded-xl border border-slate-200 bg-white shadow-lg",
+				panelClassName
+			].filter(Boolean).join(" "),
+			children
+		})]
+	});
+}
+//#endregion
+export { Dropdown };
+
+//# sourceMappingURL=index52.mjs.map

package/lib/index52.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index52.mjs","names":[],"sources":["../src/ui-library/gallery/dropdown/Dropdown.tsx"],"sourcesContent":["/**\n * Dropdown — Design System Component\n *\n * A controlled floating panel anchored to a trigger button.\n * The consumer owns the open state, trigger content, and panel content.\n *\n * Responsibilities:\n *   - Trigger button with aria-expanded, aria-haspopup, aria-controls\n *   - Floating panel anchored below the trigger\n *   - Close on outside click (mousedown)\n *   - Close on Escape key\n *   - Stable panel ID per instance\n *\n * This component is intentionally presentation-only. It does not:\n *   - Manage selected options\n *   - Impose role=\"listbox\" or role=\"option\" on children\n *   - Handle async data\n *\n * Consumers are responsible for the trigger layout, option semantics,\n * and any keyboard navigation within the panel.\n *\n * Usage:\n *   <Dropdown\n *     trigger={<><Filter size={16} /><span>Filter</span><ChevronDown size={14} /></>}\n *     isOpen={open}\n *     onToggle={() => setOpen(!open)}\n *     onClose={() => setOpen(false)}\n *   >\n *     <button onClick={() => select('all')}>All</button>\n *     <button onClick={() => select('active')}>Active</button>\n *   </Dropdown>\n */\n\nimport { useEffect, useId, useRef, type ReactNode } from 'react';\n\nexport interface DropdownProps {\n  /** Complete trigger content — icons, label, chevron — owned by consumer. */\n  trigger: ReactNode;\n  /** Whether the panel is open. Owned by the consumer. */\n  isOpen: boolean;\n  /** Called when the trigger button is clicked. Consumer toggles isOpen. */\n  onToggle: () => void;\n  /** Called on outside click or Escape press. Consumer sets isOpen to false. */\n  onClose: () => void;\n  /** Panel content — option buttons or any children. */\n  children: ReactNode;\n  /** Optional className on the trigger button */\n  triggerClassName?: string;\n  /** Optional className on the floating panel */\n  panelClassName?: string;\n}\n\nexport function Dropdown({\n  trigger,\n  isOpen,\n  onToggle,\n  onClose,\n  children,\n  triggerClassName = '',\n  panelClassName = '',\n}: DropdownProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const uid = useId();\n  const panelId = `${uid.replace(/:/g, '')}-panel`;\n\n  // Close on outside mousedown — return focus to trigger\n  useEffect(() => {\n    if (!isOpen) return;\n    const handlePointerDown = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        onClose();\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener('mousedown', handlePointerDown);\n    return () => document.removeEventListener('mousedown', handlePointerDown);\n  }, [isOpen, onClose]);\n\n  // Close on Escape — return focus to trigger\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, onClose]);\n\n  return (\n    <div className=\"relative inline-block\" ref={ref}>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={isOpen}\n        aria-haspopup=\"true\"\n        aria-controls={isOpen ? panelId : undefined}\n        className={[\n          'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-bold text-slate-600 transition-all',\n          'hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n          triggerClassName,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {trigger}\n      </button>\n\n      {isOpen && (\n        <div\n          id={panelId}\n          className={[\n            'absolute top-full left-0 z-20 mt-1 min-w-[180px] max-h-[280px] overflow-y-auto',\n            'rounded-xl border border-slate-200 bg-white shadow-lg',\n            panelClassName,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,SAAgB,SAAS,EACvB,SACA,QACA,UACA,SACA,UACA,mBAAmB,IACnB,iBAAiB,MACD;CAChB,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,aAAa,OAA0B,IAAI;CAEjD,MAAM,UAAU,GADJ,MACO,CAAA,CAAI,QAAQ,MAAM,EAAE,EAAE;CAGzC,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,qBAAqB,MAAkB;GAC3C,IAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,MAAc,GAAG;IAC1D,QAAQ;IACR,WAAW,SAAS,MAAM;GAC5B;EACF;EACA,SAAS,iBAAiB,aAAa,iBAAiB;EACxD,aAAa,SAAS,oBAAoB,aAAa,iBAAiB;CAC1E,GAAG,CAAC,QAAQ,OAAO,CAAC;CAGpB,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,iBAAiB,MAAqB;GAC1C,IAAI,EAAE,QAAQ,UAAU;IACtB,EAAE,eAAe;IACjB,QAAQ;IACR,WAAW,SAAS,MAAM;GAC5B;EACF;EACA,SAAS,iBAAiB,WAAW,aAAa;EAClD,aAAa,SAAS,oBAAoB,WAAW,aAAa;CACpE,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,OACE,qBAAC,OAAD;EAAK,WAAU;EAA6B;EAA5C,UAAA,CACE,oBAAC,UAAD;GACE,KAAK;GACL,MAAK;GACL,SAAS;GACT,iBAAe;GACf,iBAAc;GACd,iBAAe,SAAS,UAAU,KAAA;GAClC,WAAW;IACT;IACA;IACA;GACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEV,UAAA;EACK,CAAA,GAEP,UACC,oBAAC,OAAD;GACE,IAAI;GACJ,WAAW;IACT;IACA;IACA;GACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEV;EACE,CAAA,CAEJ;;AAET"}