@diwauhris/ui 1.0.0

package/lib/index48.mjs

@@ -0,0 +1,161 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, useRef, useState } from "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 = createContext(null);
+function useTabsContext() {
+	const ctx = 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] = useState(defaultValue);
+	const baseId = useId();
+	const tabValues = useRef([]);
+	const isControlled = controlledValue !== void 0;
+	const activeValue = isControlled ? controlledValue : uncontrolledValue;
+	const disabledValues = useRef(/* @__PURE__ */ new Set()).current;
+	const activate = (value) => {
+		if (disabledValues.has(value)) return;
+		if (!isControlled) setUncontrolledValue(value);
+		onValueChange?.(value);
+	};
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			activeValue,
+			activate,
+			baseId,
+			tabValues,
+			disabledValues,
+			activateOnFocus
+		},
+		children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", {
+		className,
+		children
+	});
+}
+function TabPanel({ value, children, className = "" }) {
+	const { activeValue, baseId } = useTabsContext();
+	if (activeValue !== value) return null;
+	return /* @__PURE__ */ 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
+export { Tab, TabList, TabPanel, TabPanels, Tabs };
+
+//# sourceMappingURL=index48.mjs.map

package/lib/index48.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index48.mjs","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,IAAM,cAAc,cAAuC,IAAI;AAE/D,SAAS,iBAAmC;CAC1C,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,wCAAwC;CAClE,OAAO;AACT;AAIA,SAAS,MAAM,QAAgB,OAAe;CAC5C,OAAO,GAAG,OAAO,OAAO;AAC1B;AAEA,SAAS,QAAQ,QAAgB,OAAe;CAC9C,OAAO,GAAG,OAAO,SAAS;AAC5B;AAiBA,SAAgB,KAAK,EACnB,OAAO,iBACP,eACA,eAAe,IACf,kBAAkB,OAClB,UACA,YAAY,MACA;CACZ,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,YAAY;CACvE,MAAM,SAAY,MAAM;CACxB,MAAM,YAAY,OAAiB,CAAC,CAAC;CAErC,MAAM,eAAgB,oBAAoB,KAAA;CAC1C,MAAM,cAAgB,eAAe,kBAAkB;CAIvD,MAAM,iBAAiB,uBAAO,IAAI,IAAY,CAAC,CAAC,CAAC;CAEjD,MAAM,YAAY,UAAkB;EAClC,IAAI,eAAe,IAAI,KAAK,GAAG;EAC/B,IAAI,CAAC,cAAc,qBAAqB,KAAK;EAC7C,gBAAgB,KAAK;CACvB;CAEA,OACE,oBAAC,YAAY,UAAb;EACE,OAAO;GAAE;GAAa;GAAU;GAAQ;GAAW;GAAgB;EAAgB;EAEnF,UAAA,oBAAC,OAAD;GAAgB;GAAY;EAAc,CAAA;CACtB,CAAA;AAE1B;AAWA,SAAgB,QAAQ,EACtB,cAAc,WACd,UACA,YAAY,MACG;CACf,MAAM,EAAE,QAAQ,WAAW,gBAAgB,UAAU,oBACnD,eAAe;CAEjB,MAAM,iBAAiB,MAAqC;EAC1D,MAAM,UAAU,UAAU,QAAQ,QAAQ,MAAM,CAAC,eAAe,IAAI,CAAC,CAAC;EACtE,IAAI,QAAQ,WAAW,GAAG;EAE1B,MAAM,iBAAiB,SAAS;EAChC,MAAM,aAAa,UAAU,QAAQ,WAClC,MAAM,SAAS,eAAe,MAAM,QAAQ,CAAC,CAAC,MAAM,cACvD;EACA,MAAM,oBAAoB,QAAQ,QAAQ,UAAU,QAAQ,eAAe,EAAE;EAE7E,IAAI;EAEJ,IAAI,EAAE,QAAQ,cAAc;GAC1B,EAAE,eAAe;GACjB,YAAY,SAAS,oBAAoB,KAAK,QAAQ;EACxD,OAAO,IAAI,EAAE,QAAQ,aAAa;GAChC,EAAE,eAAe;GACjB,YAAY,SAAS,oBAAoB,IAAI,QAAQ,UAAU,QAAQ;EACzE,OAAO,IAAI,EAAE,QAAQ,QAAQ;GAC3B,EAAE,eAAe;GACjB,YAAY,QAAQ;EACtB,OAAO,IAAI,EAAE,QAAQ,OAAO;GAC1B,EAAE,eAAe;GACjB,YAAY,QAAQ,QAAQ,SAAS;EACvC;EAEA,IAAI,cAAc,KAAA,GAAW;GAE3B,SAAS,eAAe,MAAM,QAAQ,SAAS,CAAC,CAAC,EAAE,MAAM;GAEzD,IAAI,iBAAiB,SAAS,SAAS;EACzC;CACF;CAEA,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW;EACX,WAAW,oCAAoC;EAE9C;CACE,CAAA;AAET;AAYA,SAAgB,IAAI,EAAE,OAAO,WAAW,OAAO,UAAU,YAAY,MAAgB;CACnF,MAAM,EAAE,aAAa,UAAU,QAAQ,WAAW,mBAAmB,eAAe;CAKpF,IAAI,CAAC,UAAU,QAAQ,SAAS,KAAK,GACnC,UAAU,QAAQ,KAAK,KAAK;CAE9B,IAAI,UACF,eAAe,IAAI,KAAK;MAExB,eAAe,OAAO,KAAK;CAG7B,MAAM,WAAW,gBAAgB;CAEjC,OACE,oBAAC,UAAD;EACE,IAAI,MAAM,QAAQ,KAAK;EACvB,MAAK;EACL,MAAK;EACL,iBAAe;EACf,iBAAe,QAAQ,QAAQ,KAAK;EACpC,iBAAe,YAAY,KAAA;EACjB;EACV,UAAU,WAAW,IAAI;EACzB,eAAe,SAAS,KAAK;EAC7B,WAAW;GACT;GACA;GACA,WACI,sCACA,WACE,yDACA;GACN;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV;CACK,CAAA;AAEZ;AASA,SAAgB,UAAU,EAAE,UAAU,YAAY,MAAsB;CACtE,OAAO,oBAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AACnD;AAWA,SAAgB,SAAS,EAAE,OAAO,UAAU,YAAY,MAAqB;CAC3E,MAAM,EAAE,aAAa,WAAW,eAAe;CAE/C,IAAI,gBAAgB,OAAO,OAAO;CAElC,OACE,oBAAC,OAAD;EACE,IAAI,QAAQ,QAAQ,KAAK;EACzB,MAAK;EACL,mBAAiB,MAAM,QAAQ,KAAK;EACpC,UAAU;EACV,WAAW,CACT,wHACA,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV;CACE,CAAA;AAET"}

package/lib/index49.cjs

@@ -0,0 +1,83 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/pagination/Pagination.tsx
+/**
+* Pagination — Design System Component
+*
+* Renders previous/next navigation and page number pills.
+* Presentation-only — the consuming feature owns page state.
+*
+* Page numbers collapse intelligently with ellipsis when there are
+* more pages than can fit (> 7 pages visible at once).
+*
+* Usage:
+*   <Pagination
+*     page={page}
+*     totalPages={totalPages}
+*     onPageChange={setPage}
+*   />
+*/
+function getPageNumbers(current, total) {
+	if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+	const pages = [1];
+	if (current > 3) pages.push("ellipsis");
+	const start = Math.max(2, current - 1);
+	const end = Math.min(total - 1, current + 1);
+	for (let i = start; i <= end; i++) pages.push(i);
+	if (current < total - 2) pages.push("ellipsis");
+	pages.push(total);
+	return pages;
+}
+function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination" }) {
+	if (totalPages <= 1) return null;
+	const pageNumbers = getPageNumbers(page, totalPages);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ol", {
+			className: "list-none flex items-center gap-1",
+			role: "list",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => onPageChange(page - 1),
+					disabled: page <= 1,
+					"aria-label": "Previous page",
+					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				}) }),
+				pageNumbers.map((n, idx) => n === "ellipsis" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300",
+						children: "…"
+					})
+				}, `ellipsis-${idx}`) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => onPageChange(n),
+					"aria-label": `Page ${n}`,
+					"aria-current": n === page ? "page" : void 0,
+					className: ["flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", n === page ? "bg-brand-blue text-white shadow-md shadow-brand-blue/20" : "border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800"].filter(Boolean).join(" "),
+					children: n
+				}) }, n)),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => onPageChange(page + 1),
+					disabled: page >= totalPages,
+					"aria-label": "Next page",
+					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				}) })
+			]
+		})
+	});
+}
+//#endregion
+exports.Pagination = Pagination;
+
+//# sourceMappingURL=index49.cjs.map

package/lib/index49.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index49.cjs","names":[],"sources":["../src/ui-library/gallery/pagination/Pagination.tsx"],"sourcesContent":["/**\n * Pagination — Design System Component\n *\n * Renders previous/next navigation and page number pills.\n * Presentation-only — the consuming feature owns page state.\n *\n * Page numbers collapse intelligently with ellipsis when there are\n * more pages than can fit (> 7 pages visible at once).\n *\n * Usage:\n *   <Pagination\n *     page={page}\n *     totalPages={totalPages}\n *     onPageChange={setPage}\n *   />\n */\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\n\nexport interface PaginationProps {\n  /** Current page number (1-indexed) */\n  page: number;\n  /** Total number of pages */\n  totalPages: number;\n  /** Called when the user selects a different page */\n  onPageChange: (page: number) => void;\n  /** Accessible label for the navigation landmark (default: \"Pagination\") */\n  ariaLabel?: string;\n}\n\n// ── Page number generation ─────────────────────────────────────────────────\n\nfunction getPageNumbers(current: number, total: number): (number | 'ellipsis')[] {\n  if (total <= 7) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  const pages: (number | 'ellipsis')[] = [1];\n\n  if (current > 3) pages.push('ellipsis');\n\n  const start = Math.max(2, current - 1);\n  const end   = Math.min(total - 1, current + 1);\n  for (let i = start; i <= end; i++) pages.push(i);\n\n  if (current < total - 2) pages.push('ellipsis');\n\n  pages.push(total);\n  return pages;\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Pagination({\n  page,\n  totalPages,\n  onPageChange,\n  ariaLabel = 'Pagination',\n}: PaginationProps) {\n  if (totalPages <= 1) return null;\n\n  const pageNumbers = getPageNumbers(page, totalPages);\n\n  return (\n    <nav aria-label={ariaLabel}>\n      <ol className=\"list-none flex items-center gap-1\" role=\"list\">\n        {/* Previous */}\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => onPageChange(page - 1)}\n            disabled={page <= 1}\n            aria-label=\"Previous page\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40\"\n          >\n            <ChevronLeft size={16} aria-hidden=\"true\" />\n          </button>\n        </li>\n\n        {/* Page numbers */}\n        {pageNumbers.map((n, idx) =>\n          n === 'ellipsis' ? (\n            <li key={`ellipsis-${idx}`} aria-hidden=\"true\">\n              <span className=\"flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300\">\n                …\n              </span>\n            </li>\n          ) : (\n            <li key={n}>\n              <button\n                type=\"button\"\n                onClick={() => onPageChange(n)}\n                aria-label={`Page ${n}`}\n                aria-current={n === page ? 'page' : undefined}\n                className={[\n                  'flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n                  n === page\n                    ? 'bg-brand-blue text-white shadow-md shadow-brand-blue/20'\n                    : 'border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800',\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {n}\n              </button>\n            </li>\n          ),\n        )}\n\n        {/* Next */}\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => onPageChange(page + 1)}\n            disabled={page >= totalPages}\n            aria-label=\"Next page\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40\"\n          >\n            <ChevronRight size={16} aria-hidden=\"true\" />\n          </button>\n        </li>\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,SAAS,eAAe,SAAiB,OAAwC;CAC/E,IAAI,SAAS,GACX,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAGtD,MAAM,QAAiC,CAAC,CAAC;CAEzC,IAAI,UAAU,GAAG,MAAM,KAAK,UAAU;CAEtC,MAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,CAAC;CACrC,MAAM,MAAQ,KAAK,IAAI,QAAQ,GAAG,UAAU,CAAC;CAC7C,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC;CAE/C,IAAI,UAAU,QAAQ,GAAG,MAAM,KAAK,UAAU;CAE9C,MAAM,KAAK,KAAK;CAChB,OAAO;AACT;AAIA,SAAgB,WAAW,EACzB,MACA,YACA,cACA,YAAY,gBACM;CAClB,IAAI,cAAc,GAAG,OAAO;CAE5B,MAAM,cAAc,eAAe,MAAM,UAAU;CAEnD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,cAAY;EACf,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;GAAI,WAAU;GAAoC,MAAK;GAAvD,UAAA;IAEE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KACE,MAAK;KACL,eAAe,aAAa,OAAO,CAAC;KACpC,UAAU,QAAQ;KAClB,cAAW;KACX,WAAU;KAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,aAAD;MAAa,MAAM;MAAI,eAAY;KAAQ,CAAA;IACrC,CAAA,EACN,CAAA;IAGH,YAAY,KAAK,GAAG,QACnB,MAAM,aACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;KAA4B,eAAY;KACtC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MAA4E,UAAA;KAEtF,CAAA;IACJ,GAJK,YAAY,KAIjB,IAEJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KACE,MAAK;KACL,eAAe,aAAa,CAAC;KAC7B,cAAY,QAAQ;KACpB,gBAAc,MAAM,OAAO,SAAS,KAAA;KACpC,WAAW,CACT,qKACA,MAAM,OACF,4DACA,6FACN,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;KAEV,UAAA;IACK,CAAA,EACN,GAjBK,CAiBL,CAER;IAGA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KACE,MAAK;KACL,eAAe,aAAa,OAAO,CAAC;KACpC,UAAU,QAAQ;KAClB,cAAW;KACX,WAAU;KAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,cAAD;MAAc,MAAM;MAAI,eAAY;KAAQ,CAAA;IACtC,CAAA,EACN,CAAA;GACF;;CACD,CAAA;AAET"}

package/lib/index49.mjs

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/ui-library/gallery/pagination/Pagination.tsx
+/**
+* Pagination — Design System Component
+*
+* Renders previous/next navigation and page number pills.
+* Presentation-only — the consuming feature owns page state.
+*
+* Page numbers collapse intelligently with ellipsis when there are
+* more pages than can fit (> 7 pages visible at once).
+*
+* Usage:
+*   <Pagination
+*     page={page}
+*     totalPages={totalPages}
+*     onPageChange={setPage}
+*   />
+*/
+function getPageNumbers(current, total) {
+	if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+	const pages = [1];
+	if (current > 3) pages.push("ellipsis");
+	const start = Math.max(2, current - 1);
+	const end = Math.min(total - 1, current + 1);
+	for (let i = start; i <= end; i++) pages.push(i);
+	if (current < total - 2) pages.push("ellipsis");
+	pages.push(total);
+	return pages;
+}
+function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination" }) {
+	if (totalPages <= 1) return null;
+	const pageNumbers = getPageNumbers(page, totalPages);
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ jsxs("ol", {
+			className: "list-none flex items-center gap-1",
+			role: "list",
+			children: [
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onPageChange(page - 1),
+					disabled: page <= 1,
+					"aria-label": "Previous page",
+					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+					children: /* @__PURE__ */ jsx(ChevronLeft, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				}) }),
+				pageNumbers.map((n, idx) => n === "ellipsis" ? /* @__PURE__ */ jsx("li", {
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300",
+						children: "…"
+					})
+				}, `ellipsis-${idx}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onPageChange(n),
+					"aria-label": `Page ${n}`,
+					"aria-current": n === page ? "page" : void 0,
+					className: ["flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", n === page ? "bg-brand-blue text-white shadow-md shadow-brand-blue/20" : "border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800"].filter(Boolean).join(" "),
+					children: n
+				}) }, n)),
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onPageChange(page + 1),
+					disabled: page >= totalPages,
+					"aria-label": "Next page",
+					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+					children: /* @__PURE__ */ jsx(ChevronRight, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				}) })
+			]
+		})
+	});
+}
+//#endregion
+export { Pagination };
+
+//# sourceMappingURL=index49.mjs.map

package/lib/index49.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index49.mjs","names":[],"sources":["../src/ui-library/gallery/pagination/Pagination.tsx"],"sourcesContent":["/**\n * Pagination — Design System Component\n *\n * Renders previous/next navigation and page number pills.\n * Presentation-only — the consuming feature owns page state.\n *\n * Page numbers collapse intelligently with ellipsis when there are\n * more pages than can fit (> 7 pages visible at once).\n *\n * Usage:\n *   <Pagination\n *     page={page}\n *     totalPages={totalPages}\n *     onPageChange={setPage}\n *   />\n */\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\n\nexport interface PaginationProps {\n  /** Current page number (1-indexed) */\n  page: number;\n  /** Total number of pages */\n  totalPages: number;\n  /** Called when the user selects a different page */\n  onPageChange: (page: number) => void;\n  /** Accessible label for the navigation landmark (default: \"Pagination\") */\n  ariaLabel?: string;\n}\n\n// ── Page number generation ─────────────────────────────────────────────────\n\nfunction getPageNumbers(current: number, total: number): (number | 'ellipsis')[] {\n  if (total <= 7) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  const pages: (number | 'ellipsis')[] = [1];\n\n  if (current > 3) pages.push('ellipsis');\n\n  const start = Math.max(2, current - 1);\n  const end   = Math.min(total - 1, current + 1);\n  for (let i = start; i <= end; i++) pages.push(i);\n\n  if (current < total - 2) pages.push('ellipsis');\n\n  pages.push(total);\n  return pages;\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Pagination({\n  page,\n  totalPages,\n  onPageChange,\n  ariaLabel = 'Pagination',\n}: PaginationProps) {\n  if (totalPages <= 1) return null;\n\n  const pageNumbers = getPageNumbers(page, totalPages);\n\n  return (\n    <nav aria-label={ariaLabel}>\n      <ol className=\"list-none flex items-center gap-1\" role=\"list\">\n        {/* Previous */}\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => onPageChange(page - 1)}\n            disabled={page <= 1}\n            aria-label=\"Previous page\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40\"\n          >\n            <ChevronLeft size={16} aria-hidden=\"true\" />\n          </button>\n        </li>\n\n        {/* Page numbers */}\n        {pageNumbers.map((n, idx) =>\n          n === 'ellipsis' ? (\n            <li key={`ellipsis-${idx}`} aria-hidden=\"true\">\n              <span className=\"flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300\">\n                …\n              </span>\n            </li>\n          ) : (\n            <li key={n}>\n              <button\n                type=\"button\"\n                onClick={() => onPageChange(n)}\n                aria-label={`Page ${n}`}\n                aria-current={n === page ? 'page' : undefined}\n                className={[\n                  'flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n                  n === page\n                    ? 'bg-brand-blue text-white shadow-md shadow-brand-blue/20'\n                    : 'border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800',\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {n}\n              </button>\n            </li>\n          ),\n        )}\n\n        {/* Next */}\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => onPageChange(page + 1)}\n            disabled={page >= totalPages}\n            aria-label=\"Next page\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40\"\n          >\n            <ChevronRight size={16} aria-hidden=\"true\" />\n          </button>\n        </li>\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,SAAS,eAAe,SAAiB,OAAwC;CAC/E,IAAI,SAAS,GACX,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAGtD,MAAM,QAAiC,CAAC,CAAC;CAEzC,IAAI,UAAU,GAAG,MAAM,KAAK,UAAU;CAEtC,MAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,CAAC;CACrC,MAAM,MAAQ,KAAK,IAAI,QAAQ,GAAG,UAAU,CAAC;CAC7C,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC;CAE/C,IAAI,UAAU,QAAQ,GAAG,MAAM,KAAK,UAAU;CAE9C,MAAM,KAAK,KAAK;CAChB,OAAO;AACT;AAIA,SAAgB,WAAW,EACzB,MACA,YACA,cACA,YAAY,gBACM;CAClB,IAAI,cAAc,GAAG,OAAO;CAE5B,MAAM,cAAc,eAAe,MAAM,UAAU;CAEnD,OACE,oBAAC,OAAD;EAAK,cAAY;EACf,UAAA,qBAAC,MAAD;GAAI,WAAU;GAAoC,MAAK;GAAvD,UAAA;IAEE,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD;KACE,MAAK;KACL,eAAe,aAAa,OAAO,CAAC;KACpC,UAAU,QAAQ;KAClB,cAAW;KACX,WAAU;KAEV,UAAA,oBAAC,aAAD;MAAa,MAAM;MAAI,eAAY;KAAQ,CAAA;IACrC,CAAA,EACN,CAAA;IAGH,YAAY,KAAK,GAAG,QACnB,MAAM,aACJ,oBAAC,MAAD;KAA4B,eAAY;KACtC,UAAA,oBAAC,QAAD;MAAM,WAAU;MAA4E,UAAA;KAEtF,CAAA;IACJ,GAJK,YAAY,KAIjB,IAEJ,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD;KACE,MAAK;KACL,eAAe,aAAa,CAAC;KAC7B,cAAY,QAAQ;KACpB,gBAAc,MAAM,OAAO,SAAS,KAAA;KACpC,WAAW,CACT,qKACA,MAAM,OACF,4DACA,6FACN,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;KAEV,UAAA;IACK,CAAA,EACN,GAjBK,CAiBL,CAER;IAGA,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD;KACE,MAAK;KACL,eAAe,aAAa,OAAO,CAAC;KACpC,UAAU,QAAQ;KAClB,cAAW;KACX,WAAU;KAEV,UAAA,oBAAC,cAAD;MAAc,MAAM;MAAI,eAAY;KAAQ,CAAA;IACtC,CAAA,EACN,CAAA;GACF;;CACD,CAAA;AAET"}

package/lib/index5.cjs

@@ -0,0 +1,39 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/badge/Badge.tsx
+var TONE_STYLES = {
+	neutral: "border-slate-200 bg-slate-100 text-slate-700",
+	primary: "border-brand-blue/20 bg-blue-50 text-brand-blue",
+	success: "border-emerald-200 bg-emerald-50 text-emerald-700",
+	warning: "border-amber-200 bg-amber-50 text-amber-700",
+	danger: "border-rose-200 bg-rose-50 text-rose-700",
+	info: "border-sky-200 bg-sky-50 text-sky-700",
+	subtle: "border-transparent bg-slate-100 text-slate-500",
+	outline: "border-slate-300 bg-transparent text-slate-700"
+};
+var STATUS_TONES = /* @__PURE__ */ new Set([
+	"success",
+	"warning",
+	"danger",
+	"info"
+]);
+var SIZE_STYLES = {
+	sm: "gap-1 px-2 py-0.5 text-[10px]",
+	md: "gap-1.5 px-2.5 py-0.5 text-xs",
+	lg: "gap-1.5 px-3 py-1 text-sm"
+};
+function Badge({ tone = "neutral", size = "md", icon, children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: [
+			"inline-flex items-center border font-semibold uppercase tracking-wide",
+			STATUS_TONES.has(tone) ? "rounded" : "rounded-full",
+			TONE_STYLES[tone],
+			SIZE_STYLES[size],
+			className
+		].filter(Boolean).join(" "),
+		children: [icon, children]
+	});
+}
+//#endregion
+exports.Badge = Badge;
+
+//# sourceMappingURL=index5.cjs.map

package/lib/index5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index5.cjs","names":[],"sources":["../src/ui-library/gallery/badge/Badge.tsx"],"sourcesContent":["/**\n * Badge — Design System Component\n *\n * A small, pill-shaped label for conveying short status, category, or\n * count information. Purely presentational — no business logic.\n *\n * Tones:    neutral | primary | success | warning | danger | info | subtle | outline\n * Sizes:    sm | md | lg\n */\n\nimport type { ReactNode } from 'react';\n\nexport type BadgeTone =\n  | 'neutral'\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'subtle'\n  | 'outline';\n\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\nexport interface BadgeProps {\n  tone?: BadgeTone;\n  size?: BadgeSize;\n  /** Leading icon node. Should be aria-hidden=\"true\". */\n  icon?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\nconst TONE_STYLES: Record<BadgeTone, string> = {\n  neutral: 'border-slate-200 bg-slate-100 text-slate-700',\n  primary: 'border-brand-blue/20 bg-blue-50 text-brand-blue',\n  success: 'border-emerald-200 bg-emerald-50 text-emerald-700',\n  warning: 'border-amber-200 bg-amber-50 text-amber-700',\n  danger:  'border-rose-200 bg-rose-50 text-rose-700',\n  info:    'border-sky-200 bg-sky-50 text-sky-700',\n  subtle:  'border-transparent bg-slate-100 text-slate-500',\n  outline: 'border-slate-300 bg-transparent text-slate-700',\n};\n\n// Status tones carry formal/institutional meaning — use a tight rectangular\n// radius. Category/identity tones use a pill for visual distinction.\nconst STATUS_TONES = new Set<BadgeTone>(['success', 'warning', 'danger', 'info']);\n\nconst SIZE_STYLES: Record<BadgeSize, string> = {\n  sm: 'gap-1 px-2 py-0.5 text-[10px]',\n  md: 'gap-1.5 px-2.5 py-0.5 text-xs',\n  lg: 'gap-1.5 px-3 py-1 text-sm',\n};\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Badge({\n  tone = 'neutral',\n  size = 'md',\n  icon,\n  children,\n  className = '',\n}: BadgeProps) {\n  return (\n    <span\n      className={[\n        'inline-flex items-center border font-semibold uppercase tracking-wide',\n        STATUS_TONES.has(tone) ? 'rounded' : 'rounded-full',\n        TONE_STYLES[tone],\n        SIZE_STYLES[size],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {icon}\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;AAmCA,IAAM,cAAyC;CAC7C,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;CACT,MAAS;CACT,QAAS;CACT,SAAS;AACX;AAIA,IAAM,+BAAe,IAAI,IAAe;CAAC;CAAW;CAAW;CAAU;AAAM,CAAC;AAEhF,IAAM,cAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,SAAgB,MAAM,EACpB,OAAO,WACP,OAAO,MACP,MACA,UACA,YAAY,MACC;CACb,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EACE,WAAW;GACT;GACA,aAAa,IAAI,IAAI,IAAI,YAAY;GACrC,YAAY;GACZ,YAAY;GACZ;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EATb,UAAA,CAWG,MACA,QACG;;AAEV"}

package/lib/index5.mjs

@@ -0,0 +1,39 @@
+import { jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/badge/Badge.tsx
+var TONE_STYLES = {
+	neutral: "border-slate-200 bg-slate-100 text-slate-700",
+	primary: "border-brand-blue/20 bg-blue-50 text-brand-blue",
+	success: "border-emerald-200 bg-emerald-50 text-emerald-700",
+	warning: "border-amber-200 bg-amber-50 text-amber-700",
+	danger: "border-rose-200 bg-rose-50 text-rose-700",
+	info: "border-sky-200 bg-sky-50 text-sky-700",
+	subtle: "border-transparent bg-slate-100 text-slate-500",
+	outline: "border-slate-300 bg-transparent text-slate-700"
+};
+var STATUS_TONES = /* @__PURE__ */ new Set([
+	"success",
+	"warning",
+	"danger",
+	"info"
+]);
+var SIZE_STYLES = {
+	sm: "gap-1 px-2 py-0.5 text-[10px]",
+	md: "gap-1.5 px-2.5 py-0.5 text-xs",
+	lg: "gap-1.5 px-3 py-1 text-sm"
+};
+function Badge({ tone = "neutral", size = "md", icon, children, className = "" }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: [
+			"inline-flex items-center border font-semibold uppercase tracking-wide",
+			STATUS_TONES.has(tone) ? "rounded" : "rounded-full",
+			TONE_STYLES[tone],
+			SIZE_STYLES[size],
+			className
+		].filter(Boolean).join(" "),
+		children: [icon, children]
+	});
+}
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=index5.mjs.map

package/lib/index5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index5.mjs","names":[],"sources":["../src/ui-library/gallery/badge/Badge.tsx"],"sourcesContent":["/**\n * Badge — Design System Component\n *\n * A small, pill-shaped label for conveying short status, category, or\n * count information. Purely presentational — no business logic.\n *\n * Tones:    neutral | primary | success | warning | danger | info | subtle | outline\n * Sizes:    sm | md | lg\n */\n\nimport type { ReactNode } from 'react';\n\nexport type BadgeTone =\n  | 'neutral'\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'subtle'\n  | 'outline';\n\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\nexport interface BadgeProps {\n  tone?: BadgeTone;\n  size?: BadgeSize;\n  /** Leading icon node. Should be aria-hidden=\"true\". */\n  icon?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\nconst TONE_STYLES: Record<BadgeTone, string> = {\n  neutral: 'border-slate-200 bg-slate-100 text-slate-700',\n  primary: 'border-brand-blue/20 bg-blue-50 text-brand-blue',\n  success: 'border-emerald-200 bg-emerald-50 text-emerald-700',\n  warning: 'border-amber-200 bg-amber-50 text-amber-700',\n  danger:  'border-rose-200 bg-rose-50 text-rose-700',\n  info:    'border-sky-200 bg-sky-50 text-sky-700',\n  subtle:  'border-transparent bg-slate-100 text-slate-500',\n  outline: 'border-slate-300 bg-transparent text-slate-700',\n};\n\n// Status tones carry formal/institutional meaning — use a tight rectangular\n// radius. Category/identity tones use a pill for visual distinction.\nconst STATUS_TONES = new Set<BadgeTone>(['success', 'warning', 'danger', 'info']);\n\nconst SIZE_STYLES: Record<BadgeSize, string> = {\n  sm: 'gap-1 px-2 py-0.5 text-[10px]',\n  md: 'gap-1.5 px-2.5 py-0.5 text-xs',\n  lg: 'gap-1.5 px-3 py-1 text-sm',\n};\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Badge({\n  tone = 'neutral',\n  size = 'md',\n  icon,\n  children,\n  className = '',\n}: BadgeProps) {\n  return (\n    <span\n      className={[\n        'inline-flex items-center border font-semibold uppercase tracking-wide',\n        STATUS_TONES.has(tone) ? 'rounded' : 'rounded-full',\n        TONE_STYLES[tone],\n        SIZE_STYLES[size],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {icon}\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;AAmCA,IAAM,cAAyC;CAC7C,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;CACT,MAAS;CACT,QAAS;CACT,SAAS;AACX;AAIA,IAAM,+BAAe,IAAI,IAAe;CAAC;CAAW;CAAW;CAAU;AAAM,CAAC;AAEhF,IAAM,cAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,SAAgB,MAAM,EACpB,OAAO,WACP,OAAO,MACP,MACA,UACA,YAAY,MACC;CACb,OACE,qBAAC,QAAD;EACE,WAAW;GACT;GACA,aAAa,IAAI,IAAI,IAAI,YAAY;GACrC,YAAY;GACZ,YAAY;GACZ;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EATb,UAAA,CAWG,MACA,QACG;;AAEV"}

package/lib/index50.cjs

@@ -0,0 +1,100 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+			size: 16,
+			strokeWidth: 3
+		}) : icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: number })
+	});
+}
+function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [], orientation = "horizontal", className = "" }) {
+	const isHorizontal = orientation === "horizontal";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-label": "Progress",
+		"aria-orientation": orientation,
+		className: [isHorizontal ? "flex items-start" : "flex flex-col", className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "relative flex flex-col items-center",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
+								state,
+								number: idx + 1,
+								icon: step.icon
+							}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-1 flex-col items-center",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex w-full items-center",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
+									state,
+									number: idx + 1,
+									icon: step.icon
+								}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: `h-0.5 flex-1 ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+									"aria-hidden": "true"
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "mt-2 text-center px-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: `text-sm leading-tight ${labelColor[state]}`,
+									children: step.label
+								}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "mt-0.5 text-xs text-slate-400 leading-tight",
+									children: step.description
+								})]
+							})]
+						}),
+						!isHorizontal && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1 pt-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: `text-sm leading-tight ${labelColor[state]}`,
+								children: step.label
+							}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mt-0.5 text-xs text-slate-400 leading-tight",
+								children: step.description
+							})]
+						})
+					]
+				}, step.id);
+			})
+		})
+	});
+}
+//#endregion
+exports.Stepper = Stepper;
+
+//# sourceMappingURL=index50.cjs.map

package/lib/index50.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index50.cjs","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,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,4GAAW;GAP3B,WAAW;GACX,SAAW;GACX,UAAW;GACX,UAAW;EAIgB,EAAO;EAAU,eAAY;EACrD,UAAA,UAAU,cACT,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,OAAD;GAAO,MAAM;GAAI,aAAa;EAAI,CAAA,IAE1C,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,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,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,cAAW;EACX,oBAAkB;EAClB,WAAW,CACT,eACI,qBACA,iBACJ,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEX,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,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,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;KAEE,gBAAc,YAAY,SAAS,KAAA;KACnC,WAAW,eAAe,4BAA4B;KAHxD,UAAA;MAMG,CAAC,gBACA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;QAAmB;QAAO,QAAQ,MAAM;QAAG,MAAM,KAAK;OAAO,CAAA,GAC5D,CAAC,UACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;QACE,WAAW,kCACT,UAAU,cAAc,qBAAqB;QAE/C,eAAY;OACb,CAAA,CAEA;;MAIN,gBACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;QAAK,WAAU;QAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;SAAmB;SAAO,QAAQ,MAAM;SAAG,MAAM,KAAK;QAAO,CAAA,GAC5D,CAAC,UACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;SACE,WAAW,gBACT,UAAU,cAAc,qBAAqB;SAE/C,eAAY;QACb,CAAA,CAEA;OAEL,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;QAAK,WAAU;QAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;SAAG,WAAW,yBAAyB,WAAW;SAAW,UAAA,KAAK;QAAS,CAAA,GAC1E,KAAK,eACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;SAAG,WAAU;SAA+C,UAAA,KAAK;QAAe,CAAA,CAE/E;OACF,CAAA,CAAA;;MAIN,CAAC,gBACA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;QAAG,WAAW,yBAAyB,WAAW;QAAW,UAAA,KAAK;OAAS,CAAA,GAC1E,KAAK,eACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;QAAG,WAAU;QAA+C,UAAA,KAAK;OAAe,CAAA,CAE/E;;KAEL;IApDG,GAAA,KAAK,EAoDR;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET"}