@idealyst/theme 1.2.60 → 1.2.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/theme",
-  "version": "1.2.60",
+  "version": "1.2.62",
   "description": "Theming system for Idealyst Framework",
   "readme": "README.md",
   "main": "src/index.ts",

package/src/index.ts

@@ -25,6 +25,12 @@ export * from './responsive';
 export * from './breakpoints';
 export * from './useResponsiveStyle';
 
+// Style props hook (platform-specific via .native.ts)
+export { useStyleProps, type StyleProps } from './useStyleProps';
+
+// Shadow utility (platform-specific via .native.ts)
+export { shadow, type ShadowOptions, type ShadowStyle } from './shadow';
+
 // Animation tokens and utilities
 // Note: Use '@idealyst/theme/animation' for full animation API
 export { durations, easings, presets } from './animation/tokens';

package/src/shadow.native.ts

@@ -0,0 +1,141 @@
+/**
+ * shadow - Native implementation
+ *
+ * Creates cross-platform shadow styles from a simple, unified API.
+ * All parameters work consistently across platforms.
+ *
+ * @example
+ * ```tsx
+ * import { View } from '@idealyst/components';
+ * import { shadow } from '@idealyst/theme';
+ *
+ * <View style={shadow({ radius: 10, y: 4 })} />
+ * <View style={shadow({ radius: 20, y: 8, color: '#3b82f6', opacity: 0.3 })} />
+ * ```
+ */
+
+import { Platform } from 'react-native';
+
+export interface ShadowOptions {
+  /** Shadow radius/size - controls blur and elevation (default: 10) */
+  radius?: number;
+  /** Horizontal offset in pixels (default: 0) */
+  x?: number;
+  /** Vertical offset in pixels (default: 4) */
+  y?: number;
+  /** Shadow color (default: '#000000') */
+  color?: string;
+  /** Shadow opacity 0-1 (default: 0.15) */
+  opacity?: number;
+}
+
+export interface ShadowStyle {
+  // Web
+  boxShadow?: string;
+  // iOS
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  // Android
+  elevation?: number;
+}
+
+/**
+ * Approximate Android elevation from shadow radius.
+ * Range is clamped to 0-24 (Android's max elevation).
+ */
+function radiusToElevation(radius: number): number {
+  // Map radius to elevation: radius 10 ≈ elevation 3-4
+  // This provides reasonable visual parity with iOS/web
+  const elevation = Math.round(radius / 3);
+  return Math.max(0, Math.min(24, elevation));
+}
+
+/**
+ * Parse color string to RGBA components.
+ * Supports: #RGB, #RRGGBB, #RRGGBBAA, rgb(), rgba()
+ */
+function parseColor(color: string): { r: number; g: number; b: number; a: number } {
+  // Default fallback
+  const fallback = { r: 0, g: 0, b: 0, a: 1 };
+
+  // Handle rgba(r, g, b, a) or rgb(r, g, b)
+  const rgbaMatch = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/i);
+  if (rgbaMatch) {
+    return {
+      r: parseInt(rgbaMatch[1], 10),
+      g: parseInt(rgbaMatch[2], 10),
+      b: parseInt(rgbaMatch[3], 10),
+      a: rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1,
+    };
+  }
+
+  // Handle hex: #RGB, #RRGGBB, #RRGGBBAA
+  const hex = color.replace('#', '');
+  if (hex.length === 3) {
+    // #RGB -> #RRGGBB
+    return {
+      r: parseInt(hex[0] + hex[0], 16),
+      g: parseInt(hex[1] + hex[1], 16),
+      b: parseInt(hex[2] + hex[2], 16),
+      a: 1,
+    };
+  } else if (hex.length === 6) {
+    // #RRGGBB
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: 1,
+    };
+  } else if (hex.length === 8) {
+    // #RRGGBBAA
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: parseInt(hex.slice(6, 8), 16) / 255,
+    };
+  }
+
+  return fallback;
+}
+
+/**
+ * Creates a cross-platform shadow style object.
+ *
+ * @param options - Shadow configuration
+ * @returns Style object with platform-appropriate shadow properties
+ */
+export function shadow(options: ShadowOptions = {}): ShadowStyle {
+  const {
+    radius = 10,
+    x = 0,
+    y = 4,
+    color = '#000000',
+    opacity = 0.15,
+  } = options;
+
+  const parsed = parseColor(color);
+  // Multiply color's alpha with opacity parameter
+  const finalAlpha = parsed.a * opacity;
+
+  if (Platform.OS === 'android') {
+    // Android: elevation + shadowColor (limited control)
+    // Offset (x, y) is not supported - elevation controls everything
+    // Bake opacity into shadowColor as alpha channel
+    return {
+      elevation: radiusToElevation(radius),
+      shadowColor: `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${finalAlpha})`,
+    };
+  }
+
+  // iOS: Full shadow control
+  return {
+    shadowColor: `rgb(${parsed.r}, ${parsed.g}, ${parsed.b})`,
+    shadowOffset: { width: x, height: y },
+    shadowOpacity: finalAlpha,
+    shadowRadius: radius / 2, // iOS shadowRadius is roughly half the CSS blur
+  };
+}

package/src/shadow.ts

@@ -0,0 +1,119 @@
+/**
+ * shadow - Web implementation
+ *
+ * Creates cross-platform shadow styles from a simple, unified API.
+ * All parameters work consistently across platforms.
+ *
+ * @example
+ * ```tsx
+ * import { View } from '@idealyst/components';
+ * import { shadow } from '@idealyst/theme';
+ *
+ * <View style={shadow({ radius: 10, y: 4 })} />
+ * <View style={shadow({ radius: 20, y: 8, color: '#3b82f6', opacity: 0.3 })} />
+ * ```
+ */
+
+export interface ShadowOptions {
+  /** Shadow radius/size - controls blur and spread (default: 10) */
+  radius?: number;
+  /** Horizontal offset in pixels (default: 0) */
+  x?: number;
+  /** Vertical offset in pixels (default: 4) */
+  y?: number;
+  /** Shadow color (default: '#000000') */
+  color?: string;
+  /** Shadow opacity 0-1 (default: 0.15) */
+  opacity?: number;
+}
+
+export interface ShadowStyle {
+  // Web
+  boxShadow?: string;
+  // iOS
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  // Android
+  elevation?: number;
+}
+
+/**
+ * Parse color string to RGBA components.
+ * Supports: #RGB, #RRGGBB, #RRGGBBAA, rgb(), rgba()
+ */
+function parseColor(color: string): { r: number; g: number; b: number; a: number } {
+  // Default fallback
+  const fallback = { r: 0, g: 0, b: 0, a: 1 };
+
+  // Handle rgba(r, g, b, a) or rgb(r, g, b)
+  const rgbaMatch = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/i);
+  if (rgbaMatch) {
+    return {
+      r: parseInt(rgbaMatch[1], 10),
+      g: parseInt(rgbaMatch[2], 10),
+      b: parseInt(rgbaMatch[3], 10),
+      a: rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1,
+    };
+  }
+
+  // Handle hex: #RGB, #RRGGBB, #RRGGBBAA
+  const hex = color.replace('#', '');
+  if (hex.length === 3) {
+    // #RGB -> #RRGGBB
+    return {
+      r: parseInt(hex[0] + hex[0], 16),
+      g: parseInt(hex[1] + hex[1], 16),
+      b: parseInt(hex[2] + hex[2], 16),
+      a: 1,
+    };
+  } else if (hex.length === 6) {
+    // #RRGGBB
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: 1,
+    };
+  } else if (hex.length === 8) {
+    // #RRGGBBAA
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: parseInt(hex.slice(6, 8), 16) / 255,
+    };
+  }
+
+  return fallback;
+}
+
+/**
+ * Creates a cross-platform shadow style object.
+ *
+ * @param options - Shadow configuration
+ * @returns Style object with platform-appropriate shadow properties
+ */
+export function shadow(options: ShadowOptions = {}): ShadowStyle {
+  const {
+    radius = 10,
+    x = 0,
+    y = 4,
+    color = '#000000',
+    opacity = 0.15,
+  } = options;
+
+  const parsed = parseColor(color);
+  // Multiply color's alpha with opacity parameter
+  const finalAlpha = parsed.a * opacity;
+
+  // Derive blur and spread from radius for natural-looking shadows
+  // Blur is the main visual size, spread adds subtle expansion
+  const blur = radius;
+  const spread = Math.round(radius * 0.1); // 10% of radius for subtle spread
+
+  return {
+    boxShadow: `${x}px ${y}px ${blur}px ${spread}px rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${finalAlpha})`,
+  };
+}

package/src/useStyleProps.native.ts

@@ -0,0 +1,62 @@
+/**
+ * useStyleProps - Native implementation
+ *
+ * Unified hook for applying styles across platforms.
+ * On native, combines Unistyles and additional styles into an array.
+ *
+ * @example
+ * ```tsx
+ * import { View } from '@idealyst/components';
+ * import { useStyleProps } from '@idealyst/theme';
+ *
+ * function MyComponent({ style }: { style?: StyleProp<ViewStyle> }) {
+ *   const styleProps = useStyleProps(
+ *     (myStyles.container as any)({}),  // Unistyles
+ *     [style, { marginTop: 16 }]        // Additional styles (array or single)
+ *   );
+ *
+ *   // Native: spreads { style: [unistyles, ...inlineStyles] }
+ *   return <View {...styleProps}>Content</View>;
+ * }
+ * ```
+ */
+
+import { useMemo } from 'react';
+import type { StyleProp, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+
+type AnyStyle = ViewStyle | TextStyle | ImageStyle;
+type StyleInput = AnyStyle | StyleProp<AnyStyle> | undefined | null | false;
+
+export interface StyleProps {
+  /** Style array to pass to React Native components */
+  style?: StyleInput[];
+}
+
+/**
+ * Hook that returns style props for native components.
+ *
+ * @param unistyles - Unistyles style (from stylesheet)
+ * @param inlineStyles - Additional inline styles (single style or array)
+ * @returns Object with style array to spread onto element
+ */
+export function useStyleProps(
+  unistyles: StyleInput,
+  inlineStyles?: StyleInput | StyleInput[]
+): StyleProps {
+  return useMemo(() => {
+    // Combine unistyles with inline styles into array
+    const styles: StyleInput[] = [unistyles];
+
+    if (inlineStyles) {
+      if (Array.isArray(inlineStyles)) {
+        for (const s of inlineStyles) {
+          styles.push(s as StyleInput);
+        }
+      } else {
+        styles.push(inlineStyles);
+      }
+    }
+
+    return { style: styles };
+  }, [unistyles, inlineStyles]);
+}

package/src/useStyleProps.ts

@@ -0,0 +1,61 @@
+/**
+ * useStyleProps - Web implementation
+ *
+ * Unified hook for applying styles across platforms.
+ * On web, wraps Unistyles with getWebProps to generate CSS class names,
+ * and passes additional styles for the style prop.
+ *
+ * @example
+ * ```tsx
+ * import { View } from '@idealyst/components';
+ * import { useStyleProps } from '@idealyst/theme';
+ *
+ * function MyComponent({ style }: { style?: StyleProp<ViewStyle> }) {
+ *   const styleProps = useStyleProps(
+ *     (myStyles.container as any)({}),  // Unistyles (goes through getWebProps)
+ *     [style, { marginTop: 16 }]        // Additional styles (array or single)
+ *   );
+ *
+ *   // Web: spreads { className, ref, style }
+ *   return <View {...styleProps}>Content</View>;
+ * }
+ * ```
+ */
+
+import { useMemo } from 'react';
+import type { StyleProp, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+import { getWebProps } from 'react-native-unistyles/web';
+
+type AnyStyle = ViewStyle | TextStyle | ImageStyle | React.CSSProperties;
+type StyleInput = AnyStyle | StyleProp<AnyStyle> | undefined | null | false;
+
+export interface StyleProps {
+  /** CSS class name(s) for the element (from Unistyles) */
+  className?: string;
+  /** Ref to attach to the element (required for Unistyles on web) */
+  ref?: React.Ref<any>;
+  /** Additional inline styles */
+  style?: StyleInput | StyleInput[];
+}
+
+/**
+ * Hook that returns style props for web components.
+ *
+ * @param unistyles - Unistyles style (from stylesheet), passed to getWebProps
+ * @param inlineStyles - Additional inline styles (single style or array)
+ * @returns Object with className, ref, and style to spread onto element
+ */
+export function useStyleProps(
+  unistyles: StyleInput,
+  inlineStyles?: StyleInput | StyleInput[]
+): StyleProps {
+  return useMemo(() => {
+    // Process Unistyles through getWebProps
+    const webProps = getWebProps(unistyles as any);
+
+    return {
+      ...webProps,
+      style: inlineStyles,
+    };
+  }, [unistyles, inlineStyles]);
+}