@diwauhris/ui 1.0.0

package/lib/index55.mjs

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

package/lib/index55.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index55.mjs","names":[],"sources":["../src/ui-library/gallery/accordion/Accordion.tsx"],"sourcesContent":["/**\n * Accordion — Design System Component\n *\n * Disclosure/accordion pattern with support for single-open and\n * multiple-open modes, controlled/uncontrolled state, and disabled items.\n *\n * WAI-ARIA Accordion pattern:\n *   - Trigger is a <button> with aria-expanded and aria-controls\n *   - Content panel has a stable id referenced by aria-controls\n *   - Disabled triggers have aria-disabled + disabled attribute\n *\n * Keyboard:\n *   - Tab moves between triggers\n *   - Enter / Space toggle the focused trigger\n *\n * Composition:\n *   <Accordion type=\"single\" defaultValue=\"item-1\">\n *     <AccordionItem value=\"item-1\">\n *       <AccordionTrigger>Section heading</AccordionTrigger>\n *       <AccordionContent>Content here.</AccordionContent>\n *     </AccordionItem>\n *   </Accordion>\n */\n\nimport { createContext, useContext, useId, useState, type ReactNode } from 'react';\nimport { ChevronDown } from 'lucide-react';\n\n// ── Context ───────────────────────────────────────────────────────────────────\n\ninterface AccordionContextValue {\n  type: 'single' | 'multiple';\n  openValues: Set<string>;\n  toggle: (value: string) => void;\n}\n\nconst AccordionContext = createContext<AccordionContextValue | null>(null);\n\nfunction useAccordionContext() {\n  const ctx = useContext(AccordionContext);\n  if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');\n  return ctx;\n}\n\ninterface ItemContextValue {\n  value: string;\n  disabled: boolean;\n  panelId: string;\n  triggerId: string;\n}\n\nconst ItemContext = createContext<ItemContextValue | null>(null);\n\nfunction useItemContext() {\n  const ctx = useContext(ItemContext);\n  if (!ctx) throw new Error('AccordionTrigger/AccordionContent must be inside <AccordionItem>');\n  return ctx;\n}\n\n// ── Accordion (root) ──────────────────────────────────────────────────────────\n\nexport interface AccordionProps {\n  /**\n   * 'single' — only one item open at a time (default)\n   * 'multiple' — any number of items can be open simultaneously\n   */\n  type?: 'single' | 'multiple';\n  /** Uncontrolled: initial open value(s) */\n  defaultValue?: string | string[];\n  /** Controlled: open value(s) */\n  value?: string | string[];\n  /** Controlled: called when open values change */\n  onValueChange?: (value: string | string[]) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Accordion({\n  type = 'single',\n  defaultValue,\n  value: controlledValue,\n  onValueChange,\n  children,\n  className = '',\n}: AccordionProps) {\n  const isControlled = controlledValue !== undefined;\n\n  const [uncontrolled, setUncontrolled] = useState<Set<string>>(() => {\n    if (!defaultValue) return new Set();\n    return new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue]);\n  });\n\n  const openValues: Set<string> = isControlled\n    ? new Set(Array.isArray(controlledValue) ? controlledValue : [controlledValue])\n    : uncontrolled;\n\n  const toggle = (val: string) => {\n    let next: Set<string>;\n    if (type === 'single') {\n      next = openValues.has(val) ? new Set() : new Set([val]);\n    } else {\n      next = new Set(openValues);\n      if (next.has(val)) next.delete(val); else next.add(val);\n    }\n    if (!isControlled) setUncontrolled(next);\n    if (onValueChange) {\n      onValueChange(type === 'single' ? (next.values().next().value ?? '') : [...next]);\n    }\n  };\n\n  return (\n    <AccordionContext.Provider value={{ type, openValues, toggle }}>\n      <div className={`divide-y divide-slate-200 rounded-xl border border-slate-200 ${className}`}>\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\n// ── AccordionItem ─────────────────────────────────────────────────────────────\n\nexport interface AccordionItemProps {\n  value: string;\n  disabled?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function AccordionItem({ value, disabled = false, children, className = '' }: AccordionItemProps) {\n  const baseId   = useId().replace(/:/g, '');\n  const panelId   = `${baseId}-panel`;\n  const triggerId = `${baseId}-trigger`;\n\n  return (\n    <ItemContext.Provider value={{ value, disabled, panelId, triggerId }}>\n      <div className={`${className}`}>\n        {children}\n      </div>\n    </ItemContext.Provider>\n  );\n}\n\n// ── AccordionTrigger ──────────────────────────────────────────────────────────\n\nexport interface AccordionTriggerProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function AccordionTrigger({ children, className = '' }: AccordionTriggerProps) {\n  const { openValues, toggle } = useAccordionContext();\n  const { value, disabled, panelId, triggerId } = useItemContext();\n  const isOpen = openValues.has(value);\n\n  return (\n    <button\n      id={triggerId}\n      type=\"button\"\n      aria-expanded={isOpen}\n      aria-controls={panelId}\n      aria-disabled={disabled || undefined}\n      disabled={disabled}\n      onClick={() => toggle(value)}\n      className={[\n        'flex w-full items-center justify-between px-5 py-4 text-left text-sm font-semibold',\n        'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30',\n        disabled\n          ? 'cursor-not-allowed text-slate-300'\n          : 'text-slate-800 hover:bg-slate-50',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <span>{children}</span>\n      <ChevronDown\n        size={16}\n        aria-hidden=\"true\"\n        className={`shrink-0 text-slate-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}\n      />\n    </button>\n  );\n}\n\n// ── AccordionContent ──────────────────────────────────────────────────────────\n\nexport interface AccordionContentProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function AccordionContent({ children, className = '' }: AccordionContentProps) {\n  const { openValues } = useAccordionContext();\n  const { value, panelId, triggerId } = useItemContext();\n  const isOpen = openValues.has(value);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      id={panelId}\n      role=\"region\"\n      aria-labelledby={triggerId}\n      className={`border-t border-slate-100 px-5 py-4 text-sm font-medium text-slate-600 ${className}`}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAM,mBAAmB,cAA4C,IAAI;AAEzE,SAAS,sBAAsB;CAC7B,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CACzE,OAAO;AACT;AASA,IAAM,cAAc,cAAuC,IAAI;AAE/D,SAAS,iBAAiB;CACxB,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,kEAAkE;CAC5F,OAAO;AACT;AAoBA,SAAgB,UAAU,EACxB,OAAO,UACP,cACA,OAAO,iBACP,eACA,UACA,YAAY,MACK;CACjB,MAAM,eAAe,oBAAoB,KAAA;CAEzC,MAAM,CAAC,cAAc,mBAAmB,eAA4B;EAClE,IAAI,CAAC,cAAc,uBAAO,IAAI,IAAI;EAClC,OAAO,IAAI,IAAI,MAAM,QAAQ,YAAY,IAAI,eAAe,CAAC,YAAY,CAAC;CAC5E,CAAC;CAED,MAAM,aAA0B,eAC5B,IAAI,IAAI,MAAM,QAAQ,eAAe,IAAI,kBAAkB,CAAC,eAAe,CAAC,IAC5E;CAEJ,MAAM,UAAU,QAAgB;EAC9B,IAAI;EACJ,IAAI,SAAS,UACX,OAAO,WAAW,IAAI,GAAG,oBAAI,IAAI,IAAI,oBAAI,IAAI,IAAI,CAAC,GAAG,CAAC;OACjD;GACL,OAAO,IAAI,IAAI,UAAU;GACzB,IAAI,KAAK,IAAI,GAAG,GAAG,KAAK,OAAO,GAAG;QAAQ,KAAK,IAAI,GAAG;EACxD;EACA,IAAI,CAAC,cAAc,gBAAgB,IAAI;EACvC,IAAI,eACF,cAAc,SAAS,WAAY,KAAK,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAM,CAAC,GAAG,IAAI,CAAC;CAEpF;CAEA,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;GAAE;GAAM;GAAY;EAAO;EAC3D,UAAA,oBAAC,OAAD;GAAK,WAAW,gEAAgE;GAC7E;EACE,CAAA;CACoB,CAAA;AAE/B;AAWA,SAAgB,cAAc,EAAE,OAAO,WAAW,OAAO,UAAU,YAAY,MAA0B;CACvG,MAAM,SAAW,MAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CACzC,MAAM,UAAY,GAAG,OAAO;CAC5B,MAAM,YAAY,GAAG,OAAO;CAE5B,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;GAAE;GAAO;GAAU;GAAS;EAAU;EACjE,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG;GAChB;EACE,CAAA;CACe,CAAA;AAE1B;AASA,SAAgB,iBAAiB,EAAE,UAAU,YAAY,MAA6B;CACpF,MAAM,EAAE,YAAY,WAAW,oBAAoB;CACnD,MAAM,EAAE,OAAO,UAAU,SAAS,cAAc,eAAe;CAC/D,MAAM,SAAS,WAAW,IAAI,KAAK;CAEnC,OACE,qBAAC,UAAD;EACE,IAAI;EACJ,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe,YAAY,KAAA;EACjB;EACV,eAAe,OAAO,KAAK;EAC3B,WAAW;GACT;GACA;GACA,WACI,sCACA;GACJ;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAjBb,UAAA,CAmBE,oBAAC,QAAD,EAAO,SAAe,CAAA,GACtB,oBAAC,aAAD;GACE,MAAM;GACN,eAAY;GACZ,WAAW,6DAA6D,SAAS,eAAe;EACjG,CAAA,CACK;;AAEZ;AASA,SAAgB,iBAAiB,EAAE,UAAU,YAAY,MAA6B;CACpF,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,EAAE,OAAO,SAAS,cAAc,eAAe;CAGrD,IAAI,CAFW,WAAW,IAAI,KAEzB,GAAQ,OAAO;CAEpB,OACE,oBAAC,OAAD;EACE,IAAI;EACJ,MAAK;EACL,mBAAiB;EACjB,WAAW,0EAA0E;EAEpF;CACE,CAAA;AAET"}

package/lib/index56.cjs

@@ -0,0 +1,36 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/description-list/DescriptionList.tsx
+var LAYOUT_CLASS = {
+	vertical: "flex flex-col gap-4",
+	horizontal: "grid grid-cols-[minmax(8rem,14rem)_1fr] gap-x-6 gap-y-3",
+	responsive: "grid grid-cols-1 sm:grid-cols-[minmax(8rem,14rem)_1fr] gap-x-6 gap-y-3"
+};
+function DescriptionList({ layout = "vertical", children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: `${LAYOUT_CLASS[layout]} ${className}`,
+		children
+	});
+}
+function DescriptionItem({ label, value, fullWidth = false, className = "" }) {
+	const isEmpty = value === void 0 || value === null || value === "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+		className: [
+			"text-xs font-bold uppercase tracking-[0.12em] text-slate-500",
+			fullWidth ? "sm:col-span-2" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: label
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+		className: [
+			"text-sm font-medium text-slate-800",
+			fullWidth ? "sm:col-span-2" : "",
+			isEmpty ? "text-slate-300" : ""
+		].filter(Boolean).join(" "),
+		children: isEmpty ? "—" : value
+	})] });
+}
+//#endregion
+exports.DescriptionItem = DescriptionItem;
+exports.DescriptionList = DescriptionList;
+
+//# sourceMappingURL=index56.cjs.map

package/lib/index56.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index56.cjs","names":[],"sources":["../src/ui-library/gallery/description-list/DescriptionList.tsx"],"sourcesContent":["/**\n * DescriptionList — Design System Component\n *\n * Read-only label/value display using semantic HTML:\n *   <dl> — description list\n *   <dt> — term (label)\n *   <dd> — description (value)\n *\n * Two layouts:\n *   'vertical'   — label stacked above value (default, compact)\n *   'horizontal' — label and value side by side in a grid\n *\n * Responsive variant: 'responsive' starts vertical on mobile and switches\n * to a 2-column horizontal grid at sm breakpoint.\n *\n * Usage:\n *   <DescriptionList>\n *     <DescriptionItem label=\"Full Name\" value=\"Juan dela Cruz\" />\n *     <DescriptionItem label=\"Status\" value={<Badge>Active</Badge>} />\n *     <DescriptionItem label=\"Notes\" />   // empty value → shows \"—\"\n *   </DescriptionList>\n */\n\nimport type { ReactNode } from 'react';\n\nexport type DescriptionListLayout = 'vertical' | 'horizontal' | 'responsive';\n\nexport interface DescriptionListProps {\n  layout?: DescriptionListLayout;\n  children: ReactNode;\n  className?: string;\n}\n\nexport interface DescriptionItemProps {\n  label: string;\n  value?: ReactNode;\n  /** Span across full width (2 columns in horizontal layout) */\n  fullWidth?: boolean;\n  className?: string;\n}\n\nconst LAYOUT_CLASS: Record<DescriptionListLayout, string> = {\n  vertical:   'flex flex-col gap-4',\n  horizontal: 'grid grid-cols-[minmax(8rem,14rem)_1fr] gap-x-6 gap-y-3',\n  responsive: 'grid grid-cols-1 sm:grid-cols-[minmax(8rem,14rem)_1fr] gap-x-6 gap-y-3',\n};\n\nexport function DescriptionList({\n  layout = 'vertical',\n  children,\n  className = '',\n}: DescriptionListProps) {\n  return (\n    <dl className={`${LAYOUT_CLASS[layout]} ${className}`}>\n      {children}\n    </dl>\n  );\n}\n\nexport function DescriptionItem({\n  label,\n  value,\n  fullWidth = false,\n  className = '',\n}: DescriptionItemProps) {\n  const isEmpty = value === undefined || value === null || value === '';\n\n  return (\n    <>\n      <dt\n        className={[\n          'text-xs font-bold uppercase tracking-[0.12em] text-slate-500',\n          fullWidth ? 'sm:col-span-2' : '',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {label}\n      </dt>\n      <dd\n        className={[\n          'text-sm font-medium text-slate-800',\n          fullWidth ? 'sm:col-span-2' : '',\n          isEmpty ? 'text-slate-300' : '',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {isEmpty ? '—' : value}\n      </dd>\n    </>\n  );\n}\n"],"mappings":";;AAyCA,IAAM,eAAsD;CAC1D,UAAY;CACZ,YAAY;CACZ,YAAY;AACd;AAEA,SAAgB,gBAAgB,EAC9B,SAAS,YACT,UACA,YAAY,MACW;CACvB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,WAAW,GAAG,aAAa,QAAQ,GAAG;EACvC;CACC,CAAA;AAER;AAEA,SAAgB,gBAAgB,EAC9B,OACA,OACA,YAAY,OACZ,YAAY,MACW;CACvB,MAAM,UAAU,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;CAEnE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EACE,WAAW;GACT;GACA,YAAY,kBAAkB;GAC9B;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV,UAAA;CACC,CAAA,GACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EACE,WAAW;GACT;GACA,YAAY,kBAAkB;GAC9B,UAAU,mBAAmB;EAC/B,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV,UAAA,UAAU,MAAM;CACf,CAAA,CACJ,EAAA,CAAA;AAEN"}

package/lib/index56.mjs

@@ -0,0 +1,35 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/description-list/DescriptionList.tsx
+var LAYOUT_CLASS = {
+	vertical: "flex flex-col gap-4",
+	horizontal: "grid grid-cols-[minmax(8rem,14rem)_1fr] gap-x-6 gap-y-3",
+	responsive: "grid grid-cols-1 sm:grid-cols-[minmax(8rem,14rem)_1fr] gap-x-6 gap-y-3"
+};
+function DescriptionList({ layout = "vertical", children, className = "" }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: `${LAYOUT_CLASS[layout]} ${className}`,
+		children
+	});
+}
+function DescriptionItem({ label, value, fullWidth = false, className = "" }) {
+	const isEmpty = value === void 0 || value === null || value === "";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+		className: [
+			"text-xs font-bold uppercase tracking-[0.12em] text-slate-500",
+			fullWidth ? "sm:col-span-2" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: label
+	}), /* @__PURE__ */ jsx("dd", {
+		className: [
+			"text-sm font-medium text-slate-800",
+			fullWidth ? "sm:col-span-2" : "",
+			isEmpty ? "text-slate-300" : ""
+		].filter(Boolean).join(" "),
+		children: isEmpty ? "—" : value
+	})] });
+}
+//#endregion
+export { DescriptionItem, DescriptionList };
+
+//# sourceMappingURL=index56.mjs.map

package/lib/index56.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index56.mjs","names":[],"sources":["../src/ui-library/gallery/description-list/DescriptionList.tsx"],"sourcesContent":["/**\n * DescriptionList — Design System Component\n *\n * Read-only label/value display using semantic HTML:\n *   <dl> — description list\n *   <dt> — term (label)\n *   <dd> — description (value)\n *\n * Two layouts:\n *   'vertical'   — label stacked above value (default, compact)\n *   'horizontal' — label and value side by side in a grid\n *\n * Responsive variant: 'responsive' starts vertical on mobile and switches\n * to a 2-column horizontal grid at sm breakpoint.\n *\n * Usage:\n *   <DescriptionList>\n *     <DescriptionItem label=\"Full Name\" value=\"Juan dela Cruz\" />\n *     <DescriptionItem label=\"Status\" value={<Badge>Active</Badge>} />\n *     <DescriptionItem label=\"Notes\" />   // empty value → shows \"—\"\n *   </DescriptionList>\n */\n\nimport type { ReactNode } from 'react';\n\nexport type DescriptionListLayout = 'vertical' | 'horizontal' | 'responsive';\n\nexport interface DescriptionListProps {\n  layout?: DescriptionListLayout;\n  children: ReactNode;\n  className?: string;\n}\n\nexport interface DescriptionItemProps {\n  label: string;\n  value?: ReactNode;\n  /** Span across full width (2 columns in horizontal layout) */\n  fullWidth?: boolean;\n  className?: string;\n}\n\nconst LAYOUT_CLASS: Record<DescriptionListLayout, string> = {\n  vertical:   'flex flex-col gap-4',\n  horizontal: 'grid grid-cols-[minmax(8rem,14rem)_1fr] gap-x-6 gap-y-3',\n  responsive: 'grid grid-cols-1 sm:grid-cols-[minmax(8rem,14rem)_1fr] gap-x-6 gap-y-3',\n};\n\nexport function DescriptionList({\n  layout = 'vertical',\n  children,\n  className = '',\n}: DescriptionListProps) {\n  return (\n    <dl className={`${LAYOUT_CLASS[layout]} ${className}`}>\n      {children}\n    </dl>\n  );\n}\n\nexport function DescriptionItem({\n  label,\n  value,\n  fullWidth = false,\n  className = '',\n}: DescriptionItemProps) {\n  const isEmpty = value === undefined || value === null || value === '';\n\n  return (\n    <>\n      <dt\n        className={[\n          'text-xs font-bold uppercase tracking-[0.12em] text-slate-500',\n          fullWidth ? 'sm:col-span-2' : '',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {label}\n      </dt>\n      <dd\n        className={[\n          'text-sm font-medium text-slate-800',\n          fullWidth ? 'sm:col-span-2' : '',\n          isEmpty ? 'text-slate-300' : '',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {isEmpty ? '—' : value}\n      </dd>\n    </>\n  );\n}\n"],"mappings":";;AAyCA,IAAM,eAAsD;CAC1D,UAAY;CACZ,YAAY;CACZ,YAAY;AACd;AAEA,SAAgB,gBAAgB,EAC9B,SAAS,YACT,UACA,YAAY,MACW;CACvB,OACE,oBAAC,MAAD;EAAI,WAAW,GAAG,aAAa,QAAQ,GAAG;EACvC;CACC,CAAA;AAER;AAEA,SAAgB,gBAAgB,EAC9B,OACA,OACA,YAAY,OACZ,YAAY,MACW;CACvB,MAAM,UAAU,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;CAEnE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EACE,WAAW;GACT;GACA,YAAY,kBAAkB;GAC9B;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV,UAAA;CACC,CAAA,GACJ,oBAAC,MAAD;EACE,WAAW;GACT;GACA,YAAY,kBAAkB;GAC9B,UAAU,mBAAmB;EAC/B,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV,UAAA,UAAU,MAAM;CACf,CAAA,CACJ,EAAA,CAAA;AAEN"}

package/lib/index57.cjs

@@ -0,0 +1,47 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/activity-feed/ActivityFeed.tsx
+function ActivityFeed({ events, "aria-label": ariaLabel = "Activity feed", className = "" }) {
+	if (events.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+		"aria-label": ariaLabel,
+		className: `space-y-0 ${className}`,
+		children: events.map((event, i) => {
+			const isLast = i === events.length - 1;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: "flex gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-600",
+						children: event.avatar ?? event.actor.charAt(0).toUpperCase()
+					}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mt-1 w-px flex-1 bg-slate-100 min-h-[1.5rem]" })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `min-w-0 pb-4 ${isLast ? "" : ""}`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap items-baseline gap-1.5",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-sm font-bold text-slate-800",
+								children: event.actor
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-sm font-medium text-slate-600",
+								children: event.action
+							}),
+							event.badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: event.badge })
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+						dateTime: event.dateTime ?? event.timestamp,
+						className: "mt-0.5 block text-[11px] font-medium text-slate-400",
+						children: event.timestamp
+					})]
+				})]
+			}, event.id);
+		})
+	});
+}
+//#endregion
+exports.ActivityFeed = ActivityFeed;
+
+//# sourceMappingURL=index57.cjs.map

package/lib/index57.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index57.cjs","names":[],"sources":["../src/ui-library/gallery/activity-feed/ActivityFeed.tsx"],"sourcesContent":["/**\n * ActivityFeed — Design System Component\n *\n * A vertical stream of activity events with avatar, actor, action,\n * timestamp, and optional metadata. No domain logic.\n *\n * Accessibility:\n *   - <ol> with aria-label for the feed list\n *   - Each item is an <li> with datetime on the timestamp\n *   - Feed updates should use aria-live=\"polite\" on the container\n *     when new events are streamed in\n */\n\nimport type { ReactNode } from 'react';\n\nexport interface ActivityEvent {\n  id: string;\n  /** Avatar node — use gallery Avatar or a simple initials tile */\n  avatar?: ReactNode;\n  /** Who performed the action */\n  actor: string;\n  /** Action description */\n  action: ReactNode;\n  /** ISO timestamp or display string */\n  timestamp: string;\n  /** Machine-readable ISO timestamp for <time datetime> */\n  dateTime?: string;\n  /** Optional badge or secondary label */\n  badge?: ReactNode;\n}\n\nexport interface ActivityFeedProps {\n  events: ActivityEvent[];\n  /** Accessible label for the list. Default: \"Activity feed\" */\n  'aria-label'?: string;\n  className?: string;\n}\n\nexport function ActivityFeed({\n  events,\n  'aria-label': ariaLabel = 'Activity feed',\n  className = '',\n}: ActivityFeedProps) {\n  if (events.length === 0) return null;\n\n  return (\n    <ol aria-label={ariaLabel} className={`space-y-0 ${className}`}>\n      {events.map((event, i) => {\n        const isLast = i === events.length - 1;\n        return (\n          <li key={event.id} className=\"flex gap-3\">\n            {/* Spine */}\n            <div className=\"flex flex-col items-center\" aria-hidden=\"true\">\n              <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-600\">\n                {event.avatar ?? event.actor.charAt(0).toUpperCase()}\n              </div>\n              {!isLast && (\n                <div className=\"mt-1 w-px flex-1 bg-slate-100 min-h-[1.5rem]\" />\n              )}\n            </div>\n\n            {/* Content */}\n            <div className={`min-w-0 pb-4 ${isLast ? '' : ''}`}>\n              <div className=\"flex flex-wrap items-baseline gap-1.5\">\n                <span className=\"text-sm font-bold text-slate-800\">{event.actor}</span>\n                <span className=\"text-sm font-medium text-slate-600\">{event.action}</span>\n                {event.badge && <span>{event.badge}</span>}\n              </div>\n              <time\n                dateTime={event.dateTime ?? event.timestamp}\n                className=\"mt-0.5 block text-[11px] font-medium text-slate-400\"\n              >\n                {event.timestamp}\n              </time>\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;AAsCA,SAAgB,aAAa,EAC3B,QACA,cAAc,YAAY,iBAC1B,YAAY,MACQ;CACpB,IAAI,OAAO,WAAW,GAAG,OAAO;CAEhC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,cAAY;EAAW,WAAW,aAAa;EAChD,UAAA,OAAO,KAAK,OAAO,MAAM;GACxB,MAAM,SAAS,MAAM,OAAO,SAAS;GACrC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;IAAmB,WAAU;IAA7B,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAU;KAA6B,eAAY;KAAxD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAU;MACZ,UAAA,MAAM,UAAU,MAAM,MAAM,OAAO,CAAC,CAAC,CAAC,YAAY;KAChD,CAAA,GACJ,CAAC,UACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,CAE9D;IAGL,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,gBAAgB,SAAS,KAAK;KAA9C,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;QAAM,WAAU;QAAoC,UAAA,MAAM;OAAY,CAAA;OACtE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;QAAM,WAAU;QAAsC,UAAA,MAAM;OAAa,CAAA;OACxE,MAAM,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,MAAM,MAAY,CAAA;MACtC;KACL,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MACE,UAAU,MAAM,YAAY,MAAM;MAClC,WAAU;MAET,UAAA,MAAM;KACH,CAAA,CACH;IACH,CAAA,CAAA;GAzBK,GAAA,MAAM,EAyBX;EAER,CAAC;CACC,CAAA;AAER"}

package/lib/index57.mjs

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/activity-feed/ActivityFeed.tsx
+function ActivityFeed({ events, "aria-label": ariaLabel = "Activity feed", className = "" }) {
+	if (events.length === 0) return null;
+	return /* @__PURE__ */ jsx("ol", {
+		"aria-label": ariaLabel,
+		className: `space-y-0 ${className}`,
+		children: events.map((event, i) => {
+			const isLast = i === events.length - 1;
+			return /* @__PURE__ */ jsxs("li", {
+				className: "flex gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-600",
+						children: event.avatar ?? event.actor.charAt(0).toUpperCase()
+					}), !isLast && /* @__PURE__ */ jsx("div", { className: "mt-1 w-px flex-1 bg-slate-100 min-h-[1.5rem]" })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: `min-w-0 pb-4 ${isLast ? "" : ""}`,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-baseline gap-1.5",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm font-bold text-slate-800",
+								children: event.actor
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm font-medium text-slate-600",
+								children: event.action
+							}),
+							event.badge && /* @__PURE__ */ jsx("span", { children: event.badge })
+						]
+					}), /* @__PURE__ */ jsx("time", {
+						dateTime: event.dateTime ?? event.timestamp,
+						className: "mt-0.5 block text-[11px] font-medium text-slate-400",
+						children: event.timestamp
+					})]
+				})]
+			}, event.id);
+		})
+	});
+}
+//#endregion
+export { ActivityFeed };
+
+//# sourceMappingURL=index57.mjs.map

package/lib/index57.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index57.mjs","names":[],"sources":["../src/ui-library/gallery/activity-feed/ActivityFeed.tsx"],"sourcesContent":["/**\n * ActivityFeed — Design System Component\n *\n * A vertical stream of activity events with avatar, actor, action,\n * timestamp, and optional metadata. No domain logic.\n *\n * Accessibility:\n *   - <ol> with aria-label for the feed list\n *   - Each item is an <li> with datetime on the timestamp\n *   - Feed updates should use aria-live=\"polite\" on the container\n *     when new events are streamed in\n */\n\nimport type { ReactNode } from 'react';\n\nexport interface ActivityEvent {\n  id: string;\n  /** Avatar node — use gallery Avatar or a simple initials tile */\n  avatar?: ReactNode;\n  /** Who performed the action */\n  actor: string;\n  /** Action description */\n  action: ReactNode;\n  /** ISO timestamp or display string */\n  timestamp: string;\n  /** Machine-readable ISO timestamp for <time datetime> */\n  dateTime?: string;\n  /** Optional badge or secondary label */\n  badge?: ReactNode;\n}\n\nexport interface ActivityFeedProps {\n  events: ActivityEvent[];\n  /** Accessible label for the list. Default: \"Activity feed\" */\n  'aria-label'?: string;\n  className?: string;\n}\n\nexport function ActivityFeed({\n  events,\n  'aria-label': ariaLabel = 'Activity feed',\n  className = '',\n}: ActivityFeedProps) {\n  if (events.length === 0) return null;\n\n  return (\n    <ol aria-label={ariaLabel} className={`space-y-0 ${className}`}>\n      {events.map((event, i) => {\n        const isLast = i === events.length - 1;\n        return (\n          <li key={event.id} className=\"flex gap-3\">\n            {/* Spine */}\n            <div className=\"flex flex-col items-center\" aria-hidden=\"true\">\n              <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-600\">\n                {event.avatar ?? event.actor.charAt(0).toUpperCase()}\n              </div>\n              {!isLast && (\n                <div className=\"mt-1 w-px flex-1 bg-slate-100 min-h-[1.5rem]\" />\n              )}\n            </div>\n\n            {/* Content */}\n            <div className={`min-w-0 pb-4 ${isLast ? '' : ''}`}>\n              <div className=\"flex flex-wrap items-baseline gap-1.5\">\n                <span className=\"text-sm font-bold text-slate-800\">{event.actor}</span>\n                <span className=\"text-sm font-medium text-slate-600\">{event.action}</span>\n                {event.badge && <span>{event.badge}</span>}\n              </div>\n              <time\n                dateTime={event.dateTime ?? event.timestamp}\n                className=\"mt-0.5 block text-[11px] font-medium text-slate-400\"\n              >\n                {event.timestamp}\n              </time>\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;AAsCA,SAAgB,aAAa,EAC3B,QACA,cAAc,YAAY,iBAC1B,YAAY,MACQ;CACpB,IAAI,OAAO,WAAW,GAAG,OAAO;CAEhC,OACE,oBAAC,MAAD;EAAI,cAAY;EAAW,WAAW,aAAa;EAChD,UAAA,OAAO,KAAK,OAAO,MAAM;GACxB,MAAM,SAAS,MAAM,OAAO,SAAS;GACrC,OACE,qBAAC,MAAD;IAAmB,WAAU;IAA7B,UAAA,CAEE,qBAAC,OAAD;KAAK,WAAU;KAA6B,eAAY;KAAxD,UAAA,CACE,oBAAC,OAAD;MAAK,WAAU;MACZ,UAAA,MAAM,UAAU,MAAM,MAAM,OAAO,CAAC,CAAC,CAAC,YAAY;KAChD,CAAA,GACJ,CAAC,UACA,oBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,CAE9D;IAGL,CAAA,GAAA,qBAAC,OAAD;KAAK,WAAW,gBAAgB,SAAS,KAAK;KAA9C,UAAA,CACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACE,oBAAC,QAAD;QAAM,WAAU;QAAoC,UAAA,MAAM;OAAY,CAAA;OACtE,oBAAC,QAAD;QAAM,WAAU;QAAsC,UAAA,MAAM;OAAa,CAAA;OACxE,MAAM,SAAS,oBAAC,QAAD,EAAA,UAAO,MAAM,MAAY,CAAA;MACtC;KACL,CAAA,GAAA,oBAAC,QAAD;MACE,UAAU,MAAM,YAAY,MAAM;MAClC,WAAU;MAET,UAAA,MAAM;KACH,CAAA,CACH;IACH,CAAA,CAAA;GAzBK,GAAA,MAAM,EAyBX;EAER,CAAC;CACC,CAAA;AAER"}

package/lib/index58.cjs

@@ -0,0 +1,97 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/approval-timeline/ApprovalTimeline.tsx
+var STATUS_ICON = {
+	approved: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+		size: 12,
+		strokeWidth: 2.5
+	}),
+	verified: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ShieldCheck, {
+		size: 12,
+		strokeWidth: 2.5
+	}),
+	rejected: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+		size: 12,
+		strokeWidth: 2.5
+	}),
+	cancelled: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Ban, {
+		size: 12,
+		strokeWidth: 2.5
+	}),
+	pending: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "block h-2 w-2 rounded-full bg-slate-400" }),
+	current: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, {
+		size: 12,
+		strokeWidth: 2.5
+	})
+};
+var STATUS_NODE = {
+	approved: "bg-emerald-500 text-white",
+	verified: "bg-brand-blue text-white",
+	rejected: "bg-rose-500 text-white",
+	cancelled: "bg-slate-400 text-white",
+	pending: "bg-white border-2 border-slate-300 text-slate-400",
+	current: "bg-brand-blue text-white animate-pulse"
+};
+var STATUS_LABEL = {
+	approved: "Approved",
+	verified: "Verified",
+	rejected: "Rejected",
+	cancelled: "Cancelled",
+	pending: "Pending",
+	current: "In Review"
+};
+function ApprovalTimeline({ steps, "aria-label": ariaLabel = "Approval workflow", className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+		"aria-label": ariaLabel,
+		className: `space-y-0 ${className}`,
+		children: steps.map((step, i) => {
+			const isLast = i === steps.length - 1;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: "flex gap-3",
+				"aria-label": `Step ${i + 1}: ${step.actor} — ${STATUS_LABEL[step.status]}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${STATUS_NODE[step.status]}`,
+						children: STATUS_ICON[step.status]
+					}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mt-1 w-px flex-1 bg-slate-200 min-h-[1.5rem]" })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "min-w-0 pb-5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-baseline gap-2 flex-wrap",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-sm font-bold text-slate-800",
+									children: step.actor
+								}),
+								step.action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-xs font-medium text-slate-500",
+									children: step.action
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: `text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full
+                  ${step.status === "approved" || step.status === "verified" ? "bg-emerald-50 text-emerald-700" : step.status === "rejected" ? "bg-rose-50 text-rose-700" : step.status === "current" ? "bg-blue-50 text-brand-blue" : "bg-slate-100 text-slate-500"}`,
+									children: STATUS_LABEL[step.status]
+								})
+							]
+						}),
+						step.timestamp && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mt-0.5 text-[11px] font-medium text-slate-400",
+							children: step.timestamp
+						}),
+						step.note && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mt-1 text-xs font-medium text-slate-500 bg-slate-50 rounded-lg px-3 py-2 border border-slate-100",
+							children: step.note
+						})
+					]
+				})]
+			}, step.id);
+		})
+	});
+}
+//#endregion
+exports.ApprovalTimeline = ApprovalTimeline;
+
+//# sourceMappingURL=index58.cjs.map

package/lib/index58.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index58.cjs","names":[],"sources":["../src/ui-library/gallery/approval-timeline/ApprovalTimeline.tsx"],"sourcesContent":["/**\n * ApprovalTimeline — Design System Component\n *\n * A vertical workflow timeline showing approval steps with status,\n * actor, action, and timestamp. Generic — no domain logic.\n *\n * Based on the pattern in approvals/components/ApprovalTimeline.tsx\n * but extracted as a domain-free gallery primitive.\n *\n * Accessibility:\n *   - <ol> with aria-label\n *   - Each step is <li> with aria-label including status\n *   - Status icons are aria-hidden; status text is visually present\n *   - Active step is visually distinct (pulsing node)\n */\n\nimport type { ReactNode } from 'react';\nimport { Check, Clock, X, Ban, ShieldCheck } from 'lucide-react';\n\nexport type ApprovalStepStatus =\n  | 'pending'\n  | 'approved'\n  | 'rejected'\n  | 'cancelled'\n  | 'verified'\n  | 'current';\n\nexport interface ApprovalStep {\n  id: string;\n  actor: string;\n  action?: string;\n  status: ApprovalStepStatus;\n  timestamp?: string;\n  note?: string;\n}\n\nexport interface ApprovalTimelineProps {\n  steps: ApprovalStep[];\n  'aria-label'?: string;\n  className?: string;\n}\n\nconst STATUS_ICON: Record<ApprovalStepStatus, ReactNode> = {\n  approved:  <Check size={12} strokeWidth={2.5} />,\n  verified:  <ShieldCheck size={12} strokeWidth={2.5} />,\n  rejected:  <X size={12} strokeWidth={2.5} />,\n  cancelled: <Ban size={12} strokeWidth={2.5} />,\n  pending:   <span className=\"block h-2 w-2 rounded-full bg-slate-400\" />,\n  current:   <Clock size={12} strokeWidth={2.5} />,\n};\n\nconst STATUS_NODE: Record<ApprovalStepStatus, string> = {\n  approved:  'bg-emerald-500 text-white',\n  verified:  'bg-brand-blue text-white',\n  rejected:  'bg-rose-500 text-white',\n  cancelled: 'bg-slate-400 text-white',\n  pending:   'bg-white border-2 border-slate-300 text-slate-400',\n  current:   'bg-brand-blue text-white animate-pulse',\n};\n\nconst STATUS_LABEL: Record<ApprovalStepStatus, string> = {\n  approved:  'Approved',\n  verified:  'Verified',\n  rejected:  'Rejected',\n  cancelled: 'Cancelled',\n  pending:   'Pending',\n  current:   'In Review',\n};\n\nexport function ApprovalTimeline({\n  steps,\n  'aria-label': ariaLabel = 'Approval workflow',\n  className = '',\n}: ApprovalTimelineProps) {\n  return (\n    <ol aria-label={ariaLabel} className={`space-y-0 ${className}`}>\n      {steps.map((step, i) => {\n        const isLast = i === steps.length - 1;\n        return (\n          <li\n            key={step.id}\n            className=\"flex gap-3\"\n            aria-label={`Step ${i + 1}: ${step.actor} — ${STATUS_LABEL[step.status]}`}\n          >\n            {/* Spine */}\n            <div className=\"flex flex-col items-center\" aria-hidden=\"true\">\n              <div className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${STATUS_NODE[step.status]}`}>\n                {STATUS_ICON[step.status]}\n              </div>\n              {!isLast && (\n                <div className=\"mt-1 w-px flex-1 bg-slate-200 min-h-[1.5rem]\" />\n              )}\n            </div>\n\n            {/* Content */}\n            <div className=\"min-w-0 pb-5\">\n              <div className=\"flex items-baseline gap-2 flex-wrap\">\n                <span className=\"text-sm font-bold text-slate-800\">{step.actor}</span>\n                {step.action && (\n                  <span className=\"text-xs font-medium text-slate-500\">{step.action}</span>\n                )}\n                <span className={`text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full\n                  ${step.status === 'approved' || step.status === 'verified' ? 'bg-emerald-50 text-emerald-700' :\n                    step.status === 'rejected' ? 'bg-rose-50 text-rose-700' :\n                    step.status === 'current' ? 'bg-blue-50 text-brand-blue' :\n                    'bg-slate-100 text-slate-500'}`}>\n                  {STATUS_LABEL[step.status]}\n                </span>\n              </div>\n              {step.timestamp && (\n                <p className=\"mt-0.5 text-[11px] font-medium text-slate-400\">{step.timestamp}</p>\n              )}\n              {step.note && (\n                <p className=\"mt-1 text-xs font-medium text-slate-500 bg-slate-50 rounded-lg px-3 py-2 border border-slate-100\">\n                  {step.note}\n                </p>\n              )}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;;AA0CA,IAAM,cAAqD;CACzD,UAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,OAAD;EAAO,MAAM;EAAI,aAAa;CAAM,CAAA;CAC/C,UAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,aAAD;EAAa,MAAM;EAAI,aAAa;CAAM,CAAA;CACrD,UAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,GAAD;EAAG,MAAM;EAAI,aAAa;CAAM,CAAA;CAC3C,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,KAAD;EAAK,MAAM;EAAI,aAAa;CAAM,CAAA;CAC7C,SAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,0CAA2C,CAAA;CACtE,SAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,OAAD;EAAO,MAAM;EAAI,aAAa;CAAM,CAAA;AACjD;AAEA,IAAM,cAAkD;CACtD,UAAW;CACX,UAAW;CACX,UAAW;CACX,WAAW;CACX,SAAW;CACX,SAAW;AACb;AAEA,IAAM,eAAmD;CACvD,UAAW;CACX,UAAW;CACX,UAAW;CACX,WAAW;CACX,SAAW;CACX,SAAW;AACb;AAEA,SAAgB,iBAAiB,EAC/B,OACA,cAAc,YAAY,qBAC1B,YAAY,MACY;CACxB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,cAAY;EAAW,WAAW,aAAa;EAChD,UAAA,MAAM,KAAK,MAAM,MAAM;GACtB,MAAM,SAAS,MAAM,MAAM,SAAS;GACpC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;IAEE,WAAU;IACV,cAAY,QAAQ,IAAI,EAAE,IAAI,KAAK,MAAM,KAAK,aAAa,KAAK;IAHlE,UAAA,CAME,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAU;KAA6B,eAAY;KAAxD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAW,kEAAkE,YAAY,KAAK;MAChG,UAAA,YAAY,KAAK;KACf,CAAA,GACJ,CAAC,UACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,CAE9D;IAGL,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OAAK,WAAU;OAAf,UAAA;QACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;SAAM,WAAU;SAAoC,UAAA,KAAK;QAAY,CAAA;QACpE,KAAK,UACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;SAAM,WAAU;SAAsC,UAAA,KAAK;QAAa,CAAA;QAE1E,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;SAAM,WAAW;oBACb,KAAK,WAAW,cAAc,KAAK,WAAW,aAAa,mCAC3D,KAAK,WAAW,aAAa,6BAC7B,KAAK,WAAW,YAAY,+BAC5B;SACD,UAAA,aAAa,KAAK;QACf,CAAA;OACH;;MACJ,KAAK,aACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;OAAG,WAAU;OAAiD,UAAA,KAAK;MAAa,CAAA;MAEjF,KAAK,QACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;OAAG,WAAU;OACV,UAAA,KAAK;MACL,CAAA;KAEF;IACH,CAAA,CAAA;GAtCG,GAAA,KAAK,EAsCR;EAER,CAAC;CACC,CAAA;AAER"}

package/lib/index58.mjs

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Ban, Check, Clock, ShieldCheck, X } from "lucide-react";
+//#region src/ui-library/gallery/approval-timeline/ApprovalTimeline.tsx
+var STATUS_ICON = {
+	approved: /* @__PURE__ */ jsx(Check, {
+		size: 12,
+		strokeWidth: 2.5
+	}),
+	verified: /* @__PURE__ */ jsx(ShieldCheck, {
+		size: 12,
+		strokeWidth: 2.5
+	}),
+	rejected: /* @__PURE__ */ jsx(X, {
+		size: 12,
+		strokeWidth: 2.5
+	}),
+	cancelled: /* @__PURE__ */ jsx(Ban, {
+		size: 12,
+		strokeWidth: 2.5
+	}),
+	pending: /* @__PURE__ */ jsx("span", { className: "block h-2 w-2 rounded-full bg-slate-400" }),
+	current: /* @__PURE__ */ jsx(Clock, {
+		size: 12,
+		strokeWidth: 2.5
+	})
+};
+var STATUS_NODE = {
+	approved: "bg-emerald-500 text-white",
+	verified: "bg-brand-blue text-white",
+	rejected: "bg-rose-500 text-white",
+	cancelled: "bg-slate-400 text-white",
+	pending: "bg-white border-2 border-slate-300 text-slate-400",
+	current: "bg-brand-blue text-white animate-pulse"
+};
+var STATUS_LABEL = {
+	approved: "Approved",
+	verified: "Verified",
+	rejected: "Rejected",
+	cancelled: "Cancelled",
+	pending: "Pending",
+	current: "In Review"
+};
+function ApprovalTimeline({ steps, "aria-label": ariaLabel = "Approval workflow", className = "" }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"aria-label": ariaLabel,
+		className: `space-y-0 ${className}`,
+		children: steps.map((step, i) => {
+			const isLast = i === steps.length - 1;
+			return /* @__PURE__ */ jsxs("li", {
+				className: "flex gap-3",
+				"aria-label": `Step ${i + 1}: ${step.actor} — ${STATUS_LABEL[step.status]}`,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${STATUS_NODE[step.status]}`,
+						children: STATUS_ICON[step.status]
+					}), !isLast && /* @__PURE__ */ jsx("div", { className: "mt-1 w-px flex-1 bg-slate-200 min-h-[1.5rem]" })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 pb-5",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-baseline gap-2 flex-wrap",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-sm font-bold text-slate-800",
+									children: step.actor
+								}),
+								step.action && /* @__PURE__ */ jsx("span", {
+									className: "text-xs font-medium text-slate-500",
+									children: step.action
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: `text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full
+                  ${step.status === "approved" || step.status === "verified" ? "bg-emerald-50 text-emerald-700" : step.status === "rejected" ? "bg-rose-50 text-rose-700" : step.status === "current" ? "bg-blue-50 text-brand-blue" : "bg-slate-100 text-slate-500"}`,
+									children: STATUS_LABEL[step.status]
+								})
+							]
+						}),
+						step.timestamp && /* @__PURE__ */ jsx("p", {
+							className: "mt-0.5 text-[11px] font-medium text-slate-400",
+							children: step.timestamp
+						}),
+						step.note && /* @__PURE__ */ jsx("p", {
+							className: "mt-1 text-xs font-medium text-slate-500 bg-slate-50 rounded-lg px-3 py-2 border border-slate-100",
+							children: step.note
+						})
+					]
+				})]
+			}, step.id);
+		})
+	});
+}
+//#endregion
+export { ApprovalTimeline };
+
+//# sourceMappingURL=index58.mjs.map

package/lib/index58.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index58.mjs","names":[],"sources":["../src/ui-library/gallery/approval-timeline/ApprovalTimeline.tsx"],"sourcesContent":["/**\n * ApprovalTimeline — Design System Component\n *\n * A vertical workflow timeline showing approval steps with status,\n * actor, action, and timestamp. Generic — no domain logic.\n *\n * Based on the pattern in approvals/components/ApprovalTimeline.tsx\n * but extracted as a domain-free gallery primitive.\n *\n * Accessibility:\n *   - <ol> with aria-label\n *   - Each step is <li> with aria-label including status\n *   - Status icons are aria-hidden; status text is visually present\n *   - Active step is visually distinct (pulsing node)\n */\n\nimport type { ReactNode } from 'react';\nimport { Check, Clock, X, Ban, ShieldCheck } from 'lucide-react';\n\nexport type ApprovalStepStatus =\n  | 'pending'\n  | 'approved'\n  | 'rejected'\n  | 'cancelled'\n  | 'verified'\n  | 'current';\n\nexport interface ApprovalStep {\n  id: string;\n  actor: string;\n  action?: string;\n  status: ApprovalStepStatus;\n  timestamp?: string;\n  note?: string;\n}\n\nexport interface ApprovalTimelineProps {\n  steps: ApprovalStep[];\n  'aria-label'?: string;\n  className?: string;\n}\n\nconst STATUS_ICON: Record<ApprovalStepStatus, ReactNode> = {\n  approved:  <Check size={12} strokeWidth={2.5} />,\n  verified:  <ShieldCheck size={12} strokeWidth={2.5} />,\n  rejected:  <X size={12} strokeWidth={2.5} />,\n  cancelled: <Ban size={12} strokeWidth={2.5} />,\n  pending:   <span className=\"block h-2 w-2 rounded-full bg-slate-400\" />,\n  current:   <Clock size={12} strokeWidth={2.5} />,\n};\n\nconst STATUS_NODE: Record<ApprovalStepStatus, string> = {\n  approved:  'bg-emerald-500 text-white',\n  verified:  'bg-brand-blue text-white',\n  rejected:  'bg-rose-500 text-white',\n  cancelled: 'bg-slate-400 text-white',\n  pending:   'bg-white border-2 border-slate-300 text-slate-400',\n  current:   'bg-brand-blue text-white animate-pulse',\n};\n\nconst STATUS_LABEL: Record<ApprovalStepStatus, string> = {\n  approved:  'Approved',\n  verified:  'Verified',\n  rejected:  'Rejected',\n  cancelled: 'Cancelled',\n  pending:   'Pending',\n  current:   'In Review',\n};\n\nexport function ApprovalTimeline({\n  steps,\n  'aria-label': ariaLabel = 'Approval workflow',\n  className = '',\n}: ApprovalTimelineProps) {\n  return (\n    <ol aria-label={ariaLabel} className={`space-y-0 ${className}`}>\n      {steps.map((step, i) => {\n        const isLast = i === steps.length - 1;\n        return (\n          <li\n            key={step.id}\n            className=\"flex gap-3\"\n            aria-label={`Step ${i + 1}: ${step.actor} — ${STATUS_LABEL[step.status]}`}\n          >\n            {/* Spine */}\n            <div className=\"flex flex-col items-center\" aria-hidden=\"true\">\n              <div className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${STATUS_NODE[step.status]}`}>\n                {STATUS_ICON[step.status]}\n              </div>\n              {!isLast && (\n                <div className=\"mt-1 w-px flex-1 bg-slate-200 min-h-[1.5rem]\" />\n              )}\n            </div>\n\n            {/* Content */}\n            <div className=\"min-w-0 pb-5\">\n              <div className=\"flex items-baseline gap-2 flex-wrap\">\n                <span className=\"text-sm font-bold text-slate-800\">{step.actor}</span>\n                {step.action && (\n                  <span className=\"text-xs font-medium text-slate-500\">{step.action}</span>\n                )}\n                <span className={`text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full\n                  ${step.status === 'approved' || step.status === 'verified' ? 'bg-emerald-50 text-emerald-700' :\n                    step.status === 'rejected' ? 'bg-rose-50 text-rose-700' :\n                    step.status === 'current' ? 'bg-blue-50 text-brand-blue' :\n                    'bg-slate-100 text-slate-500'}`}>\n                  {STATUS_LABEL[step.status]}\n                </span>\n              </div>\n              {step.timestamp && (\n                <p className=\"mt-0.5 text-[11px] font-medium text-slate-400\">{step.timestamp}</p>\n              )}\n              {step.note && (\n                <p className=\"mt-1 text-xs font-medium text-slate-500 bg-slate-50 rounded-lg px-3 py-2 border border-slate-100\">\n                  {step.note}\n                </p>\n              )}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;;AA0CA,IAAM,cAAqD;CACzD,UAAW,oBAAC,OAAD;EAAO,MAAM;EAAI,aAAa;CAAM,CAAA;CAC/C,UAAW,oBAAC,aAAD;EAAa,MAAM;EAAI,aAAa;CAAM,CAAA;CACrD,UAAW,oBAAC,GAAD;EAAG,MAAM;EAAI,aAAa;CAAM,CAAA;CAC3C,WAAW,oBAAC,KAAD;EAAK,MAAM;EAAI,aAAa;CAAM,CAAA;CAC7C,SAAW,oBAAC,QAAD,EAAM,WAAU,0CAA2C,CAAA;CACtE,SAAW,oBAAC,OAAD;EAAO,MAAM;EAAI,aAAa;CAAM,CAAA;AACjD;AAEA,IAAM,cAAkD;CACtD,UAAW;CACX,UAAW;CACX,UAAW;CACX,WAAW;CACX,SAAW;CACX,SAAW;AACb;AAEA,IAAM,eAAmD;CACvD,UAAW;CACX,UAAW;CACX,UAAW;CACX,WAAW;CACX,SAAW;CACX,SAAW;AACb;AAEA,SAAgB,iBAAiB,EAC/B,OACA,cAAc,YAAY,qBAC1B,YAAY,MACY;CACxB,OACE,oBAAC,MAAD;EAAI,cAAY;EAAW,WAAW,aAAa;EAChD,UAAA,MAAM,KAAK,MAAM,MAAM;GACtB,MAAM,SAAS,MAAM,MAAM,SAAS;GACpC,OACE,qBAAC,MAAD;IAEE,WAAU;IACV,cAAY,QAAQ,IAAI,EAAE,IAAI,KAAK,MAAM,KAAK,aAAa,KAAK;IAHlE,UAAA,CAME,qBAAC,OAAD;KAAK,WAAU;KAA6B,eAAY;KAAxD,UAAA,CACE,oBAAC,OAAD;MAAK,WAAW,kEAAkE,YAAY,KAAK;MAChG,UAAA,YAAY,KAAK;KACf,CAAA,GACJ,CAAC,UACA,oBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,CAE9D;IAGL,CAAA,GAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA;QACE,oBAAC,QAAD;SAAM,WAAU;SAAoC,UAAA,KAAK;QAAY,CAAA;QACpE,KAAK,UACJ,oBAAC,QAAD;SAAM,WAAU;SAAsC,UAAA,KAAK;QAAa,CAAA;QAE1E,oBAAC,QAAD;SAAM,WAAW;oBACb,KAAK,WAAW,cAAc,KAAK,WAAW,aAAa,mCAC3D,KAAK,WAAW,aAAa,6BAC7B,KAAK,WAAW,YAAY,+BAC5B;SACD,UAAA,aAAa,KAAK;QACf,CAAA;OACH;;MACJ,KAAK,aACJ,oBAAC,KAAD;OAAG,WAAU;OAAiD,UAAA,KAAK;MAAa,CAAA;MAEjF,KAAK,QACJ,oBAAC,KAAD;OAAG,WAAU;OACV,UAAA,KAAK;MACL,CAAA;KAEF;IACH,CAAA,CAAA;GAtCG,GAAA,KAAK,EAsCR;EAER,CAAC;CACC,CAAA;AAER"}