@idealyst/theme 1.2.60 → 1.2.61

package/package.json

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

package/src/index.ts

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

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]);
+}