@diwauhris/ui 1.0.0

package/lib/index66.cjs

@@ -0,0 +1,107 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/charts/Charts.tsx
+function BarChart({ data, height = 160, barColor = "#6366f1", "aria-label": ariaLabel, className = "" }) {
+	const max = Math.max(...data.map((d) => d.value), 1);
+	const w = 100 / data.length;
+	const gap = .4;
+	const bw = w - gap * 2;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `space-y-2 ${className}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			role: "img",
+			"aria-label": ariaLabel,
+			viewBox: `0 0 100 ${height}`,
+			preserveAspectRatio: "none",
+			className: "w-full",
+			style: { height },
+			children: [data.map((d, i) => {
+				const barH = d.value / max * (height - 24);
+				const x = i * w + gap;
+				const y = height - 20 - barH;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+					"aria-label": `${d.label}: ${d.value}`,
+					role: "img",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x,
+						y,
+						width: bw,
+						height: barH,
+						rx: "2",
+						fill: d.color ?? barColor,
+						opacity: .9
+					})
+				}, d.label);
+			}), data.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: i * w + w / 2,
+				y: height - 4,
+				textAnchor: "middle",
+				className: "fill-slate-500",
+				style: {
+					fontSize: "6px",
+					fontFamily: "inherit"
+				},
+				"aria-hidden": "true",
+				children: d.label
+			}, `lbl-${d.label}`))]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-around",
+			children: data.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[10px] font-bold text-slate-600",
+				children: d.value
+			}, d.label))
+		})]
+	});
+}
+function LineChart({ data, height = 120, lineColor = "#6366f1", filled = true, "aria-label": ariaLabel, className = "" }) {
+	const max = Math.max(...data.map((d) => d.value), 1);
+	const n = data.length;
+	if (n < 2) return null;
+	const pad = 8;
+	const W = 100;
+	const H = height;
+	const px = (i) => pad + i / (n - 1) * 84;
+	const py = (v) => pad + (max - v) / max * (H - 16);
+	const points = data.map((d, i) => ({
+		x: px(i),
+		y: py(d.value),
+		label: d.label,
+		value: d.value
+	}));
+	const linePath = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+	const areaPath = `${linePath} L${points[n - 1].x},${H - pad} L${points[0].x},${H - pad} Z`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		role: "img",
+		"aria-label": ariaLabel,
+		viewBox: `0 0 ${W} ${H}`,
+		preserveAspectRatio: "none",
+		className: `w-full ${className}`,
+		style: { height },
+		children: [
+			filled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: areaPath,
+				fill: lineColor,
+				fillOpacity: .1
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: linePath,
+				fill: "none",
+				stroke: lineColor,
+				strokeWidth: "1.5",
+				strokeLinejoin: "round",
+				strokeLinecap: "round"
+			}),
+			points.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: p.x,
+				cy: p.y,
+				r: 2,
+				fill: lineColor,
+				"aria-label": `${p.label}: ${p.value}`
+			}, p.label))
+		]
+	});
+}
+//#endregion
+exports.BarChart = BarChart;
+exports.LineChart = LineChart;
+
+//# sourceMappingURL=index66.cjs.map

package/lib/index66.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index66.cjs","names":[],"sources":["../src/ui-library/gallery/charts/Charts.tsx"],"sourcesContent":["/**\n * Charts — Design System Components\n *\n * Lightweight SVG-native chart primitives. No charting library dependency.\n * Suitable for simple analytics/KPI displays.\n *\n * Components:\n *   BarChart  — vertical bar chart\n *   LineChart — line/area chart (SVG path)\n *\n * Accessibility:\n *   - role=\"img\" on the SVG with aria-label describing the chart\n *   - Each bar/point has aria-label with value\n *   - Summary table available via a visually-hidden caption (optional)\n */\n\n\n// ── Types ─────────────────────────────────────────────────────────────────\n\nexport interface ChartDataPoint {\n  label: string;\n  value: number;\n  color?: string;\n}\n\n// ── BarChart ──────────────────────────────────────────────────────────────\n\nexport interface BarChartProps {\n  data: ChartDataPoint[];\n  height?: number;\n  barColor?: string;\n  /** Accessible description of the entire chart */\n  'aria-label': string;\n  className?: string;\n}\n\nexport function BarChart({\n  data,\n  height = 160,\n  barColor = '#6366f1',\n  'aria-label': ariaLabel,\n  className = '',\n}: BarChartProps) {\n  const max = Math.max(...data.map((d) => d.value), 1);\n  const w = 100 / data.length;\n  const gap = 0.4;\n  const bw = w - gap * 2;\n\n  return (\n    <div className={`space-y-2 ${className}`}>\n      <svg\n        role=\"img\"\n        aria-label={ariaLabel}\n        viewBox={`0 0 100 ${height}`}\n        preserveAspectRatio=\"none\"\n        className=\"w-full\"\n        style={{ height }}\n      >\n        {data.map((d, i) => {\n          const barH = (d.value / max) * (height - 24);\n          const x = i * w + gap;\n          const y = height - 20 - barH;\n          return (\n            <g key={d.label} aria-label={`${d.label}: ${d.value}`} role=\"img\">\n              <rect\n                x={x}\n                y={y}\n                width={bw}\n                height={barH}\n                rx=\"2\"\n                fill={d.color ?? barColor}\n                opacity={0.9}\n              />\n            </g>\n          );\n        })}\n        {/* X-axis labels */}\n        {data.map((d, i) => (\n          <text\n            key={`lbl-${d.label}`}\n            x={i * w + w / 2}\n            y={height - 4}\n            textAnchor=\"middle\"\n            className=\"fill-slate-500\"\n            style={{ fontSize: '6px', fontFamily: 'inherit' }}\n            aria-hidden=\"true\"\n          >\n            {d.label}\n          </text>\n        ))}\n      </svg>\n      {/* Value labels */}\n      <div className=\"flex justify-around\">\n        {data.map((d) => (\n          <span key={d.label} className=\"text-[10px] font-bold text-slate-600\">\n            {d.value}\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ── LineChart ─────────────────────────────────────────────────────────────\n\nexport interface LineChartProps {\n  data: ChartDataPoint[];\n  height?: number;\n  lineColor?: string;\n  filled?: boolean;\n  'aria-label': string;\n  className?: string;\n}\n\nexport function LineChart({\n  data,\n  height = 120,\n  lineColor = '#6366f1',\n  filled = true,\n  'aria-label': ariaLabel,\n  className = '',\n}: LineChartProps) {\n  const max = Math.max(...data.map((d) => d.value), 1);\n  const n = data.length;\n  if (n < 2) return null;\n\n  const pad = 8;\n  const W = 100;\n  const H = height;\n\n  const px = (i: number) => pad + (i / (n - 1)) * (W - pad * 2);\n  const py = (v: number) => pad + ((max - v) / max) * (H - pad * 2);\n\n  const points = data.map((d, i) => ({ x: px(i), y: py(d.value), label: d.label, value: d.value }));\n  const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');\n  const areaPath = `${linePath} L${points[n - 1]!.x},${H - pad} L${points[0]!.x},${H - pad} Z`;\n\n  return (\n    <svg\n      role=\"img\"\n      aria-label={ariaLabel}\n      viewBox={`0 0 ${W} ${H}`}\n      preserveAspectRatio=\"none\"\n      className={`w-full ${className}`}\n      style={{ height }}\n    >\n      {filled && (\n        <path d={areaPath} fill={lineColor} fillOpacity={0.1} />\n      )}\n      <path d={linePath} fill=\"none\" stroke={lineColor} strokeWidth=\"1.5\" strokeLinejoin=\"round\" strokeLinecap=\"round\" />\n      {points.map((p) => (\n        <circle\n          key={p.label}\n          cx={p.x}\n          cy={p.y}\n          r={2}\n          fill={lineColor}\n          aria-label={`${p.label}: ${p.value}`}\n        />\n      ))}\n    </svg>\n  );\n}\n"],"mappings":";;AAoCA,SAAgB,SAAS,EACvB,MACA,SAAS,KACT,WAAW,WACX,cAAc,WACd,YAAY,MACI;CAChB,MAAM,MAAM,KAAK,IAAI,GAAG,KAAK,KAAK,MAAM,EAAE,KAAK,GAAG,CAAC;CACnD,MAAM,IAAI,MAAM,KAAK;CACrB,MAAM,MAAM;CACZ,MAAM,KAAK,IAAI,MAAM;CAErB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,aAAa;EAA7B,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,SAAS,WAAW;GACpB,qBAAoB;GACpB,WAAU;GACV,OAAO,EAAE,OAAO;GANlB,UAAA,CAQG,KAAK,KAAK,GAAG,MAAM;IAClB,MAAM,OAAQ,EAAE,QAAQ,OAAQ,SAAS;IACzC,MAAM,IAAI,IAAI,IAAI;IAClB,MAAM,IAAI,SAAS,KAAK;IACxB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KAAiB,cAAY,GAAG,EAAE,MAAM,IAAI,EAAE;KAAS,MAAK;KAC1D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MACK;MACA;MACH,OAAO;MACP,QAAQ;MACR,IAAG;MACH,MAAM,EAAE,SAAS;MACjB,SAAS;KACV,CAAA;IACA,GAVK,EAAE,KAUP;GAEP,CAAC,GAEA,KAAK,KAAK,GAAG,MACZ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAEE,GAAG,IAAI,IAAI,IAAI;IACf,GAAG,SAAS;IACZ,YAAW;IACX,WAAU;IACV,OAAO;KAAE,UAAU;KAAO,YAAY;IAAU;IAChD,eAAY;IAEX,UAAA,EAAE;GACC,GATC,OAAO,EAAE,OASV,CACP,CACE;EAEL,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GACZ,UAAA,KAAK,KAAK,MACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAoB,WAAU;IAC3B,UAAA,EAAE;GACC,GAFK,EAAE,KAEP,CACP;EACE,CAAA,CACF;;AAET;AAaA,SAAgB,UAAU,EACxB,MACA,SAAS,KACT,YAAY,WACZ,SAAS,MACT,cAAc,WACd,YAAY,MACK;CACjB,MAAM,MAAM,KAAK,IAAI,GAAG,KAAK,KAAK,MAAM,EAAE,KAAK,GAAG,CAAC;CACnD,MAAM,IAAI,KAAK;CACf,IAAI,IAAI,GAAG,OAAO;CAElB,MAAM,MAAM;CACZ,MAAM,IAAI;CACV,MAAM,IAAI;CAEV,MAAM,MAAM,MAAc,MAAO,KAAK,IAAI,KAAO;CACjD,MAAM,MAAM,MAAc,OAAQ,MAAM,KAAK,OAAQ,IAAI;CAEzD,MAAM,SAAS,KAAK,KAAK,GAAG,OAAO;EAAE,GAAG,GAAG,CAAC;EAAG,GAAG,GAAG,EAAE,KAAK;EAAG,OAAO,EAAE;EAAO,OAAO,EAAE;CAAM,EAAE;CAChG,MAAM,WAAW,OAAO,KAAK,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG;CACrF,MAAM,WAAW,GAAG,SAAS,IAAI,OAAO,IAAI,EAAE,CAAE,EAAE,GAAG,IAAI,IAAI,IAAI,OAAO,EAAE,CAAE,EAAE,GAAG,IAAI,IAAI;CAEzF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,SAAS,OAAO,EAAE,GAAG;EACrB,qBAAoB;EACpB,WAAW,UAAU;EACrB,OAAO,EAAE,OAAO;EANlB,UAAA;GAQG,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,GAAG;IAAU,MAAM;IAAW,aAAa;GAAM,CAAA;GAEzD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,GAAG;IAAU,MAAK;IAAO,QAAQ;IAAW,aAAY;IAAM,gBAAe;IAAQ,eAAc;GAAS,CAAA;GACjH,OAAO,KAAK,MACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAEE,IAAI,EAAE;IACN,IAAI,EAAE;IACN,GAAG;IACH,MAAM;IACN,cAAY,GAAG,EAAE,MAAM,IAAI,EAAE;GAC9B,GANM,EAAE,KAMR,CACF;EACE;;AAET"}

package/lib/index66.mjs

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/charts/Charts.tsx
+function BarChart({ data, height = 160, barColor = "#6366f1", "aria-label": ariaLabel, className = "" }) {
+	const max = Math.max(...data.map((d) => d.value), 1);
+	const w = 100 / data.length;
+	const gap = .4;
+	const bw = w - gap * 2;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `space-y-2 ${className}`,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			role: "img",
+			"aria-label": ariaLabel,
+			viewBox: `0 0 100 ${height}`,
+			preserveAspectRatio: "none",
+			className: "w-full",
+			style: { height },
+			children: [data.map((d, i) => {
+				const barH = d.value / max * (height - 24);
+				const x = i * w + gap;
+				const y = height - 20 - barH;
+				return /* @__PURE__ */ jsx("g", {
+					"aria-label": `${d.label}: ${d.value}`,
+					role: "img",
+					children: /* @__PURE__ */ jsx("rect", {
+						x,
+						y,
+						width: bw,
+						height: barH,
+						rx: "2",
+						fill: d.color ?? barColor,
+						opacity: .9
+					})
+				}, d.label);
+			}), data.map((d, i) => /* @__PURE__ */ jsx("text", {
+				x: i * w + w / 2,
+				y: height - 4,
+				textAnchor: "middle",
+				className: "fill-slate-500",
+				style: {
+					fontSize: "6px",
+					fontFamily: "inherit"
+				},
+				"aria-hidden": "true",
+				children: d.label
+			}, `lbl-${d.label}`))]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex justify-around",
+			children: data.map((d) => /* @__PURE__ */ jsx("span", {
+				className: "text-[10px] font-bold text-slate-600",
+				children: d.value
+			}, d.label))
+		})]
+	});
+}
+function LineChart({ data, height = 120, lineColor = "#6366f1", filled = true, "aria-label": ariaLabel, className = "" }) {
+	const max = Math.max(...data.map((d) => d.value), 1);
+	const n = data.length;
+	if (n < 2) return null;
+	const pad = 8;
+	const W = 100;
+	const H = height;
+	const px = (i) => pad + i / (n - 1) * 84;
+	const py = (v) => pad + (max - v) / max * (H - 16);
+	const points = data.map((d, i) => ({
+		x: px(i),
+		y: py(d.value),
+		label: d.label,
+		value: d.value
+	}));
+	const linePath = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+	const areaPath = `${linePath} L${points[n - 1].x},${H - pad} L${points[0].x},${H - pad} Z`;
+	return /* @__PURE__ */ jsxs("svg", {
+		role: "img",
+		"aria-label": ariaLabel,
+		viewBox: `0 0 ${W} ${H}`,
+		preserveAspectRatio: "none",
+		className: `w-full ${className}`,
+		style: { height },
+		children: [
+			filled && /* @__PURE__ */ jsx("path", {
+				d: areaPath,
+				fill: lineColor,
+				fillOpacity: .1
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: linePath,
+				fill: "none",
+				stroke: lineColor,
+				strokeWidth: "1.5",
+				strokeLinejoin: "round",
+				strokeLinecap: "round"
+			}),
+			points.map((p) => /* @__PURE__ */ jsx("circle", {
+				cx: p.x,
+				cy: p.y,
+				r: 2,
+				fill: lineColor,
+				"aria-label": `${p.label}: ${p.value}`
+			}, p.label))
+		]
+	});
+}
+//#endregion
+export { BarChart, LineChart };
+
+//# sourceMappingURL=index66.mjs.map

package/lib/index66.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index66.mjs","names":[],"sources":["../src/ui-library/gallery/charts/Charts.tsx"],"sourcesContent":["/**\n * Charts — Design System Components\n *\n * Lightweight SVG-native chart primitives. No charting library dependency.\n * Suitable for simple analytics/KPI displays.\n *\n * Components:\n *   BarChart  — vertical bar chart\n *   LineChart — line/area chart (SVG path)\n *\n * Accessibility:\n *   - role=\"img\" on the SVG with aria-label describing the chart\n *   - Each bar/point has aria-label with value\n *   - Summary table available via a visually-hidden caption (optional)\n */\n\n\n// ── Types ─────────────────────────────────────────────────────────────────\n\nexport interface ChartDataPoint {\n  label: string;\n  value: number;\n  color?: string;\n}\n\n// ── BarChart ──────────────────────────────────────────────────────────────\n\nexport interface BarChartProps {\n  data: ChartDataPoint[];\n  height?: number;\n  barColor?: string;\n  /** Accessible description of the entire chart */\n  'aria-label': string;\n  className?: string;\n}\n\nexport function BarChart({\n  data,\n  height = 160,\n  barColor = '#6366f1',\n  'aria-label': ariaLabel,\n  className = '',\n}: BarChartProps) {\n  const max = Math.max(...data.map((d) => d.value), 1);\n  const w = 100 / data.length;\n  const gap = 0.4;\n  const bw = w - gap * 2;\n\n  return (\n    <div className={`space-y-2 ${className}`}>\n      <svg\n        role=\"img\"\n        aria-label={ariaLabel}\n        viewBox={`0 0 100 ${height}`}\n        preserveAspectRatio=\"none\"\n        className=\"w-full\"\n        style={{ height }}\n      >\n        {data.map((d, i) => {\n          const barH = (d.value / max) * (height - 24);\n          const x = i * w + gap;\n          const y = height - 20 - barH;\n          return (\n            <g key={d.label} aria-label={`${d.label}: ${d.value}`} role=\"img\">\n              <rect\n                x={x}\n                y={y}\n                width={bw}\n                height={barH}\n                rx=\"2\"\n                fill={d.color ?? barColor}\n                opacity={0.9}\n              />\n            </g>\n          );\n        })}\n        {/* X-axis labels */}\n        {data.map((d, i) => (\n          <text\n            key={`lbl-${d.label}`}\n            x={i * w + w / 2}\n            y={height - 4}\n            textAnchor=\"middle\"\n            className=\"fill-slate-500\"\n            style={{ fontSize: '6px', fontFamily: 'inherit' }}\n            aria-hidden=\"true\"\n          >\n            {d.label}\n          </text>\n        ))}\n      </svg>\n      {/* Value labels */}\n      <div className=\"flex justify-around\">\n        {data.map((d) => (\n          <span key={d.label} className=\"text-[10px] font-bold text-slate-600\">\n            {d.value}\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ── LineChart ─────────────────────────────────────────────────────────────\n\nexport interface LineChartProps {\n  data: ChartDataPoint[];\n  height?: number;\n  lineColor?: string;\n  filled?: boolean;\n  'aria-label': string;\n  className?: string;\n}\n\nexport function LineChart({\n  data,\n  height = 120,\n  lineColor = '#6366f1',\n  filled = true,\n  'aria-label': ariaLabel,\n  className = '',\n}: LineChartProps) {\n  const max = Math.max(...data.map((d) => d.value), 1);\n  const n = data.length;\n  if (n < 2) return null;\n\n  const pad = 8;\n  const W = 100;\n  const H = height;\n\n  const px = (i: number) => pad + (i / (n - 1)) * (W - pad * 2);\n  const py = (v: number) => pad + ((max - v) / max) * (H - pad * 2);\n\n  const points = data.map((d, i) => ({ x: px(i), y: py(d.value), label: d.label, value: d.value }));\n  const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');\n  const areaPath = `${linePath} L${points[n - 1]!.x},${H - pad} L${points[0]!.x},${H - pad} Z`;\n\n  return (\n    <svg\n      role=\"img\"\n      aria-label={ariaLabel}\n      viewBox={`0 0 ${W} ${H}`}\n      preserveAspectRatio=\"none\"\n      className={`w-full ${className}`}\n      style={{ height }}\n    >\n      {filled && (\n        <path d={areaPath} fill={lineColor} fillOpacity={0.1} />\n      )}\n      <path d={linePath} fill=\"none\" stroke={lineColor} strokeWidth=\"1.5\" strokeLinejoin=\"round\" strokeLinecap=\"round\" />\n      {points.map((p) => (\n        <circle\n          key={p.label}\n          cx={p.x}\n          cy={p.y}\n          r={2}\n          fill={lineColor}\n          aria-label={`${p.label}: ${p.value}`}\n        />\n      ))}\n    </svg>\n  );\n}\n"],"mappings":"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"}

package/lib/index67.cjs

@@ -0,0 +1,52 @@
+let react = require("react");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/status-actions/statusActions.ts
+/**
+* statusActions — Gallery-native lifecycle transition utilities.
+* Copied from shared/components/statusActions.tsx.
+* Updated to:
+*   - Define ActionMenuItem locally (instead of importing from ui.tsx)
+*   - Remove ActionMenu component import (not needed here)
+*   - Import only from react and lucide-react
+*/
+/**
+* Build lifecycle status-transition menu items for an entity.
+*/
+function statusMenuItems(current, isActive, onTransition, options = {}) {
+	const impactMessage = options.impactMessage ?? "Related records may be affected, including reporting links, assignments, pay profiles, payroll schedules, templates, components, or formulas.";
+	const status = (current ?? (isActive === false ? "inactive" : "active")).toLowerCase();
+	const items = [];
+	const confirmTransition = (next) => {
+		const verb = next === "active" ? "reactivate" : next === "inactive" ? "set inactive" : "archive";
+		if (options.requestConfirm) {
+			options.requestConfirm({
+				next,
+				verb,
+				impactMessage
+			});
+			return;
+		}
+		if (window.confirm(`Confirm ${verb} status change?\n\n${impactMessage}`)) onTransition(next);
+	};
+	if (status !== "active") items.push({
+		label: status === "archived" ? "Restore to active" : "Set active",
+		icon: (0, react.createElement)(status === "archived" ? lucide_react.ArchiveRestore : lucide_react.CheckCircle2, { size: 14 }),
+		onClick: () => confirmTransition("active")
+	});
+	if (status === "active") items.push({
+		label: "Set inactive",
+		icon: (0, react.createElement)(lucide_react.Ban, { size: 14 }),
+		onClick: () => confirmTransition("inactive")
+	});
+	if (status !== "archived") items.push({
+		label: "Archive",
+		icon: (0, react.createElement)(lucide_react.Archive, { size: 14 }),
+		tone: "danger",
+		onClick: () => confirmTransition("archived")
+	});
+	return items;
+}
+//#endregion
+exports.statusMenuItems = statusMenuItems;
+
+//# sourceMappingURL=index67.cjs.map

package/lib/index67.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index67.cjs","names":[],"sources":["../src/ui-library/gallery/status-actions/statusActions.ts"],"sourcesContent":["/**\n * statusActions — Gallery-native lifecycle transition utilities.\n * Copied from shared/components/statusActions.tsx.\n * Updated to:\n *   - Define ActionMenuItem locally (instead of importing from ui.tsx)\n *   - Remove ActionMenu component import (not needed here)\n *   - Import only from react and lucide-react\n */\nimport { createElement } from 'react';\nimport { Archive, ArchiveRestore, Ban, CheckCircle2 } from 'lucide-react';\n\n// Inlined from shared/components/ui.tsx — only the subset needed here\nexport interface ActionMenuItem {\n  label: string;\n  icon?: React.ReactNode;\n  onClick: () => void;\n  tone?: 'default' | 'danger';\n  disabled?: boolean;\n  hidden?: boolean;\n}\n\nexport type Lifecycle = 'draft' | 'active' | 'inactive' | 'archived';\n\nexport interface StatusTransitionRequest {\n  next: Lifecycle;\n  verb: string;\n  impactMessage: string;\n}\n\nexport interface StatusMenuOptions {\n  impactMessage?: string;\n  requestConfirm?: (request: StatusTransitionRequest) => void;\n}\n\n/**\n * Build lifecycle status-transition menu items for an entity.\n */\nexport function statusMenuItems(\n  current: string | undefined,\n  isActive: boolean | undefined,\n  onTransition: (status: Lifecycle) => void,\n  options: StatusMenuOptions = {},\n): ActionMenuItem[] {\n  const impactMessage =\n    options.impactMessage ??\n    'Related records may be affected, including reporting links, assignments, pay profiles, payroll schedules, templates, components, or formulas.';\n  const status = (current ?? (isActive === false ? 'inactive' : 'active')).toLowerCase();\n  const items: ActionMenuItem[] = [];\n  const confirmTransition = (next: Lifecycle) => {\n    const verb = next === 'active' ? 'reactivate' : next === 'inactive' ? 'set inactive' : 'archive';\n    if (options.requestConfirm) {\n      options.requestConfirm({ next, verb, impactMessage });\n      return;\n    }\n    if (window.confirm(`Confirm ${verb} status change?\\n\\n${impactMessage}`)) onTransition(next);\n  };\n\n  if (status !== 'active') {\n    items.push({\n      label: status === 'archived' ? 'Restore to active' : 'Set active',\n      icon: createElement(status === 'archived' ? ArchiveRestore : CheckCircle2, { size: 14 }),\n      onClick: () => confirmTransition('active'),\n    });\n  }\n  if (status === 'active') {\n    items.push({ label: 'Set inactive', icon: createElement(Ban, { size: 14 }), onClick: () => confirmTransition('inactive') });\n  }\n  if (status !== 'archived') {\n    items.push({ label: 'Archive', icon: createElement(Archive, { size: 14 }), tone: 'danger', onClick: () => confirmTransition('archived') });\n  }\n  return items;\n}\n"],"mappings":";;;;;;;;;;;;;;AAqCA,SAAgB,gBACd,SACA,UACA,cACA,UAA6B,CAAC,GACZ;CAClB,MAAM,gBACJ,QAAQ,iBACR;CACF,MAAM,UAAU,YAAY,aAAa,QAAQ,aAAa,UAAA,CAAW,YAAY;CACrF,MAAM,QAA0B,CAAC;CACjC,MAAM,qBAAqB,SAAoB;EAC7C,MAAM,OAAO,SAAS,WAAW,eAAe,SAAS,aAAa,iBAAiB;EACvF,IAAI,QAAQ,gBAAgB;GAC1B,QAAQ,eAAe;IAAE;IAAM;IAAM;GAAc,CAAC;GACpD;EACF;EACA,IAAI,OAAO,QAAQ,WAAW,KAAK,qBAAqB,eAAe,GAAG,aAAa,IAAI;CAC7F;CAEA,IAAI,WAAW,UACb,MAAM,KAAK;EACT,OAAO,WAAW,aAAa,sBAAsB;EACrD,OAAA,GAAM,MAAA,cAAA,CAAc,WAAW,aAAa,aAAA,iBAAiB,aAAA,cAAc,EAAE,MAAM,GAAG,CAAC;EACvF,eAAe,kBAAkB,QAAQ;CAC3C,CAAC;CAEH,IAAI,WAAW,UACb,MAAM,KAAK;EAAE,OAAO;EAAgB,OAAA,GAAM,MAAA,cAAA,CAAc,aAAA,KAAK,EAAE,MAAM,GAAG,CAAC;EAAG,eAAe,kBAAkB,UAAU;CAAE,CAAC;CAE5H,IAAI,WAAW,YACb,MAAM,KAAK;EAAE,OAAO;EAAW,OAAA,GAAM,MAAA,cAAA,CAAc,aAAA,SAAS,EAAE,MAAM,GAAG,CAAC;EAAG,MAAM;EAAU,eAAe,kBAAkB,UAAU;CAAE,CAAC;CAE3I,OAAO;AACT"}

package/lib/index67.mjs

@@ -0,0 +1,52 @@
+import { createElement } from "react";
+import { Archive, ArchiveRestore, Ban, CheckCircle2 } from "lucide-react";
+//#region src/ui-library/gallery/status-actions/statusActions.ts
+/**
+* statusActions — Gallery-native lifecycle transition utilities.
+* Copied from shared/components/statusActions.tsx.
+* Updated to:
+*   - Define ActionMenuItem locally (instead of importing from ui.tsx)
+*   - Remove ActionMenu component import (not needed here)
+*   - Import only from react and lucide-react
+*/
+/**
+* Build lifecycle status-transition menu items for an entity.
+*/
+function statusMenuItems(current, isActive, onTransition, options = {}) {
+	const impactMessage = options.impactMessage ?? "Related records may be affected, including reporting links, assignments, pay profiles, payroll schedules, templates, components, or formulas.";
+	const status = (current ?? (isActive === false ? "inactive" : "active")).toLowerCase();
+	const items = [];
+	const confirmTransition = (next) => {
+		const verb = next === "active" ? "reactivate" : next === "inactive" ? "set inactive" : "archive";
+		if (options.requestConfirm) {
+			options.requestConfirm({
+				next,
+				verb,
+				impactMessage
+			});
+			return;
+		}
+		if (window.confirm(`Confirm ${verb} status change?\n\n${impactMessage}`)) onTransition(next);
+	};
+	if (status !== "active") items.push({
+		label: status === "archived" ? "Restore to active" : "Set active",
+		icon: createElement(status === "archived" ? ArchiveRestore : CheckCircle2, { size: 14 }),
+		onClick: () => confirmTransition("active")
+	});
+	if (status === "active") items.push({
+		label: "Set inactive",
+		icon: createElement(Ban, { size: 14 }),
+		onClick: () => confirmTransition("inactive")
+	});
+	if (status !== "archived") items.push({
+		label: "Archive",
+		icon: createElement(Archive, { size: 14 }),
+		tone: "danger",
+		onClick: () => confirmTransition("archived")
+	});
+	return items;
+}
+//#endregion
+export { statusMenuItems };
+
+//# sourceMappingURL=index67.mjs.map

package/lib/index67.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index67.mjs","names":[],"sources":["../src/ui-library/gallery/status-actions/statusActions.ts"],"sourcesContent":["/**\n * statusActions — Gallery-native lifecycle transition utilities.\n * Copied from shared/components/statusActions.tsx.\n * Updated to:\n *   - Define ActionMenuItem locally (instead of importing from ui.tsx)\n *   - Remove ActionMenu component import (not needed here)\n *   - Import only from react and lucide-react\n */\nimport { createElement } from 'react';\nimport { Archive, ArchiveRestore, Ban, CheckCircle2 } from 'lucide-react';\n\n// Inlined from shared/components/ui.tsx — only the subset needed here\nexport interface ActionMenuItem {\n  label: string;\n  icon?: React.ReactNode;\n  onClick: () => void;\n  tone?: 'default' | 'danger';\n  disabled?: boolean;\n  hidden?: boolean;\n}\n\nexport type Lifecycle = 'draft' | 'active' | 'inactive' | 'archived';\n\nexport interface StatusTransitionRequest {\n  next: Lifecycle;\n  verb: string;\n  impactMessage: string;\n}\n\nexport interface StatusMenuOptions {\n  impactMessage?: string;\n  requestConfirm?: (request: StatusTransitionRequest) => void;\n}\n\n/**\n * Build lifecycle status-transition menu items for an entity.\n */\nexport function statusMenuItems(\n  current: string | undefined,\n  isActive: boolean | undefined,\n  onTransition: (status: Lifecycle) => void,\n  options: StatusMenuOptions = {},\n): ActionMenuItem[] {\n  const impactMessage =\n    options.impactMessage ??\n    'Related records may be affected, including reporting links, assignments, pay profiles, payroll schedules, templates, components, or formulas.';\n  const status = (current ?? (isActive === false ? 'inactive' : 'active')).toLowerCase();\n  const items: ActionMenuItem[] = [];\n  const confirmTransition = (next: Lifecycle) => {\n    const verb = next === 'active' ? 'reactivate' : next === 'inactive' ? 'set inactive' : 'archive';\n    if (options.requestConfirm) {\n      options.requestConfirm({ next, verb, impactMessage });\n      return;\n    }\n    if (window.confirm(`Confirm ${verb} status change?\\n\\n${impactMessage}`)) onTransition(next);\n  };\n\n  if (status !== 'active') {\n    items.push({\n      label: status === 'archived' ? 'Restore to active' : 'Set active',\n      icon: createElement(status === 'archived' ? ArchiveRestore : CheckCircle2, { size: 14 }),\n      onClick: () => confirmTransition('active'),\n    });\n  }\n  if (status === 'active') {\n    items.push({ label: 'Set inactive', icon: createElement(Ban, { size: 14 }), onClick: () => confirmTransition('inactive') });\n  }\n  if (status !== 'archived') {\n    items.push({ label: 'Archive', icon: createElement(Archive, { size: 14 }), tone: 'danger', onClick: () => confirmTransition('archived') });\n  }\n  return items;\n}\n"],"mappings":";;;;;;;;;;;;;;AAqCA,SAAgB,gBACd,SACA,UACA,cACA,UAA6B,CAAC,GACZ;CAClB,MAAM,gBACJ,QAAQ,iBACR;CACF,MAAM,UAAU,YAAY,aAAa,QAAQ,aAAa,UAAA,CAAW,YAAY;CACrF,MAAM,QAA0B,CAAC;CACjC,MAAM,qBAAqB,SAAoB;EAC7C,MAAM,OAAO,SAAS,WAAW,eAAe,SAAS,aAAa,iBAAiB;EACvF,IAAI,QAAQ,gBAAgB;GAC1B,QAAQ,eAAe;IAAE;IAAM;IAAM;GAAc,CAAC;GACpD;EACF;EACA,IAAI,OAAO,QAAQ,WAAW,KAAK,qBAAqB,eAAe,GAAG,aAAa,IAAI;CAC7F;CAEA,IAAI,WAAW,UACb,MAAM,KAAK;EACT,OAAO,WAAW,aAAa,sBAAsB;EACrD,MAAM,cAAc,WAAW,aAAa,iBAAiB,cAAc,EAAE,MAAM,GAAG,CAAC;EACvF,eAAe,kBAAkB,QAAQ;CAC3C,CAAC;CAEH,IAAI,WAAW,UACb,MAAM,KAAK;EAAE,OAAO;EAAgB,MAAM,cAAc,KAAK,EAAE,MAAM,GAAG,CAAC;EAAG,eAAe,kBAAkB,UAAU;CAAE,CAAC;CAE5H,IAAI,WAAW,YACb,MAAM,KAAK;EAAE,OAAO;EAAW,MAAM,cAAc,SAAS,EAAE,MAAM,GAAG,CAAC;EAAG,MAAM;EAAU,eAAe,kBAAkB,UAAU;CAAE,CAAC;CAE3I,OAAO;AACT"}

package/lib/index68.cjs

@@ -0,0 +1,125 @@
+//#region src/ui-library/tokens/colors.ts
+var colors_exports = /* @__PURE__ */ require("./index2.cjs").__exportAll({
+	border: () => border,
+	focus: () => focus,
+	interactive: () => interactive,
+	surface: () => surface,
+	text: () => text,
+	tone: () => tone
+});
+/**
+* DIWA Color Tokens
+*
+* Formalizes the color vocabulary identified in the Phase 9 audit.
+* These are string constants that map to Tailwind utility class fragments.
+*
+* Rules:
+*   - All values are Tailwind class suffixes, not raw hex values.
+*   - Brand primitives (brand-navy, brand-blue, brand-sky) are defined in
+*     tailwind.config.js and are the single source of truth for hex values.
+*   - Semantic palette (slate, rose, emerald, amber, sky) uses standard Tailwind.
+*   - Do NOT introduce CSS custom properties here.
+*   - Do NOT import this at runtime inside components yet — this file is the
+*     reference foundation for future component customization.
+*
+* Usage (future):
+*   import { focus, border } from '@/ui-library/tokens/colors';
+*   className={`focus-visible:ring-2 focus-visible:ring-${focus.interactive}`}
+*/
+var interactive = {
+	/** Core interactive — brand-blue (#034EA2) */
+	default: "brand-blue",
+	/** Hover/deepen target — brand-navy (#00377B) */
+	hover: "brand-navy",
+	/** Lighter accent — brand-sky (#2D8ACA) */
+	accent: "brand-sky"
+};
+var surface = {
+	/**
+	* Page background — registered in tailwind.config.js as 'surface-page' (#f4f6f9).
+	* Use: bg-surface-page
+	*/
+	page: "surface-page",
+	/**
+	* All overlay backdrops (Modal, Dialog, Drawer).
+	* Use: bg-brand-navy/50 backdrop-blur-sm
+	*/
+	overlay: "brand-navy/50"
+};
+var border = {
+	/** Default border on inputs, cards, popovers — slate-200 */
+	base: "slate-200",
+	/** Header/footer separator lines — slate-100 */
+	separator: "slate-100"
+};
+var text = {
+	/** Primary body text — slate-900 */
+	body: "slate-900",
+	/** Secondary/label text — slate-500 */
+	secondary: "slate-500",
+	/** Muted/placeholder text — slate-400 */
+	muted: "slate-400",
+	/** Disabled text — slate-300 */
+	disabled: "slate-300"
+};
+var focus = {
+	/**
+	* Field wrapper focus ring.
+	* Applied via focus-within on Input/Select/Textarea wrappers.
+	* Intentionally lighter than interactive focus — it's a containing ring.
+	*/
+	field: "focus-within:ring-2 focus-within:ring-brand-blue/15",
+	/**
+	* Standard interactive focus ring.
+	* Applied via focus-visible on all buttons, links, and controls.
+	* Use: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30
+	*/
+	interactive: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+	/**
+	* Danger interactive focus ring.
+	* Applied on destructive buttons.
+	* Use: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300
+	*/
+	danger: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300"
+};
+var tone = {
+	danger: {
+		bg: "rose-50",
+		border: "rose-200",
+		text: "rose-700",
+		icon: "rose-500"
+	},
+	success: {
+		bg: "emerald-50",
+		border: "emerald-200",
+		text: "emerald-700",
+		icon: "emerald-500"
+	},
+	warning: {
+		bg: "amber-50",
+		border: "amber-200",
+		text: "amber-700",
+		icon: "amber-500"
+	},
+	info: {
+		bg: "sky-50",
+		border: "sky-200",
+		text: "sky-700",
+		icon: "sky-500"
+	}
+};
+//#endregion
+exports.border = border;
+Object.defineProperty(exports, "colors_exports", {
+	enumerable: true,
+	get: function() {
+		return colors_exports;
+	}
+});
+exports.focus = focus;
+exports.interactive = interactive;
+exports.surface = surface;
+exports.text = text;
+exports.tone = tone;
+
+//# sourceMappingURL=index68.cjs.map

package/lib/index68.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index68.cjs","names":[],"sources":["../src/ui-library/tokens/colors.ts"],"sourcesContent":["/**\n * DIWA Color Tokens\n *\n * Formalizes the color vocabulary identified in the Phase 9 audit.\n * These are string constants that map to Tailwind utility class fragments.\n *\n * Rules:\n *   - All values are Tailwind class suffixes, not raw hex values.\n *   - Brand primitives (brand-navy, brand-blue, brand-sky) are defined in\n *     tailwind.config.js and are the single source of truth for hex values.\n *   - Semantic palette (slate, rose, emerald, amber, sky) uses standard Tailwind.\n *   - Do NOT introduce CSS custom properties here.\n *   - Do NOT import this at runtime inside components yet — this file is the\n *     reference foundation for future component customization.\n *\n * Usage (future):\n *   import { focus, border } from '@/ui-library/tokens/colors';\n *   className={`focus-visible:ring-2 focus-visible:ring-${focus.interactive}`}\n */\n\n// ── Interactive ───────────────────────────────────────────────────────────────\n// Primary interactive color. Used for buttons, links, active indicators.\n\nexport const interactive = {\n  /** Core interactive — brand-blue (#034EA2) */\n  default:  'brand-blue',\n  /** Hover/deepen target — brand-navy (#00377B) */\n  hover:    'brand-navy',\n  /** Lighter accent — brand-sky (#2D8ACA) */\n  accent:   'brand-sky',\n} as const;\n\n// ── Surface ───────────────────────────────────────────────────────────────────\n// Page and overlay background colors.\n\nexport const surface = {\n  /**\n   * Page background — registered in tailwind.config.js as 'surface-page' (#f4f6f9).\n   * Use: bg-surface-page\n   */\n  page:     'surface-page',\n  /**\n   * All overlay backdrops (Modal, Dialog, Drawer).\n   * Use: bg-brand-navy/50 backdrop-blur-sm\n   */\n  overlay:  'brand-navy/50',\n} as const;\n\n// ── Border ────────────────────────────────────────────────────────────────────\n\nexport const border = {\n  /** Default border on inputs, cards, popovers — slate-200 */\n  base:       'slate-200',\n  /** Header/footer separator lines — slate-100 */\n  separator:  'slate-100',\n} as const;\n\n// ── Text ──────────────────────────────────────────────────────────────────────\n\nexport const text = {\n  /** Primary body text — slate-900 */\n  body:       'slate-900',\n  /** Secondary/label text — slate-500 */\n  secondary:  'slate-500',\n  /** Muted/placeholder text — slate-400 */\n  muted:      'slate-400',\n  /** Disabled text — slate-300 */\n  disabled:   'slate-300',\n} as const;\n\n// ── Focus rings ───────────────────────────────────────────────────────────────\n// Full Tailwind class strings — used directly in className.\n// Three distinct levels:\n//   field     — focus-within on form field wrappers (lightest, /15)\n//   default   — keyboard focus on all interactive elements (/30)\n//   danger    — keyboard focus on destructive elements (rose-300)\n\nexport const focus = {\n  /**\n   * Field wrapper focus ring.\n   * Applied via focus-within on Input/Select/Textarea wrappers.\n   * Intentionally lighter than interactive focus — it's a containing ring.\n   */\n  field:       'focus-within:ring-2 focus-within:ring-brand-blue/15',\n\n  /**\n   * Standard interactive focus ring.\n   * Applied via focus-visible on all buttons, links, and controls.\n   * Use: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\n   */\n  interactive: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n\n  /**\n   * Danger interactive focus ring.\n   * Applied on destructive buttons.\n   * Use: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300\n   */\n  danger:      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300',\n} as const;\n\n// ── Semantic tones ────────────────────────────────────────────────────────────\n// Documented here as the canonical DIWA tone vocabulary.\n// Not intended to be used directly — components own their own tone maps.\n\nexport const tone = {\n  danger:  { bg: 'rose-50',    border: 'rose-200',    text: 'rose-700',    icon: 'rose-500'    },\n  success: { bg: 'emerald-50', border: 'emerald-200', text: 'emerald-700', icon: 'emerald-500' },\n  warning: { bg: 'amber-50',   border: 'amber-200',   text: 'amber-700',   icon: 'amber-500'   },\n  info:    { bg: 'sky-50',     border: 'sky-200',     text: 'sky-700',     icon: 'sky-500'     },\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAa,cAAc;;CAEzB,SAAU;;CAEV,OAAU;;CAEV,QAAU;AACZ;AAKA,IAAa,UAAU;;;;;CAKrB,MAAU;;;;;CAKV,SAAU;AACZ;AAIA,IAAa,SAAS;;CAEpB,MAAY;;CAEZ,WAAY;AACd;AAIA,IAAa,OAAO;;CAElB,MAAY;;CAEZ,WAAY;;CAEZ,OAAY;;CAEZ,UAAY;AACd;AASA,IAAa,QAAQ;;;;;;CAMnB,OAAa;;;;;;CAOb,aAAa;;;;;;CAOb,QAAa;AACf;AAMA,IAAa,OAAO;CAClB,QAAS;EAAE,IAAI;EAAc,QAAQ;EAAe,MAAM;EAAe,MAAM;CAAc;CAC7F,SAAS;EAAE,IAAI;EAAc,QAAQ;EAAe,MAAM;EAAe,MAAM;CAAc;CAC7F,SAAS;EAAE,IAAI;EAAc,QAAQ;EAAe,MAAM;EAAe,MAAM;CAAc;CAC7F,MAAS;EAAE,IAAI;EAAc,QAAQ;EAAe,MAAM;EAAe,MAAM;CAAc;AAC/F"}

package/lib/index68.mjs

@@ -0,0 +1,115 @@
+import { __exportAll } from "./index2.mjs";
+//#region src/ui-library/tokens/colors.ts
+var colors_exports = /* @__PURE__ */ __exportAll({
+	border: () => border,
+	focus: () => focus,
+	interactive: () => interactive,
+	surface: () => surface,
+	text: () => text,
+	tone: () => tone
+});
+/**
+* DIWA Color Tokens
+*
+* Formalizes the color vocabulary identified in the Phase 9 audit.
+* These are string constants that map to Tailwind utility class fragments.
+*
+* Rules:
+*   - All values are Tailwind class suffixes, not raw hex values.
+*   - Brand primitives (brand-navy, brand-blue, brand-sky) are defined in
+*     tailwind.config.js and are the single source of truth for hex values.
+*   - Semantic palette (slate, rose, emerald, amber, sky) uses standard Tailwind.
+*   - Do NOT introduce CSS custom properties here.
+*   - Do NOT import this at runtime inside components yet — this file is the
+*     reference foundation for future component customization.
+*
+* Usage (future):
+*   import { focus, border } from '@/ui-library/tokens/colors';
+*   className={`focus-visible:ring-2 focus-visible:ring-${focus.interactive}`}
+*/
+var interactive = {
+	/** Core interactive — brand-blue (#034EA2) */
+	default: "brand-blue",
+	/** Hover/deepen target — brand-navy (#00377B) */
+	hover: "brand-navy",
+	/** Lighter accent — brand-sky (#2D8ACA) */
+	accent: "brand-sky"
+};
+var surface = {
+	/**
+	* Page background — registered in tailwind.config.js as 'surface-page' (#f4f6f9).
+	* Use: bg-surface-page
+	*/
+	page: "surface-page",
+	/**
+	* All overlay backdrops (Modal, Dialog, Drawer).
+	* Use: bg-brand-navy/50 backdrop-blur-sm
+	*/
+	overlay: "brand-navy/50"
+};
+var border = {
+	/** Default border on inputs, cards, popovers — slate-200 */
+	base: "slate-200",
+	/** Header/footer separator lines — slate-100 */
+	separator: "slate-100"
+};
+var text = {
+	/** Primary body text — slate-900 */
+	body: "slate-900",
+	/** Secondary/label text — slate-500 */
+	secondary: "slate-500",
+	/** Muted/placeholder text — slate-400 */
+	muted: "slate-400",
+	/** Disabled text — slate-300 */
+	disabled: "slate-300"
+};
+var focus = {
+	/**
+	* Field wrapper focus ring.
+	* Applied via focus-within on Input/Select/Textarea wrappers.
+	* Intentionally lighter than interactive focus — it's a containing ring.
+	*/
+	field: "focus-within:ring-2 focus-within:ring-brand-blue/15",
+	/**
+	* Standard interactive focus ring.
+	* Applied via focus-visible on all buttons, links, and controls.
+	* Use: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30
+	*/
+	interactive: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+	/**
+	* Danger interactive focus ring.
+	* Applied on destructive buttons.
+	* Use: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300
+	*/
+	danger: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300"
+};
+var tone = {
+	danger: {
+		bg: "rose-50",
+		border: "rose-200",
+		text: "rose-700",
+		icon: "rose-500"
+	},
+	success: {
+		bg: "emerald-50",
+		border: "emerald-200",
+		text: "emerald-700",
+		icon: "emerald-500"
+	},
+	warning: {
+		bg: "amber-50",
+		border: "amber-200",
+		text: "amber-700",
+		icon: "amber-500"
+	},
+	info: {
+		bg: "sky-50",
+		border: "sky-200",
+		text: "sky-700",
+		icon: "sky-500"
+	}
+};
+//#endregion
+export { border, colors_exports, focus, interactive, surface, text, tone };
+
+//# sourceMappingURL=index68.mjs.map

package/lib/index68.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index68.mjs","names":[],"sources":["../src/ui-library/tokens/colors.ts"],"sourcesContent":["/**\n * DIWA Color Tokens\n *\n * Formalizes the color vocabulary identified in the Phase 9 audit.\n * These are string constants that map to Tailwind utility class fragments.\n *\n * Rules:\n *   - All values are Tailwind class suffixes, not raw hex values.\n *   - Brand primitives (brand-navy, brand-blue, brand-sky) are defined in\n *     tailwind.config.js and are the single source of truth for hex values.\n *   - Semantic palette (slate, rose, emerald, amber, sky) uses standard Tailwind.\n *   - Do NOT introduce CSS custom properties here.\n *   - Do NOT import this at runtime inside components yet — this file is the\n *     reference foundation for future component customization.\n *\n * Usage (future):\n *   import { focus, border } from '@/ui-library/tokens/colors';\n *   className={`focus-visible:ring-2 focus-visible:ring-${focus.interactive}`}\n */\n\n// ── Interactive ───────────────────────────────────────────────────────────────\n// Primary interactive color. Used for buttons, links, active indicators.\n\nexport const interactive = {\n  /** Core interactive — brand-blue (#034EA2) */\n  default:  'brand-blue',\n  /** Hover/deepen target — brand-navy (#00377B) */\n  hover:    'brand-navy',\n  /** Lighter accent — brand-sky (#2D8ACA) */\n  accent:   'brand-sky',\n} as const;\n\n// ── Surface ───────────────────────────────────────────────────────────────────\n// Page and overlay background colors.\n\nexport const surface = {\n  /**\n   * Page background — registered in tailwind.config.js as 'surface-page' (#f4f6f9).\n   * Use: bg-surface-page\n   */\n  page:     'surface-page',\n  /**\n   * All overlay backdrops (Modal, Dialog, Drawer).\n   * Use: bg-brand-navy/50 backdrop-blur-sm\n   */\n  overlay:  'brand-navy/50',\n} as const;\n\n// ── Border ────────────────────────────────────────────────────────────────────\n\nexport const border = {\n  /** Default border on inputs, cards, popovers — slate-200 */\n  base:       'slate-200',\n  /** Header/footer separator lines — slate-100 */\n  separator:  'slate-100',\n} as const;\n\n// ── Text ──────────────────────────────────────────────────────────────────────\n\nexport const text = {\n  /** Primary body text — slate-900 */\n  body:       'slate-900',\n  /** Secondary/label text — slate-500 */\n  secondary:  'slate-500',\n  /** Muted/placeholder text — slate-400 */\n  muted:      'slate-400',\n  /** Disabled text — slate-300 */\n  disabled:   'slate-300',\n} as const;\n\n// ── Focus rings ───────────────────────────────────────────────────────────────\n// Full Tailwind class strings — used directly in className.\n// Three distinct levels:\n//   field     — focus-within on form field wrappers (lightest, /15)\n//   default   — keyboard focus on all interactive elements (/30)\n//   danger    — keyboard focus on destructive elements (rose-300)\n\nexport const focus = {\n  /**\n   * Field wrapper focus ring.\n   * Applied via focus-within on Input/Select/Textarea wrappers.\n   * Intentionally lighter than interactive focus — it's a containing ring.\n   */\n  field:       'focus-within:ring-2 focus-within:ring-brand-blue/15',\n\n  /**\n   * Standard interactive focus ring.\n   * Applied via focus-visible on all buttons, links, and controls.\n   * Use: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\n   */\n  interactive: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n\n  /**\n   * Danger interactive focus ring.\n   * Applied on destructive buttons.\n   * Use: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300\n   */\n  danger:      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300',\n} as const;\n\n// ── Semantic tones ────────────────────────────────────────────────────────────\n// Documented here as the canonical DIWA tone vocabulary.\n// Not intended to be used directly — components own their own tone maps.\n\nexport const tone = {\n  danger:  { bg: 'rose-50',    border: 'rose-200',    text: 'rose-700',    icon: 'rose-500'    },\n  success: { bg: 'emerald-50', border: 'emerald-200', text: 'emerald-700', icon: 'emerald-500' },\n  warning: { bg: 'amber-50',   border: 'amber-200',   text: 'amber-700',   icon: 'amber-500'   },\n  info:    { bg: 'sky-50',     border: 'sky-200',     text: 'sky-700',     icon: 'sky-500'     },\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAa,cAAc;;CAEzB,SAAU;;CAEV,OAAU;;CAEV,QAAU;AACZ;AAKA,IAAa,UAAU;;;;;CAKrB,MAAU;;;;;CAKV,SAAU;AACZ;AAIA,IAAa,SAAS;;CAEpB,MAAY;;CAEZ,WAAY;AACd;AAIA,IAAa,OAAO;;CAElB,MAAY;;CAEZ,WAAY;;CAEZ,OAAY;;CAEZ,UAAY;AACd;AASA,IAAa,QAAQ;;;;;;CAMnB,OAAa;;;;;;CAOb,aAAa;;;;;;CAOb,QAAa;AACf;AAMA,IAAa,OAAO;CAClB,QAAS;EAAE,IAAI;EAAc,QAAQ;EAAe,MAAM;EAAe,MAAM;CAAc;CAC7F,SAAS;EAAE,IAAI;EAAc,QAAQ;EAAe,MAAM;EAAe,MAAM;CAAc;CAC7F,SAAS;EAAE,IAAI;EAAc,QAAQ;EAAe,MAAM;EAAe,MAAM;CAAc;CAC7F,MAAS;EAAE,IAAI;EAAc,QAAQ;EAAe,MAAM;EAAe,MAAM;CAAc;AAC/F"}