@salesmind-ai/design-system 0.3.2 → 0.3.4

package/dist/theme/index.js

@@ -1,5 +1,558 @@
 "use client";
-export { ColorPicker, ThemeSelector, VoidBackground } from '../chunk-EFRAP5ES.js';
-export { AppearancePanel, AppearanceProvider, hexToRgb, initializeAppearance, prefersReducedMotion, useAppearance } from '../chunk-JPJN4YBC.js';
+import React2, { createContext, useId, useContext, useState, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Sun, Moon } from 'lucide-react';
+import clsx2 from 'clsx';
+
+// src/theme/AppearanceProvider.tsx
+var STORAGE_KEY = "void-appearance-settings";
+var DEFAULT_SETTINGS = {
+  theme: "dark",
+  brand: "default",
+  navPlacement: "left",
+  density: "comfortable",
+  radius: "playful",
+  customColor: "#f97316"
+  // Default orange as fallback
+};
+function hexToRgb(hex) {
+  const cleanHex = hex.replace(/^#/, "");
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) {
+    return "249, 115, 22";
+  }
+  return `${r}, ${g}, ${b}`;
+}
+function generateSecondaryColor(hex) {
+  const cleanHex = hex.replace(/^#/, "");
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) {
+    return "255, 208, 0";
+  }
+  const secondary = {
+    r: Math.min(255, g + 50),
+    g: Math.min(255, b + 100),
+    b: Math.min(255, r)
+  };
+  return `${secondary.r}, ${secondary.g}, ${secondary.b}`;
+}
+function loadSettings() {
+  if (typeof window === "undefined") return DEFAULT_SETTINGS;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return {
+        theme: parsed.theme || DEFAULT_SETTINGS.theme,
+        brand: parsed.brand || DEFAULT_SETTINGS.brand,
+        navPlacement: parsed.navPlacement || DEFAULT_SETTINGS.navPlacement,
+        density: parsed.density || DEFAULT_SETTINGS.density,
+        radius: parsed.radius || DEFAULT_SETTINGS.radius,
+        customColor: parsed.customColor || DEFAULT_SETTINGS.customColor
+      };
+    }
+  } catch {
+  }
+  return {
+    ...DEFAULT_SETTINGS,
+    theme: "dark"
+  };
+}
+function saveSettings(settings) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch {
+  }
+}
+function applySettings(settings) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  root.setAttribute("data-theme", settings.theme);
+  root.setAttribute("data-brand", settings.brand);
+  root.setAttribute("data-nav", settings.navPlacement);
+  root.setAttribute("data-density", settings.density);
+  root.setAttribute("data-radius", settings.radius);
+  if (settings.brand === "custom") {
+    const primaryRgb = hexToRgb(settings.customColor);
+    const secondaryRgb = generateSecondaryColor(settings.customColor);
+    root.style.setProperty("--custom-accent-rgb", primaryRgb);
+    root.style.setProperty("--custom-accent2-rgb", secondaryRgb);
+  } else {
+    root.style.removeProperty("--custom-accent-rgb");
+    root.style.removeProperty("--custom-accent2-rgb");
+  }
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var AppearanceContext = createContext(null);
+function AppearanceProvider({
+  initialSettings,
+  disablePersistence = false,
+  children
+}) {
+  const [settings, setSettings] = useState(() => ({
+    ...DEFAULT_SETTINGS,
+    ...initialSettings
+  }));
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => {
+    if (!disablePersistence) {
+      const loaded = loadSettings();
+      setSettings({
+        ...loaded,
+        // initialSettings still take priority over localStorage
+        ...initialSettings
+      });
+    }
+    setHydrated(true);
+  }, []);
+  useEffect(() => {
+    applySettings(settings);
+    if (!disablePersistence && hydrated) {
+      saveSettings(settings);
+    }
+  }, [settings, disablePersistence, hydrated]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: light)");
+    const handleChange = (e) => {
+      setSettings((prev) => {
+        if (prev.theme === "light-contrast" || prev.theme === "dark-contrast") {
+          return prev;
+        }
+        return {
+          ...prev,
+          theme: e.matches ? "light" : "dark"
+        };
+      });
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = () => {
+      applySettings(settings);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [settings]);
+  const setTheme = useCallback((theme) => {
+    setSettings((prev) => ({ ...prev, theme }));
+  }, []);
+  const setBrand = useCallback((brand) => {
+    setSettings((prev) => ({ ...prev, brand }));
+  }, []);
+  const setNavPlacement = useCallback((navPlacement) => {
+    setSettings((prev) => ({ ...prev, navPlacement }));
+  }, []);
+  const setDensity = useCallback((density) => {
+    setSettings((prev) => ({ ...prev, density }));
+  }, []);
+  const setRadius = useCallback((radius) => {
+    setSettings((prev) => ({ ...prev, radius }));
+  }, []);
+  const setCustomColor = useCallback((customColor) => {
+    setSettings((prev) => ({ ...prev, customColor, brand: "custom" }));
+  }, []);
+  const setAppearance = useCallback((partial) => {
+    setSettings((prev) => ({ ...prev, ...partial }));
+  }, []);
+  const resetToDefaults = useCallback(() => {
+    setSettings(DEFAULT_SETTINGS);
+  }, []);
+  const contextValue = {
+    ...settings,
+    setTheme,
+    setBrand,
+    setNavPlacement,
+    setDensity,
+    setRadius,
+    setCustomColor,
+    setAppearance,
+    resetToDefaults
+  };
+  return /* @__PURE__ */ jsx(AppearanceContext.Provider, { value: contextValue, children });
+}
+function useAppearance() {
+  const context = useContext(AppearanceContext);
+  if (!context) {
+    throw new Error("useAppearance must be used within an AppearanceProvider");
+  }
+  return context;
+}
+function initializeAppearance(settings) {
+  const loaded = loadSettings();
+  const merged = { ...loaded, ...settings };
+  applySettings(merged);
+}
+var ThemeSelector = ({ className, style }) => {
+  const { theme, setTheme } = useAppearance();
+  const handleThemeChange = (newTheme) => {
+    setTheme(newTheme);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx2("ds-theme-selector", className), style, role: "group", "aria-label": "Theme Selector", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: clsx2("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "light" }),
+        onClick: () => handleThemeChange("light"),
+        "aria-pressed": theme === "light",
+        children: [
+          /* @__PURE__ */ jsx(Sun, { className: "ds-theme-selector__icon" }),
+          /* @__PURE__ */ jsx("span", { className: "ds-theme-selector__label", children: "Light" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: clsx2("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "light-contrast" }),
+        onClick: () => handleThemeChange("light-contrast"),
+        "aria-pressed": theme === "light-contrast",
+        children: [
+          /* @__PURE__ */ jsx(Sun, { className: "ds-theme-selector__icon" }),
+          /* @__PURE__ */ jsx("span", { className: "ds-theme-selector__label", children: "Light HC" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: clsx2("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "dark" }),
+        onClick: () => handleThemeChange("dark"),
+        "aria-pressed": theme === "dark",
+        children: [
+          /* @__PURE__ */ jsx(Moon, { className: "ds-theme-selector__icon" }),
+          /* @__PURE__ */ jsx("span", { className: "ds-theme-selector__label", children: "Dark" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: clsx2("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "dark-contrast" }),
+        onClick: () => handleThemeChange("dark-contrast"),
+        "aria-pressed": theme === "dark-contrast",
+        children: [
+          /* @__PURE__ */ jsx(Moon, { className: "ds-theme-selector__icon" }),
+          /* @__PURE__ */ jsx("span", { className: "ds-theme-selector__label", children: "Dark HC" })
+        ]
+      }
+    )
+  ] });
+};
+ThemeSelector.displayName = "ThemeSelector";
+var AppearancePanel = React2.forwardRef(
+  ({ className, labels: l }, ref) => {
+    const {
+      theme,
+      brand,
+      navPlacement,
+      density,
+      radius,
+      customColor,
+      setTheme,
+      setBrand,
+      setNavPlacement,
+      setDensity,
+      setRadius,
+      setCustomColor,
+      resetToDefaults
+    } = useAppearance();
+    const colorPickerId = useId();
+    const themeOptions = [
+      { value: "light", label: l?.themeLight ?? "Light" },
+      { value: "light-contrast", label: l?.themeLightContrast ?? "Light (High Contrast)" },
+      { value: "dark", label: l?.themeDark ?? "Dark" },
+      { value: "dark-contrast", label: l?.themeDarkContrast ?? "Dark (High Contrast)" }
+    ];
+    const brandOptions = [
+      { value: "default", label: l?.brandDefault ?? "Default", description: l?.brandDefaultDescription ?? "Warm Intelligence" },
+      { value: "salesmind", label: l?.brandSalesmind ?? "SalesMind", description: l?.brandSalesmindDescription ?? "Pink-red + Gold" },
+      { value: "custom", label: l?.brandCustom ?? "Custom", description: l?.brandCustomDescription ?? "Your color" }
+    ];
+    const navOptions = [
+      { value: "left", label: l?.navLeft ?? "Left Sidebar" },
+      { value: "right", label: l?.navRight ?? "Right Sidebar" },
+      { value: "bottom", label: l?.navBottom ?? "Bottom Tabs" }
+    ];
+    const densityOptions = [
+      { value: "comfortable", label: l?.densityComfortable ?? "Comfortable", description: l?.densityComfortableDescription ?? "Generous spacing" },
+      { value: "compact", label: l?.densityCompact ?? "Compact", description: l?.densityCompactDescription ?? "Higher density" }
+    ];
+    const radiusOptions = [
+      { value: "playful", label: l?.radiusPlayful ?? "Playful", description: l?.radiusPlayfulDescription ?? "Rounded corners" },
+      { value: "sharp", label: l?.radiusSharp ?? "Sharp", description: l?.radiusSharpDescription ?? "Technical feel" }
+    ];
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx2("ds-appearance-panel", className), children: [
+      /* @__PURE__ */ jsx("h3", { className: "ds-appearance-panel__title", children: l?.title ?? "Appearance Settings" }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.themeHeading ?? "Theme" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: themeOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx2(
+              "ds-appearance-panel__option",
+              theme === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "theme",
+                  value: option.value,
+                  checked: theme === option.value,
+                  onChange: () => setTheme(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.brandHeading ?? "Brand" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: brandOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx2(
+              "ds-appearance-panel__option",
+              brand === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "brand",
+                  value: option.value,
+                  checked: brand === option.value,
+                  onChange: () => setBrand(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "ds-appearance-panel__option-content", children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        )) }),
+        brand === "custom" && /* @__PURE__ */ jsxs("div", { className: "ds-appearance-panel__color-picker", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: colorPickerId, className: "ds-appearance-panel__color-label", children: l?.accentColorLabel ?? "Accent Color" }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-appearance-panel__color-input-wrapper", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                id: colorPickerId,
+                value: customColor,
+                onChange: (e) => setCustomColor(e.target.value),
+                className: "ds-appearance-panel__color-input"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__color-value", children: customColor.toUpperCase() })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.densityHeading ?? "Density" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: densityOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx2(
+              "ds-appearance-panel__option",
+              "ds-appearance-panel__option--toggle",
+              density === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "density",
+                  value: option.value,
+                  checked: density === option.value,
+                  onChange: () => setDensity(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "ds-appearance-panel__option-content", children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.geometryHeading ?? "Geometry" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: radiusOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx2(
+              "ds-appearance-panel__option",
+              "ds-appearance-panel__option--toggle",
+              radius === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "radius",
+                  value: option.value,
+                  checked: radius === option.value,
+                  onChange: () => setRadius(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "ds-appearance-panel__option-content", children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.navHeading ?? "Navigation Layout" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: navOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx2(
+              "ds-appearance-panel__option",
+              navPlacement === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "nav",
+                  value: option.value,
+                  checked: navPlacement === option.value,
+                  onChange: () => setNavPlacement(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: resetToDefaults, className: "ds-appearance-panel__reset", children: l?.resetLabel ?? "Reset to Defaults" })
+    ] });
+  }
+);
+AppearancePanel.displayName = "AppearancePanel";
+var BRAND_PRESETS = [
+  { value: "default", label: "Warm Intelligence", color: "#f97316" },
+  { value: "salesmind", label: "SalesMind", color: "#ff005a" }
+];
+var ColorPicker = React2.forwardRef(
+  ({ className, style }, ref) => {
+    const { brand, setBrand, customColor, setCustomColor } = useAppearance();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx2("ds-color-picker", className),
+        style,
+        role: "group",
+        "aria-label": "Brand Color",
+        children: [
+          BRAND_PRESETS.map(({ value, label, color }) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx2("ds-color-picker__swatch", {
+                "ds-color-picker__swatch--active": brand === value
+              }),
+              onClick: () => setBrand(value),
+              "aria-label": `Switch to ${label} color scheme`,
+              "aria-pressed": brand === value,
+              title: label,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ds-color-picker__dot",
+                  style: { "--swatch-color": color }
+                }
+              )
+            },
+            value
+          )),
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: clsx2("ds-color-picker__swatch", "ds-color-picker__swatch--custom", {
+                "ds-color-picker__swatch--active": brand === "custom"
+              }),
+              title: `Custom: ${customColor}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ds-color-picker__dot",
+                    style: { "--swatch-color": customColor }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "color",
+                    value: customColor,
+                    onChange: (e) => setCustomColor(e.target.value),
+                    className: "ds-color-picker__native-input",
+                    "aria-label": "Pick a custom accent color"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+var VoidBackground = React2.forwardRef(
+  ({ showGrid = true, showGrain = true, className, children }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx2("void", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "void__base", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs("div", { className: "void__orbs", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("div", { className: "void__orb void__orb--warm" }),
+        /* @__PURE__ */ jsx("div", { className: "void__orb void__orb--purple" })
+      ] }),
+      showGrid && /* @__PURE__ */ jsx("div", { className: "void__grid", "aria-hidden": "true" }),
+      showGrain && /* @__PURE__ */ jsx("div", { className: "void__grain", "aria-hidden": "true" }),
+      children && /* @__PURE__ */ jsx("div", { className: "void__content", children })
+    ] });
+  }
+);
+VoidBackground.displayName = "VoidBackground";
+
+export { AppearancePanel, AppearanceProvider, ColorPicker, ThemeSelector, VoidBackground, hexToRgb, initializeAppearance, prefersReducedMotion, useAppearance };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map