erp-pro-ui 0.1.9 → 0.2.0

package/dist/chunks/{sun-to-moon-button-azXKWDYT.mjs → sun-to-moon-button-BJtBEaa3.mjs}

@@ -1,37 +1,14 @@
 import { n as useThemeContext } from "./theme-koPrLKQv.mjs";
 import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
-import { t as Button } from "./button-DddUhuR-.mjs";
+import { t as Button } from "./button-A6UTvrOu.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx
-var BRAND_OPTIONS = [
-	{
-		value: "purple",
-		label: "Purple",
-		swatch: "var(--ds-brand-purple)"
-	},
-	{
-		value: "teal",
-		label: "Teal",
-		swatch: "var(--ds-brand-teal)"
-	},
-	{
-		value: "yellow",
-		label: "Yellow",
-		swatch: "var(--ds-brand-yellow)"
-	},
-	{
-		value: "green",
-		label: "Green",
-		swatch: "var(--ds-brand-green)"
-	}
-];
-var VARIANT_OPTIONS = [{
-	value: "default",
-	label: "Default"
-}, {
-	value: "alt",
-	label: "Alt"
-}];
+var BRAND_SWATCHES = {
+	purple: "var(--ds-brand-purple)",
+	teal: "var(--ds-brand-teal)",
+	yellow: "var(--ds-brand-yellow)",
+	green: "var(--ds-brand-green)"
+};
 function ToggleButton({ label, active, onClick, swatch, showBrandState = false, mode }) {
 	const isLightMode = mode === "light";
 	const toneStyle = (() => {
@@ -51,7 +28,7 @@ function ToggleButton({ label, active, onClick, swatch, showBrandState = false,
 		variant: "secondary",
 		size: "small",
 		onClick,
-		className: mergeClassNames("group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200", active ? "border-ds-border-1 bg-ds-surface-2 text-ds-1 shadow-sm" : "border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-2 hover:text-ds-1", showBrandState && isLightMode ? "bg-ds-surface-1! hover:bg-ds-surface-1!" : null, showBrandState && active ? "text-ds-1" : null),
+		className: mergeClassNames("group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200", active ? "border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40" : "border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1", showBrandState && isLightMode ? "bg-ds-surface-1! hover:bg-ds-surface-1!" : null, showBrandState && active ? "text-ds-1" : null),
 		style: toneStyle,
 		"aria-pressed": active,
 		children: [swatch ? /* @__PURE__ */ jsx("span", {
@@ -61,52 +38,94 @@ function ToggleButton({ label, active, onClick, swatch, showBrandState = false,
 		}) : null, /* @__PURE__ */ jsx("span", { children: label })]
 	});
 }
-function ThemeSwitcherButtons({ className }) {
+function ThemeSwitcherButtons({ className, labels = {} }) {
 	const { mode, theme, variant, setMode, setTheme, setVariant } = useThemeContext();
+	const l = {
+		mode: labels.mode ?? "Mode",
+		light: labels.light ?? "Light",
+		dark: labels.dark ?? "Dark",
+		brand: labels.brand ?? "Brand",
+		variant: labels.variant ?? "Variant",
+		variantDefault: labels.variantDefault ?? "Default",
+		variantAlt: labels.variantAlt ?? "Alt",
+		purple: labels.purple ?? "Purple",
+		teal: labels.teal ?? "Teal",
+		yellow: labels.yellow ?? "Yellow",
+		green: labels.green ?? "Green"
+	};
+	const brandOptions = [
+		{
+			value: "purple",
+			label: l.purple,
+			swatch: BRAND_SWATCHES.purple
+		},
+		{
+			value: "teal",
+			label: l.teal,
+			swatch: BRAND_SWATCHES.teal
+		},
+		{
+			value: "yellow",
+			label: l.yellow,
+			swatch: BRAND_SWATCHES.yellow
+		},
+		{
+			value: "green",
+			label: l.green,
+			swatch: BRAND_SWATCHES.green
+		}
+	];
+	const variantOptions = [{
+		value: "default",
+		label: l.variantDefault
+	}, {
+		value: "alt",
+		label: l.variantAlt
+	}];
 	return /* @__PURE__ */ jsx("div", {
-		className: mergeClassNames("w-full rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm", className),
+		className: mergeClassNames("w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "space-y-3",
 			children: [
 				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
-					children: "Mode"
+					children: l.mode
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-wrap gap-2",
 					children: [/* @__PURE__ */ jsx(ToggleButton, {
-						label: "Light",
+						label: l.light,
 						active: mode === "light",
 						onClick: () => setMode("light")
 					}), /* @__PURE__ */ jsx(ToggleButton, {
-						label: "Dark",
+						label: l.dark,
 						active: mode === "dark",
 						onClick: () => setMode("dark")
 					})]
 				})] }),
 				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
-					children: "Brand"
+					children: l.brand
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap gap-2",
-					children: BRAND_OPTIONS.map((option) => /* @__PURE__ */ jsx(ToggleButton, {
-						label: option.label,
-						active: theme === option.value,
-						onClick: () => setTheme(option.value),
-						swatch: option.swatch,
+					children: brandOptions.map((opt) => /* @__PURE__ */ jsx(ToggleButton, {
+						label: opt.label,
+						active: theme === opt.value,
+						onClick: () => setTheme(opt.value),
+						swatch: opt.swatch,
 						showBrandState: true,
 						mode
-					}, option.value))
+					}, opt.value))
 				})] }),
 				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
-					children: "Variant"
+					children: l.variant
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap gap-2",
-					children: VARIANT_OPTIONS.map((option) => /* @__PURE__ */ jsx(ToggleButton, {
-						label: option.label,
-						active: variant === option.value,
-						onClick: () => setVariant(option.value)
-					}, option.value))
+					children: variantOptions.map((opt) => /* @__PURE__ */ jsx(ToggleButton, {
+						label: opt.label,
+						active: variant === opt.value,
+						onClick: () => setVariant(opt.value)
+					}, opt.value))
 				})] })
 			]
 		})
@@ -115,4 +134,4 @@ function ThemeSwitcherButtons({ className }) {
 //#endregion
 export { ThemeSwitcherButtons as t };
 
-//# sourceMappingURL=sun-to-moon-button-azXKWDYT.mjs.map
+//# sourceMappingURL=sun-to-moon-button-BJtBEaa3.mjs.map

package/dist/chunks/sun-to-moon-button-BJtBEaa3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sun-to-moon-button-BJtBEaa3.mjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n  ThemeColorType,\n  ThemeModeType,\n  ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherLabels {\n  mode?: string;\n  light?: string;\n  dark?: string;\n  brand?: string;\n  variant?: string;\n  variantDefault?: string;\n  variantAlt?: string;\n  purple?: string;\n  teal?: string;\n  yellow?: string;\n  green?: string;\n}\n\nexport interface ThemeSwitcherButtonsProps {\n  className?: string;\n  /** Override any label for localisation / translation. */\n  labels?: ThemeSwitcherLabels;\n}\n\nconst BRAND_SWATCHES: Record<ThemeColorType, string> = {\n  purple: \"var(--ds-brand-purple)\",\n  teal:   \"var(--ds-brand-teal)\",\n  yellow: \"var(--ds-brand-yellow)\",\n  green:  \"var(--ds-brand-green)\",\n};\n\nfunction ToggleButton({\n  label,\n  active,\n  onClick,\n  swatch,\n  showBrandState = false,\n  mode,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  swatch?: string;\n  showBrandState?: boolean;\n  mode?: ThemeModeType;\n}) {\n  const isLightMode = mode === \"light\";\n  const toneStyle: CSSProperties | undefined = (() => {\n    if (!showBrandState || !swatch) {\n      return undefined;\n    }\n\n    if (isLightMode) {\n      return {\n        borderColor: active ? swatch : \"var(--ds-border-2)\",\n        backgroundColor: active\n          ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n          : \"#ffffff\",\n        color: active\n          ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n          : \"var(--ds-text-2)\",\n        boxShadow: active\n          ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n          : \"none\",\n      };\n    }\n\n    return {\n      borderColor: active\n        ? swatch\n        : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n      backgroundColor: active\n        ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n        : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n    };\n  })();\n\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"small\"\n      onClick={onClick}\n      className={mergeClassNames(\n        \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n        active\n          ? \"border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40\"\n          : \"border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1\",\n        showBrandState && isLightMode\n          ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n          : null,\n        showBrandState && active ? \"text-ds-1\" : null,\n      )}\n      style={toneStyle}\n      aria-pressed={active}\n    >\n      {swatch ? (\n        <span\n          className={mergeClassNames(\n            \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n            active\n              ? isLightMode\n                ? \"scale-110 ring-2 ring-black/15\"\n                : \"scale-110 ring-2 ring-white/35\"\n              : \"scale-100 opacity-90\",\n          )}\n          style={{ backgroundColor: swatch }}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n      <span>{label}</span>\n    </Button>\n  );\n}\n\nexport default function ThemeSwitcherButtons({\n  className,\n  labels = {},\n}: ThemeSwitcherButtonsProps) {\n  const { mode, theme, variant, setMode, setTheme, setVariant } =\n    useThemeContext();\n\n  const l: Required<ThemeSwitcherLabels> = {\n    mode:           labels.mode           ?? \"Mode\",\n    light:          labels.light          ?? \"Light\",\n    dark:           labels.dark           ?? \"Dark\",\n    brand:          labels.brand          ?? \"Brand\",\n    variant:        labels.variant        ?? \"Variant\",\n    variantDefault: labels.variantDefault ?? \"Default\",\n    variantAlt:     labels.variantAlt     ?? \"Alt\",\n    purple:         labels.purple         ?? \"Purple\",\n    teal:           labels.teal           ?? \"Teal\",\n    yellow:         labels.yellow         ?? \"Yellow\",\n    green:          labels.green          ?? \"Green\",\n  };\n\n  const brandOptions: Array<{ value: ThemeColorType; label: string; swatch: string }> = [\n    { value: \"purple\", label: l.purple, swatch: BRAND_SWATCHES.purple },\n    { value: \"teal\",   label: l.teal,   swatch: BRAND_SWATCHES.teal   },\n    { value: \"yellow\", label: l.yellow, swatch: BRAND_SWATCHES.yellow },\n    { value: \"green\",  label: l.green,  swatch: BRAND_SWATCHES.green  },\n  ];\n\n  const variantOptions: Array<{ value: ThemeVariantType; label: string }> = [\n    { value: \"default\", label: l.variantDefault },\n    { value: \"alt\",     label: l.variantAlt     },\n  ];\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"space-y-3\">\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.mode}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <ToggleButton label={l.light} active={mode === \"light\"} onClick={() => setMode(\"light\")} />\n            <ToggleButton label={l.dark}  active={mode === \"dark\"}  onClick={() => setMode(\"dark\")}  />\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.brand}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {brandOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={theme === opt.value}\n                onClick={() => setTheme(opt.value)}\n                swatch={opt.swatch}\n                showBrandState\n                mode={mode}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.variant}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {variantOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={variant === opt.value}\n                onClick={() => setVariant(opt.value)}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{sun-to-moon-button-A__wuc_4.cjs → sun-to-moon-button-PwgTPsTW.cjs}

@@ -1,38 +1,15 @@
 require("./chunk-B_GkZjkl.cjs");
 const require_theme = require("./theme-D6B-FaoE.cjs");
 const require_utils = require("./utils-LRbEQHYs.cjs");
-const require_button = require("./button-xqernofO.cjs");
+const require_button = require("./button-C4MXPxsC.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx
-var BRAND_OPTIONS = [
-	{
-		value: "purple",
-		label: "Purple",
-		swatch: "var(--ds-brand-purple)"
-	},
-	{
-		value: "teal",
-		label: "Teal",
-		swatch: "var(--ds-brand-teal)"
-	},
-	{
-		value: "yellow",
-		label: "Yellow",
-		swatch: "var(--ds-brand-yellow)"
-	},
-	{
-		value: "green",
-		label: "Green",
-		swatch: "var(--ds-brand-green)"
-	}
-];
-var VARIANT_OPTIONS = [{
-	value: "default",
-	label: "Default"
-}, {
-	value: "alt",
-	label: "Alt"
-}];
+var BRAND_SWATCHES = {
+	purple: "var(--ds-brand-purple)",
+	teal: "var(--ds-brand-teal)",
+	yellow: "var(--ds-brand-yellow)",
+	green: "var(--ds-brand-green)"
+};
 function ToggleButton({ label, active, onClick, swatch, showBrandState = false, mode }) {
 	const isLightMode = mode === "light";
 	const toneStyle = (() => {
@@ -52,7 +29,7 @@ function ToggleButton({ label, active, onClick, swatch, showBrandState = false,
 		variant: "secondary",
 		size: "small",
 		onClick,
-		className: require_utils.mergeClassNames("group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200", active ? "border-ds-border-1 bg-ds-surface-2 text-ds-1 shadow-sm" : "border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-2 hover:text-ds-1", showBrandState && isLightMode ? "bg-ds-surface-1! hover:bg-ds-surface-1!" : null, showBrandState && active ? "text-ds-1" : null),
+		className: require_utils.mergeClassNames("group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200", active ? "border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40" : "border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1", showBrandState && isLightMode ? "bg-ds-surface-1! hover:bg-ds-surface-1!" : null, showBrandState && active ? "text-ds-1" : null),
 		style: toneStyle,
 		"aria-pressed": active,
 		children: [swatch ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -62,52 +39,94 @@ function ToggleButton({ label, active, onClick, swatch, showBrandState = false,
 		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
 	});
 }
-function ThemeSwitcherButtons({ className }) {
+function ThemeSwitcherButtons({ className, labels = {} }) {
 	const { mode, theme, variant, setMode, setTheme, setVariant } = require_theme.useThemeContext();
+	const l = {
+		mode: labels.mode ?? "Mode",
+		light: labels.light ?? "Light",
+		dark: labels.dark ?? "Dark",
+		brand: labels.brand ?? "Brand",
+		variant: labels.variant ?? "Variant",
+		variantDefault: labels.variantDefault ?? "Default",
+		variantAlt: labels.variantAlt ?? "Alt",
+		purple: labels.purple ?? "Purple",
+		teal: labels.teal ?? "Teal",
+		yellow: labels.yellow ?? "Yellow",
+		green: labels.green ?? "Green"
+	};
+	const brandOptions = [
+		{
+			value: "purple",
+			label: l.purple,
+			swatch: BRAND_SWATCHES.purple
+		},
+		{
+			value: "teal",
+			label: l.teal,
+			swatch: BRAND_SWATCHES.teal
+		},
+		{
+			value: "yellow",
+			label: l.yellow,
+			swatch: BRAND_SWATCHES.yellow
+		},
+		{
+			value: "green",
+			label: l.green,
+			swatch: BRAND_SWATCHES.green
+		}
+	];
+	const variantOptions = [{
+		value: "default",
+		label: l.variantDefault
+	}, {
+		value: "alt",
+		label: l.variantAlt
+	}];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_utils.mergeClassNames("w-full rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm", className),
+		className: require_utils.mergeClassNames("w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "space-y-3",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
-					children: "Mode"
+					children: l.mode
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex flex-wrap gap-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
-						label: "Light",
+						label: l.light,
 						active: mode === "light",
 						onClick: () => setMode("light")
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
-						label: "Dark",
+						label: l.dark,
 						active: mode === "dark",
 						onClick: () => setMode("dark")
 					})]
 				})] }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
-					children: "Brand"
+					children: l.brand
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex flex-wrap gap-2",
-					children: BRAND_OPTIONS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
-						label: option.label,
-						active: theme === option.value,
-						onClick: () => setTheme(option.value),
-						swatch: option.swatch,
+					children: brandOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
+						label: opt.label,
+						active: theme === opt.value,
+						onClick: () => setTheme(opt.value),
+						swatch: opt.swatch,
 						showBrandState: true,
 						mode
-					}, option.value))
+					}, opt.value))
 				})] }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
-					children: "Variant"
+					children: l.variant
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex flex-wrap gap-2",
-					children: VARIANT_OPTIONS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
-						label: option.label,
-						active: variant === option.value,
-						onClick: () => setVariant(option.value)
-					}, option.value))
+					children: variantOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
+						label: opt.label,
+						active: variant === opt.value,
+						onClick: () => setVariant(opt.value)
+					}, opt.value))
 				})] })
 			]
 		})
@@ -121,4 +140,4 @@ Object.defineProperty(exports, "ThemeSwitcherButtons", {
 	}
 });
 
-//# sourceMappingURL=sun-to-moon-button-A__wuc_4.cjs.map
+//# sourceMappingURL=sun-to-moon-button-PwgTPsTW.cjs.map

package/dist/chunks/sun-to-moon-button-PwgTPsTW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sun-to-moon-button-PwgTPsTW.cjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n  ThemeColorType,\n  ThemeModeType,\n  ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherLabels {\n  mode?: string;\n  light?: string;\n  dark?: string;\n  brand?: string;\n  variant?: string;\n  variantDefault?: string;\n  variantAlt?: string;\n  purple?: string;\n  teal?: string;\n  yellow?: string;\n  green?: string;\n}\n\nexport interface ThemeSwitcherButtonsProps {\n  className?: string;\n  /** Override any label for localisation / translation. */\n  labels?: ThemeSwitcherLabels;\n}\n\nconst BRAND_SWATCHES: Record<ThemeColorType, string> = {\n  purple: \"var(--ds-brand-purple)\",\n  teal:   \"var(--ds-brand-teal)\",\n  yellow: \"var(--ds-brand-yellow)\",\n  green:  \"var(--ds-brand-green)\",\n};\n\nfunction ToggleButton({\n  label,\n  active,\n  onClick,\n  swatch,\n  showBrandState = false,\n  mode,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  swatch?: string;\n  showBrandState?: boolean;\n  mode?: ThemeModeType;\n}) {\n  const isLightMode = mode === \"light\";\n  const toneStyle: CSSProperties | undefined = (() => {\n    if (!showBrandState || !swatch) {\n      return undefined;\n    }\n\n    if (isLightMode) {\n      return {\n        borderColor: active ? swatch : \"var(--ds-border-2)\",\n        backgroundColor: active\n          ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n          : \"#ffffff\",\n        color: active\n          ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n          : \"var(--ds-text-2)\",\n        boxShadow: active\n          ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n          : \"none\",\n      };\n    }\n\n    return {\n      borderColor: active\n        ? swatch\n        : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n      backgroundColor: active\n        ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n        : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n    };\n  })();\n\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"small\"\n      onClick={onClick}\n      className={mergeClassNames(\n        \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n        active\n          ? \"border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40\"\n          : \"border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1\",\n        showBrandState && isLightMode\n          ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n          : null,\n        showBrandState && active ? \"text-ds-1\" : null,\n      )}\n      style={toneStyle}\n      aria-pressed={active}\n    >\n      {swatch ? (\n        <span\n          className={mergeClassNames(\n            \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n            active\n              ? isLightMode\n                ? \"scale-110 ring-2 ring-black/15\"\n                : \"scale-110 ring-2 ring-white/35\"\n              : \"scale-100 opacity-90\",\n          )}\n          style={{ backgroundColor: swatch }}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n      <span>{label}</span>\n    </Button>\n  );\n}\n\nexport default function ThemeSwitcherButtons({\n  className,\n  labels = {},\n}: ThemeSwitcherButtonsProps) {\n  const { mode, theme, variant, setMode, setTheme, setVariant } =\n    useThemeContext();\n\n  const l: Required<ThemeSwitcherLabels> = {\n    mode:           labels.mode           ?? \"Mode\",\n    light:          labels.light          ?? \"Light\",\n    dark:           labels.dark           ?? \"Dark\",\n    brand:          labels.brand          ?? \"Brand\",\n    variant:        labels.variant        ?? \"Variant\",\n    variantDefault: labels.variantDefault ?? \"Default\",\n    variantAlt:     labels.variantAlt     ?? \"Alt\",\n    purple:         labels.purple         ?? \"Purple\",\n    teal:           labels.teal           ?? \"Teal\",\n    yellow:         labels.yellow         ?? \"Yellow\",\n    green:          labels.green          ?? \"Green\",\n  };\n\n  const brandOptions: Array<{ value: ThemeColorType; label: string; swatch: string }> = [\n    { value: \"purple\", label: l.purple, swatch: BRAND_SWATCHES.purple },\n    { value: \"teal\",   label: l.teal,   swatch: BRAND_SWATCHES.teal   },\n    { value: \"yellow\", label: l.yellow, swatch: BRAND_SWATCHES.yellow },\n    { value: \"green\",  label: l.green,  swatch: BRAND_SWATCHES.green  },\n  ];\n\n  const variantOptions: Array<{ value: ThemeVariantType; label: string }> = [\n    { value: \"default\", label: l.variantDefault },\n    { value: \"alt\",     label: l.variantAlt     },\n  ];\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"space-y-3\">\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.mode}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <ToggleButton label={l.light} active={mode === \"light\"} onClick={() => setMode(\"light\")} />\n            <ToggleButton label={l.dark}  active={mode === \"dark\"}  onClick={() => setMode(\"dark\")}  />\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.brand}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {brandOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={theme === opt.value}\n                onClick={() => setTheme(opt.value)}\n                swatch={opt.swatch}\n                showBrandState\n                mode={mode}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div>\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n            {l.variant}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {variantOptions.map((opt) => (\n              <ToggleButton\n                key={opt.value}\n                label={opt.label}\n                active={variant === opt.value}\n                onClick={() => setVariant(opt.value)}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{switch-DPyzVrNh.cjs → switch-X3l8xnle.cjs}

@@ -3,35 +3,30 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/forms/switch/Switch.tsx
 var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
-var rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;
-function resolveDirection(direction) {
-	if (direction === "rtl" || direction === "ltr") return direction;
+function getEffectiveDir(dir) {
+	if (dir === "rtl" || dir === "ltr") return dir;
 	if (typeof document !== "undefined") {
-		const explicitDirection = document.documentElement.getAttribute("dir") ?? void 0;
-		if (explicitDirection === "rtl" || explicitDirection === "ltr") return explicitDirection;
+		if (document.documentElement.getAttribute("dir") === "rtl") return "rtl";
 	}
-	if (typeof navigator !== "undefined" && rtlLanguages.test(navigator.language)) return "rtl";
 	return "ltr";
 }
 var Switch = (0, react.forwardRef)(({ className = "", label, error, id, checked, dir, ...props }, ref) => {
 	const generatedId = (0, react.useId)();
 	const switchId = id || `switch-${sanitizeId(generatedId)}`;
-	const isRtl = resolveDirection(dir) === "rtl";
+	const isRtl = getEffectiveDir(dir) === "rtl";
+	const thumbClass = checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `flex items-center gap-2 ${className}`.trim().replace(/\s+/g, " "),
 		dir,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				htmlFor: switchId,
-				style: {
-					borderRadius: "var(--border-radius-full, 9999px)",
-					...checked ? {} : { background: "#E0E5F2" }
-				},
+				dir: "ltr",
 				className: `
             relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1
             disabled:cursor-not-allowed disabled:opacity-50
-            ${checked ? "bg-ds-accent" : ""}
+            ${checked ? "bg-ds-accent" : "bg-ds-surface-5 ring-1 ring-ds-border-field"}
           `.trim().replace(/\s+/g, " "),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					ref,
@@ -40,25 +35,11 @@ var Switch = (0, react.forwardRef)(({ className = "", label, error, id, checked,
 					className: "sr-only",
 					checked,
 					...props
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `
-              pointer-events-none
-              inline-block
-              h-4
-              w-4
-              transform
-              rounded-full
-              bg-ds-surface-1
-              shadow-lg
-              ring-0
-              transition-transform
-              duration-300
-              ease-in-out
-              ${checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1"}
-            `.trim().replace(/\s+/g, " ") })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}` })]
 			}),
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 				htmlFor: switchId,
-				className: `cursor-pointer text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${isRtl ? "text-right" : "text-left"}`,
+				className: "cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 				children: label
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -77,4 +58,4 @@ Object.defineProperty(exports, "Switch", {
 	}
 });
 
-//# sourceMappingURL=switch-DPyzVrNh.cjs.map
+//# sourceMappingURL=switch-X3l8xnle.cjs.map

package/dist/chunks/switch-X3l8xnle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-X3l8xnle.cjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nfunction getEffectiveDir(dir: string | undefined): \"ltr\" | \"rtl\" {\n  if (dir === \"rtl\" || dir === \"ltr\") return dir;\n  if (typeof document !== \"undefined\") {\n    if (document.documentElement.getAttribute(\"dir\") === \"rtl\") return \"rtl\";\n  }\n  return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const isRtl = getEffectiveDir(dir) === \"rtl\";\n\n    const thumbClass = checked\n      ? isRtl\n        ? \"translate-x-1\"\n        : \"translate-x-6\"\n      : isRtl\n        ? \"translate-x-6\"\n        : \"translate-x-1\";\n\n    return (\n      <div\n        className={`flex items-center gap-2 ${className}`.trim().replace(/\\s+/g, \" \")}\n        dir={dir}\n      >\n        <label\n          htmlFor={switchId}\n          dir=\"ltr\"\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-ds-accent\" : \"bg-ds-surface-5 ring-1 ring-ds-border-field\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}`}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className=\"cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,SAAS,gBAAgB,KAAwC;AAC/D,KAAI,QAAQ,SAAS,QAAQ,MAAO,QAAO;AAC3C,KAAI,OAAO,aAAa;MAClB,SAAS,gBAAgB,aAAa,MAAM,KAAK,MAAO,QAAO;;AAErE,QAAO;;AAGT,IAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,gBAAgB,IAAI,KAAK;CAEvC,MAAM,aAAa,UACf,QACE,kBACA,kBACF,QACE,kBACA;AAEN,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW,2BAA2B,YAAY,MAAM,CAAC,QAAQ,QAAQ,IAAI;EACxE;YAFP;GAIE,iBAAA,GAAA,kBAAA,MAAC,SAAD;IACE,SAAS;IACT,KAAI;IACJ,WAAW;;;;cAIP,UAAU,iBAAiB,8CAA8C;YAE1E,MAAM,CACN,QAAQ,QAAQ,IAAI;cAVzB,CAYE,iBAAA,GAAA,kBAAA,KAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EACE,WAAW,gJAAgJ,cAC3J,CAAA,CACI;;GACP,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}

package/dist/chunks/{switch-C1gKE0m0.mjs → switch-iPsN1NS2.mjs}

@@ -2,35 +2,30 @@ import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/forms/switch/Switch.tsx
 var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
-var rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;
-function resolveDirection(direction) {
-	if (direction === "rtl" || direction === "ltr") return direction;
+function getEffectiveDir(dir) {
+	if (dir === "rtl" || dir === "ltr") return dir;
 	if (typeof document !== "undefined") {
-		const explicitDirection = document.documentElement.getAttribute("dir") ?? void 0;
-		if (explicitDirection === "rtl" || explicitDirection === "ltr") return explicitDirection;
+		if (document.documentElement.getAttribute("dir") === "rtl") return "rtl";
 	}
-	if (typeof navigator !== "undefined" && rtlLanguages.test(navigator.language)) return "rtl";
 	return "ltr";
 }
 var Switch = forwardRef(({ className = "", label, error, id, checked, dir, ...props }, ref) => {
 	const generatedId = useId();
 	const switchId = id || `switch-${sanitizeId(generatedId)}`;
-	const isRtl = resolveDirection(dir) === "rtl";
+	const isRtl = getEffectiveDir(dir) === "rtl";
+	const thumbClass = checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1";
 	return /* @__PURE__ */ jsxs("div", {
 		className: `flex items-center gap-2 ${className}`.trim().replace(/\s+/g, " "),
 		dir,
 		children: [
 			/* @__PURE__ */ jsxs("label", {
 				htmlFor: switchId,
-				style: {
-					borderRadius: "var(--border-radius-full, 9999px)",
-					...checked ? {} : { background: "#E0E5F2" }
-				},
+				dir: "ltr",
 				className: `
             relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1
             disabled:cursor-not-allowed disabled:opacity-50
-            ${checked ? "bg-ds-accent" : ""}
+            ${checked ? "bg-ds-accent" : "bg-ds-surface-5 ring-1 ring-ds-border-field"}
           `.trim().replace(/\s+/g, " "),
 				children: [/* @__PURE__ */ jsx("input", {
 					ref,
@@ -39,25 +34,11 @@ var Switch = forwardRef(({ className = "", label, error, id, checked, dir, ...pr
 					className: "sr-only",
 					checked,
 					...props
-				}), /* @__PURE__ */ jsx("span", { className: `
-              pointer-events-none
-              inline-block
-              h-4
-              w-4
-              transform
-              rounded-full
-              bg-ds-surface-1
-              shadow-lg
-              ring-0
-              transition-transform
-              duration-300
-              ease-in-out
-              ${checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1"}
-            `.trim().replace(/\s+/g, " ") })]
+				}), /* @__PURE__ */ jsx("span", { className: `pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}` })]
 			}),
 			label && /* @__PURE__ */ jsx("label", {
 				htmlFor: switchId,
-				className: `cursor-pointer text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${isRtl ? "text-right" : "text-left"}`,
+				className: "cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 				children: label
 			}),
 			error && /* @__PURE__ */ jsx("p", {
@@ -71,4 +52,4 @@ Switch.displayName = "Switch";
 //#endregion
 export { Switch as t };
 
-//# sourceMappingURL=switch-C1gKE0m0.mjs.map
+//# sourceMappingURL=switch-iPsN1NS2.mjs.map

package/dist/chunks/switch-iPsN1NS2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-iPsN1NS2.mjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nfunction getEffectiveDir(dir: string | undefined): \"ltr\" | \"rtl\" {\n  if (dir === \"rtl\" || dir === \"ltr\") return dir;\n  if (typeof document !== \"undefined\") {\n    if (document.documentElement.getAttribute(\"dir\") === \"rtl\") return \"rtl\";\n  }\n  return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const isRtl = getEffectiveDir(dir) === \"rtl\";\n\n    const thumbClass = checked\n      ? isRtl\n        ? \"translate-x-1\"\n        : \"translate-x-6\"\n      : isRtl\n        ? \"translate-x-6\"\n        : \"translate-x-1\";\n\n    return (\n      <div\n        className={`flex items-center gap-2 ${className}`.trim().replace(/\\s+/g, \" \")}\n        dir={dir}\n      >\n        <label\n          htmlFor={switchId}\n          dir=\"ltr\"\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-ds-accent\" : \"bg-ds-surface-5 ring-1 ring-ds-border-field\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}`}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className=\"cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,SAAS,gBAAgB,KAAwC;AAC/D,KAAI,QAAQ,SAAS,QAAQ,MAAO,QAAO;AAC3C,KAAI,OAAO,aAAa;MAClB,SAAS,gBAAgB,aAAa,MAAM,KAAK,MAAO,QAAO;;AAErE,QAAO;;AAGT,IAAa,SAAS,YACnB,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,gBAAgB,IAAI,KAAK;CAEvC,MAAM,aAAa,UACf,QACE,kBACA,kBACF,QACE,kBACA;AAEN,QACE,qBAAC,OAAD;EACE,WAAW,2BAA2B,YAAY,MAAM,CAAC,QAAQ,QAAQ,IAAI;EACxE;YAFP;GAIE,qBAAC,SAAD;IACE,SAAS;IACT,KAAI;IACJ,WAAW;;;;cAIP,UAAU,iBAAiB,8CAA8C;YAE1E,MAAM,CACN,QAAQ,QAAQ,IAAI;cAVzB,CAYE,oBAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,oBAAC,QAAD,EACE,WAAW,gJAAgJ,cAC3J,CAAA,CACI;;GACP,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}

package/dist/color-palette.cjs

@@ -1,3 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_color_palette = require("./chunks/color-palette-BmQC14gE.cjs");
+const require_color_palette = require("./chunks/color-palette-pLh6En3n.cjs");
 exports.ColorPalette = require_color_palette.ColorPalette;
+exports.accentGroup = require_color_palette.accentGroup;
+exports.accentScaleGroup = require_color_palette.accentScaleGroup;
+exports.borderGroup = require_color_palette.borderGroup;
+exports.brandGroup = require_color_palette.brandGroup;
+exports.defaultGroups = require_color_palette.defaultGroups;
+exports.statusGroup = require_color_palette.statusGroup;
+exports.surfaceGroup = require_color_palette.surfaceGroup;
+exports.textGroup = require_color_palette.textGroup;

package/dist/color-palette.mjs

@@ -1,2 +1,2 @@
-import { t as ColorPalette } from "./chunks/color-palette-DnX1sODj.mjs";
-export { ColorPalette };
+import { a as brandGroup, c as surfaceGroup, i as borderGroup, l as textGroup, n as accentGroup, o as defaultGroups, r as accentScaleGroup, s as statusGroup, t as ColorPalette } from "./chunks/color-palette-C3lesasJ.mjs";
+export { ColorPalette, accentGroup, accentScaleGroup, borderGroup, brandGroup, defaultGroups, statusGroup, surfaceGroup, textGroup };

package/dist/combobox.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_combobox = require("./chunks/combobox-Ca7-BcLO.cjs");
+const require_combobox = require("./chunks/combobox-CtNrGmuR.cjs");
 exports.Combobox = require_combobox.Combobox;

package/dist/combobox.mjs

@@ -1,2 +1,2 @@
-import { t as Combobox } from "./chunks/combobox-0n1_tB8L.mjs";
+import { t as Combobox } from "./chunks/combobox-B6yk5U82.mjs";
 export { Combobox };

package/dist/components/data-display/charts/BarChart.d.ts

@@ -13,6 +13,11 @@ interface BarChartProps {
     className?: string;
     layout?: "horizontal" | "vertical";
     maxBarSize?: number;
+    /**
+     * Compact mode — strips axes, grid, tooltip, and margins.
+     * Designed for small sparkline-style zones (e.g. StatCard md, ~130×68 px).
+     */
+    compact?: boolean;
 }
 export declare const BarChart: React.FC<BarChartProps>;
 export {};

package/dist/components/data-display/charts/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/charts/BarChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,UAAU,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2G5C,CAAC"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/charts/BarChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,UAAU,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgI5C,CAAC"}

package/dist/components/data-display/chip/Chip.d.ts

@@ -1,6 +1,6 @@
 export type ChipVariant = "filled" | "outlined" | "soft" | "glass";
 export type ChipColor = "default" | "primary" | "secondary" | "success" | "warning" | "error" | "info";
-export type ChipSize = "sm" | "md" | "lg";
+export type ChipSize = "xs" | "sm" | "md" | "lg";
 export interface ChipProps {
     /** The content of the chip */
     children: React.ReactNode;