@titan-design/react-ui 0.0.2 → 0.1.0

package/dist/theme/index.d.mts

@@ -1,5 +1,128 @@
 import { ViewStyle } from 'react-native';
 
+/**
+ * Elevation System
+ *
+ * A unified depth system where each elevation level corresponds to:
+ * - Calculated surface color (derived from base using lighten)
+ * - Shadow intensity and style (raised/pressed)
+ * - Dynamically calculated shadow colors (derived from surface color)
+ * - Semantic name for reference
+ *
+ * Elevation range: -2 (deep inset) to +5 (floating overlay)
+ *
+ * Negative elevations: Inset/pressed elements (sunken into surface)
+ * Zero elevation: Base surface (background/page level)
+ * Positive elevations: Raised elements (floating above surface)
+ *
+ * All colors are calculated dynamically from a base surface color,
+ * allowing for custom surfaces and consistent color relationships.
+ *
+ * Lighting Model: Light source from upper-right corner
+ * - Raised elements are always lighter than base (consistent across themes)
+ * - Base colors must allow sufficient lightening in both themes
+ */
+
+type ElevationLevel = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
+interface ElevationConfig {
+    /** Semantic name for this elevation level */
+    name: string;
+    /** Amount to lighten base color (0-1) */
+    colorAdjustment: number;
+    /** Shadow intensity */
+    shadowIntensity: 'subtle' | 'medium' | 'strong';
+    /** Shadow style: raised (floating) or pressed (inset) */
+    shadowStyle: 'raised' | 'pressed';
+    /** Description of use case */
+    description: string;
+}
+declare const elevationSystem: Record<ElevationLevel, ElevationConfig>;
+/**
+ * Get elevation configuration for a given level
+ */
+declare function getElevationConfig(level: ElevationLevel): ElevationConfig;
+/**
+ * Calculate surface color for an elevation level from a base color.
+ * Results are cached to avoid redundant calculations.
+ *
+ * @param baseColor - Base surface color (hex)
+ * @param level - Elevation level
+ * @param theme - Current theme ('light' or 'dark')
+ * @returns Calculated surface color (hex)
+ */
+declare function getElevationSurface(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark'): string;
+/**
+ * Get shadow style for an elevation level, calculated dynamically from surface color.
+ * Results are cached to avoid redundant calculations.
+ *
+ * @param baseColor - Base surface color (hex)
+ * @param level - Elevation level
+ * @param theme - Current theme ('light' or 'dark')
+ * @param isHovered - Whether element is hovered
+ * @returns ViewStyle with shadow properties
+ */
+declare function getElevationShadow(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark', isHovered?: boolean): ViewStyle;
+/**
+ * Get base surface color from theme.
+ * This is the foundation color that all elevations are calculated from.
+ *
+ * IMPORTANT: Base colors must be chosen to allow sufficient lightening.
+ *
+ * **Light Mode**: Cannot use `#FFFFFF` (white) - cannot lighten white!
+ *   - Use `#F3F4F6` (neutral[100]) - can lighten to `#FAFAFA` → `#FFFFFF`
+ *   - This allows raised elevations to be lighter (closer to white)
+ *
+ * **Dark Mode**: Need lighter base to allow sufficient lightening
+ *   - Use `#191919` (charcoal[600]) - allows lightening to `#2A2A2A` at max elevation
+ *
+ * Can be overridden to use custom base colors for special cases.
+ */
+declare function getBaseSurfaceColor(theme: 'light' | 'dark'): string;
+/**
+ * Component-specific elevation ranges
+ * Defines which elevation levels each component type can use
+ */
+declare const componentElevationRanges: {
+    readonly button: {
+        readonly allowed: readonly [2];
+        readonly default: 2;
+        readonly hover: 3;
+    };
+    readonly card: {
+        readonly allowed: readonly [1, 2, 3];
+        readonly default: 2;
+        readonly hover: 3;
+    };
+    readonly input: {
+        readonly allowed: readonly [-2, -1, 0];
+        readonly default: -1;
+    };
+    readonly overlay: {
+        readonly allowed: readonly [4, 5];
+        readonly default: 4;
+    };
+};
+type ComponentType = keyof typeof componentElevationRanges;
+/**
+ * Validate and clamp elevation to component's allowed range
+ */
+declare function getValidatedElevation(component: ComponentType, requested: ElevationLevel): ElevationLevel;
+type GlowIntensity = 'subtle' | 'medium' | 'strong';
+/**
+ * Get a glow shadow style for emphasis/active states.
+ *
+ * Creates a colored radial glow around an element, useful for:
+ * - Active recording indicators (orange glow)
+ * - Success states (green glow)
+ * - Error/danger indicators (red glow)
+ * - Focus rings and attention-drawing elements
+ *
+ * @param color - Glow color (hex string, e.g. '#FF7900')
+ * @param intensity - Glow intensity level
+ * @returns ViewStyle with platform-specific shadow properties
+ */
+declare function getGlowShadow(color: string, intensity?: GlowIntensity): ViewStyle;
+
 /**
  * Primitive Design Tokens
  *
@@ -1176,112 +1299,4 @@ declare const neumorphicShadows: {
     };
 };
 
-/**
- * Elevation System
- *
- * A unified depth system where each elevation level corresponds to:
- * - Calculated surface color (derived from base using lighten)
- * - Shadow intensity and style (raised/pressed)
- * - Dynamically calculated shadow colors (derived from surface color)
- * - Semantic name for reference
- *
- * Elevation range: -2 (deep inset) to +5 (floating overlay)
- *
- * Negative elevations: Inset/pressed elements (sunken into surface)
- * Zero elevation: Base surface (background/page level)
- * Positive elevations: Raised elements (floating above surface)
- *
- * All colors are calculated dynamically from a base surface color,
- * allowing for custom surfaces and consistent color relationships.
- *
- * Lighting Model: Light source from upper-right corner
- * - Raised elements are always lighter than base (consistent across themes)
- * - Base colors must allow sufficient lightening in both themes
- */
-
-type ElevationLevel = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
-interface ElevationConfig {
-    /** Semantic name for this elevation level */
-    name: string;
-    /** Amount to lighten base color (0-1) */
-    colorAdjustment: number;
-    /** Shadow intensity */
-    shadowIntensity: 'subtle' | 'medium' | 'strong';
-    /** Shadow style: raised (floating) or pressed (inset) */
-    shadowStyle: 'raised' | 'pressed';
-    /** Description of use case */
-    description: string;
-}
-declare const elevationSystem: Record<ElevationLevel, ElevationConfig>;
-/**
- * Get elevation configuration for a given level
- */
-declare function getElevationConfig(level: ElevationLevel): ElevationConfig;
-/**
- * Calculate surface color for an elevation level from a base color.
- * Results are cached to avoid redundant calculations.
- *
- * @param baseColor - Base surface color (hex)
- * @param level - Elevation level
- * @param theme - Current theme ('light' or 'dark')
- * @returns Calculated surface color (hex)
- */
-declare function getElevationSurface(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark'): string;
-/**
- * Get shadow style for an elevation level, calculated dynamically from surface color.
- * Results are cached to avoid redundant calculations.
- *
- * @param baseColor - Base surface color (hex)
- * @param level - Elevation level
- * @param theme - Current theme ('light' or 'dark')
- * @param isHovered - Whether element is hovered
- * @returns ViewStyle with shadow properties
- */
-declare function getElevationShadow(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark', isHovered?: boolean): ViewStyle;
-/**
- * Get base surface color from theme.
- * This is the foundation color that all elevations are calculated from.
- *
- * IMPORTANT: Base colors must be chosen to allow sufficient lightening.
- *
- * **Light Mode**: Cannot use `#FFFFFF` (white) - cannot lighten white!
- *   - Use `#F3F4F6` (neutral[100]) - can lighten to `#FAFAFA` → `#FFFFFF`
- *   - This allows raised elevations to be lighter (closer to white)
- *
- * **Dark Mode**: Need lighter base to allow sufficient lightening
- *   - Use `#191919` (charcoal[600]) - allows lightening to `#2A2A2A` at max elevation
- *
- * Can be overridden to use custom base colors for special cases.
- */
-declare function getBaseSurfaceColor(theme: 'light' | 'dark'): string;
-/**
- * Component-specific elevation ranges
- * Defines which elevation levels each component type can use
- */
-declare const componentElevationRanges: {
-    readonly button: {
-        readonly allowed: readonly [2];
-        readonly default: 2;
-        readonly hover: 3;
-    };
-    readonly card: {
-        readonly allowed: readonly [1, 2, 3];
-        readonly default: 2;
-        readonly hover: 3;
-    };
-    readonly input: {
-        readonly allowed: readonly [-2, -1, 0];
-        readonly default: -1;
-    };
-    readonly overlay: {
-        readonly allowed: readonly [4, 5];
-        readonly default: 4;
-    };
-};
-type ComponentType = keyof typeof componentElevationRanges;
-/**
- * Validate and clamp elevation to component's allowed range
- */
-declare function getValidatedElevation(component: ComponentType, requested: ElevationLevel): ElevationLevel;
-
-export { type ComponentType, type ElevationConfig, type ElevationLevel, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors };
+export { type ComponentType, type ElevationConfig, type ElevationLevel, type GlowIntensity, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors };

package/dist/theme/index.d.ts

@@ -1,5 +1,128 @@
 import { ViewStyle } from 'react-native';
 
+/**
+ * Elevation System
+ *
+ * A unified depth system where each elevation level corresponds to:
+ * - Calculated surface color (derived from base using lighten)
+ * - Shadow intensity and style (raised/pressed)
+ * - Dynamically calculated shadow colors (derived from surface color)
+ * - Semantic name for reference
+ *
+ * Elevation range: -2 (deep inset) to +5 (floating overlay)
+ *
+ * Negative elevations: Inset/pressed elements (sunken into surface)
+ * Zero elevation: Base surface (background/page level)
+ * Positive elevations: Raised elements (floating above surface)
+ *
+ * All colors are calculated dynamically from a base surface color,
+ * allowing for custom surfaces and consistent color relationships.
+ *
+ * Lighting Model: Light source from upper-right corner
+ * - Raised elements are always lighter than base (consistent across themes)
+ * - Base colors must allow sufficient lightening in both themes
+ */
+
+type ElevationLevel = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
+interface ElevationConfig {
+    /** Semantic name for this elevation level */
+    name: string;
+    /** Amount to lighten base color (0-1) */
+    colorAdjustment: number;
+    /** Shadow intensity */
+    shadowIntensity: 'subtle' | 'medium' | 'strong';
+    /** Shadow style: raised (floating) or pressed (inset) */
+    shadowStyle: 'raised' | 'pressed';
+    /** Description of use case */
+    description: string;
+}
+declare const elevationSystem: Record<ElevationLevel, ElevationConfig>;
+/**
+ * Get elevation configuration for a given level
+ */
+declare function getElevationConfig(level: ElevationLevel): ElevationConfig;
+/**
+ * Calculate surface color for an elevation level from a base color.
+ * Results are cached to avoid redundant calculations.
+ *
+ * @param baseColor - Base surface color (hex)
+ * @param level - Elevation level
+ * @param theme - Current theme ('light' or 'dark')
+ * @returns Calculated surface color (hex)
+ */
+declare function getElevationSurface(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark'): string;
+/**
+ * Get shadow style for an elevation level, calculated dynamically from surface color.
+ * Results are cached to avoid redundant calculations.
+ *
+ * @param baseColor - Base surface color (hex)
+ * @param level - Elevation level
+ * @param theme - Current theme ('light' or 'dark')
+ * @param isHovered - Whether element is hovered
+ * @returns ViewStyle with shadow properties
+ */
+declare function getElevationShadow(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark', isHovered?: boolean): ViewStyle;
+/**
+ * Get base surface color from theme.
+ * This is the foundation color that all elevations are calculated from.
+ *
+ * IMPORTANT: Base colors must be chosen to allow sufficient lightening.
+ *
+ * **Light Mode**: Cannot use `#FFFFFF` (white) - cannot lighten white!
+ *   - Use `#F3F4F6` (neutral[100]) - can lighten to `#FAFAFA` → `#FFFFFF`
+ *   - This allows raised elevations to be lighter (closer to white)
+ *
+ * **Dark Mode**: Need lighter base to allow sufficient lightening
+ *   - Use `#191919` (charcoal[600]) - allows lightening to `#2A2A2A` at max elevation
+ *
+ * Can be overridden to use custom base colors for special cases.
+ */
+declare function getBaseSurfaceColor(theme: 'light' | 'dark'): string;
+/**
+ * Component-specific elevation ranges
+ * Defines which elevation levels each component type can use
+ */
+declare const componentElevationRanges: {
+    readonly button: {
+        readonly allowed: readonly [2];
+        readonly default: 2;
+        readonly hover: 3;
+    };
+    readonly card: {
+        readonly allowed: readonly [1, 2, 3];
+        readonly default: 2;
+        readonly hover: 3;
+    };
+    readonly input: {
+        readonly allowed: readonly [-2, -1, 0];
+        readonly default: -1;
+    };
+    readonly overlay: {
+        readonly allowed: readonly [4, 5];
+        readonly default: 4;
+    };
+};
+type ComponentType = keyof typeof componentElevationRanges;
+/**
+ * Validate and clamp elevation to component's allowed range
+ */
+declare function getValidatedElevation(component: ComponentType, requested: ElevationLevel): ElevationLevel;
+type GlowIntensity = 'subtle' | 'medium' | 'strong';
+/**
+ * Get a glow shadow style for emphasis/active states.
+ *
+ * Creates a colored radial glow around an element, useful for:
+ * - Active recording indicators (orange glow)
+ * - Success states (green glow)
+ * - Error/danger indicators (red glow)
+ * - Focus rings and attention-drawing elements
+ *
+ * @param color - Glow color (hex string, e.g. '#FF7900')
+ * @param intensity - Glow intensity level
+ * @returns ViewStyle with platform-specific shadow properties
+ */
+declare function getGlowShadow(color: string, intensity?: GlowIntensity): ViewStyle;
+
 /**
  * Primitive Design Tokens
  *
@@ -1176,112 +1299,4 @@ declare const neumorphicShadows: {
     };
 };
 
-/**
- * Elevation System
- *
- * A unified depth system where each elevation level corresponds to:
- * - Calculated surface color (derived from base using lighten)
- * - Shadow intensity and style (raised/pressed)
- * - Dynamically calculated shadow colors (derived from surface color)
- * - Semantic name for reference
- *
- * Elevation range: -2 (deep inset) to +5 (floating overlay)
- *
- * Negative elevations: Inset/pressed elements (sunken into surface)
- * Zero elevation: Base surface (background/page level)
- * Positive elevations: Raised elements (floating above surface)
- *
- * All colors are calculated dynamically from a base surface color,
- * allowing for custom surfaces and consistent color relationships.
- *
- * Lighting Model: Light source from upper-right corner
- * - Raised elements are always lighter than base (consistent across themes)
- * - Base colors must allow sufficient lightening in both themes
- */
-
-type ElevationLevel = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
-interface ElevationConfig {
-    /** Semantic name for this elevation level */
-    name: string;
-    /** Amount to lighten base color (0-1) */
-    colorAdjustment: number;
-    /** Shadow intensity */
-    shadowIntensity: 'subtle' | 'medium' | 'strong';
-    /** Shadow style: raised (floating) or pressed (inset) */
-    shadowStyle: 'raised' | 'pressed';
-    /** Description of use case */
-    description: string;
-}
-declare const elevationSystem: Record<ElevationLevel, ElevationConfig>;
-/**
- * Get elevation configuration for a given level
- */
-declare function getElevationConfig(level: ElevationLevel): ElevationConfig;
-/**
- * Calculate surface color for an elevation level from a base color.
- * Results are cached to avoid redundant calculations.
- *
- * @param baseColor - Base surface color (hex)
- * @param level - Elevation level
- * @param theme - Current theme ('light' or 'dark')
- * @returns Calculated surface color (hex)
- */
-declare function getElevationSurface(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark'): string;
-/**
- * Get shadow style for an elevation level, calculated dynamically from surface color.
- * Results are cached to avoid redundant calculations.
- *
- * @param baseColor - Base surface color (hex)
- * @param level - Elevation level
- * @param theme - Current theme ('light' or 'dark')
- * @param isHovered - Whether element is hovered
- * @returns ViewStyle with shadow properties
- */
-declare function getElevationShadow(baseColor: string, level: ElevationLevel, theme: 'light' | 'dark', isHovered?: boolean): ViewStyle;
-/**
- * Get base surface color from theme.
- * This is the foundation color that all elevations are calculated from.
- *
- * IMPORTANT: Base colors must be chosen to allow sufficient lightening.
- *
- * **Light Mode**: Cannot use `#FFFFFF` (white) - cannot lighten white!
- *   - Use `#F3F4F6` (neutral[100]) - can lighten to `#FAFAFA` → `#FFFFFF`
- *   - This allows raised elevations to be lighter (closer to white)
- *
- * **Dark Mode**: Need lighter base to allow sufficient lightening
- *   - Use `#191919` (charcoal[600]) - allows lightening to `#2A2A2A` at max elevation
- *
- * Can be overridden to use custom base colors for special cases.
- */
-declare function getBaseSurfaceColor(theme: 'light' | 'dark'): string;
-/**
- * Component-specific elevation ranges
- * Defines which elevation levels each component type can use
- */
-declare const componentElevationRanges: {
-    readonly button: {
-        readonly allowed: readonly [2];
-        readonly default: 2;
-        readonly hover: 3;
-    };
-    readonly card: {
-        readonly allowed: readonly [1, 2, 3];
-        readonly default: 2;
-        readonly hover: 3;
-    };
-    readonly input: {
-        readonly allowed: readonly [-2, -1, 0];
-        readonly default: -1;
-    };
-    readonly overlay: {
-        readonly allowed: readonly [4, 5];
-        readonly default: 4;
-    };
-};
-type ComponentType = keyof typeof componentElevationRanges;
-/**
- * Validate and clamp elevation to component's allowed range
- */
-declare function getValidatedElevation(component: ComponentType, requested: ElevationLevel): ElevationLevel;
-
-export { type ComponentType, type ElevationConfig, type ElevationLevel, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors };
+export { type ComponentType, type ElevationConfig, type ElevationLevel, type GlowIntensity, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors };

package/dist/theme/index.js

@@ -926,7 +926,7 @@ function hsvToRgb(h, s, v) {
   const c = v * s;
   const x = c * (1 - Math.abs(h / 60 % 2 - 1));
   const m = v - c;
-  let rPrime = 0, gPrime = 0, bPrime = 0;
+  let rPrime, gPrime, bPrime;
   if (h >= 0 && h < 60) {
     rPrime = c;
     gPrime = x;
@@ -1477,6 +1477,28 @@ function getValidatedElevation(component, requested) {
     (prev, curr) => Math.abs(curr - requested) < Math.abs(prev - requested) ? curr : prev
   );
 }
+var glowConfig = {
+  subtle: { blur: 12, spread: 0, opacity: 0.25 },
+  medium: { blur: 20, spread: 2, opacity: 0.4 },
+  strong: { blur: 30, spread: 4, opacity: 0.55 }
+};
+function getGlowShadow(color, intensity = "medium") {
+  const config = glowConfig[intensity];
+  const rgb = hexToRgb(color);
+  if (!rgb) return {};
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: `0 0 ${config.blur}px ${config.spread}px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${config.opacity})`
+    },
+    default: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: config.opacity,
+      shadowRadius: config.blur / 2,
+      elevation: 0
+    }
+  });
+}
 
 exports.buttonSizes = buttonSizes;
 exports.componentElevationRanges = componentElevationRanges;
@@ -1494,6 +1516,7 @@ exports.getDiscreteRainbowColor = getDiscreteRainbowColor;
 exports.getElevationConfig = getElevationConfig;
 exports.getElevationShadow = getElevationShadow;
 exports.getElevationSurface = getElevationSurface;
+exports.getGlowShadow = getGlowShadow;
 exports.getHoverColors = getHoverColors;
 exports.getSemanticColors = getSemanticColors;
 exports.getThemeCSSVars = getThemeCSSVars;