erp-pro-ui 0.1.8 → 0.2.0

package/dist/chunks/color-palette-DnX1sODj.mjs

@@ -1,782 +0,0 @@
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/data-display/color-palette/ColorPalette.tsx
-var lightThemeGroups = [
-	{
-		name: "Active Accent Scale",
-		colors: [
-			{
-				name: "primary-50",
-				value: "var(--ds-accent-50)",
-				textColor: "dark"
-			},
-			{
-				name: "primary-100",
-				value: "var(--ds-accent-100)",
-				textColor: "dark"
-			},
-			{
-				name: "primary-200",
-				value: "var(--ds-accent-200)",
-				textColor: "dark"
-			},
-			{
-				name: "primary-300",
-				value: "var(--ds-accent-300)",
-				textColor: "dark"
-			},
-			{
-				name: "primary-400",
-				value: "var(--ds-accent-400)",
-				textColor: "light"
-			},
-			{
-				name: "primary-500",
-				value: "var(--ds-accent-500)",
-				textColor: "light"
-			},
-			{
-				name: "primary-600",
-				value: "var(--ds-accent-600)",
-				textColor: "light"
-			},
-			{
-				name: "primary-700",
-				value: "var(--ds-accent-700)",
-				textColor: "light"
-			},
-			{
-				name: "primary-800",
-				value: "var(--ds-accent-800)",
-				textColor: "light"
-			},
-			{
-				name: "primary-900",
-				value: "var(--ds-accent-900)",
-				textColor: "light"
-			}
-		]
-	},
-	{
-		name: "Semantic Surfaces",
-		colors: [
-			{
-				name: "bg-ds-canvas",
-				value: "var(--ds-color-bg-canvas)",
-				textColor: "dark"
-			},
-			{
-				name: "bg-ds-surface-1",
-				value: "var(--ds-color-bg-surface)",
-				textColor: "dark"
-			},
-			{
-				name: "bg-ds-surface-2",
-				value: "var(--ds-color-bg-elevated)",
-				textColor: "dark"
-			},
-			{
-				name: "bg-ds-surface-3",
-				value: "var(--ds-color-bg-ds-surface-3)",
-				textColor: "dark"
-			},
-			{
-				name: "accent-subtle",
-				value: "var(--ds-color-accent-subtle)",
-				textColor: "dark"
-			}
-		]
-	},
-	{
-		name: "Semantic Foreground",
-		colors: [
-			{
-				name: "fg",
-				value: "var(--ds-color-fg)",
-				textColor: "light"
-			},
-			{
-				name: "fg-muted",
-				value: "var(--ds-color-fg-muted)",
-				textColor: "light"
-			},
-			{
-				name: "fg-subtle",
-				value: "var(--ds-color-fg-subtle)",
-				textColor: "light"
-			},
-			{
-				name: "on-accent",
-				value: "var(--ds-color-on-accent)",
-				textColor: "dark"
-			}
-		]
-	},
-	{
-		name: "Semantic Borders",
-		colors: [
-			{
-				name: "border",
-				value: "var(--ds-color-border)",
-				textColor: "dark"
-			},
-			{
-				name: "border-strong",
-				value: "var(--ds-color-border-strong)",
-				textColor: "dark"
-			},
-			{
-				name: "border-muted",
-				value: "var(--ds-color-border-muted)",
-				textColor: "dark"
-			},
-			{
-				name: "border-field",
-				value: "var(--ds-color-border-field)",
-				textColor: "dark"
-			},
-			{
-				name: "focus-ring",
-				value: "var(--ds-color-focus-ring)",
-				textColor: "dark"
-			}
-		]
-	},
-	{
-		name: "Semantic Status",
-		colors: [
-			{
-				name: "success",
-				value: "#1eb564",
-				textColor: "light"
-			},
-			{
-				name: "warning",
-				value: "#ff9500",
-				textColor: "dark"
-			},
-			{
-				name: "danger",
-				value: "#e31d1c",
-				textColor: "light"
-			},
-			{
-				name: "info",
-				value: "#0085c4",
-				textColor: "light"
-			},
-			{
-				name: "disabled",
-				value: "#d2d2d3",
-				textColor: "dark"
-			}
-		]
-	},
-	{
-		name: "Foundation Tokens",
-		colors: [
-			{
-				name: "--ds-primary",
-				value: "var(--ds-primary)",
-				textColor: "light"
-			},
-			{
-				name: "--ds-surface-canvas",
-				value: "var(--ds-surface-canvas)",
-				textColor: "dark"
-			},
-			{
-				name: "--ds-surface-1",
-				value: "var(--ds-surface-1)",
-				textColor: "dark"
-			},
-			{
-				name: "--ds-text-1",
-				value: "var(--ds-text-1)",
-				textColor: "light"
-			},
-			{
-				name: "--ds-border-1",
-				value: "var(--ds-border-1)",
-				textColor: "dark"
-			}
-		]
-	}
-];
-var darkThemeGroups = [
-	{
-		name: "Active Accent Scale (Dark)",
-		colors: [
-			{
-				name: "primary-50",
-				value: "var(--ds-accent-50)",
-				textColor: "dark"
-			},
-			{
-				name: "primary-100",
-				value: "var(--ds-accent-100)",
-				textColor: "dark"
-			},
-			{
-				name: "primary-200",
-				value: "var(--ds-accent-200)",
-				textColor: "dark"
-			},
-			{
-				name: "primary-300",
-				value: "var(--ds-accent-300)",
-				textColor: "dark"
-			},
-			{
-				name: "primary-400",
-				value: "var(--ds-accent-400)",
-				textColor: "light"
-			},
-			{
-				name: "primary-500",
-				value: "var(--ds-accent-500)",
-				textColor: "light"
-			},
-			{
-				name: "primary-600",
-				value: "var(--ds-accent-600)",
-				textColor: "light"
-			},
-			{
-				name: "primary-700",
-				value: "var(--ds-accent-700)",
-				textColor: "light"
-			},
-			{
-				name: "primary-800",
-				value: "var(--ds-accent-800)",
-				textColor: "light"
-			},
-			{
-				name: "primary-900",
-				value: "var(--ds-accent-900)",
-				textColor: "light"
-			}
-		]
-	},
-	{
-		name: "Semantic Surfaces (Dark)",
-		colors: [
-			{
-				name: "bg-ds-canvas",
-				value: "var(--ds-color-bg-canvas)",
-				textColor: "light"
-			},
-			{
-				name: "bg-ds-surface-1",
-				value: "var(--ds-color-bg-surface)",
-				textColor: "light"
-			},
-			{
-				name: "bg-ds-surface-2",
-				value: "var(--ds-color-bg-elevated)",
-				textColor: "light"
-			},
-			{
-				name: "bg-ds-surface-3",
-				value: "var(--ds-color-bg-ds-surface-3)",
-				textColor: "light"
-			},
-			{
-				name: "accent-subtle",
-				value: "var(--ds-color-accent-subtle)",
-				textColor: "light"
-			}
-		]
-	},
-	{
-		name: "Semantic Foreground (Dark)",
-		colors: [
-			{
-				name: "fg",
-				value: "var(--ds-color-fg)",
-				textColor: "dark"
-			},
-			{
-				name: "fg-muted",
-				value: "var(--ds-color-fg-muted)",
-				textColor: "dark"
-			},
-			{
-				name: "fg-subtle",
-				value: "var(--ds-color-fg-subtle)",
-				textColor: "dark"
-			},
-			{
-				name: "on-accent",
-				value: "var(--ds-color-on-accent)",
-				textColor: "dark"
-			}
-		]
-	},
-	{
-		name: "Semantic Borders (Dark)",
-		colors: [
-			{
-				name: "border",
-				value: "var(--ds-color-border)",
-				textColor: "light"
-			},
-			{
-				name: "border-strong",
-				value: "var(--ds-color-border-strong)",
-				textColor: "light"
-			},
-			{
-				name: "border-muted",
-				value: "var(--ds-color-border-muted)",
-				textColor: "light"
-			},
-			{
-				name: "border-field",
-				value: "var(--ds-color-border-field)",
-				textColor: "light"
-			},
-			{
-				name: "focus-ring",
-				value: "var(--ds-color-focus-ring)",
-				textColor: "dark"
-			}
-		]
-	},
-	{
-		name: "Semantic Status (Dark)",
-		colors: [
-			{
-				name: "success",
-				value: "#22c55e",
-				textColor: "light"
-			},
-			{
-				name: "warning",
-				value: "#f59e42",
-				textColor: "dark"
-			},
-			{
-				name: "danger",
-				value: "#ef4444",
-				textColor: "light"
-			},
-			{
-				name: "info",
-				value: "#38bdf8",
-				textColor: "dark"
-			},
-			{
-				name: "disabled",
-				value: "#4b5563",
-				textColor: "light"
-			}
-		]
-	},
-	{
-		name: "Foundation Tokens (Dark)",
-		colors: [
-			{
-				name: "--ds-primary",
-				value: "var(--ds-primary)",
-				textColor: "light"
-			},
-			{
-				name: "--ds-surface-canvas",
-				value: "var(--ds-surface-canvas)",
-				textColor: "light"
-			},
-			{
-				name: "--ds-surface-1",
-				value: "var(--ds-surface-1)",
-				textColor: "light"
-			},
-			{
-				name: "--ds-text-1",
-				value: "var(--ds-text-1)",
-				textColor: "dark"
-			},
-			{
-				name: "--ds-border-1",
-				value: "var(--ds-border-1)",
-				textColor: "light"
-			}
-		]
-	}
-];
-var gradientGroups = [
-	{
-		name: "Semantic Gradients",
-		colors: [
-			{
-				name: "accent-gradient-start",
-				value: "#9333ea",
-				textColor: "light"
-			},
-			{
-				name: "accent-gradient-end",
-				value: "#7e22ce",
-				textColor: "light"
-			},
-			{
-				name: "accent-secondary",
-				value: "#4318ff",
-				textColor: "light"
-			}
-		]
-	},
-	{
-		name: "Status Gradients",
-		colors: [
-			{
-				name: "success-gradient-start",
-				value: "#22c55e",
-				textColor: "light"
-			},
-			{
-				name: "success-gradient-end",
-				value: "#16a34a",
-				textColor: "light"
-			},
-			{
-				name: "warning-gradient-start",
-				value: "#f59e0b",
-				textColor: "dark"
-			},
-			{
-				name: "warning-gradient-end",
-				value: "#d97706",
-				textColor: "light"
-			},
-			{
-				name: "error-gradient-start",
-				value: "#ef4444",
-				textColor: "light"
-			},
-			{
-				name: "error-gradient-end",
-				value: "#dc2626",
-				textColor: "light"
-			}
-		]
-	},
-	{
-		name: "Glass / Opacity",
-		colors: [
-			{
-				name: "glass-white-90",
-				value: "rgba(255,255,255,0.9)",
-				textColor: "dark"
-			},
-			{
-				name: "glass-white-70",
-				value: "rgba(255,255,255,0.7)",
-				textColor: "dark"
-			},
-			{
-				name: "glass-white-50",
-				value: "rgba(255,255,255,0.5)",
-				textColor: "dark"
-			},
-			{
-				name: "glass-white-20",
-				value: "rgba(255,255,255,0.2)",
-				textColor: "dark"
-			},
-			{
-				name: "glass-white-10",
-				value: "rgba(255,255,255,0.1)",
-				textColor: "dark"
-			},
-			{
-				name: "glass-black-90",
-				value: "rgba(0,0,0,0.9)",
-				textColor: "light"
-			},
-			{
-				name: "glass-black-70",
-				value: "rgba(0,0,0,0.7)",
-				textColor: "light"
-			},
-			{
-				name: "glass-black-50",
-				value: "rgba(0,0,0,0.5)",
-				textColor: "light"
-			},
-			{
-				name: "glass-black-20",
-				value: "rgba(0,0,0,0.2)",
-				textColor: "light"
-			},
-			{
-				name: "glass-black-10",
-				value: "rgba(0,0,0,0.1)",
-				textColor: "light"
-			}
-		]
-	}
-];
-function ColorSwatchItem({ color }) {
-	const swatchRef = React.useRef(null);
-	const [resolvedValue, setResolvedValue] = React.useState(color.value);
-	React.useEffect(() => {
-		if (!swatchRef.current) return;
-		if (color.value.startsWith("var(")) {
-			const computedBackground = getComputedStyle(swatchRef.current).backgroundColor;
-			setResolvedValue(computedBackground || color.value);
-			return;
-		}
-		setResolvedValue(color.value);
-	}, [color.value]);
-	const copyToClipboard = () => {
-		navigator.clipboard.writeText(resolvedValue);
-	};
-	const swatchLabel = color.value.startsWith("var(") ? "LIVE" : color.value.length <= 9 ? color.value.toUpperCase() : "RGBA";
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col items-center gap-2 cursor-pointer transition-transform hover:scale-105",
-		onClick: copyToClipboard,
-		title: "Click to copy",
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				ref: swatchRef,
-				className: "w-20 h-20 rounded-lg shadow-md border border-ds-border-2 flex items-center justify-center text-xs font-mono",
-				style: { backgroundColor: color.value },
-				children: /* @__PURE__ */ jsx("span", {
-					className: "font-semibold text-ds-1 mix-blend-difference",
-					children: swatchLabel
-				})
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "text-xs font-medium text-ds-2 text-center max-w-20",
-				children: color.name
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "text-[10px] font-mono text-ds-3 text-center max-w-20 break-all",
-				children: resolvedValue
-			})
-		]
-	});
-}
-function GradientPreview() {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mt-8",
-		children: [/* @__PURE__ */ jsx("h3", {
-			className: "text-lg font-semibold text-ds-1 mb-4",
-			children: "Semantic Gradient Examples"
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-2",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium",
-						style: { background: "linear-gradient(135deg, #9333ea, #7e22ce)" },
-						children: "Accent Gradient"
-					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-ds-3",
-						children: "linear-gradient(135deg, #9333ea, #7e22ce)"
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-2",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium",
-						style: { background: "linear-gradient(135deg, #9333ea, #4318ff)" },
-						children: "Accent to Brand Primary"
-					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-ds-3",
-						children: "linear-gradient(135deg, #9333ea, #4318ff)"
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-2",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium",
-						style: { background: "linear-gradient(135deg, #22c55e, #16a34a)" },
-						children: "Success Gradient"
-					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-ds-3",
-						children: "linear-gradient(135deg, #22c55e, #16a34a)"
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-2",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-ds-1 font-medium",
-						style: { background: "linear-gradient(135deg, #fbbf24, #f59e0b)" },
-						children: "Warning Gradient"
-					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-ds-3",
-						children: "linear-gradient(135deg, #fbbf24, #f59e0b)"
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-2",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium",
-						style: { background: "linear-gradient(135deg, #ef4444, #dc2626)" },
-						children: "Error Gradient"
-					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-ds-3",
-						children: "linear-gradient(135deg, #ef4444, #dc2626)"
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-2",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium backdrop-blur-xl border border-ds-border-2/40",
-						style: { background: "rgba(147, 51, 234, 0.7)" },
-						children: "Glass Effect"
-					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-ds-3",
-						children: "rgba(147, 51, 234, 0.7) + backdrop-blur"
-					})]
-				})
-			]
-		})]
-	});
-}
-function UsageExamples() {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mt-8 p-6 bg-ds-surface-2 rounded-xl",
-		children: [/* @__PURE__ */ jsx("h3", {
-			className: "text-lg font-semibold text-ds-1 mb-4",
-			children: "Recommended Usage"
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "space-y-4",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2",
-					children: [/* @__PURE__ */ jsx("h4", {
-						className: "font-medium text-ds-1 mb-2",
-						children: "Semantic utilities first"
-					}), /* @__PURE__ */ jsx("pre", {
-						className: "text-xs font-mono text-ds-2 overflow-x-auto",
-						children: `import { Button } from "erp-pro-ui";
-
-<section className="bg-ds-surface-1 text-ds-1 border border-ds-border-2 rounded-2xl p-6">
-  <h2 className="text-ds-1 text-xl font-semibold">Semantic theme</h2>
-  <p className="text-ds-2">Use utilities generated by colors.css.</p>
-  <Button label="Save changes" primary />
-</section>`
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2",
-					children: [/* @__PURE__ */ jsx("h4", {
-						className: "font-medium text-ds-1 mb-2",
-						children: "Raw design-system variables"
-					}), /* @__PURE__ */ jsx("pre", {
-						className: "text-xs font-mono text-ds-2 overflow-x-auto",
-						children: `.dashboard-shell {
-  background: var(--ds-color-bg-surface);
-  color: var(--ds-color-fg);
-  border: 1px solid var(--ds-color-border);
-}
-
-.dashboard-shell a {
-  color: var(--ds-color-accent);
-}
-
-html[data-brand="teal"][data-mode="dark"] {
-  color-scheme: dark;
-}`
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2",
-					children: [/* @__PURE__ */ jsx("h4", {
-						className: "font-medium text-ds-1 mb-2",
-						children: "Compatibility aliases for migration"
-					}), /* @__PURE__ */ jsx("pre", {
-						className: "text-xs font-mono text-ds-2 overflow-x-auto",
-						children: `:root {
-  --color-primary: #4318ff;
-  --color-background-primary: #f4f7fe;
-  --color-text-primary: #1e293b;
-}
-
-/* Supported for migration. Prefer semantic utilities or --ds-* in new code. */`
-					})]
-				})
-			]
-		})]
-	});
-}
-function ColorPalette({ groups, theme = "all", showGradients = true, showUsageExamples = true, className }) {
-	let displayGroups;
-	if (groups) displayGroups = groups.map((group) => ({ group }));
-	else if (theme === "light") displayGroups = lightThemeGroups.map((group) => ({
-		group,
-		mode: "light"
-	}));
-	else if (theme === "dark") displayGroups = darkThemeGroups.map((group) => ({
-		group,
-		mode: "dark"
-	}));
-	else displayGroups = [...lightThemeGroups.map((group) => ({
-		group,
-		mode: "light"
-	})), ...darkThemeGroups.map((group) => ({
-		group,
-		mode: "dark"
-	}))];
-	if (showGradients && !groups) displayGroups = [...displayGroups, ...gradientGroups.map((group) => ({ group }))];
-	return /* @__PURE__ */ jsxs("div", {
-		className: `p-6 bg-ds-surface-1 rounded-xl ${className || ""}`,
-		children: [
-			/* @__PURE__ */ jsx("h2", {
-				className: "text-2xl font-bold text-ds-1 mb-2",
-				children: "Color Palette"
-			}),
-			/* @__PURE__ */ jsxs("p", {
-				className: "text-sm text-ds-2 mb-6",
-				children: [
-					"Preferred contract:",
-					" ",
-					/* @__PURE__ */ jsx("code", {
-						className: "font-mono bg-ds-surface-2 px-2 py-1 rounded text-ds-1",
-						children: "semantic utilities and --ds-* tokens"
-					}),
-					" ",
-					"• Compatibility aliases remain available for migration. Light and dark sections are resolved in their own mode contexts. Click any swatch to copy the resolved color value."
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mb-6 flex flex-wrap gap-2",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: `px-3 py-1 rounded-full text-xs font-medium ${theme === "light" || theme === "all" ? "bg-ds-accent-subtle text-ds-1" : "bg-ds-surface-2 text-ds-3"}`,
-						children: "Light Theme"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: `px-3 py-1 rounded-full text-xs font-medium ${theme === "dark" || theme === "all" ? "bg-ds-accent-subtle text-ds-1" : "bg-ds-surface-2 text-ds-3"}`,
-						children: "Dark Theme"
-					}),
-					showGradients && /* @__PURE__ */ jsx("span", {
-						className: "px-3 py-1 rounded-full text-xs font-medium bg-ds-accent-subtle text-ds-1",
-						children: "Gradients"
-					})
-				]
-			}),
-			displayGroups.map(({ group, mode }) => /* @__PURE__ */ jsxs("div", {
-				"data-mode": mode,
-				className: "mb-8",
-				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-lg font-semibold text-ds-1 mb-4",
-					children: group.name
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex flex-wrap gap-4",
-					children: group.colors.map((color) => /* @__PURE__ */ jsx(ColorSwatchItem, { color }, color.name))
-				})]
-			}, group.name)),
-			showGradients && /* @__PURE__ */ jsx(GradientPreview, {}),
-			showUsageExamples && /* @__PURE__ */ jsx(UsageExamples, {})
-		]
-	});
-}
-//#endregion
-export { ColorPalette as t };
-
-//# sourceMappingURL=color-palette-DnX1sODj.mjs.map