@salesmind-ai/design-system 0.7.0 → 1.0.0

package/dist/theme/index.css

@@ -109,112 +109,4 @@
   border: none;
   padding: 0;
 }
-
-/* src/components/VoidBackground/VoidBackground.css */
-.void {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 100vh;
-  overflow: hidden;
-  isolation: isolate;
-}
-.void__base {
-  position: absolute;
-  inset: 0;
-  background-color: var(--void-base);
-  z-index: -4;
-}
-.void__orbs {
-  position: absolute;
-  inset: 0;
-  z-index: -3;
-  pointer-events: none;
-}
-.void__orb {
-  position: absolute;
-  border-radius: 50%;
-  mix-blend-mode: screen;
-  filter: blur(140px);
-  opacity: 0.6;
-}
-.void__orb--warm {
-  width: 800px;
-  height: 800px;
-  top: 10%;
-  right: 10%;
-  background:
-    radial-gradient(
-      circle at center,
-      rgba(var(--void-orb-yellow-rgb), 0.4) 0%,
-      rgba(var(--void-orb-pink-rgb), 0.3) 40%,
-      transparent 70%);
-}
-.void__orb--purple {
-  width: 600px;
-  height: 600px;
-  bottom: 10%;
-  left: 10%;
-  background:
-    radial-gradient(
-      circle at center,
-      rgba(var(--void-orb-purple-rgb), 0.5) 0%,
-      rgba(var(--void-orb-purple-rgb), 0.2) 50%,
-      transparent 70%);
-}
-.void__grid {
-  position: absolute;
-  inset: 0;
-  z-index: -2;
-  pointer-events: none;
-  background-image:
-    linear-gradient(
-      to right,
-      var(--void-grid-color) 1px,
-      transparent 1px),
-    linear-gradient(
-      to bottom,
-      var(--void-grid-color) 1px,
-      transparent 1px);
-  background-size: var(--grid-cell-web) var(--grid-cell-web);
-  mask-image:
-    radial-gradient(
-      ellipse 70% 60% at 50% 40%,
-      black 0%,
-      transparent 100%);
-  -webkit-mask-image:
-    radial-gradient(
-      ellipse 70% 60% at 50% 40%,
-      black 0%,
-      transparent 100%);
-}
-.void__grain {
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  opacity: var(--void-grid-grain-opacity, 0.04);
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-  background-size: 200px 200px;
-}
-.void__content {
-  position: relative;
-  z-index: 1;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-.void--inline {
-  min-height: auto;
-}
-.void--inline .void__content {
-  min-height: auto;
-}
-@media (prefers-reduced-motion: reduce) {
-  .void__orb {
-    animation: none;
-  }
-}
 /*# sourceMappingURL=index.css.map */

package/dist/theme/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ThemeSelector/ThemeSelector.css","../../src/components/ColorPicker/ColorPicker.css","../../src/components/VoidBackground/VoidBackground.css"],"sourcesContent":[".ds-theme-selector {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid var(--rim-light-top);\n  border-radius: var(--radius-badge);\n  padding: var(--space-1);\n  gap: var(--space-1);\n}\n\n[data-theme='light'] .ds-theme-selector,\n[data-theme='light-contrast'] .ds-theme-selector {\n  background-color: var(--void-base);\n}\n\n[data-theme='dark'] .ds-theme-selector,\n[data-theme='dark-contrast'] .ds-theme-selector {\n  background: var(--glass-base);\n  backdrop-filter: var(--glass-backdrop);\n  -webkit-backdrop-filter: var(--glass-backdrop);\n}\n\n.ds-theme-selector__btn {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  border: none;\n  background: transparent;\n  color: var(--text-secondary);\n  font-family: inherit;\n  font-size: var(--font-size-sm, 14px);\n  font-weight: 500;\n  border-radius: var(--radius-badge);\n  cursor: pointer;\n  transition: color var(--transition-fast), background-color var(--transition-fast);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.ds-theme-selector__btn:hover {\n  color: var(--text-primary);\n  background-color: var(--interactive-hover-bg);\n}\n\n.ds-theme-selector__btn--active {\n  background-color: rgba(var(--accent-rgb),.2);\n  box-shadow: none;\n}\n\n[data-theme='light'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='light-contrast'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='dark'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='dark-contrast'] .ds-theme-selector__btn--active .ds-theme-selector__label {\n  color: var(--text-secondary);\n}\n\n.ds-theme-selector__btn--active .ds-theme-selector__icon {\n  color: rgb(var(--accent-rgb));\n}\n\n.ds-theme-selector__icon {\n  width: 16px;\n  height: 16px;\n  color: inherit;\n  transition: color var(--transition-fast);\n}\n",".ds-color-picker {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  padding: var(--space-1);\n  border-radius: var(--radius-badge);\n  background: var(--interactive-hover-bg);\n  border: 1px solid var(--rim-light-bottom);\n}\n\n.ds-color-picker__swatch {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-1);\n  border: none;\n  border-radius: var(--radius-xs);\n  background: transparent;\n  cursor: pointer;\n  transition: background var(--transition-fast);\n}\n\n.ds-color-picker__swatch:hover {\n  background: var(--interactive-hover-bg);\n}\n\n.ds-color-picker__swatch--active {\n  background: var(--interactive-active-bg);\n}\n\n.ds-color-picker__dot {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--swatch-color);\n  border: 1.5px solid var(--rim-light-bottom);\n  transition: box-shadow var(--transition-fast);\n}\n\n.ds-color-picker__swatch--active .ds-color-picker__dot {\n  box-shadow: 0 0 0 2px var(--swatch-color);\n}\n\n/* Native <input type=\"color\"> hidden behind the custom swatch */\n.ds-color-picker__swatch--custom {\n  position: relative;\n}\n\n.ds-color-picker__native-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n  border: none;\n  padding: 0;\n}\n","/* ============================================================================\n   VOID BACKGROUND — LEVEL 0 ATMOSPHERIC SYSTEM\n   ============================================================================ */\n\n.void {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-height: 100vh;\n  overflow: hidden;\n  isolation: isolate;\n}\n\n/* ==========================================================================\n   Layer 1: Base Color — Deep purple-black\n   ========================================================================== */\n\n.void__base {\n  position: absolute;\n  inset: 0;\n  background-color: var(--void-base);\n  z-index: -4;\n}\n\n/* ==========================================================================\n   Layer 2: Light Orbs — Brand colors as light sources\n   ========================================================================== */\n\n.void__orbs {\n  position: absolute;\n  inset: 0;\n  z-index: -3;\n  pointer-events: none;\n}\n\n.void__orb {\n  position: absolute;\n  border-radius: 50%;\n  mix-blend-mode: screen;\n  filter: blur(140px);\n  opacity: 0.6;\n}\n\n/* Warm Orb: Yellow → Pink gradient, positioned near primary content */\n.void__orb--warm {\n  width: 800px;\n  height: 800px;\n  top: 10%;\n  right: 10%;\n  background: radial-gradient(\n    circle at center,\n    rgba(var(--void-orb-yellow-rgb), 0.4) 0%,\n    rgba(var(--void-orb-pink-rgb), 0.3) 40%,\n    transparent 70%\n  );\n}\n\n/* Purple Orb: Deep purple for depth balance */\n.void__orb--purple {\n  width: 600px;\n  height: 600px;\n  bottom: 10%;\n  left: 10%;\n  background: radial-gradient(\n    circle at center,\n    rgba(var(--void-orb-purple-rgb), 0.5) 0%,\n    rgba(var(--void-orb-purple-rgb), 0.2) 50%,\n    transparent 70%\n  );\n}\n\n/* ==========================================================================\n   Layer 3: Engineered Grid — 80×80px with radial fade\n   ========================================================================== */\n\n.void__grid {\n  position: absolute;\n  inset: 0;\n  z-index: -2;\n  pointer-events: none;\n  background-image:\n    linear-gradient(to right, var(--void-grid-color) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--void-grid-color) 1px, transparent 1px);\n  background-size: var(--grid-cell-web) var(--grid-cell-web);\n  /* Grid fades toward edges — CRITICAL */\n  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);\n  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);\n}\n\n/* ==========================================================================\n   Layer 4: Film Grain — Static noise texture\n   ========================================================================== */\n\n.void__grain {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n  opacity: var(--void-grid-grain-opacity, 0.04);\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n  background-repeat: repeat;\n  background-size: 200px 200px;\n}\n\n/* ==========================================================================\n   Content Layer\n   ========================================================================== */\n\n.void__content {\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n/* ==========================================================================\n   Utility: Inline Void (for smaller containers)\n   ========================================================================== */\n\n.void--inline {\n  min-height: auto;\n}\n\n.void--inline .void__content {\n  min-height: auto;\n}\n\n/* ==========================================================================\n   Reduced Motion: Disable any future animations\n   ========================================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .void__orb {\n    animation: none;\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/ThemeSelector/ThemeSelector.css","../../src/components/ColorPicker/ColorPicker.css"],"sourcesContent":[".ds-theme-selector {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid var(--rim-light-top);\n  border-radius: var(--radius-badge);\n  padding: var(--space-1);\n  gap: var(--space-1);\n}\n\n[data-theme='light'] .ds-theme-selector,\n[data-theme='light-contrast'] .ds-theme-selector {\n  background-color: var(--void-base);\n}\n\n[data-theme='dark'] .ds-theme-selector,\n[data-theme='dark-contrast'] .ds-theme-selector {\n  background: var(--glass-base);\n  backdrop-filter: var(--glass-backdrop);\n  -webkit-backdrop-filter: var(--glass-backdrop);\n}\n\n.ds-theme-selector__btn {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  border: none;\n  background: transparent;\n  color: var(--text-secondary);\n  font-family: inherit;\n  font-size: var(--font-size-sm, 14px);\n  font-weight: 500;\n  border-radius: var(--radius-badge);\n  cursor: pointer;\n  transition: color var(--transition-fast), background-color var(--transition-fast);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.ds-theme-selector__btn:hover {\n  color: var(--text-primary);\n  background-color: var(--interactive-hover-bg);\n}\n\n.ds-theme-selector__btn--active {\n  background-color: rgba(var(--accent-rgb),.2);\n  box-shadow: none;\n}\n\n[data-theme='light'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='light-contrast'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='dark'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='dark-contrast'] .ds-theme-selector__btn--active .ds-theme-selector__label {\n  color: var(--text-secondary);\n}\n\n.ds-theme-selector__btn--active .ds-theme-selector__icon {\n  color: rgb(var(--accent-rgb));\n}\n\n.ds-theme-selector__icon {\n  width: 16px;\n  height: 16px;\n  color: inherit;\n  transition: color var(--transition-fast);\n}\n",".ds-color-picker {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  padding: var(--space-1);\n  border-radius: var(--radius-badge);\n  background: var(--interactive-hover-bg);\n  border: 1px solid var(--rim-light-bottom);\n}\n\n.ds-color-picker__swatch {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-1);\n  border: none;\n  border-radius: var(--radius-xs);\n  background: transparent;\n  cursor: pointer;\n  transition: background var(--transition-fast);\n}\n\n.ds-color-picker__swatch:hover {\n  background: var(--interactive-hover-bg);\n}\n\n.ds-color-picker__swatch--active {\n  background: var(--interactive-active-bg);\n}\n\n.ds-color-picker__dot {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--swatch-color);\n  border: 1.5px solid var(--rim-light-bottom);\n  transition: box-shadow var(--transition-fast);\n}\n\n.ds-color-picker__swatch--active .ds-color-picker__dot {\n  box-shadow: 0 0 0 2px var(--swatch-color);\n}\n\n/* Native <input type=\"color\"> hidden behind the custom swatch */\n.ds-color-picker__swatch--custom {\n  position: relative;\n}\n\n.ds-color-picker__native-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n  border: none;\n  padding: 0;\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,WAAS,IAAI;AACb,OAAK,IAAI;AACX;AAEA,CAAC,kBAAoB,CATpB;AAUD,CAAC,2BAA6B,CAV7B;AAWC,oBAAkB,IAAI;AACxB;AAEA,CAAC,iBAAmB,CAdnB;AAeD,CAAC,0BAA4B,CAf5B;AAgBC,cAAY,IAAI;AAChB,mBAAiB,IAAI;AACrB,2BAAyB,IAAI;AAC/B;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,WAAS,IAAI,WAAW,IAAI;AAC5B,UAAQ;AACR,cAAY;AACZ,SAAO,IAAI;AACX,eAAa;AACb,aAAW,IAAI,cAAc,EAAE;AAC/B,eAAa;AACb,iBAAe,IAAI;AACnB,UAAQ;AACR,cAAY,MAAM,IAAI,kBAAkB,EAAE,iBAAiB,IAAI;AAC/D,eAAa;AACb,eAAa;AACf;AAEA,CAlBC,sBAkBsB;AACrB,SAAO,IAAI;AACX,oBAAkB,IAAI;AACxB;AAEA,CAAC;AACC,oBAAkB,KAAK,IAAI,aAAa,EAAC;AACzC,cAAY;AACd;AAEA,CAAC,kBAAoB,CALpB,+BAKoD,CAAC;AACtD,CAAC,2BAA6B,CAN7B,+BAM6D,CADR;AAEtD,CAAC,iBAAmB,CAPnB,+BAOmD,CAFE;AAGtD,CAAC,0BAA4B,CAR5B,+BAQ4D,CAHP;AAIpD,SAAO,IAAI;AACb;AAEA,CAZC,+BAY+B,CAAC;AAC/B,SAAO,IAAI,IAAI;AACjB;AAEA,CAJiC;AAK/B,SAAO;AACP,UAAQ;AACR,SAAO;AACP,cAAY,MAAM,IAAI;AACxB;;;ACjEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,WAAS,IAAI;AACb,iBAAe,IAAI;AACnB,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACxB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS,IAAI;AACb,UAAQ;AACR,iBAAe,IAAI;AACnB,cAAY;AACZ,UAAQ;AACR,cAAY,WAAW,IAAI;AAC7B;AAEA,CAZC,uBAYuB;AACtB,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,cAAY,IAAI;AAChB,UAAQ,MAAM,MAAM,IAAI;AACxB,cAAY,WAAW,IAAI;AAC7B;AAEA,CAbC,gCAagC,CAThC;AAUC,cAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC5B;AAGA,CAAC;AACC,YAAU;AACZ;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,UAAQ;AACR,WAAS;AACX;","names":[]}

package/dist/theme/index.d.cts

@@ -2,33 +2,6 @@ export { A as AppearanceContextValue, a as AppearanceProvider, b as AppearancePr
 import React__default from 'react';
 import 'react/jsx-runtime';
 
-interface VoidBackgroundProps {
-    /** Show the engineered grid overlay */
-    showGrid?: boolean;
-    /** Show the film grain texture */
-    showGrain?: boolean;
-    /** Custom class name */
-    className?: string;
-    /** Child content rendered above the void */
-    children?: React__default.ReactNode;
-}
-/**
- * VoidBackground — The Void Signature Design System Level 0 Environment
- *
- * @deprecated since v2; use AuroraVoid from @salesmind-ai/design-system. Will be removed in v3.
- *
- * A four-layer atmospheric background system:
- * 1. Base Color — Deep purple-black (#08040a)
- * 2. Light Orbs — Radial gradients with mix-blend-mode: screen
- * 3. Engineered Grid — 80×80px with radial fade mask
- * 4. Film Grain — Static SVG noise for texture
- *
- * The Void is not decoration — it is the lighting engine for the UI.
- *
- * @see AuroraVoid
- */
-declare const VoidBackground: React__default.ForwardRefExoticComponent<VoidBackgroundProps & React__default.RefAttributes<HTMLDivElement>>;
-
 interface ThemeSelectorProps {
     className?: string;
     style?: React__default.CSSProperties;
@@ -56,4 +29,4 @@ interface ColorPickerProps {
  */
 declare const ColorPicker: React__default.ForwardRefExoticComponent<ColorPickerProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { ColorPicker, type ColorPickerProps, ThemeSelector, type ThemeSelectorProps, VoidBackground, type VoidBackgroundProps };
+export { ColorPicker, type ColorPickerProps, ThemeSelector, type ThemeSelectorProps };

package/dist/theme/index.d.ts

@@ -2,33 +2,6 @@ export { A as AppearanceContextValue, a as AppearanceProvider, b as AppearancePr
 import React__default from 'react';
 import 'react/jsx-runtime';
 
-interface VoidBackgroundProps {
-    /** Show the engineered grid overlay */
-    showGrid?: boolean;
-    /** Show the film grain texture */
-    showGrain?: boolean;
-    /** Custom class name */
-    className?: string;
-    /** Child content rendered above the void */
-    children?: React__default.ReactNode;
-}
-/**
- * VoidBackground — The Void Signature Design System Level 0 Environment
- *
- * @deprecated since v2; use AuroraVoid from @salesmind-ai/design-system. Will be removed in v3.
- *
- * A four-layer atmospheric background system:
- * 1. Base Color — Deep purple-black (#08040a)
- * 2. Light Orbs — Radial gradients with mix-blend-mode: screen
- * 3. Engineered Grid — 80×80px with radial fade mask
- * 4. Film Grain — Static SVG noise for texture
- *
- * The Void is not decoration — it is the lighting engine for the UI.
- *
- * @see AuroraVoid
- */
-declare const VoidBackground: React__default.ForwardRefExoticComponent<VoidBackgroundProps & React__default.RefAttributes<HTMLDivElement>>;
-
 interface ThemeSelectorProps {
     className?: string;
     style?: React__default.CSSProperties;
@@ -56,4 +29,4 @@ interface ColorPickerProps {
  */
 declare const ColorPicker: React__default.ForwardRefExoticComponent<ColorPickerProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { ColorPicker, type ColorPickerProps, ThemeSelector, type ThemeSelectorProps, VoidBackground, type VoidBackgroundProps };
+export { ColorPicker, type ColorPickerProps, ThemeSelector, type ThemeSelectorProps };

package/dist/theme/index.js

@@ -1,5 +1,5 @@
 "use client";
-export { ColorPicker, ThemeSelector, VoidBackground } from '../chunk-27Y5ESMM.js';
+export { ColorPicker, ThemeSelector } from '../chunk-VFO2MUPI.js';
 export { AppearanceProvider, accentForegroundRgb, hexToRgb, initializeAppearance, prefersReducedMotion, relativeLuminance, useAppearance } from '../chunk-MBAG654R.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesmind-ai/design-system",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "description": "Salesmind AI Design System",
   "license": "MIT",
   "type": "module",

package/dist/chunk-27Y5ESMM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/VoidBackground/VoidBackground.tsx","../src/components/ThemeSelector/ThemeSelector.tsx","../src/components/ColorPicker/ColorPicker.tsx"],"names":["clsx","jsx","jsxs","React"],"mappings":"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","sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport './VoidBackground.css';\n\nexport interface VoidBackgroundProps {\n  /** Show the engineered grid overlay */\n  showGrid?: boolean;\n  /** Show the film grain texture */\n  showGrain?: boolean;\n  /** Custom class name */\n  className?: string;\n  /** Child content rendered above the void */\n  children?: React.ReactNode;\n}\n\n/**\n * VoidBackground — The Void Signature Design System Level 0 Environment\n *\n * @deprecated since v2; use AuroraVoid from @salesmind-ai/design-system. Will be removed in v3.\n *\n * A four-layer atmospheric background system:\n * 1. Base Color — Deep purple-black (#08040a)\n * 2. Light Orbs — Radial gradients with mix-blend-mode: screen\n * 3. Engineered Grid — 80×80px with radial fade mask\n * 4. Film Grain — Static SVG noise for texture\n *\n * The Void is not decoration — it is the lighting engine for the UI.\n *\n * @see AuroraVoid\n */\nexport const VoidBackground = React.forwardRef<HTMLDivElement, VoidBackgroundProps>(\n  ({ showGrid = true, showGrain = true, className, children }, ref) => {\n    if (process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'VoidBackground is deprecated since v2; use AuroraVoid from @salesmind-ai/design-system. Will be removed in v3.',\n      );\n    }\n    return (\n      <div ref={ref} className={clsx('void', className)}>\n        {/* Layer 1: Base Color */}\n        <div className=\"void__base\" aria-hidden=\"true\" />\n\n        {/* Layer 2: Light Orbs (Infusion Engine) */}\n        <div className=\"void__orbs\" aria-hidden=\"true\">\n          <div className=\"void__orb void__orb--warm\" />\n          <div className=\"void__orb void__orb--purple\" />\n        </div>\n\n        {/* Layer 3: Engineered Grid */}\n        {showGrid && <div className=\"void__grid\" aria-hidden=\"true\" />}\n\n        {/* Layer 4: Film Grain */}\n        {showGrain && <div className=\"void__grain\" aria-hidden=\"true\" />}\n\n        {/* Content Layer */}\n        {children && <div className=\"void__content\">{children}</div>}\n      </div>\n    );\n  },\n);\n\nVoidBackground.displayName = 'VoidBackground';\n","import React from 'react';\nimport { Sun, Moon } from 'lucide-react';\nimport clsx from 'clsx';\nimport { useAppearance, Theme } from '../../theme/AppearanceProvider';\nimport './ThemeSelector.css';\n\nexport interface ThemeSelectorProps {\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({ className, style }) => {\n    const { theme, setTheme } = useAppearance();\n\n    const handleThemeChange = (newTheme: Theme) => {\n        setTheme(newTheme);\n    };\n\n    return (\n        <div className={clsx('ds-theme-selector', className)} style={style} role=\"group\" aria-label=\"Theme Selector\">\n            <button\n                type=\"button\"\n                className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'light' })}\n                onClick={() => handleThemeChange('light')}\n                aria-pressed={theme === 'light'}\n            >\n                <Sun className=\"ds-theme-selector__icon\" />\n                <span className=\"ds-theme-selector__label\">Light</span>\n            </button>\n\n            <button\n                type=\"button\"\n                className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'light-contrast' })}\n                onClick={() => handleThemeChange('light-contrast')}\n                aria-pressed={theme === 'light-contrast'}\n            >\n                <Sun className=\"ds-theme-selector__icon\" />\n                <span className=\"ds-theme-selector__label\">Light HC</span>\n            </button>\n\n            <button\n                type=\"button\"\n                className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'dark' })}\n                onClick={() => handleThemeChange('dark')}\n                aria-pressed={theme === 'dark'}\n            >\n                <Moon className=\"ds-theme-selector__icon\" />\n                <span className=\"ds-theme-selector__label\">Dark</span>\n            </button>\n\n            <button\n                type=\"button\"\n                className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'dark-contrast' })}\n                onClick={() => handleThemeChange('dark-contrast')}\n                aria-pressed={theme === 'dark-contrast'}\n            >\n                <Moon className=\"ds-theme-selector__icon\" />\n                <span className=\"ds-theme-selector__label\">Dark HC</span>\n            </button>\n        </div>\n    );\n};\n\nThemeSelector.displayName = 'ThemeSelector';\n","import React from 'react';\nimport clsx from 'clsx';\nimport { useAppearance, Brand } from '../../theme/AppearanceProvider';\nimport './ColorPicker.css';\n\n/** Pre-configured brand presets shown as swatches. */\nconst BRAND_PRESETS: { value: Brand; label: string; color: string }[] = [\n  { value: 'default', label: 'Warm Intelligence', color: '#f97316' },\n  { value: 'salesmind', label: 'SalesMind', color: '#ff005a' },\n];\n\nexport interface ColorPickerProps {\n  /** Additional CSS class name. */\n  className?: string;\n  /** Inline styles. */\n  style?: React.CSSProperties;\n  /**\n   * Hide the custom color swatch and native color input.\n   * When `true`, only the curated brand presets are shown.\n   * Use this on production surfaces (e.g., marketing website footer)\n   * where arbitrary custom colors would undermine brand consistency.\n   * @default false\n   */\n  hideCustom?: boolean;\n}\n\n/**\n * Compact brand/accent color picker.\n * Renders preset brand swatches and an optional custom color input.\n * Consumes the `useAppearance()` context for state.\n */\nexport const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(\n  ({ className, style, hideCustom = false }, ref) => {\n    const { brand, setBrand, customColor, setCustomColor } = useAppearance();\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('ds-color-picker', className)}\n        style={style}\n        role=\"group\"\n        aria-label=\"Brand Color\"\n      >\n        {BRAND_PRESETS.map(({ value, label, color }) => (\n          <button\n            key={value}\n            type=\"button\"\n            className={clsx('ds-color-picker__swatch', {\n              'ds-color-picker__swatch--active': brand === value,\n            })}\n            onClick={() => setBrand(value)}\n            aria-label={`Switch to ${label} color scheme`}\n            aria-pressed={brand === value}\n            title={label}\n          >\n            <span\n              className=\"ds-color-picker__dot\"\n              style={{ '--swatch-color': color } as React.CSSProperties}\n            />\n          </button>\n        ))}\n\n        {/* Custom color — clicking the dot opens the native color picker */}\n        {!hideCustom && (\n          <label\n            className={clsx('ds-color-picker__swatch', 'ds-color-picker__swatch--custom', {\n              'ds-color-picker__swatch--active': brand === 'custom',\n            })}\n            title={`Custom: ${customColor}`}\n          >\n            <span\n              className=\"ds-color-picker__dot\"\n              style={{ '--swatch-color': customColor } as React.CSSProperties}\n            />\n            <input\n              type=\"color\"\n              value={customColor}\n              onChange={(e) => setCustomColor(e.target.value)}\n              className=\"ds-color-picker__native-input\"\n              aria-label=\"Pick a custom accent color\"\n            />\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\nColorPicker.displayName = 'ColorPicker';\n"]}