@diwauhris/ui 1.0.0

package/lib/index46.mjs

@@ -0,0 +1,180 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Command, Search } from "lucide-react";
+import { createPortal } from "react-dom";
+//#region src/ui-library/gallery/command-palette/CommandPalette.tsx
+/**
+* CommandPalette — Design System Component
+*
+* A keyboard-driven command launcher overlay. Opens via a trigger
+* (typically Cmd+K / Ctrl+K), shows a search input, and renders
+* grouped command items.
+*
+* Accessibility:
+*   - role="dialog" + aria-modal="true" + aria-label
+*   - Search input has aria-label and aria-controls pointing to results
+*   - Results list uses role="listbox" with role="option" items
+*   - aria-selected on the highlighted item
+*   - Keyboard: ArrowUp/Down navigates, Enter activates, Escape closes
+*
+* This component is presentation-only: callers provide commands and
+* handle the query / selection logic.
+*/
+function CommandPalette({ open, onClose, items, query, onQueryChange, placeholder = "Search commands…", "aria-label": ariaLabel = "Command palette" }) {
+	const inputRef = useRef(null);
+	const panelRef = useRef(null);
+	const listboxId = useId();
+	const [activeIndex, setActiveIndex] = useState(0);
+	useEffect(() => {
+		setActiveIndex(0);
+	}, [items]);
+	useEffect(() => {
+		if (!open) return;
+		const prev = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		const timer = window.setTimeout(() => inputRef.current?.focus(), 0);
+		return () => {
+			clearTimeout(timer);
+			document.body.style.overflow = prev;
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const handle = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onClose();
+			} else if (e.key === "ArrowDown") {
+				e.preventDefault();
+				setActiveIndex((i) => Math.min(i + 1, items.length - 1));
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault();
+				setActiveIndex((i) => Math.max(i - 1, 0));
+			} else if (e.key === "Enter") {
+				e.preventDefault();
+				items[activeIndex]?.onSelect();
+				onClose();
+			}
+		};
+		document.addEventListener("keydown", handle);
+		return () => document.removeEventListener("keydown", handle);
+	}, [
+		open,
+		items,
+		activeIndex,
+		onClose
+	]);
+	if (!open) return null;
+	const groups = items.reduce((acc, item) => {
+		const g = item.group ?? "";
+		if (!acc[g]) acc[g] = [];
+		acc[g].push(item);
+		return acc;
+	}, {});
+	const groupEntries = Object.entries(groups);
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-50 flex items-start justify-center pt-[10vh] px-4",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 bg-slate-900/50 backdrop-blur-sm",
+			"aria-hidden": "true",
+			onClick: onClose
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: panelRef,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": ariaLabel,
+			className: "relative z-10 w-full max-w-lg rounded-2xl border border-slate-200 bg-white shadow-2xl overflow-hidden",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 px-4 py-3 border-b border-slate-100",
+					children: [
+						/* @__PURE__ */ jsx(Search, {
+							size: 16,
+							className: "shrink-0 text-slate-400",
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ jsx("input", {
+							ref: inputRef,
+							type: "text",
+							role: "combobox",
+							"aria-expanded": items.length > 0,
+							"aria-controls": listboxId,
+							"aria-autocomplete": "list",
+							"aria-label": "Search commands",
+							value: query,
+							onChange: (e) => onQueryChange(e.target.value),
+							placeholder,
+							className: "flex-1 bg-transparent text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400"
+						}),
+						/* @__PURE__ */ jsx("kbd", {
+							className: "hidden shrink-0 rounded border border-slate-200 px-1.5 py-0.5 text-[10px] font-bold text-slate-400 sm:block",
+							children: "ESC"
+						})
+					]
+				}),
+				items.length > 0 ? /* @__PURE__ */ jsx("div", {
+					id: listboxId,
+					role: "listbox",
+					"aria-label": "Commands",
+					className: "max-h-72 overflow-y-auto py-1",
+					children: groupEntries.map(([group, groupItems]) => /* @__PURE__ */ jsxs("div", { children: [group && /* @__PURE__ */ jsx("div", {
+						className: "px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-slate-400",
+						children: group
+					}), groupItems.map((item) => {
+						const globalIdx = items.indexOf(item);
+						const isActive = globalIdx === activeIndex;
+						return /* @__PURE__ */ jsxs("div", {
+							role: "option",
+							"aria-selected": isActive,
+							onClick: () => {
+								item.onSelect();
+								onClose();
+							},
+							onMouseEnter: () => setActiveIndex(globalIdx),
+							className: `flex cursor-pointer items-center gap-3 px-4 py-2.5 transition ${isActive ? "bg-blue-50" : "hover:bg-slate-50"}`,
+							children: [
+								item.icon && /* @__PURE__ */ jsx("span", {
+									className: `shrink-0 ${isActive ? "text-brand-blue" : "text-slate-400"}`,
+									"aria-hidden": "true",
+									children: item.icon
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: `text-sm font-semibold ${isActive ? "text-brand-blue" : "text-slate-700"}`,
+										children: item.label
+									}), item.description && /* @__PURE__ */ jsx("p", {
+										className: "text-xs font-medium text-slate-400",
+										children: item.description
+									})]
+								}),
+								isActive && /* @__PURE__ */ jsx("kbd", {
+									className: "shrink-0 rounded border border-brand-blue/25 bg-blue-50 px-1.5 py-0.5 text-[10px] font-bold text-brand-blue",
+									children: "↵"
+								})
+							]
+						}, item.id);
+					})] }, group))
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "px-4 py-8 text-center text-sm font-medium text-slate-400",
+					children: query ? `No results for "${query}"` : "Type to search commands"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 border-t border-slate-100 px-4 py-2",
+					children: [/* @__PURE__ */ jsx(Command, {
+						size: 11,
+						className: "text-slate-300",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-[10px] font-medium text-slate-400",
+						children: "↑↓ navigate · ↵ select · Esc close"
+					})]
+				})
+			]
+		})]
+	}), document.body);
+}
+//#endregion
+export { CommandPalette };
+
+//# sourceMappingURL=index46.mjs.map

package/lib/index46.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index46.mjs","names":[],"sources":["../src/ui-library/gallery/command-palette/CommandPalette.tsx"],"sourcesContent":["/**\n * CommandPalette — Design System Component\n *\n * A keyboard-driven command launcher overlay. Opens via a trigger\n * (typically Cmd+K / Ctrl+K), shows a search input, and renders\n * grouped command items.\n *\n * Accessibility:\n *   - role=\"dialog\" + aria-modal=\"true\" + aria-label\n *   - Search input has aria-label and aria-controls pointing to results\n *   - Results list uses role=\"listbox\" with role=\"option\" items\n *   - aria-selected on the highlighted item\n *   - Keyboard: ArrowUp/Down navigates, Enter activates, Escape closes\n *\n * This component is presentation-only: callers provide commands and\n * handle the query / selection logic.\n */\n\nimport { useEffect, useId, useRef, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Search, Command } from 'lucide-react';\n\nexport interface CommandItem {\n  id: string;\n  label: string;\n  description?: string;\n  icon?: ReactNode;\n  group?: string;\n  onSelect: () => void;\n}\n\nexport interface CommandPaletteProps {\n  open: boolean;\n  onClose: () => void;\n  /** All available commands — consumer filters by query. */\n  items: CommandItem[];\n  /** Current search query. */\n  query: string;\n  /** Called when search query changes. */\n  onQueryChange: (q: string) => void;\n  /** Placeholder in the search input. Default: \"Search commands…\" */\n  placeholder?: string;\n  /** aria-label for the dialog. Default: \"Command palette\" */\n  'aria-label'?: string;\n}\n\nexport function CommandPalette({\n  open,\n  onClose,\n  items,\n  query,\n  onQueryChange,\n  placeholder = 'Search commands\\u2026',\n  'aria-label': ariaLabel = 'Command palette',\n}: CommandPaletteProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const listboxId = useId();\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  // Reset active index when items change\n  // eslint-disable-next-line react-hooks/set-state-in-effect\n  useEffect(() => { setActiveIndex(0); }, [items]);\n\n  // Scroll lock + initial focus\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    const timer = window.setTimeout(() => inputRef.current?.focus(), 0);\n    return () => {\n      clearTimeout(timer);\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    if (!open) return;\n    const handle = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') { e.preventDefault(); onClose(); }\n      else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        setActiveIndex((i) => Math.min(i + 1, items.length - 1));\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        setActiveIndex((i) => Math.max(i - 1, 0));\n      } else if (e.key === 'Enter') {\n        e.preventDefault();\n        items[activeIndex]?.onSelect();\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handle);\n    return () => document.removeEventListener('keydown', handle);\n  }, [open, items, activeIndex, onClose]);\n\n  if (!open) return null;\n\n  // Group items\n  const groups = items.reduce<Record<string, CommandItem[]>>((acc, item) => {\n    const g = item.group ?? '';\n    if (!acc[g]) acc[g] = [];\n    acc[g]!.push(item);\n    return acc;\n  }, {});\n\n  const groupEntries = Object.entries(groups);\n\n  return createPortal(\n    <div className=\"fixed inset-0 z-50 flex items-start justify-center pt-[10vh] px-4\">\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-slate-900/50 backdrop-blur-sm\"\n        aria-hidden=\"true\"\n        onClick={onClose}\n      />\n\n      {/* Panel */}\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        className=\"relative z-10 w-full max-w-lg rounded-2xl border border-slate-200 bg-white shadow-2xl overflow-hidden\"\n      >\n        {/* Search row */}\n        <div className=\"flex items-center gap-3 px-4 py-3 border-b border-slate-100\">\n          <Search size={16} className=\"shrink-0 text-slate-400\" aria-hidden=\"true\" />\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded={items.length > 0}\n            aria-controls={listboxId}\n            aria-autocomplete=\"list\"\n            aria-label=\"Search commands\"\n            value={query}\n            onChange={(e) => onQueryChange(e.target.value)}\n            placeholder={placeholder}\n            className=\"flex-1 bg-transparent text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400\"\n          />\n          <kbd className=\"hidden shrink-0 rounded border border-slate-200 px-1.5 py-0.5 text-[10px] font-bold text-slate-400 sm:block\">\n            ESC\n          </kbd>\n        </div>\n\n        {/* Results */}\n        {items.length > 0 ? (\n          <div\n            id={listboxId}\n            role=\"listbox\"\n            aria-label=\"Commands\"\n            className=\"max-h-72 overflow-y-auto py-1\"\n          >\n            {groupEntries.map(([group, groupItems]) => (\n              <div key={group}>\n                {group && (\n                  <div className=\"px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-slate-400\">\n                    {group}\n                  </div>\n                )}\n                {groupItems.map((item) => {\n                  const globalIdx = items.indexOf(item);\n                  const isActive = globalIdx === activeIndex;\n                  return (\n                    <div\n                      key={item.id}\n                      role=\"option\"\n                      aria-selected={isActive}\n                      onClick={() => { item.onSelect(); onClose(); }}\n                      onMouseEnter={() => setActiveIndex(globalIdx)}\n                      className={`flex cursor-pointer items-center gap-3 px-4 py-2.5 transition ${\n                        isActive ? 'bg-blue-50' : 'hover:bg-slate-50'\n                      }`}\n                    >\n                      {item.icon && (\n                        <span className={`shrink-0 ${isActive ? 'text-brand-blue' : 'text-slate-400'}`} aria-hidden=\"true\">\n                          {item.icon}\n                        </span>\n                      )}\n                      <div className=\"min-w-0 flex-1\">\n                        <p className={`text-sm font-semibold ${isActive ? 'text-brand-blue' : 'text-slate-700'}`}>\n                          {item.label}\n                        </p>\n                        {item.description && (\n                          <p className=\"text-xs font-medium text-slate-400\">{item.description}</p>\n                        )}\n                      </div>\n                      {isActive && (\n                        <kbd className=\"shrink-0 rounded border border-brand-blue/25 bg-blue-50 px-1.5 py-0.5 text-[10px] font-bold text-brand-blue\">\n                          ↵\n                        </kbd>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        ) : (\n          <div className=\"px-4 py-8 text-center text-sm font-medium text-slate-400\">\n            {query ? `No results for \"${query}\"` : 'Type to search commands'}\n          </div>\n        )}\n\n        {/* Footer hint */}\n        <div className=\"flex items-center gap-3 border-t border-slate-100 px-4 py-2\">\n          <Command size={11} className=\"text-slate-300\" aria-hidden=\"true\" />\n          <span className=\"text-[10px] font-medium text-slate-400\">\n            ↑↓ navigate · ↵ select · Esc close\n          </span>\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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"}

package/lib/index47.cjs

@@ -0,0 +1,61 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let react_router_dom = require("react-router-dom");
+//#region src/ui-library/gallery/breadcrumb/Breadcrumb.tsx
+/**
+* Breadcrumb — Design System Component
+*
+* A hierarchical location indicator. Renders a <nav> landmark with
+* an accessible label. The last item receives aria-current="page".
+*
+* The component is purely presentational — it does not read from
+* the router. The consuming feature provides the items array.
+*
+* Usage:
+*   <Breadcrumb
+*     items={[
+*       { label: 'Home',     href: '/' },
+*       { label: 'Settings', href: '/settings' },
+*       { label: 'Roles' },
+*     ]}
+*   />
+*/
+function Breadcrumb({ items, showHome = true, ariaLabel = "Breadcrumb" }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ol", {
+			className: "flex flex-wrap items-center gap-1 text-sm font-semibold text-slate-400",
+			children: [showHome && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				className: "flex items-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Home, {
+					size: 14,
+					className: "shrink-0 text-slate-400",
+					"aria-hidden": "true"
+				})
+			}), items.map((item, index) => {
+				const isLast = index === items.length - 1;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-1",
+					children: [(!(index === 0) || showHome) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+						size: 13,
+						className: "shrink-0 text-slate-300",
+						"aria-hidden": "true"
+					}), isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-slate-700",
+						"aria-current": "page",
+						children: item.label
+					}) : item.href ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+						to: item.href,
+						className: "transition-colors hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 rounded",
+						children: item.label
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label })]
+				}, item.label);
+			})]
+		})
+	});
+}
+//#endregion
+exports.Breadcrumb = Breadcrumb;
+
+//# sourceMappingURL=index47.cjs.map

package/lib/index47.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index47.cjs","names":[],"sources":["../src/ui-library/gallery/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Breadcrumb — Design System Component\n *\n * A hierarchical location indicator. Renders a <nav> landmark with\n * an accessible label. The last item receives aria-current=\"page\".\n *\n * The component is purely presentational — it does not read from\n * the router. The consuming feature provides the items array.\n *\n * Usage:\n *   <Breadcrumb\n *     items={[\n *       { label: 'Home',     href: '/' },\n *       { label: 'Settings', href: '/settings' },\n *       { label: 'Roles' },\n *     ]}\n *   />\n */\n\nimport { ChevronRight, Home } from 'lucide-react';\nimport { Link } from 'react-router-dom';\n\nexport interface BreadcrumbItem {\n  label: string;\n  /** When provided, the item is rendered as a link. Omit for the current/last item. */\n  href?: string;\n}\n\nexport interface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  /** Show a Home icon before the first item (default: true) */\n  showHome?: boolean;\n  /** aria-label for the <nav> element (default: \"Breadcrumb\") */\n  ariaLabel?: string;\n}\n\nexport function Breadcrumb({\n  items,\n  showHome = true,\n  ariaLabel = 'Breadcrumb',\n}: BreadcrumbProps) {\n  if (items.length === 0) return null;\n\n  return (\n    <nav aria-label={ariaLabel}>\n      <ol className=\"flex flex-wrap items-center gap-1 text-sm font-semibold text-slate-400\">\n        {/* Home icon — decorative visual anchor */}\n        {showHome && (\n          <li className=\"flex items-center\">\n            <Home size={14} className=\"shrink-0 text-slate-400\" aria-hidden=\"true\" />\n          </li>\n        )}\n\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          const isFirst = index === 0;\n\n          return (\n            <li key={item.label} className=\"flex items-center gap-1\">\n              {/* Separator — not first item, or when Home is shown */}\n              {(!isFirst || showHome) && (\n                <ChevronRight\n                  size={13}\n                  className=\"shrink-0 text-slate-300\"\n                  aria-hidden=\"true\"\n                />\n              )}\n\n              {isLast ? (\n                /* Current page — not a link */\n                <span\n                  className=\"text-slate-700\"\n                  aria-current=\"page\"\n                >\n                  {item.label}\n                </span>\n              ) : item.href ? (\n                /* Ancestor with a link */\n                <Link\n                  to={item.href}\n                  className=\"transition-colors hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 rounded\"\n                >\n                  {item.label}\n                </Link>\n              ) : (\n                /* Ancestor without a link (non-navigable section label) */\n                <span>{item.label}</span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,WAAW,EACzB,OACA,WAAW,MACX,YAAY,gBACM;CAClB,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,cAAY;EACf,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;GAAI,WAAU;GAAd,UAAA,CAEG,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,WAAU;IACZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,MAAD;KAAM,MAAM;KAAI,WAAU;KAA0B,eAAY;IAAQ,CAAA;GACtE,CAAA,GAGL,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,SAAS,UAAU,MAAM,SAAS;IAGxC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;KAAqB,WAAU;KAA/B,UAAA,EAEI,EALU,UAAU,MAKR,aACZ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,cAAD;MACE,MAAM;MACN,WAAU;MACV,eAAY;KACb,CAAA,GAGF,SAEC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MACE,WAAU;MACV,gBAAa;MAEZ,UAAA,KAAK;KACF,CAAA,IACJ,KAAK,OAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAA,MAAD;MACE,IAAI,KAAK;MACT,WAAU;MAET,UAAA,KAAK;KACF,CAAA,IAGN,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA,CAExB;IA9BK,GAAA,KAAK,KA8BV;GAER,CAAC,CACC;;CACD,CAAA;AAET"}

package/lib/index47.mjs

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, Home } from "lucide-react";
+import { Link } from "react-router-dom";
+//#region src/ui-library/gallery/breadcrumb/Breadcrumb.tsx
+/**
+* Breadcrumb — Design System Component
+*
+* A hierarchical location indicator. Renders a <nav> landmark with
+* an accessible label. The last item receives aria-current="page".
+*
+* The component is purely presentational — it does not read from
+* the router. The consuming feature provides the items array.
+*
+* Usage:
+*   <Breadcrumb
+*     items={[
+*       { label: 'Home',     href: '/' },
+*       { label: 'Settings', href: '/settings' },
+*       { label: 'Roles' },
+*     ]}
+*   />
+*/
+function Breadcrumb({ items, showHome = true, ariaLabel = "Breadcrumb" }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ jsxs("ol", {
+			className: "flex flex-wrap items-center gap-1 text-sm font-semibold text-slate-400",
+			children: [showHome && /* @__PURE__ */ jsx("li", {
+				className: "flex items-center",
+				children: /* @__PURE__ */ jsx(Home, {
+					size: 14,
+					className: "shrink-0 text-slate-400",
+					"aria-hidden": "true"
+				})
+			}), items.map((item, index) => {
+				const isLast = index === items.length - 1;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-1",
+					children: [(!(index === 0) || showHome) && /* @__PURE__ */ jsx(ChevronRight, {
+						size: 13,
+						className: "shrink-0 text-slate-300",
+						"aria-hidden": "true"
+					}), isLast ? /* @__PURE__ */ jsx("span", {
+						className: "text-slate-700",
+						"aria-current": "page",
+						children: item.label
+					}) : item.href ? /* @__PURE__ */ jsx(Link, {
+						to: item.href,
+						className: "transition-colors hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 rounded",
+						children: item.label
+					}) : /* @__PURE__ */ jsx("span", { children: item.label })]
+				}, item.label);
+			})]
+		})
+	});
+}
+//#endregion
+export { Breadcrumb };
+
+//# sourceMappingURL=index47.mjs.map

package/lib/index47.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index47.mjs","names":[],"sources":["../src/ui-library/gallery/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Breadcrumb — Design System Component\n *\n * A hierarchical location indicator. Renders a <nav> landmark with\n * an accessible label. The last item receives aria-current=\"page\".\n *\n * The component is purely presentational — it does not read from\n * the router. The consuming feature provides the items array.\n *\n * Usage:\n *   <Breadcrumb\n *     items={[\n *       { label: 'Home',     href: '/' },\n *       { label: 'Settings', href: '/settings' },\n *       { label: 'Roles' },\n *     ]}\n *   />\n */\n\nimport { ChevronRight, Home } from 'lucide-react';\nimport { Link } from 'react-router-dom';\n\nexport interface BreadcrumbItem {\n  label: string;\n  /** When provided, the item is rendered as a link. Omit for the current/last item. */\n  href?: string;\n}\n\nexport interface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  /** Show a Home icon before the first item (default: true) */\n  showHome?: boolean;\n  /** aria-label for the <nav> element (default: \"Breadcrumb\") */\n  ariaLabel?: string;\n}\n\nexport function Breadcrumb({\n  items,\n  showHome = true,\n  ariaLabel = 'Breadcrumb',\n}: BreadcrumbProps) {\n  if (items.length === 0) return null;\n\n  return (\n    <nav aria-label={ariaLabel}>\n      <ol className=\"flex flex-wrap items-center gap-1 text-sm font-semibold text-slate-400\">\n        {/* Home icon — decorative visual anchor */}\n        {showHome && (\n          <li className=\"flex items-center\">\n            <Home size={14} className=\"shrink-0 text-slate-400\" aria-hidden=\"true\" />\n          </li>\n        )}\n\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          const isFirst = index === 0;\n\n          return (\n            <li key={item.label} className=\"flex items-center gap-1\">\n              {/* Separator — not first item, or when Home is shown */}\n              {(!isFirst || showHome) && (\n                <ChevronRight\n                  size={13}\n                  className=\"shrink-0 text-slate-300\"\n                  aria-hidden=\"true\"\n                />\n              )}\n\n              {isLast ? (\n                /* Current page — not a link */\n                <span\n                  className=\"text-slate-700\"\n                  aria-current=\"page\"\n                >\n                  {item.label}\n                </span>\n              ) : item.href ? (\n                /* Ancestor with a link */\n                <Link\n                  to={item.href}\n                  className=\"transition-colors hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 rounded\"\n                >\n                  {item.label}\n                </Link>\n              ) : (\n                /* Ancestor without a link (non-navigable section label) */\n                <span>{item.label}</span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,WAAW,EACzB,OACA,WAAW,MACX,YAAY,gBACM;CAClB,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,oBAAC,OAAD;EAAK,cAAY;EACf,UAAA,qBAAC,MAAD;GAAI,WAAU;GAAd,UAAA,CAEG,YACC,oBAAC,MAAD;IAAI,WAAU;IACZ,UAAA,oBAAC,MAAD;KAAM,MAAM;KAAI,WAAU;KAA0B,eAAY;IAAQ,CAAA;GACtE,CAAA,GAGL,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,SAAS,UAAU,MAAM,SAAS;IAGxC,OACE,qBAAC,MAAD;KAAqB,WAAU;KAA/B,UAAA,EAEI,EALU,UAAU,MAKR,aACZ,oBAAC,cAAD;MACE,MAAM;MACN,WAAU;MACV,eAAY;KACb,CAAA,GAGF,SAEC,oBAAC,QAAD;MACE,WAAU;MACV,gBAAa;MAEZ,UAAA,KAAK;KACF,CAAA,IACJ,KAAK,OAEP,oBAAC,MAAD;MACE,IAAI,KAAK;MACT,WAAU;MAET,UAAA,KAAK;KACF,CAAA,IAGN,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA,CAExB;IA9BK,GAAA,KAAK,KA8BV;GAER,CAAC,CACC;;CACD,CAAA;AAET"}

package/lib/index48.cjs

@@ -0,0 +1,165 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/tabs/Tabs.tsx
+/**
+* Tabs — Design System Component
+*
+* Composable tab interface with full WAI-ARIA Tabs pattern compliance.
+*
+* Responsibilities:
+*   - role="tablist" on the tab strip
+*   - role="tab" with aria-selected, aria-controls, aria-disabled on each tab
+*   - role="tabpanel" with aria-labelledby on each panel
+*   - Stable generated IDs for tab/panel cross-referencing
+*   - ArrowRight / ArrowLeft / Home / End keyboard navigation
+*   - Controlled and uncontrolled usage
+*   - Disabled tab support (skipped during keyboard navigation)
+*
+* Composition:
+*   <Tabs defaultValue="overview">
+*     <TabList aria-label="Section navigation">
+*       <Tab value="overview">Overview</Tab>
+*       <Tab value="details">Details</Tab>
+*       <Tab value="history" disabled>History</Tab>
+*     </TabList>
+*     <TabPanels>
+*       <TabPanel value="overview">…</TabPanel>
+*       <TabPanel value="details">…</TabPanel>
+*       <TabPanel value="history">…</TabPanel>
+*     </TabPanels>
+*   </Tabs>
+*
+* Keyboard model: "manual activation" — ArrowKey moves focus but the user
+* must press Space/Enter to activate a new tab. This is the WAI-ARIA
+* recommended default when tab panels contain complex content (forms, tables)
+* because "automatic activation" can trigger expensive content fetches on
+* every arrow press.
+*
+* To switch to "automatic activation" (Arrow key also activates),
+* set activateOnFocus={true} on <Tabs>.
+*/
+var TabsContext = (0, react.createContext)(null);
+function useTabsContext() {
+	const ctx = (0, react.useContext)(TabsContext);
+	if (!ctx) throw new Error("Tabs sub-component used outside <Tabs>");
+	return ctx;
+}
+function tabId(baseId, value) {
+	return `${baseId}-tab-${value}`;
+}
+function panelId(baseId, value) {
+	return `${baseId}-panel-${value}`;
+}
+function Tabs({ value: controlledValue, onValueChange, defaultValue = "", activateOnFocus = false, children, className = "" }) {
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue);
+	const baseId = (0, react.useId)();
+	const tabValues = (0, react.useRef)([]);
+	const isControlled = controlledValue !== void 0;
+	const activeValue = isControlled ? controlledValue : uncontrolledValue;
+	const disabledValues = (0, react.useRef)(/* @__PURE__ */ new Set()).current;
+	const activate = (value) => {
+		if (disabledValues.has(value)) return;
+		if (!isControlled) setUncontrolledValue(value);
+		onValueChange?.(value);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsContext.Provider, {
+		value: {
+			activeValue,
+			activate,
+			baseId,
+			tabValues,
+			disabledValues,
+			activateOnFocus
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className,
+			children
+		})
+	});
+}
+function TabList({ "aria-label": ariaLabel, children, className = "" }) {
+	const { baseId, tabValues, disabledValues, activate, activateOnFocus } = useTabsContext();
+	const handleKeyDown = (e) => {
+		const enabled = tabValues.current.filter((v) => !disabledValues.has(v));
+		if (enabled.length === 0) return;
+		const currentFocused = document.activeElement;
+		const currentIdx = tabValues.current.findIndex((v) => document.getElementById(tabId(baseId, v)) === currentFocused);
+		const currentEnabledIdx = enabled.indexOf(tabValues.current[currentIdx] ?? "");
+		let nextValue;
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			nextValue = enabled[(currentEnabledIdx + 1) % enabled.length];
+		} else if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			nextValue = enabled[(currentEnabledIdx - 1 + enabled.length) % enabled.length];
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			nextValue = enabled[0];
+		} else if (e.key === "End") {
+			e.preventDefault();
+			nextValue = enabled[enabled.length - 1];
+		}
+		if (nextValue !== void 0) {
+			document.getElementById(tabId(baseId, nextValue))?.focus();
+			if (activateOnFocus) activate(nextValue);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "tablist",
+		"aria-label": ariaLabel,
+		onKeyDown: handleKeyDown,
+		className: `flex border-b-2 border-slate-200 ${className}`,
+		children
+	});
+}
+function Tab({ value, disabled = false, children, className = "" }) {
+	const { activeValue, activate, baseId, tabValues, disabledValues } = useTabsContext();
+	if (!tabValues.current.includes(value)) tabValues.current.push(value);
+	if (disabled) disabledValues.add(value);
+	else disabledValues.delete(value);
+	const isActive = activeValue === value;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		id: tabId(baseId, value),
+		type: "button",
+		role: "tab",
+		"aria-selected": isActive,
+		"aria-controls": panelId(baseId, value),
+		"aria-disabled": disabled || void 0,
+		disabled,
+		tabIndex: isActive ? 0 : -1,
+		onClick: () => activate(value),
+		className: [
+			"relative px-5 py-3 text-sm font-semibold font-heading border-b-4 transition-colors",
+			"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30",
+			isActive ? "border-brand-blue text-brand-blue" : disabled ? "border-transparent text-slate-300 cursor-not-allowed" : "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300",
+			className
+		].filter(Boolean).join(" "),
+		children
+	});
+}
+function TabPanels({ children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children
+	});
+}
+function TabPanel({ value, children, className = "" }) {
+	const { activeValue, baseId } = useTabsContext();
+	if (activeValue !== value) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		id: panelId(baseId, value),
+		role: "tabpanel",
+		"aria-labelledby": tabId(baseId, value),
+		tabIndex: 0,
+		className: ["focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30 rounded-sm", className].filter(Boolean).join(" "),
+		children
+	});
+}
+//#endregion
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;
+exports.Tabs = Tabs;
+
+//# sourceMappingURL=index48.cjs.map

package/lib/index48.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index48.cjs","names":[],"sources":["../src/ui-library/gallery/tabs/Tabs.tsx"],"sourcesContent":["/**\n * Tabs — Design System Component\n *\n * Composable tab interface with full WAI-ARIA Tabs pattern compliance.\n *\n * Responsibilities:\n *   - role=\"tablist\" on the tab strip\n *   - role=\"tab\" with aria-selected, aria-controls, aria-disabled on each tab\n *   - role=\"tabpanel\" with aria-labelledby on each panel\n *   - Stable generated IDs for tab/panel cross-referencing\n *   - ArrowRight / ArrowLeft / Home / End keyboard navigation\n *   - Controlled and uncontrolled usage\n *   - Disabled tab support (skipped during keyboard navigation)\n *\n * Composition:\n *   <Tabs defaultValue=\"overview\">\n *     <TabList aria-label=\"Section navigation\">\n *       <Tab value=\"overview\">Overview</Tab>\n *       <Tab value=\"details\">Details</Tab>\n *       <Tab value=\"history\" disabled>History</Tab>\n *     </TabList>\n *     <TabPanels>\n *       <TabPanel value=\"overview\">…</TabPanel>\n *       <TabPanel value=\"details\">…</TabPanel>\n *       <TabPanel value=\"history\">…</TabPanel>\n *     </TabPanels>\n *   </Tabs>\n *\n * Keyboard model: \"manual activation\" — ArrowKey moves focus but the user\n * must press Space/Enter to activate a new tab. This is the WAI-ARIA\n * recommended default when tab panels contain complex content (forms, tables)\n * because \"automatic activation\" can trigger expensive content fetches on\n * every arrow press.\n *\n * To switch to \"automatic activation\" (Arrow key also activates),\n * set activateOnFocus={true} on <Tabs>.\n */\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\n\n// ── Context ───────────────────────────────────────────────────────────────────\n\ninterface TabsContextValue {\n  /** Currently active tab value */\n  activeValue: string;\n  /** Activate a tab (does nothing if disabled) */\n  activate: (value: string) => void;\n  /** Base id prefix shared by all tabs and panels in this Tabs instance */\n  baseId: string;\n  /** Registered tab values in DOM order (built up by Tab children) */\n  tabValues: React.MutableRefObject<string[]>;\n  /** Set of disabled tab values */\n  disabledValues: Set<string>;\n  /** Whether arrow keys also activate (true) or only move focus (false) */\n  activateOnFocus: boolean;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const ctx = useContext(TabsContext);\n  if (!ctx) throw new Error('Tabs sub-component used outside <Tabs>');\n  return ctx;\n}\n\n// ── Stable ID helpers ─────────────────────────────────────────────────────────\n\nfunction tabId(baseId: string, value: string) {\n  return `${baseId}-tab-${value}`;\n}\n\nfunction panelId(baseId: string, value: string) {\n  return `${baseId}-panel-${value}`;\n}\n\n// ── Tabs (root) ───────────────────────────────────────────────────────────────\n\nexport interface TabsProps {\n  /** Controlled: current active tab value */\n  value?: string;\n  /** Controlled: called when a tab is activated */\n  onValueChange?: (value: string) => void;\n  /** Uncontrolled: initial active tab value */\n  defaultValue?: string;\n  /** Whether ArrowKey navigation also activates the tab immediately */\n  activateOnFocus?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Tabs({\n  value: controlledValue,\n  onValueChange,\n  defaultValue = '',\n  activateOnFocus = false,\n  children,\n  className = '',\n}: TabsProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const baseId    = useId();\n  const tabValues = useRef<string[]>([]);\n\n  const isControlled  = controlledValue !== undefined;\n  const activeValue   = isControlled ? controlledValue : uncontrolledValue;\n\n  // Collect disabled values from child Tab props via context\n  // eslint-disable-next-line react-hooks/refs\n  const disabledValues = useRef(new Set<string>()).current;\n\n  const activate = (value: string) => {\n    if (disabledValues.has(value)) return;\n    if (!isControlled) setUncontrolledValue(value);\n    onValueChange?.(value);\n  };\n\n  return (\n    <TabsContext.Provider\n      value={{ activeValue, activate, baseId, tabValues, disabledValues, activateOnFocus }}\n    >\n      <div className={className}>{children}</div>\n    </TabsContext.Provider>\n  );\n}\n\n// ── TabList ───────────────────────────────────────────────────────────────────\n\nexport interface TabListProps {\n  /** Accessible label for the tablist landmark */\n  'aria-label'?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function TabList({\n  'aria-label': ariaLabel,\n  children,\n  className = '',\n}: TabListProps) {\n  const { baseId, tabValues, disabledValues, activate, activateOnFocus } =\n    useTabsContext();\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    const enabled = tabValues.current.filter((v) => !disabledValues.has(v));\n    if (enabled.length === 0) return;\n\n    const currentFocused = document.activeElement;\n    const currentIdx = tabValues.current.findIndex(\n      (v) => document.getElementById(tabId(baseId, v)) === currentFocused,\n    );\n    const currentEnabledIdx = enabled.indexOf(tabValues.current[currentIdx] ?? '');\n\n    let nextValue: string | undefined;\n\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      nextValue = enabled[(currentEnabledIdx + 1) % enabled.length];\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      nextValue = enabled[(currentEnabledIdx - 1 + enabled.length) % enabled.length];\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      nextValue = enabled[0];\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      nextValue = enabled[enabled.length - 1];\n    }\n\n    if (nextValue !== undefined) {\n      // Always move focus to the tab element\n      document.getElementById(tabId(baseId, nextValue))?.focus();\n      // Activate immediately if activateOnFocus, otherwise wait for Space/Enter\n      if (activateOnFocus) activate(nextValue);\n    }\n  };\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      onKeyDown={handleKeyDown}\n      className={`flex border-b-2 border-slate-200 ${className}`}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ── Tab ───────────────────────────────────────────────────────────────────────\n\nexport interface TabProps {\n  /** Must match the value used in <TabPanel value=\"…\"> */\n  value: string;\n  disabled?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Tab({ value, disabled = false, children, className = '' }: TabProps) {\n  const { activeValue, activate, baseId, tabValues, disabledValues } = useTabsContext();\n\n  // Register this tab's value in DOM order on first render.\n  // Using a ref-mutation here avoids needing a reducer and is safe because\n  // the tab list is stable (static children).\n  if (!tabValues.current.includes(value)) {\n    tabValues.current.push(value);\n  }\n  if (disabled) {\n    disabledValues.add(value);\n  } else {\n    disabledValues.delete(value);\n  }\n\n  const isActive = activeValue === value;\n\n  return (\n    <button\n      id={tabId(baseId, value)}\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isActive}\n      aria-controls={panelId(baseId, value)}\n      aria-disabled={disabled || undefined}\n      disabled={disabled}\n      tabIndex={isActive ? 0 : -1}\n      onClick={() => activate(value)}\n      className={[\n        'relative px-5 py-3 text-sm font-semibold font-heading border-b-4 transition-colors',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30',\n        isActive\n          ? 'border-brand-blue text-brand-blue'\n          : disabled\n            ? 'border-transparent text-slate-300 cursor-not-allowed'\n            : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ── TabPanels ─────────────────────────────────────────────────────────────────\n\nexport interface TabPanelsProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function TabPanels({ children, className = '' }: TabPanelsProps) {\n  return <div className={className}>{children}</div>;\n}\n\n// ── TabPanel ──────────────────────────────────────────────────────────────────\n\nexport interface TabPanelProps {\n  /** Must match the value used in <Tab value=\"…\"> */\n  value: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function TabPanel({ value, children, className = '' }: TabPanelProps) {\n  const { activeValue, baseId } = useTabsContext();\n\n  if (activeValue !== value) return null;\n\n  return (\n    <div\n      id={panelId(baseId, value)}\n      role=\"tabpanel\"\n      aria-labelledby={tabId(baseId, value)}\n      tabIndex={0}\n      className={[\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30 rounded-sm',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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"}