@diwauhris/ui 1.0.0

package/lib/index30.cjs

@@ -0,0 +1,27 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/validation-summary/ValidationSummary.tsx
+function ValidationSummary({ issues, heading = "Review these fields before saving", className = "" }) {
+	if (issues.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "alert",
+		className: ["rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900", className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "font-bold",
+			children: heading
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "mt-2 list-disc space-y-1 pl-5",
+			children: issues.map((issue) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "font-semibold",
+					children: [issue.field, ":"]
+				}),
+				" ",
+				issue.message
+			] }, `${issue.field}:${issue.message}`))
+		})]
+	});
+}
+//#endregion
+exports.ValidationSummary = ValidationSummary;
+
+//# sourceMappingURL=index30.cjs.map

package/lib/index30.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index30.cjs","names":[],"sources":["../src/ui-library/gallery/validation-summary/ValidationSummary.tsx"],"sourcesContent":["/**\n * ValidationSummary — Design System Component\n *\n * Renders a list of validation errors or warnings before a form is submitted.\n * Matches the production implementation in shared/components/ValidationSummary.tsx.\n *\n * Accessibility:\n *   - role=\"alert\" causes immediate announcement when injected into the DOM.\n *   - <ul> with <li> items provides proper list semantics.\n *   - The heading is a <div role=\"heading\" aria-level=\"3\"> to avoid disrupting\n *     page outline; callers may override via headingLevel.\n *   - Each issue is identified by field name + message.\n *\n * Usage:\n *   const [issues, setIssues] = useState<ValidationIssue[]>([]);\n *   // ... after validation:\n *   setIssues([{ field: 'Employee ID', message: 'is required' }]);\n *   // Render:\n *   <ValidationSummary issues={issues} />\n */\n\nexport interface ValidationIssue {\n  /** Human-readable field label. */\n  field: string;\n  /** Error description for this field. */\n  message: string;\n}\n\nexport interface ValidationSummaryProps {\n  /** List of validation issues. Renders nothing when empty. */\n  issues: ValidationIssue[];\n  /**\n   * Heading text shown above the issue list.\n   * Default: \"Review these fields before saving\"\n   */\n  heading?: string;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function ValidationSummary({\n  issues,\n  heading = 'Review these fields before saving',\n  className = '',\n}: ValidationSummaryProps) {\n  if (issues.length === 0) return null;\n\n  return (\n    <div\n      role=\"alert\"\n      className={[\n        'rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"font-bold\">{heading}</div>\n      <ul className=\"mt-2 list-disc space-y-1 pl-5\">\n        {issues.map((issue) => (\n          <li key={`${issue.field}:${issue.message}`}>\n            <span className=\"font-semibold\">{issue.field}:</span>{' '}\n            {issue.message}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n// Re-export type for consumer convenience\nexport type { ValidationIssue as ValidationSummaryIssue };\n"],"mappings":";;AAwCA,SAAgB,kBAAkB,EAChC,QACA,UAAU,qCACV,YAAY,MACa;CACzB,IAAI,OAAO,WAAW,GAAG,OAAO;CAEhC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,MAAK;EACL,WAAW,CACT,mFACA,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAPb,UAAA,CASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GAAa,UAAA;EAAa,CAAA,GACzC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAU;GACX,UAAA,OAAO,KAAK,UACX,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD,EAAA,UAAA;IACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAAiC,MAAM,OAAM,GAAO;;IAAE;IACrD,MAAM;GACL,EAAA,GAHK,GAAG,MAAM,MAAM,GAAG,MAAM,SAG7B,CACL;EACC,CAAA,CACD;;AAET"}

package/lib/index30.mjs

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/validation-summary/ValidationSummary.tsx
+function ValidationSummary({ issues, heading = "Review these fields before saving", className = "" }) {
+	if (issues.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: ["rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900", className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "font-bold",
+			children: heading
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "mt-2 list-disc space-y-1 pl-5",
+			children: issues.map((issue) => /* @__PURE__ */ jsxs("li", { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-semibold",
+					children: [issue.field, ":"]
+				}),
+				" ",
+				issue.message
+			] }, `${issue.field}:${issue.message}`))
+		})]
+	});
+}
+//#endregion
+export { ValidationSummary };
+
+//# sourceMappingURL=index30.mjs.map

package/lib/index30.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index30.mjs","names":[],"sources":["../src/ui-library/gallery/validation-summary/ValidationSummary.tsx"],"sourcesContent":["/**\n * ValidationSummary — Design System Component\n *\n * Renders a list of validation errors or warnings before a form is submitted.\n * Matches the production implementation in shared/components/ValidationSummary.tsx.\n *\n * Accessibility:\n *   - role=\"alert\" causes immediate announcement when injected into the DOM.\n *   - <ul> with <li> items provides proper list semantics.\n *   - The heading is a <div role=\"heading\" aria-level=\"3\"> to avoid disrupting\n *     page outline; callers may override via headingLevel.\n *   - Each issue is identified by field name + message.\n *\n * Usage:\n *   const [issues, setIssues] = useState<ValidationIssue[]>([]);\n *   // ... after validation:\n *   setIssues([{ field: 'Employee ID', message: 'is required' }]);\n *   // Render:\n *   <ValidationSummary issues={issues} />\n */\n\nexport interface ValidationIssue {\n  /** Human-readable field label. */\n  field: string;\n  /** Error description for this field. */\n  message: string;\n}\n\nexport interface ValidationSummaryProps {\n  /** List of validation issues. Renders nothing when empty. */\n  issues: ValidationIssue[];\n  /**\n   * Heading text shown above the issue list.\n   * Default: \"Review these fields before saving\"\n   */\n  heading?: string;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function ValidationSummary({\n  issues,\n  heading = 'Review these fields before saving',\n  className = '',\n}: ValidationSummaryProps) {\n  if (issues.length === 0) return null;\n\n  return (\n    <div\n      role=\"alert\"\n      className={[\n        'rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"font-bold\">{heading}</div>\n      <ul className=\"mt-2 list-disc space-y-1 pl-5\">\n        {issues.map((issue) => (\n          <li key={`${issue.field}:${issue.message}`}>\n            <span className=\"font-semibold\">{issue.field}:</span>{' '}\n            {issue.message}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n// Re-export type for consumer convenience\nexport type { ValidationIssue as ValidationSummaryIssue };\n"],"mappings":";;AAwCA,SAAgB,kBAAkB,EAChC,QACA,UAAU,qCACV,YAAY,MACa;CACzB,IAAI,OAAO,WAAW,GAAG,OAAO;CAEhC,OACE,qBAAC,OAAD;EACE,MAAK;EACL,WAAW,CACT,mFACA,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAPb,UAAA,CASE,oBAAC,OAAD;GAAK,WAAU;GAAa,UAAA;EAAa,CAAA,GACzC,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,OAAO,KAAK,UACX,qBAAC,MAAD,EAAA,UAAA;IACE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAAiC,MAAM,OAAM,GAAO;;IAAE;IACrD,MAAM;GACL,EAAA,GAHK,GAAG,MAAM,MAAM,GAAG,MAAM,SAG7B,CACL;EACC,CAAA,CACD;;AAET"}

package/lib/index31.cjs

@@ -0,0 +1,72 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/alert/Alert.tsx
+var TONE_FULL = {
+	info: "border-l-4 border-sky-400    bg-sky-50    text-sky-800",
+	success: "border-l-4 border-emerald-400 bg-emerald-50 text-emerald-800",
+	warning: "border-l-4 border-amber-400  bg-amber-50  text-amber-800",
+	danger: "border-l-4 border-rose-500   bg-rose-50   text-rose-800"
+};
+var TONE_SUBTLE = {
+	info: "border-l-4 border-sky-400    bg-white text-sky-700",
+	success: "border-l-4 border-emerald-400 bg-white text-emerald-700",
+	warning: "border-l-4 border-amber-400  bg-white text-amber-700",
+	danger: "border-l-4 border-rose-500   bg-white text-rose-700"
+};
+var ICON_CLASS = {
+	info: "text-sky-500",
+	success: "text-emerald-500",
+	warning: "text-amber-500",
+	danger: "text-rose-500"
+};
+var TONE_ICON = {
+	info: lucide_react.Info,
+	success: lucide_react.CheckCircle2,
+	warning: lucide_react.AlertTriangle,
+	danger: lucide_react.AlertCircle
+};
+var DISMISS_CLASS = {
+	info: "text-sky-400 hover:bg-sky-100",
+	success: "text-emerald-400 hover:bg-emerald-100",
+	warning: "text-amber-400 hover:bg-amber-100",
+	danger: "text-rose-400 hover:bg-rose-100"
+};
+function Alert({ tone, title, children, icon = true, onDismiss, subtle = false, className = "" }) {
+	const Icon = TONE_ICON[tone];
+	const colorClass = subtle ? TONE_SUBTLE[tone] : TONE_FULL[tone];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "alert",
+		className: `flex gap-3 rounded-md pl-4 pr-4 py-3.5 ${colorClass} ${className}`,
+		children: [
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				size: 20,
+				className: `mt-0.5 shrink-0 ${ICON_CLASS[tone]}`,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1 text-sm",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "font-bold leading-snug mb-0.5",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "font-medium leading-relaxed",
+					children
+				})]
+			}),
+			onDismiss && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: onDismiss,
+				"aria-label": "Dismiss",
+				className: `-mr-1 -mt-0.5 shrink-0 rounded-lg p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current ${DISMISS_CLASS[tone]}`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+					size: 14,
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+//#endregion
+exports.Alert = Alert;
+
+//# sourceMappingURL=index31.cjs.map

package/lib/index31.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index31.cjs","names":[],"sources":["../src/ui-library/gallery/alert/Alert.tsx"],"sourcesContent":["/**\n * Alert — Design System Component\n *\n * Inline contextual feedback. Purely presentational.\n *\n * Tones:   info | success | warning | danger\n * Variants: default | subtle\n */\n\nimport type { ReactNode } from 'react';\nimport { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from 'lucide-react';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface AlertProps {\n  tone: AlertTone;\n  title?: string;\n  children: ReactNode;\n  /** Show an icon matching the tone */\n  icon?: boolean;\n  /** Show a dismiss button */\n  onDismiss?: () => void;\n  /** Subtle variant uses a lighter background */\n  subtle?: boolean;\n  className?: string;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\n// Full background tones — keep semantic colors, add the DIWA left-rule\nconst TONE_FULL: Record<AlertTone, string> = {\n  info:    'border-l-4 border-sky-400    bg-sky-50    text-sky-800',\n  success: 'border-l-4 border-emerald-400 bg-emerald-50 text-emerald-800',\n  warning: 'border-l-4 border-amber-400  bg-amber-50  text-amber-800',\n  danger:  'border-l-4 border-rose-500   bg-rose-50   text-rose-800',\n};\n\n// Subtle: white bg, left rule is the only structural marker\nconst TONE_SUBTLE: Record<AlertTone, string> = {\n  info:    'border-l-4 border-sky-400    bg-white text-sky-700',\n  success: 'border-l-4 border-emerald-400 bg-white text-emerald-700',\n  warning: 'border-l-4 border-amber-400  bg-white text-amber-700',\n  danger:  'border-l-4 border-rose-500   bg-white text-rose-700',\n};\n\nconst ICON_CLASS: Record<AlertTone, string> = {\n  info:    'text-sky-500',\n  success: 'text-emerald-500',\n  warning: 'text-amber-500',\n  danger:  'text-rose-500',\n};\n\nconst TONE_ICON: Record<AlertTone, typeof Info> = {\n  info:    Info,\n  success: CheckCircle2,\n  warning: AlertTriangle,\n  danger:  AlertCircle,\n};\n\nconst DISMISS_CLASS: Record<AlertTone, string> = {\n  info:    'text-sky-400 hover:bg-sky-100',\n  success: 'text-emerald-400 hover:bg-emerald-100',\n  warning: 'text-amber-400 hover:bg-amber-100',\n  danger:  'text-rose-400 hover:bg-rose-100',\n};\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Alert({\n  tone,\n  title,\n  children,\n  icon = true,\n  onDismiss,\n  subtle = false,\n  className = '',\n}: AlertProps) {\n  const Icon = TONE_ICON[tone];\n  const colorClass = subtle ? TONE_SUBTLE[tone] : TONE_FULL[tone];\n\n  return (\n    <div\n      role=\"alert\"\n      className={`flex gap-3 rounded-md pl-4 pr-4 py-3.5 ${colorClass} ${className}`}\n    >\n      {icon && (\n        <Icon\n          size={20}\n          className={`mt-0.5 shrink-0 ${ICON_CLASS[tone]}`}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div className=\"min-w-0 flex-1 text-sm\">\n        {title && <p className=\"font-bold leading-snug mb-0.5\">{title}</p>}\n        <div className=\"font-medium leading-relaxed\">{children}</div>\n      </div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Dismiss\"\n          className={`-mr-1 -mt-0.5 shrink-0 rounded-lg p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current ${DISMISS_CLASS[tone]}`}\n        >\n          <X size={14} aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;AA8BA,IAAM,YAAuC;CAC3C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAGA,IAAM,cAAyC;CAC7C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,aAAwC;CAC5C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,YAA4C;CAChD,MAAS,aAAA;CACT,SAAS,aAAA;CACT,SAAS,aAAA;CACT,QAAS,aAAA;AACX;AAEA,IAAM,gBAA2C;CAC/C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAIA,SAAgB,MAAM,EACpB,MACA,OACA,UACA,OAAO,MACP,WACA,SAAS,OACT,YAAY,MACC;CACb,MAAM,OAAO,UAAU;CACvB,MAAM,aAAa,SAAS,YAAY,QAAQ,UAAU;CAE1D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,MAAK;EACL,WAAW,0CAA0C,WAAW,GAAG;EAFrE,UAAA;GAIG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IACE,MAAM;IACN,WAAW,mBAAmB,WAAW;IACzC,eAAY;GACb,CAAA;GAEH,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KAAG,WAAU;KAAiC,UAAA;IAAS,CAAA,GACjE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACzD;;GACJ,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,cAAW;IACX,WAAW,+HAA+H,cAAc;IAExJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,GAAD;KAAG,MAAM;KAAI,eAAY;IAAQ,CAAA;GAC3B,CAAA;EAEP;;AAET"}

package/lib/index31.mjs

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from "lucide-react";
+//#region src/ui-library/gallery/alert/Alert.tsx
+var TONE_FULL = {
+	info: "border-l-4 border-sky-400    bg-sky-50    text-sky-800",
+	success: "border-l-4 border-emerald-400 bg-emerald-50 text-emerald-800",
+	warning: "border-l-4 border-amber-400  bg-amber-50  text-amber-800",
+	danger: "border-l-4 border-rose-500   bg-rose-50   text-rose-800"
+};
+var TONE_SUBTLE = {
+	info: "border-l-4 border-sky-400    bg-white text-sky-700",
+	success: "border-l-4 border-emerald-400 bg-white text-emerald-700",
+	warning: "border-l-4 border-amber-400  bg-white text-amber-700",
+	danger: "border-l-4 border-rose-500   bg-white text-rose-700"
+};
+var ICON_CLASS = {
+	info: "text-sky-500",
+	success: "text-emerald-500",
+	warning: "text-amber-500",
+	danger: "text-rose-500"
+};
+var TONE_ICON = {
+	info: Info,
+	success: CheckCircle2,
+	warning: AlertTriangle,
+	danger: AlertCircle
+};
+var DISMISS_CLASS = {
+	info: "text-sky-400 hover:bg-sky-100",
+	success: "text-emerald-400 hover:bg-emerald-100",
+	warning: "text-amber-400 hover:bg-amber-100",
+	danger: "text-rose-400 hover:bg-rose-100"
+};
+function Alert({ tone, title, children, icon = true, onDismiss, subtle = false, className = "" }) {
+	const Icon = TONE_ICON[tone];
+	const colorClass = subtle ? TONE_SUBTLE[tone] : TONE_FULL[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: `flex gap-3 rounded-md pl-4 pr-4 py-3.5 ${colorClass} ${className}`,
+		children: [
+			icon && /* @__PURE__ */ jsx(Icon, {
+				size: 20,
+				className: `mt-0.5 shrink-0 ${ICON_CLASS[tone]}`,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1 text-sm",
+				children: [title && /* @__PURE__ */ jsx("p", {
+					className: "font-bold leading-snug mb-0.5",
+					children: title
+				}), /* @__PURE__ */ jsx("div", {
+					className: "font-medium leading-relaxed",
+					children
+				})]
+			}),
+			onDismiss && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDismiss,
+				"aria-label": "Dismiss",
+				className: `-mr-1 -mt-0.5 shrink-0 rounded-lg p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current ${DISMISS_CLASS[tone]}`,
+				children: /* @__PURE__ */ jsx(X, {
+					size: 14,
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { Alert };
+
+//# sourceMappingURL=index31.mjs.map

package/lib/index31.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index31.mjs","names":[],"sources":["../src/ui-library/gallery/alert/Alert.tsx"],"sourcesContent":["/**\n * Alert — Design System Component\n *\n * Inline contextual feedback. Purely presentational.\n *\n * Tones:   info | success | warning | danger\n * Variants: default | subtle\n */\n\nimport type { ReactNode } from 'react';\nimport { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from 'lucide-react';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface AlertProps {\n  tone: AlertTone;\n  title?: string;\n  children: ReactNode;\n  /** Show an icon matching the tone */\n  icon?: boolean;\n  /** Show a dismiss button */\n  onDismiss?: () => void;\n  /** Subtle variant uses a lighter background */\n  subtle?: boolean;\n  className?: string;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\n// Full background tones — keep semantic colors, add the DIWA left-rule\nconst TONE_FULL: Record<AlertTone, string> = {\n  info:    'border-l-4 border-sky-400    bg-sky-50    text-sky-800',\n  success: 'border-l-4 border-emerald-400 bg-emerald-50 text-emerald-800',\n  warning: 'border-l-4 border-amber-400  bg-amber-50  text-amber-800',\n  danger:  'border-l-4 border-rose-500   bg-rose-50   text-rose-800',\n};\n\n// Subtle: white bg, left rule is the only structural marker\nconst TONE_SUBTLE: Record<AlertTone, string> = {\n  info:    'border-l-4 border-sky-400    bg-white text-sky-700',\n  success: 'border-l-4 border-emerald-400 bg-white text-emerald-700',\n  warning: 'border-l-4 border-amber-400  bg-white text-amber-700',\n  danger:  'border-l-4 border-rose-500   bg-white text-rose-700',\n};\n\nconst ICON_CLASS: Record<AlertTone, string> = {\n  info:    'text-sky-500',\n  success: 'text-emerald-500',\n  warning: 'text-amber-500',\n  danger:  'text-rose-500',\n};\n\nconst TONE_ICON: Record<AlertTone, typeof Info> = {\n  info:    Info,\n  success: CheckCircle2,\n  warning: AlertTriangle,\n  danger:  AlertCircle,\n};\n\nconst DISMISS_CLASS: Record<AlertTone, string> = {\n  info:    'text-sky-400 hover:bg-sky-100',\n  success: 'text-emerald-400 hover:bg-emerald-100',\n  warning: 'text-amber-400 hover:bg-amber-100',\n  danger:  'text-rose-400 hover:bg-rose-100',\n};\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Alert({\n  tone,\n  title,\n  children,\n  icon = true,\n  onDismiss,\n  subtle = false,\n  className = '',\n}: AlertProps) {\n  const Icon = TONE_ICON[tone];\n  const colorClass = subtle ? TONE_SUBTLE[tone] : TONE_FULL[tone];\n\n  return (\n    <div\n      role=\"alert\"\n      className={`flex gap-3 rounded-md pl-4 pr-4 py-3.5 ${colorClass} ${className}`}\n    >\n      {icon && (\n        <Icon\n          size={20}\n          className={`mt-0.5 shrink-0 ${ICON_CLASS[tone]}`}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div className=\"min-w-0 flex-1 text-sm\">\n        {title && <p className=\"font-bold leading-snug mb-0.5\">{title}</p>}\n        <div className=\"font-medium leading-relaxed\">{children}</div>\n      </div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Dismiss\"\n          className={`-mr-1 -mt-0.5 shrink-0 rounded-lg p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current ${DISMISS_CLASS[tone]}`}\n        >\n          <X size={14} aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;AA8BA,IAAM,YAAuC;CAC3C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAGA,IAAM,cAAyC;CAC7C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,aAAwC;CAC5C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,YAA4C;CAChD,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,gBAA2C;CAC/C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAIA,SAAgB,MAAM,EACpB,MACA,OACA,UACA,OAAO,MACP,WACA,SAAS,OACT,YAAY,MACC;CACb,MAAM,OAAO,UAAU;CACvB,MAAM,aAAa,SAAS,YAAY,QAAQ,UAAU;CAE1D,OACE,qBAAC,OAAD;EACE,MAAK;EACL,WAAW,0CAA0C,WAAW,GAAG;EAFrE,UAAA;GAIG,QACC,oBAAC,MAAD;IACE,MAAM;IACN,WAAW,mBAAmB,WAAW;IACzC,eAAY;GACb,CAAA;GAEH,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,WAAU;KAAiC,UAAA;IAAS,CAAA,GACjE,oBAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACzD;;GACJ,aACC,oBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,cAAW;IACX,WAAW,+HAA+H,cAAc;IAExJ,UAAA,oBAAC,GAAD;KAAG,MAAM;KAAI,eAAY;IAAQ,CAAA;GAC3B,CAAA;EAEP;;AAET"}

package/lib/index32.cjs

@@ -0,0 +1,19 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/error-banner/ErrorBanner.tsx
+var STYLES = {
+	error: "border-rose-100   bg-rose-50   text-rose-700",
+	warning: "border-amber-200  bg-amber-50  text-amber-800",
+	info: "border-sky-200    bg-sky-50    text-sky-800"
+};
+function ErrorBanner({ message, tone = "error", className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: tone === "error" ? "alert" : void 0,
+		"aria-live": tone !== "error" ? "polite" : void 0,
+		className: `rounded-2xl border px-5 py-4 text-sm font-bold ${STYLES[tone]} ${className}`,
+		children: message
+	});
+}
+//#endregion
+exports.ErrorBanner = ErrorBanner;
+
+//# sourceMappingURL=index32.cjs.map

package/lib/index32.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index32.cjs","names":[],"sources":["../src/ui-library/gallery/error-banner/ErrorBanner.tsx"],"sourcesContent":["/**\n * ErrorBanner — Design System Component\n *\n * Inline feedback banner for error, warning, and info messages.\n *\n * This gallery component preserves the established visual language of\n * the production ErrorBanner from shared/components/ui.tsx:\n *   - Same tone system: 'error' | 'warning' | 'info'\n *   - Same visual treatment: rounded-2xl, border, px-5 py-4, text-sm font-bold\n *\n * Accessibility:\n *   - role=\"alert\" for error tone (polite live region for warnings/info)\n *   - aria-live for warning/info tones\n *\n * Usage:\n *   <ErrorBanner message=\"Failed to save changes.\" />\n *   <ErrorBanner message=\"Draft saved.\" tone=\"info\" />\n *   <ErrorBanner message=\"This action cannot be undone.\" tone=\"warning\" />\n */\n\nimport type { ReactNode } from 'react';\n\nexport type ErrorBannerTone = 'error' | 'warning' | 'info';\n\nexport interface ErrorBannerProps {\n  /** Primary message text */\n  message: ReactNode;\n  tone?: ErrorBannerTone;\n  className?: string;\n}\n\nconst STYLES: Record<ErrorBannerTone, string> = {\n  error:   'border-rose-100   bg-rose-50   text-rose-700',\n  warning: 'border-amber-200  bg-amber-50  text-amber-800',\n  info:    'border-sky-200    bg-sky-50    text-sky-800',\n};\n\nexport function ErrorBanner({ message, tone = 'error', className = '' }: ErrorBannerProps) {\n  return (\n    <div\n      role={tone === 'error' ? 'alert' : undefined}\n      aria-live={tone !== 'error' ? 'polite' : undefined}\n      className={`rounded-2xl border px-5 py-4 text-sm font-bold ${STYLES[tone]} ${className}`}\n    >\n      {message}\n    </div>\n  );\n}\n"],"mappings":";;AA+BA,IAAM,SAA0C;CAC9C,OAAS;CACT,SAAS;CACT,MAAS;AACX;AAEA,SAAgB,YAAY,EAAE,SAAS,OAAO,SAAS,YAAY,MAAwB;CACzF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAM,SAAS,UAAU,UAAU,KAAA;EACnC,aAAW,SAAS,UAAU,WAAW,KAAA;EACzC,WAAW,kDAAkD,OAAO,MAAM,GAAG;EAE5E,UAAA;CACE,CAAA;AAET"}

package/lib/index32.mjs

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/ui-library/gallery/error-banner/ErrorBanner.tsx
+var STYLES = {
+	error: "border-rose-100   bg-rose-50   text-rose-700",
+	warning: "border-amber-200  bg-amber-50  text-amber-800",
+	info: "border-sky-200    bg-sky-50    text-sky-800"
+};
+function ErrorBanner({ message, tone = "error", className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: tone === "error" ? "alert" : void 0,
+		"aria-live": tone !== "error" ? "polite" : void 0,
+		className: `rounded-2xl border px-5 py-4 text-sm font-bold ${STYLES[tone]} ${className}`,
+		children: message
+	});
+}
+//#endregion
+export { ErrorBanner };
+
+//# sourceMappingURL=index32.mjs.map

package/lib/index32.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index32.mjs","names":[],"sources":["../src/ui-library/gallery/error-banner/ErrorBanner.tsx"],"sourcesContent":["/**\n * ErrorBanner — Design System Component\n *\n * Inline feedback banner for error, warning, and info messages.\n *\n * This gallery component preserves the established visual language of\n * the production ErrorBanner from shared/components/ui.tsx:\n *   - Same tone system: 'error' | 'warning' | 'info'\n *   - Same visual treatment: rounded-2xl, border, px-5 py-4, text-sm font-bold\n *\n * Accessibility:\n *   - role=\"alert\" for error tone (polite live region for warnings/info)\n *   - aria-live for warning/info tones\n *\n * Usage:\n *   <ErrorBanner message=\"Failed to save changes.\" />\n *   <ErrorBanner message=\"Draft saved.\" tone=\"info\" />\n *   <ErrorBanner message=\"This action cannot be undone.\" tone=\"warning\" />\n */\n\nimport type { ReactNode } from 'react';\n\nexport type ErrorBannerTone = 'error' | 'warning' | 'info';\n\nexport interface ErrorBannerProps {\n  /** Primary message text */\n  message: ReactNode;\n  tone?: ErrorBannerTone;\n  className?: string;\n}\n\nconst STYLES: Record<ErrorBannerTone, string> = {\n  error:   'border-rose-100   bg-rose-50   text-rose-700',\n  warning: 'border-amber-200  bg-amber-50  text-amber-800',\n  info:    'border-sky-200    bg-sky-50    text-sky-800',\n};\n\nexport function ErrorBanner({ message, tone = 'error', className = '' }: ErrorBannerProps) {\n  return (\n    <div\n      role={tone === 'error' ? 'alert' : undefined}\n      aria-live={tone !== 'error' ? 'polite' : undefined}\n      className={`rounded-2xl border px-5 py-4 text-sm font-bold ${STYLES[tone]} ${className}`}\n    >\n      {message}\n    </div>\n  );\n}\n"],"mappings":";;AA+BA,IAAM,SAA0C;CAC9C,OAAS;CACT,SAAS;CACT,MAAS;AACX;AAEA,SAAgB,YAAY,EAAE,SAAS,OAAO,SAAS,YAAY,MAAwB;CACzF,OACE,oBAAC,OAAD;EACE,MAAM,SAAS,UAAU,UAAU,KAAA;EACnC,aAAW,SAAS,UAAU,WAAW,KAAA;EACzC,WAAW,kDAAkD,OAAO,MAAM,GAAG;EAE5E,UAAA;CACE,CAAA;AAET"}

package/lib/index33.cjs

@@ -0,0 +1,25 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/progress/Progress.tsx
+function Progress({ value, max = 100, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className = "" }) {
+	const isIndeterminate = value === void 0;
+	const clamped = isIndeterminate ? 0 : Math.min(Math.max(value, 0), max);
+	const percent = isIndeterminate ? 0 : clamped / max * 100;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "progressbar",
+		"aria-valuenow": isIndeterminate ? void 0 : clamped,
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		className: `h-2 w-full overflow-hidden rounded-full bg-slate-200 ${className}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: ["h-full rounded-full bg-brand-blue transition-[width] duration-300", isIndeterminate ? "w-1/3 motion-safe:animate-pulse opacity-75" : ""].filter(Boolean).join(" "),
+			style: isIndeterminate ? void 0 : { width: `${percent}%` },
+			"aria-hidden": "true"
+		})
+	});
+}
+//#endregion
+exports.Progress = Progress;
+
+//# sourceMappingURL=index33.cjs.map

package/lib/index33.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index33.cjs","names":[],"sources":["../src/ui-library/gallery/progress/Progress.tsx"],"sourcesContent":["/**\n * Progress — Design System Component\n *\n * Determinate and indeterminate linear progress bar.\n *\n * Accessibility:\n *   - role=\"progressbar\"\n *   - aria-valuenow, aria-valuemin, aria-valuemax (determinate)\n *   - aria-label for screen-reader context\n *   - When indeterminate: aria-valuenow is omitted\n *\n * Usage:\n *   // Determinate (0–100)\n *   <Progress value={65} aria-label=\"Upload progress\" />\n *\n *   // Indeterminate\n *   <Progress aria-label=\"Loading\" />\n *\n *   // Custom max\n *   <Progress value={3} max={5} aria-label=\"Step 3 of 5\" />\n */\n\nexport interface ProgressProps {\n  /**\n   * Current progress value.\n   * Omit (or set to undefined) for indeterminate state.\n   */\n  value?: number;\n  /** Maximum value. Default: 100 */\n  max?: number;\n  /** Accessible label describing what is progressing */\n  'aria-label'?: string;\n  /** Accessible label from an external element */\n  'aria-labelledby'?: string;\n  className?: string;\n}\n\nexport function Progress({\n  value,\n  max = 100,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  className = '',\n}: ProgressProps) {\n  const isIndeterminate = value === undefined;\n  const clamped = isIndeterminate ? 0 : Math.min(Math.max(value, 0), max);\n  const percent = isIndeterminate ? 0 : (clamped / max) * 100;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={isIndeterminate ? undefined : clamped}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      className={`h-2 w-full overflow-hidden rounded-full bg-slate-200 ${className}`}\n    >\n      <div\n        className={[\n          'h-full rounded-full bg-brand-blue transition-[width] duration-300',\n          isIndeterminate ? 'w-1/3 motion-safe:animate-pulse opacity-75' : '',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        style={isIndeterminate ? undefined : { width: `${percent}%` }}\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;AAqCA,SAAgB,SAAS,EACvB,OACA,MAAM,KACN,cAAc,WACd,mBAAmB,gBACnB,YAAY,MACI;CAChB,MAAM,kBAAkB,UAAU,KAAA;CAClC,MAAM,UAAU,kBAAkB,IAAI,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG;CACtE,MAAM,UAAU,kBAAkB,IAAK,UAAU,MAAO;CAExD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAK;EACL,iBAAe,kBAAkB,KAAA,IAAY;EAC7C,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,WAAW,wDAAwD;EAEnE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,WAAW,CACT,qEACA,kBAAkB,+CAA+C,EACnE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GACX,OAAO,kBAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,QAAQ,GAAG;GAC5D,eAAY;EACb,CAAA;CACE,CAAA;AAET"}

package/lib/index33.mjs

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/ui-library/gallery/progress/Progress.tsx
+function Progress({ value, max = 100, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className = "" }) {
+	const isIndeterminate = value === void 0;
+	const clamped = isIndeterminate ? 0 : Math.min(Math.max(value, 0), max);
+	const percent = isIndeterminate ? 0 : clamped / max * 100;
+	return /* @__PURE__ */ jsx("div", {
+		role: "progressbar",
+		"aria-valuenow": isIndeterminate ? void 0 : clamped,
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		className: `h-2 w-full overflow-hidden rounded-full bg-slate-200 ${className}`,
+		children: /* @__PURE__ */ jsx("div", {
+			className: ["h-full rounded-full bg-brand-blue transition-[width] duration-300", isIndeterminate ? "w-1/3 motion-safe:animate-pulse opacity-75" : ""].filter(Boolean).join(" "),
+			style: isIndeterminate ? void 0 : { width: `${percent}%` },
+			"aria-hidden": "true"
+		})
+	});
+}
+//#endregion
+export { Progress };
+
+//# sourceMappingURL=index33.mjs.map

package/lib/index33.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index33.mjs","names":[],"sources":["../src/ui-library/gallery/progress/Progress.tsx"],"sourcesContent":["/**\n * Progress — Design System Component\n *\n * Determinate and indeterminate linear progress bar.\n *\n * Accessibility:\n *   - role=\"progressbar\"\n *   - aria-valuenow, aria-valuemin, aria-valuemax (determinate)\n *   - aria-label for screen-reader context\n *   - When indeterminate: aria-valuenow is omitted\n *\n * Usage:\n *   // Determinate (0–100)\n *   <Progress value={65} aria-label=\"Upload progress\" />\n *\n *   // Indeterminate\n *   <Progress aria-label=\"Loading\" />\n *\n *   // Custom max\n *   <Progress value={3} max={5} aria-label=\"Step 3 of 5\" />\n */\n\nexport interface ProgressProps {\n  /**\n   * Current progress value.\n   * Omit (or set to undefined) for indeterminate state.\n   */\n  value?: number;\n  /** Maximum value. Default: 100 */\n  max?: number;\n  /** Accessible label describing what is progressing */\n  'aria-label'?: string;\n  /** Accessible label from an external element */\n  'aria-labelledby'?: string;\n  className?: string;\n}\n\nexport function Progress({\n  value,\n  max = 100,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  className = '',\n}: ProgressProps) {\n  const isIndeterminate = value === undefined;\n  const clamped = isIndeterminate ? 0 : Math.min(Math.max(value, 0), max);\n  const percent = isIndeterminate ? 0 : (clamped / max) * 100;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={isIndeterminate ? undefined : clamped}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      className={`h-2 w-full overflow-hidden rounded-full bg-slate-200 ${className}`}\n    >\n      <div\n        className={[\n          'h-full rounded-full bg-brand-blue transition-[width] duration-300',\n          isIndeterminate ? 'w-1/3 motion-safe:animate-pulse opacity-75' : '',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        style={isIndeterminate ? undefined : { width: `${percent}%` }}\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;AAqCA,SAAgB,SAAS,EACvB,OACA,MAAM,KACN,cAAc,WACd,mBAAmB,gBACnB,YAAY,MACI;CAChB,MAAM,kBAAkB,UAAU,KAAA;CAClC,MAAM,UAAU,kBAAkB,IAAI,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG;CACtE,MAAM,UAAU,kBAAkB,IAAK,UAAU,MAAO;CAExD,OACE,oBAAC,OAAD;EACE,MAAK;EACL,iBAAe,kBAAkB,KAAA,IAAY;EAC7C,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,WAAW,wDAAwD;EAEnE,UAAA,oBAAC,OAAD;GACE,WAAW,CACT,qEACA,kBAAkB,+CAA+C,EACnE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GACX,OAAO,kBAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,QAAQ,GAAG;GAC5D,eAAY;EACb,CAAA;CACE,CAAA;AAET"}

package/lib/index34.cjs

@@ -0,0 +1,55 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/skeleton/Skeleton.tsx
+function Skeleton({ className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": "true",
+		className: `animate-pulse rounded-lg bg-slate-200 ${className}`
+	});
+}
+function SkeletonText({ lines = 3, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `space-y-2 ${className}`,
+		"aria-hidden": "true",
+		children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: `h-3.5 ${i === lines - 1 && lines > 1 ? "w-2/3" : "w-full"}` }, i))
+	});
+}
+var AVATAR_SIZE = {
+	sm: "h-8 w-8",
+	md: "h-10 w-10",
+	lg: "h-14 w-14"
+};
+function SkeletonAvatar({ size = "md", className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": "true",
+		className: `animate-pulse rounded-full bg-slate-200 shrink-0 ${AVATAR_SIZE[size]} ${className}`
+	});
+}
+function SkeletonCard({ className = "", children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `rounded-2xl border border-slate-100 bg-white p-5 space-y-3 ${className}`,
+		"aria-hidden": "true",
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-4 w-1/3" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonText, { lines: 2 })] })
+	});
+}
+function SkeletonTableRow({ rows = 5, columns = [
+	"w-32",
+	"w-24",
+	"w-20",
+	"w-28"
+] }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: Array.from({ length: rows }, (_, r) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+		"aria-hidden": "true",
+		children: columns.map((width, c) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+			className: "px-5 py-3.5",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: `h-3.5 ${width}` })
+		}, c))
+	}, r)) });
+}
+//#endregion
+exports.Skeleton = Skeleton;
+exports.SkeletonAvatar = SkeletonAvatar;
+exports.SkeletonCard = SkeletonCard;
+exports.SkeletonTableRow = SkeletonTableRow;
+exports.SkeletonText = SkeletonText;
+
+//# sourceMappingURL=index34.cjs.map

package/lib/index34.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index34.cjs","names":[],"sources":["../src/ui-library/gallery/skeleton/Skeleton.tsx"],"sourcesContent":["/**\n * Skeleton — Design System Component\n *\n * Animated loading placeholder using Tailwind animate-pulse.\n * Purely presentational — no state, no API calls, no domain logic.\n *\n * Usage:\n *   // Generic block\n *   <Skeleton className=\"h-4 w-32 rounded-lg\" />\n *\n *   // Composed patterns\n *   <SkeletonText lines={3} />\n *   <SkeletonAvatar />\n *   <SkeletonTableRow columns={['w-32', 'w-24', 'w-16']} />\n *\n * Accessibility:\n *   Skeleton elements are aria-hidden by default.\n *   Surround a loading region with aria-busy={loading} + aria-live=\"polite\"\n *   on the parent container when screen-reader announcements are needed.\n */\n\nimport type { ReactNode } from 'react';\n\n// ── Base Skeleton ─────────────────────────────────────────────────────────────\n\nexport interface SkeletonProps {\n  className?: string;\n}\n\nexport function Skeleton({ className = '' }: SkeletonProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={`animate-pulse rounded-lg bg-slate-200 ${className}`}\n    />\n  );\n}\n\n// ── SkeletonText — stacked line skeletons ─────────────────────────────────────\n\nexport interface SkeletonTextProps {\n  /** Number of lines to render */\n  lines?: number;\n  className?: string;\n}\n\nexport function SkeletonText({ lines = 3, className = '' }: SkeletonTextProps) {\n  return (\n    <div className={`space-y-2 ${className}`} aria-hidden=\"true\">\n      {Array.from({ length: lines }, (_, i) => (\n        <Skeleton\n          key={i}\n          className={`h-3.5 ${i === lines - 1 && lines > 1 ? 'w-2/3' : 'w-full'}`}\n        />\n      ))}\n    </div>\n  );\n}\n\n// ── SkeletonAvatar ────────────────────────────────────────────────────────────\n\nexport interface SkeletonAvatarProps {\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nconst AVATAR_SIZE: Record<NonNullable<SkeletonAvatarProps['size']>, string> = {\n  sm: 'h-8 w-8',\n  md: 'h-10 w-10',\n  lg: 'h-14 w-14',\n};\n\nexport function SkeletonAvatar({ size = 'md', className = '' }: SkeletonAvatarProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={`animate-pulse rounded-full bg-slate-200 shrink-0 ${AVATAR_SIZE[size]} ${className}`}\n    />\n  );\n}\n\n// ── SkeletonCard ──────────────────────────────────────────────────────────────\n\nexport interface SkeletonCardProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function SkeletonCard({ className = '', children }: SkeletonCardProps) {\n  return (\n    <div\n      className={`rounded-2xl border border-slate-100 bg-white p-5 space-y-3 ${className}`}\n      aria-hidden=\"true\"\n    >\n      {children ?? (\n        <>\n          <Skeleton className=\"h-4 w-1/3\" />\n          <SkeletonText lines={2} />\n        </>\n      )}\n    </div>\n  );\n}\n\n// ── SkeletonTableRow ──────────────────────────────────────────────────────────\n\nexport interface SkeletonTableRowProps {\n  /** Number of rows to render */\n  rows?: number;\n  /** Tailwind width classes per column (e.g. ['w-32', 'w-24', 'w-16']) */\n  columns?: string[];\n}\n\nexport function SkeletonTableRow({ rows = 5, columns = ['w-32', 'w-24', 'w-20', 'w-28'] }: SkeletonTableRowProps) {\n  return (\n    <>\n      {Array.from({ length: rows }, (_, r) => (\n        <tr key={r} aria-hidden=\"true\">\n          {columns.map((width, c) => (\n            <td key={c} className=\"px-5 py-3.5\">\n              <Skeleton className={`h-3.5 ${width}`} />\n            </td>\n          ))}\n        </tr>\n      ))}\n    </>\n  );\n}\n"],"mappings":";;AA6BA,SAAgB,SAAS,EAAE,YAAY,MAAqB;CAC1D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,eAAY;EACZ,WAAW,yCAAyC;CACrD,CAAA;AAEL;AAUA,SAAgB,aAAa,EAAE,QAAQ,GAAG,YAAY,MAAyB;CAC7E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,aAAa;EAAa,eAAY;EACnD,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAEE,WAAW,SAAS,MAAM,QAAQ,KAAK,QAAQ,IAAI,UAAU,WAC9D,GAFM,CAEN,CACF;CACE,CAAA;AAET;AASA,IAAM,cAAwE;CAC5E,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,eAAe,EAAE,OAAO,MAAM,YAAY,MAA2B;CACnF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,eAAY;EACZ,WAAW,oDAAoD,YAAY,MAAM,GAAG;CACrF,CAAA;AAEL;AASA,SAAgB,aAAa,EAAE,YAAY,IAAI,YAA+B;CAC5E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAW,8DAA8D;EACzE,eAAY;EAEX,UAAA,YACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAAU,WAAU,YAAa,CAAA,GACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD,EAAc,OAAO,EAAI,CAAA,CACzB,EAAA,CAAA;CAED,CAAA;AAET;AAWA,SAAgB,iBAAiB,EAAE,OAAO,GAAG,UAAU;CAAC;CAAQ;CAAQ;CAAQ;AAAM,KAA4B;CAChH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,MAChC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAY,eAAY;EACrB,UAAA,QAAQ,KAAK,OAAO,MACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAY,WAAU;GACpB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAAU,WAAW,SAAS,QAAU,CAAA;EACtC,GAFK,CAEL,CACL;CACC,GANK,CAML,CACL,EACD,CAAA;AAEN"}

package/lib/index34.mjs

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/skeleton/Skeleton.tsx
+function Skeleton({ className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: `animate-pulse rounded-lg bg-slate-200 ${className}`
+	});
+}
+function SkeletonText({ lines = 3, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `space-y-2 ${className}`,
+		"aria-hidden": "true",
+		children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: `h-3.5 ${i === lines - 1 && lines > 1 ? "w-2/3" : "w-full"}` }, i))
+	});
+}
+var AVATAR_SIZE = {
+	sm: "h-8 w-8",
+	md: "h-10 w-10",
+	lg: "h-14 w-14"
+};
+function SkeletonAvatar({ size = "md", className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: `animate-pulse rounded-full bg-slate-200 shrink-0 ${AVATAR_SIZE[size]} ${className}`
+	});
+}
+function SkeletonCard({ className = "", children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `rounded-2xl border border-slate-100 bg-white p-5 space-y-3 ${className}`,
+		"aria-hidden": "true",
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }), /* @__PURE__ */ jsx(SkeletonText, { lines: 2 })] })
+	});
+}
+function SkeletonTableRow({ rows = 5, columns = [
+	"w-32",
+	"w-24",
+	"w-20",
+	"w-28"
+] }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }, (_, r) => /* @__PURE__ */ jsx("tr", {
+		"aria-hidden": "true",
+		children: columns.map((width, c) => /* @__PURE__ */ jsx("td", {
+			className: "px-5 py-3.5",
+			children: /* @__PURE__ */ jsx(Skeleton, { className: `h-3.5 ${width}` })
+		}, c))
+	}, r)) });
+}
+//#endregion
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText };
+
+//# sourceMappingURL=index34.mjs.map

package/lib/index34.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index34.mjs","names":[],"sources":["../src/ui-library/gallery/skeleton/Skeleton.tsx"],"sourcesContent":["/**\n * Skeleton — Design System Component\n *\n * Animated loading placeholder using Tailwind animate-pulse.\n * Purely presentational — no state, no API calls, no domain logic.\n *\n * Usage:\n *   // Generic block\n *   <Skeleton className=\"h-4 w-32 rounded-lg\" />\n *\n *   // Composed patterns\n *   <SkeletonText lines={3} />\n *   <SkeletonAvatar />\n *   <SkeletonTableRow columns={['w-32', 'w-24', 'w-16']} />\n *\n * Accessibility:\n *   Skeleton elements are aria-hidden by default.\n *   Surround a loading region with aria-busy={loading} + aria-live=\"polite\"\n *   on the parent container when screen-reader announcements are needed.\n */\n\nimport type { ReactNode } from 'react';\n\n// ── Base Skeleton ─────────────────────────────────────────────────────────────\n\nexport interface SkeletonProps {\n  className?: string;\n}\n\nexport function Skeleton({ className = '' }: SkeletonProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={`animate-pulse rounded-lg bg-slate-200 ${className}`}\n    />\n  );\n}\n\n// ── SkeletonText — stacked line skeletons ─────────────────────────────────────\n\nexport interface SkeletonTextProps {\n  /** Number of lines to render */\n  lines?: number;\n  className?: string;\n}\n\nexport function SkeletonText({ lines = 3, className = '' }: SkeletonTextProps) {\n  return (\n    <div className={`space-y-2 ${className}`} aria-hidden=\"true\">\n      {Array.from({ length: lines }, (_, i) => (\n        <Skeleton\n          key={i}\n          className={`h-3.5 ${i === lines - 1 && lines > 1 ? 'w-2/3' : 'w-full'}`}\n        />\n      ))}\n    </div>\n  );\n}\n\n// ── SkeletonAvatar ────────────────────────────────────────────────────────────\n\nexport interface SkeletonAvatarProps {\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nconst AVATAR_SIZE: Record<NonNullable<SkeletonAvatarProps['size']>, string> = {\n  sm: 'h-8 w-8',\n  md: 'h-10 w-10',\n  lg: 'h-14 w-14',\n};\n\nexport function SkeletonAvatar({ size = 'md', className = '' }: SkeletonAvatarProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={`animate-pulse rounded-full bg-slate-200 shrink-0 ${AVATAR_SIZE[size]} ${className}`}\n    />\n  );\n}\n\n// ── SkeletonCard ──────────────────────────────────────────────────────────────\n\nexport interface SkeletonCardProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function SkeletonCard({ className = '', children }: SkeletonCardProps) {\n  return (\n    <div\n      className={`rounded-2xl border border-slate-100 bg-white p-5 space-y-3 ${className}`}\n      aria-hidden=\"true\"\n    >\n      {children ?? (\n        <>\n          <Skeleton className=\"h-4 w-1/3\" />\n          <SkeletonText lines={2} />\n        </>\n      )}\n    </div>\n  );\n}\n\n// ── SkeletonTableRow ──────────────────────────────────────────────────────────\n\nexport interface SkeletonTableRowProps {\n  /** Number of rows to render */\n  rows?: number;\n  /** Tailwind width classes per column (e.g. ['w-32', 'w-24', 'w-16']) */\n  columns?: string[];\n}\n\nexport function SkeletonTableRow({ rows = 5, columns = ['w-32', 'w-24', 'w-20', 'w-28'] }: SkeletonTableRowProps) {\n  return (\n    <>\n      {Array.from({ length: rows }, (_, r) => (\n        <tr key={r} aria-hidden=\"true\">\n          {columns.map((width, c) => (\n            <td key={c} className=\"px-5 py-3.5\">\n              <Skeleton className={`h-3.5 ${width}`} />\n            </td>\n          ))}\n        </tr>\n      ))}\n    </>\n  );\n}\n"],"mappings":";;AA6BA,SAAgB,SAAS,EAAE,YAAY,MAAqB;CAC1D,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,WAAW,yCAAyC;CACrD,CAAA;AAEL;AAUA,SAAgB,aAAa,EAAE,QAAQ,GAAG,YAAY,MAAyB;CAC7E,OACE,oBAAC,OAAD;EAAK,WAAW,aAAa;EAAa,eAAY;EACnD,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MACjC,oBAAC,UAAD,EAEE,WAAW,SAAS,MAAM,QAAQ,KAAK,QAAQ,IAAI,UAAU,WAC9D,GAFM,CAEN,CACF;CACE,CAAA;AAET;AASA,IAAM,cAAwE;CAC5E,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,eAAe,EAAE,OAAO,MAAM,YAAY,MAA2B;CACnF,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,WAAW,oDAAoD,YAAY,MAAM,GAAG;CACrF,CAAA;AAEL;AASA,SAAgB,aAAa,EAAE,YAAY,IAAI,YAA+B;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,8DAA8D;EACzE,eAAY;EAEX,UAAA,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA,GACjC,oBAAC,cAAD,EAAc,OAAO,EAAI,CAAA,CACzB,EAAA,CAAA;CAED,CAAA;AAET;AAWA,SAAgB,iBAAiB,EAAE,OAAO,GAAG,UAAU;CAAC;CAAQ;CAAQ;CAAQ;AAAM,KAA4B;CAChH,OACE,oBAAA,UAAA,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,MAChC,oBAAC,MAAD;EAAY,eAAY;EACrB,UAAA,QAAQ,KAAK,OAAO,MACnB,oBAAC,MAAD;GAAY,WAAU;GACpB,UAAA,oBAAC,UAAD,EAAU,WAAW,SAAS,QAAU,CAAA;EACtC,GAFK,CAEL,CACL;CACC,GANK,CAML,CACL,EACD,CAAA;AAEN"}

package/lib/index35.cjs

@@ -0,0 +1,25 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/status-badge/StatusBadge.tsx
+var TONE_STYLES = {
+	neutral: "border-slate-200 bg-slate-50   text-slate-600",
+	success: "border-emerald-100 bg-emerald-50 text-emerald-700",
+	warning: "border-amber-200  bg-amber-50  text-amber-700",
+	error: "border-rose-100   bg-rose-50   text-rose-700",
+	info: "border-sky-100    bg-sky-50    text-sky-700",
+	primary: "border-brand-blue/20 bg-blue-50 text-brand-blue"
+};
+function StatusBadge({ tone = "neutral", children, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: [
+			"inline-flex items-center rounded-lg border px-2.5 py-1",
+			"text-[10px] font-bold uppercase tracking-wider",
+			TONE_STYLES[tone],
+			className
+		].filter(Boolean).join(" "),
+		children
+	});
+}
+//#endregion
+exports.StatusBadge = StatusBadge;
+
+//# sourceMappingURL=index35.cjs.map

package/lib/index35.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index35.cjs","names":[],"sources":["../src/ui-library/gallery/status-badge/StatusBadge.tsx"],"sourcesContent":["/**\n * StatusBadge — Design System Component\n *\n * A small pill-shaped indicator for entity lifecycle or state status.\n * Purely presentational — the tone determines the visual; the label\n * is owned entirely by the consuming feature.\n *\n * Accessibility:\n *   - Rendered as a <span> (inline element, not interactive).\n *   - Screen readers read the visible text. No additional ARIA needed\n *     because the label itself conveys the status.\n *   - Do not rely solely on color. The label text must be present.\n *\n * Usage:\n *   <StatusBadge tone=\"success\">Active</StatusBadge>\n *   <StatusBadge tone=\"warning\">Pending</StatusBadge>\n *   <StatusBadge tone=\"neutral\">Inactive</StatusBadge>\n *\n * The consuming feature maps its domain values to tones:\n *   const TONE_MAP: Record<MyStatus, StatusBadgeTone> = {\n *     active:   'success',\n *     inactive: 'neutral',\n *     draft:    'warning',\n *     archived: 'neutral',\n *   };\n *   <StatusBadge tone={TONE_MAP[employee.status]}>{employee.status}</StatusBadge>\n */\n\nimport type { ReactNode } from 'react';\n\nexport type StatusBadgeTone =\n  | 'neutral'   // grey  — inactive, archived, default\n  | 'success'   // green — active, published, complete\n  | 'warning'   // amber — pending, draft, attention\n  | 'error'     // rose  — failed, rejected, suspended\n  | 'info'      // blue  — in-progress, processing\n  | 'primary';  // indigo — special/highlighted state\n\nexport interface StatusBadgeProps {\n  tone?: StatusBadgeTone;\n  children: ReactNode;\n  className?: string;\n}\n\nconst TONE_STYLES: Record<StatusBadgeTone, string> = {\n  neutral: 'border-slate-200 bg-slate-50   text-slate-600',\n  success: 'border-emerald-100 bg-emerald-50 text-emerald-700',\n  warning: 'border-amber-200  bg-amber-50  text-amber-700',\n  error:   'border-rose-100   bg-rose-50   text-rose-700',\n  info:    'border-sky-100    bg-sky-50    text-sky-700',\n  primary: 'border-brand-blue/20 bg-blue-50 text-brand-blue',\n};\n\nexport function StatusBadge({ tone = 'neutral', children, className = '' }: StatusBadgeProps) {\n  return (\n    <span\n      className={[\n        'inline-flex items-center rounded-lg border px-2.5 py-1',\n        'text-[10px] font-bold uppercase tracking-wider',\n        TONE_STYLES[tone],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;AA4CA,IAAM,cAA+C;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,MAAS;CACT,SAAS;AACX;AAEA,SAAgB,YAAY,EAAE,OAAO,WAAW,UAAU,YAAY,MAAwB;CAC5F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,WAAW;GACT;GACA;GACA,YAAY;GACZ;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV;CACG,CAAA;AAEV"}

package/lib/index35.mjs

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/ui-library/gallery/status-badge/StatusBadge.tsx
+var TONE_STYLES = {
+	neutral: "border-slate-200 bg-slate-50   text-slate-600",
+	success: "border-emerald-100 bg-emerald-50 text-emerald-700",
+	warning: "border-amber-200  bg-amber-50  text-amber-700",
+	error: "border-rose-100   bg-rose-50   text-rose-700",
+	info: "border-sky-100    bg-sky-50    text-sky-700",
+	primary: "border-brand-blue/20 bg-blue-50 text-brand-blue"
+};
+function StatusBadge({ tone = "neutral", children, className = "" }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: [
+			"inline-flex items-center rounded-lg border px-2.5 py-1",
+			"text-[10px] font-bold uppercase tracking-wider",
+			TONE_STYLES[tone],
+			className
+		].filter(Boolean).join(" "),
+		children
+	});
+}
+//#endregion
+export { StatusBadge };
+
+//# sourceMappingURL=index35.mjs.map

package/lib/index35.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index35.mjs","names":[],"sources":["../src/ui-library/gallery/status-badge/StatusBadge.tsx"],"sourcesContent":["/**\n * StatusBadge — Design System Component\n *\n * A small pill-shaped indicator for entity lifecycle or state status.\n * Purely presentational — the tone determines the visual; the label\n * is owned entirely by the consuming feature.\n *\n * Accessibility:\n *   - Rendered as a <span> (inline element, not interactive).\n *   - Screen readers read the visible text. No additional ARIA needed\n *     because the label itself conveys the status.\n *   - Do not rely solely on color. The label text must be present.\n *\n * Usage:\n *   <StatusBadge tone=\"success\">Active</StatusBadge>\n *   <StatusBadge tone=\"warning\">Pending</StatusBadge>\n *   <StatusBadge tone=\"neutral\">Inactive</StatusBadge>\n *\n * The consuming feature maps its domain values to tones:\n *   const TONE_MAP: Record<MyStatus, StatusBadgeTone> = {\n *     active:   'success',\n *     inactive: 'neutral',\n *     draft:    'warning',\n *     archived: 'neutral',\n *   };\n *   <StatusBadge tone={TONE_MAP[employee.status]}>{employee.status}</StatusBadge>\n */\n\nimport type { ReactNode } from 'react';\n\nexport type StatusBadgeTone =\n  | 'neutral'   // grey  — inactive, archived, default\n  | 'success'   // green — active, published, complete\n  | 'warning'   // amber — pending, draft, attention\n  | 'error'     // rose  — failed, rejected, suspended\n  | 'info'      // blue  — in-progress, processing\n  | 'primary';  // indigo — special/highlighted state\n\nexport interface StatusBadgeProps {\n  tone?: StatusBadgeTone;\n  children: ReactNode;\n  className?: string;\n}\n\nconst TONE_STYLES: Record<StatusBadgeTone, string> = {\n  neutral: 'border-slate-200 bg-slate-50   text-slate-600',\n  success: 'border-emerald-100 bg-emerald-50 text-emerald-700',\n  warning: 'border-amber-200  bg-amber-50  text-amber-700',\n  error:   'border-rose-100   bg-rose-50   text-rose-700',\n  info:    'border-sky-100    bg-sky-50    text-sky-700',\n  primary: 'border-brand-blue/20 bg-blue-50 text-brand-blue',\n};\n\nexport function StatusBadge({ tone = 'neutral', children, className = '' }: StatusBadgeProps) {\n  return (\n    <span\n      className={[\n        'inline-flex items-center rounded-lg border px-2.5 py-1',\n        'text-[10px] font-bold uppercase tracking-wider',\n        TONE_STYLES[tone],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;AA4CA,IAAM,cAA+C;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,MAAS;CACT,SAAS;AACX;AAEA,SAAgB,YAAY,EAAE,OAAO,WAAW,UAAU,YAAY,MAAwB;CAC5F,OACE,oBAAC,QAAD;EACE,WAAW;GACT;GACA;GACA,YAAY;GACZ;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV;CACG,CAAA;AAEV"}