@salesmind-ai/design-system 0.3.4 → 0.3.5

package/dist/theme/index.js

@@ -1,558 +1,5 @@
 "use client";
-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 };
+export { ColorPicker, ThemeSelector, VoidBackground } from '../chunk-EFRAP5ES.js';
+export { AppearancePanel, AppearanceProvider, hexToRgb, initializeAppearance, prefersReducedMotion, useAppearance } from '../chunk-JPJN4YBC.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map