@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

package/dist/src/styles/hooks/index.js

@@ -0,0 +1,2 @@
+export { useTheme } from './useTheme';
+export { useStyleSheet } from './useStyleSheet';

package/dist/src/styles/hooks/useStyleSheet.d.ts

@@ -0,0 +1,4 @@
+import { DependencyList } from 'react';
+import type { LumenStyleSheet, LumenStyleSheetExtended } from '../types';
+export declare const useStyleSheet: <S extends LumenStyleSheet>(styleCreator: LumenStyleSheetExtended<S>, deps: DependencyList) => S;
+//# sourceMappingURL=useStyleSheet.d.ts.map

package/dist/src/styles/hooks/useStyleSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleSheet.d.ts","sourceRoot":"","sources":["../../../../src/styles/hooks/useStyleSheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAmB,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EACV,eAAe,EACf,uBAAuB,EAExB,MAAM,UAAU,CAAC;AAGlB,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,eAAe,EACrD,cAAc,uBAAuB,CAAC,CAAC,CAAC,EACxC,MAAM,cAAc,KACnB,CAaF,CAAC"}

package/dist/src/styles/hooks/useStyleSheet.js

@@ -0,0 +1,14 @@
+import { useMemo, useRef } from 'react';
+import { useTheme } from './useTheme';
+export const useStyleSheet = (styleCreator, deps) => {
+    const { theme } = useTheme();
+    const styleCreatorRef = useRef(styleCreator);
+    styleCreatorRef.current = styleCreator;
+    return useMemo(() => {
+        const isFunction = typeof styleCreatorRef.current === 'function';
+        const styles = isFunction
+            ? styleCreatorRef.current(theme)
+            : styleCreatorRef.current;
+        return styles;
+    }, [theme, ...deps]);
+};

package/dist/src/styles/hooks/useTheme.d.ts

@@ -0,0 +1,3 @@
+import { type LumenStyleSheetContextValue } from '../provider/LumenStyleSheetProvider';
+export declare const useTheme: () => LumenStyleSheetContextValue;
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/src/styles/hooks/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/hooks/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,qCAAqC,CAAC;AAE7C,eAAO,MAAM,QAAQ,QAAO,2BAO3B,CAAC"}

package/dist/src/styles/{Provider → hooks}/useTheme.js

@@ -1,4 +1,4 @@
-import { useLumenStyleSheetContext, } from './LumenStyleSheetProvider';
+import { useLumenStyleSheetContext, } from '../provider/LumenStyleSheetProvider';
 export const useTheme = () => {
     const context = useLumenStyleSheetContext({
         consumerName: 'useTheme',

package/dist/src/styles/index.d.ts

@@ -1,6 +1,5 @@
-export { LumenStyleSheetProvider } from './Provider/LumenStyleSheetProvider';
-export { LumenStyleSheet } from './LumenStyleSheet';
+export { LumenStyleSheetProvider } from './provider/LumenStyleSheetProvider';
+export { useTheme, useStyleSheet } from './hooks';
 export * from './types';
-export * from './factories';
-export * from './utils';
+export * from './lx';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAClD,cAAc,SAAS,CAAC;AACxB,cAAc,MAAM,CAAC"}

package/dist/src/styles/index.js

@@ -1,5 +1,4 @@
-export { LumenStyleSheetProvider } from './Provider/LumenStyleSheetProvider';
-export { LumenStyleSheet } from './LumenStyleSheet';
+export { LumenStyleSheetProvider } from './provider/LumenStyleSheetProvider';
+export { useTheme, useStyleSheet } from './hooks';
 export * from './types';
-export * from './factories';
-export * from './utils';
+export * from './lx';

package/dist/src/styles/lx/areLxPropsEqual.d.ts

@@ -0,0 +1,3 @@
+import { StyledPressableProps, StyledTextProps, StyledViewProps } from '../types';
+export declare const areLxPropsEqual: (prevProps: StyledViewProps | StyledTextProps | StyledPressableProps, nextProps: StyledViewProps | StyledTextProps | StyledPressableProps) => boolean;
+//# sourceMappingURL=areLxPropsEqual.d.ts.map

package/dist/src/styles/lx/areLxPropsEqual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"areLxPropsEqual.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/areLxPropsEqual.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,UAAU,CAAC;AAalB,eAAO,MAAM,eAAe,GAC1B,WAAW,eAAe,GAAG,eAAe,GAAG,oBAAoB,EACnE,WAAW,eAAe,GAAG,eAAe,GAAG,oBAAoB,KAClE,OAWF,CAAC"}

package/dist/src/styles/lx/createStyledPressable.d.ts

@@ -0,0 +1,21 @@
+import type { Pressable } from 'react-native';
+import { PressableStyleItem } from '../types';
+/**
+ * Factory function to create a styled Pressable component.
+ *
+ * Supports `style` as an object, function, or array of objects/functions (including nested).
+ *
+ * ```tsx
+ * // Create a styled Pressable
+ * const Pressable = createStyledPressable(RNPressable);
+ *
+ * // Usage with array of styles
+ * <Pressable style={[props.style, ({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })]} />
+ * ```
+ */
+export declare const createStyledPressable: (Component: typeof Pressable) => import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    lx?: import("..").LumenViewStyle;
+} & Omit<import("react-native").PressableProps, "style"> & {
+    style?: PressableStyleItem;
+} & import("react").RefAttributes<import("react-native").View>>>;
+//# sourceMappingURL=createStyledPressable.d.ts.map

package/dist/src/styles/lx/createStyledPressable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStyledPressable.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/createStyledPressable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,SAAS,EAGV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAwB,kBAAkB,EAAE,MAAM,UAAU,CAAC;AA+BpE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAW,OAAO,SAAS;;;;gEAiChE,CAAC"}

package/dist/src/styles/{factories → lx}/createStyledPressable.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, memo } from 'react';
 import { StyleSheet } from 'react-native';
-import { useTheme } from '../Provider/useTheme';
-import { resolveViewStyle } from '../resolveStyle/resolveStyle';
 import { areLxPropsEqual } from './areLxPropsEqual';
+import { useResolveViewStyle } from './resolveStyle';
 /**
  * Check if any style item (including nested arrays) is a function
  */
@@ -37,18 +36,17 @@ const resolveStyleFunctions = (style, state) => {
  */
 export const createStyledPressable = (Component) => {
     const StyledComponent = memo(forwardRef(({ lx = {}, style, ...props }, ref) => {
-        const { theme } = useTheme();
-        const resolvedLxStyle = resolveViewStyle(theme, lx);
+        const resolvedStyle = useResolveViewStyle(lx);
         if (!hasStyleFunction(style)) {
             const finalStyle = StyleSheet.flatten([
-                resolvedLxStyle,
                 style,
+                resolvedStyle,
             ]);
             return _jsx(Component, { ref: ref, ...props, style: finalStyle });
         }
         const mergedStyle = (state) => {
-            const resolvedStyle = resolveStyleFunctions(style, state);
-            return StyleSheet.flatten([resolvedLxStyle, resolvedStyle]);
+            const resolvedBareStyle = resolveStyleFunctions(style, state);
+            return StyleSheet.flatten([resolvedBareStyle, resolvedStyle]);
         };
         return _jsx(Component, { ref: ref, ...props, style: mergedStyle });
     }), areLxPropsEqual);

package/dist/src/styles/lx/createStyledText.d.ts

@@ -0,0 +1,14 @@
+import type { Text } from 'react-native';
+/**
+ * Factory function to create a styled Text component.
+ *
+ * ```tsx
+ * // Create a basic Text
+ * const StyledText = createStyledText(Text);
+ * ```
+ */
+export declare const createStyledText: (Component: typeof Text) => import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    lx?: import("..").LumenTextStyle;
+    typography?: keyof import("..").LumenStyleSheetTheme["typographies"];
+} & import("react-native").TextProps & import("react").RefAttributes<Text>>>;
+//# sourceMappingURL=createStyledText.d.ts.map

package/dist/src/styles/lx/createStyledText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStyledText.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/createStyledText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAMpD;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,WAAW,OAAO,IAAI;;uBAWtC,iDAGD;4EAcf,CAAC"}

package/dist/src/styles/{factories → lx}/createStyledText.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, memo } from 'react';
 import { StyleSheet } from 'react-native';
-import { useTheme } from '../Provider/useTheme';
-import { resolveTextStyle } from '../resolveStyle/resolveStyle';
+import { useTheme } from '../hooks/useTheme';
 import { areLxPropsEqual } from './areLxPropsEqual';
+import { useResolveTextStyle } from './resolveStyle';
 /**
  * Factory function to create a styled Text component.
  *
@@ -15,12 +15,12 @@ import { areLxPropsEqual } from './areLxPropsEqual';
 export const createStyledText = (Component) => {
     const StyledComponent = memo(forwardRef(({ typography = 'body3', lx = {}, style, ...props }, ref) => {
         const { theme } = useTheme();
-        const resolvedStyle = resolveTextStyle(theme, lx);
-        const resolvedTypographyStyles = theme.typographies[typography];
+        const resolvedStyle = useResolveTextStyle(lx);
+        const typographyStyle = theme.typographies[typography];
         const finalStyle = StyleSheet.flatten([
-            resolvedStyle,
-            resolvedTypographyStyles,
+            typographyStyle,
             style,
+            resolvedStyle,
         ]);
         return _jsx(Component, { ref: ref, ...props, style: finalStyle });
     }), areLxPropsEqual);

package/dist/src/styles/lx/createStyledView.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View } from 'react-native';
+/**
+ * Factory function to create a styled View component.
+ *
+ * ```tsx
+ * // Create a basic View
+ * const StyledView = createStyledView(View);
+ * ```
+ */
+export declare const createStyledView: (Component: typeof View) => React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    lx?: import("..").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<View>>>;
+//# sourceMappingURL=createStyledView.d.ts.map

package/dist/src/styles/lx/createStyledView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStyledView.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/createStyledView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAOhD;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,WAAW,OAAO,IAAI;;kEAqBtD,CAAC"}

package/dist/src/styles/{factories → lx}/createStyledView.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, memo } from 'react';
 import { StyleSheet } from 'react-native';
-import { useTheme } from '../Provider/useTheme';
-import { resolveViewStyle } from '../resolveStyle/resolveStyle';
 import { areLxPropsEqual } from './areLxPropsEqual';
+import { useResolveViewStyle } from './resolveStyle';
 /**
  * Factory function to create a styled View component.
  *
@@ -14,9 +13,8 @@ import { areLxPropsEqual } from './areLxPropsEqual';
  */
 export const createStyledView = (Component) => {
     const StyledComponent = memo(forwardRef(({ lx = {}, style, ...props }, ref) => {
-        const { theme } = useTheme();
-        const resolvedStyle = resolveViewStyle(theme, lx);
-        const finalStyle = StyleSheet.flatten([resolvedStyle, style]);
+        const resolvedStyle = useResolveViewStyle(lx);
+        const finalStyle = StyleSheet.flatten([style, resolvedStyle]);
         return _jsx(Component, { ref: ref, ...props, style: finalStyle });
     }), areLxPropsEqual);
     // Set display name for debugging

package/dist/src/styles/{factories → lx}/index.d.ts

@@ -1,4 +1,5 @@
 export * from './createStyledPressable';
 export * from './createStyledText';
 export * from './createStyledView';
+export * from './resolveStyle';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/styles/lx/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/dist/src/styles/{factories → lx}/index.js

@@ -1,3 +1,4 @@
 export * from './createStyledPressable';
 export * from './createStyledText';
 export * from './createStyledView';
+export * from './resolveStyle';

package/dist/src/styles/{resolveStyle → lx}/resolveConfig.d.ts

@@ -2,12 +2,10 @@ import { LumenTextStyle, LumenViewStyle } from '../types';
 /**
  * Configuration for each style prop
  * - path: Theme path for token lookup (array of keys)
- * - spread: true for props that spread into multiple style properties (typography)
  * - No path = passthrough prop (value passed as-is)
  */
-export type PropConfig = {
+type PropConfig = {
     path?: string[];
-    spread?: boolean;
 };
 /**
  * View style props configuration
@@ -25,4 +23,5 @@ export declare const LUMEN_VIEW_STYLE_PROPS: Set<keyof LumenViewStyle>;
  * Set for O(1) text prop lookup
  */
 export declare const LUMEN_TEXT_STYLE_PROPS: Set<keyof LumenTextStyle>;
+export {};
 //# sourceMappingURL=resolveConfig.d.ts.map

package/dist/src/styles/lx/resolveConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveConfig.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/resolveConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1D;;;;GAIG;AACH,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,cAAc,EAAE,UAAU,CAyF5D,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,cAAc,EAAE,UAAU,CAM5D,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAE9B,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAE9B,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC"}

package/dist/src/styles/{resolveStyle → lx}/resolveConfig.js

@@ -89,7 +89,6 @@ export const VIEW_PROP_CONFIG = {
 export const TEXT_PROP_CONFIG = {
     ...VIEW_PROP_CONFIG,
     color: { path: ['colors', 'text'] },
-    typography: { path: ['typographies'], spread: true },
     textAlign: {},
     textTransform: {},
     textDecorationLine: {},

package/dist/src/styles/lx/resolveStyle.d.ts

@@ -0,0 +1,11 @@
+import { type ViewStyle, type TextStyle } from 'react-native';
+import type { LumenTextStyle, LumenViewStyle } from '../types';
+/**
+ * Transform lx props to StyleSheet style object for View
+ */
+export declare const useResolveViewStyle: (lx: LumenViewStyle, bareStyle?: ViewStyle) => ViewStyle;
+/**
+ * Transform lx props to StyleSheet style object for Text
+ */
+export declare const useResolveTextStyle: (lx: LumenTextStyle, bareStyle?: TextStyle) => TextStyle;
+//# sourceMappingURL=resolveStyle.d.ts.map

package/dist/src/styles/lx/resolveStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveStyle.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/resolveStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAc,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAEV,cAAc,EACd,cAAc,EACf,MAAM,UAAU,CAAC;AAoClB;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,IAAI,cAAc,EAClB,YAAY,SAAS,KACpB,SAIF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,IAAI,cAAc,EAClB,YAAY,SAAS,KACpB,SAIF,CAAC"}

package/dist/src/styles/{resolveStyle → lx}/resolveStyle.js

@@ -1,12 +1,14 @@
 import { getObjectPath } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
 import { VIEW_PROP_CONFIG, TEXT_PROP_CONFIG } from './resolveConfig';
 /**
  * Unified style resolver
  * Config-driven: single loop resolves all props via provided config
  */
-const resolveStyle = (theme, lumenStyle, config) => {
+const resolveStyle = (theme, lx, config) => {
     const resolved = {};
-    for (const [prop, value] of Object.entries(lumenStyle)) {
+    for (const [prop, value] of Object.entries(lx)) {
         const propConfig = config[prop];
         if (!propConfig)
             continue;
@@ -20,21 +22,23 @@ const resolveStyle = (theme, lumenStyle, config) => {
             ...propConfig.path,
             value,
         ]);
-        // Spread props (like typography) merge into resolved styles
-        if (propConfig.spread && resolvedValue) {
-            Object.assign(resolved, resolvedValue);
-        }
-        else {
-            resolved[prop] = resolvedValue;
-        }
+        resolved[prop] = resolvedValue;
     }
     return resolved;
 };
 /**
  * Transform lx props to StyleSheet style object for View
  */
-export const resolveViewStyle = (theme, lumenStyle) => resolveStyle(theme, lumenStyle, VIEW_PROP_CONFIG);
+export const useResolveViewStyle = (lx, bareStyle) => {
+    const { theme } = useTheme();
+    const resolvedStyle = resolveStyle(theme, lx, VIEW_PROP_CONFIG);
+    return StyleSheet.flatten([bareStyle, resolvedStyle]);
+};
 /**
  * Transform lx props to StyleSheet style object for Text
  */
-export const resolveTextStyle = (theme, lumenStyle) => resolveStyle(theme, lumenStyle, TEXT_PROP_CONFIG);
+export const useResolveTextStyle = (lx, bareStyle) => {
+    const { theme } = useTheme();
+    const resolvedStyle = resolveStyle(theme, lx, TEXT_PROP_CONFIG);
+    return StyleSheet.flatten([bareStyle, resolvedStyle]);
+};

package/dist/src/styles/{Provider → provider}/LumenStyleSheetProvider.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ColorSchemeName } from 'react-native';
 import { type LumenStyleSheetTheme } from '../types';
-import { LumenStyleSheetProviderProps } from './LumenStyleSheetProvider.types';
+import { type LumenStyleSheetProviderProps } from './types';
 export type LumenStyleSheetContextValue = {
     theme: LumenStyleSheetTheme;
     colorScheme: ColorSchemeName;

package/dist/src/styles/provider/LumenStyleSheetProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LumenStyleSheetProvider.d.ts","sourceRoot":"","sources":["../../../../src/styles/provider/LumenStyleSheetProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAC/C,OAAO,EAEL,eAAe,EAEhB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,KAAK,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAM5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAKF,eAAO,MAAM,yBAAyB;;;uGAA6B,CAAC;AAEpE,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA+CpE,CAAC"}

package/dist/src/styles/{Provider → provider}/LumenStyleSheetProvider.js

@@ -2,9 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
 import { useEffect, useMemo } from 'react';
 import { Appearance, useColorScheme as useReactNativeColorScheme, } from 'react-native';
-import { RuntimeConstants } from '../../lib/utils';
-import { useControllableState } from '../../lib/utils/use-controllable-state/use-controllable-state';
-import { createStylesheetTheme } from './createStylesheetTheme';
+import { RuntimeConstants, useControllableState } from '../../lib/utils';
+import { createStylesheetTheme } from '../theme/createStylesheetTheme';
 const DARK_MODE = 'dark';
 const LIGHT_MODE = 'light';
 const DEFAULT_COLOR_SCHEME = DARK_MODE;

package/dist/src/styles/provider/index.d.ts

@@ -0,0 +1,2 @@
+export { LumenStyleSheetProvider, useLumenStyleSheetContext, type LumenStyleSheetContextValue, } from './LumenStyleSheetProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/styles/provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EACzB,KAAK,2BAA2B,GACjC,MAAM,2BAA2B,CAAC"}

package/dist/src/styles/provider/index.js

@@ -0,0 +1 @@
+export { LumenStyleSheetProvider, useLumenStyleSheetContext, } from './LumenStyleSheetProvider';

package/dist/src/styles/{Provider/LumenStyleSheetProvider.types.d.ts → provider/types.d.ts}

@@ -6,4 +6,4 @@ export type LumenStyleSheetProviderProps = PropsWithChildren & {
     colorScheme?: ColorSchemeName;
     onColorSchemeChange?: (scheme: ColorSchemeName) => void;
 };
-//# sourceMappingURL=LumenStyleSheetProvider.types.d.ts.map
+//# sourceMappingURL=types.d.ts.map

package/dist/src/styles/provider/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/styles/provider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,GAAG;IAC7D,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACzD,CAAC"}

package/dist/src/styles/provider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/styles/{Provider → theme}/createStylesheetTheme.d.ts

@@ -8,7 +8,7 @@ export declare const getNegativeSpacings: <Input extends LumenTheme["spacings"],
  * The theme object from design-core is not directly compatible with React Native's StyleSheet.
  *
  * We must transform and extend the theme so it can be easily used with
- * LumenStyleSheet utilities like `useCreate`, as well as components such as
+ * utilities like `useStyleSheet`, as well as components such as
  * `createStyledText` and `createStyledView`. This process augments the design system
  * theme with React Native–specific structure and shorthand.
  */

package/dist/src/styles/theme/createStylesheetTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStylesheetTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme/createStylesheetTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,KAAK,SAAS,UAAU,CAAC,UAAU,CAAC,EACpC,MAAM,GAAG,kBAAkB,CAAC,KAAK,CAAC,EAElC,WAAU,KAAmB,KAC5B,MAIF,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,GAChC,OAAO,UAAU,KAChB,oBASF,CAAC"}

package/dist/src/styles/{Provider → theme}/createStylesheetTheme.js

@@ -8,7 +8,7 @@ export const getNegativeSpacings = (spacings = {}) => {
  * The theme object from design-core is not directly compatible with React Native's StyleSheet.
  *
  * We must transform and extend the theme so it can be easily used with
- * LumenStyleSheet utilities like `useCreate`, as well as components such as
+ * utilities like `useStyleSheet`, as well as components such as
  * `createStyledText` and `createStyledView`. This process augments the design system
  * theme with React Native–specific structure and shorthand.
  */

package/dist/src/styles/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { createStylesheetTheme, getNegativeSpacings, } from './createStylesheetTheme';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/styles/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC"}

package/dist/src/styles/theme/index.js

@@ -0,0 +1 @@
+export { createStylesheetTheme, getNegativeSpacings, } from './createStylesheetTheme';

package/dist/src/styles/types/factories.types.d.ts

@@ -0,0 +1,41 @@
+import { PressableProps, PressableStateCallbackType, TextProps as RNTextProps, ViewProps, ViewStyle } from 'react-native';
+import { LumenTextStyle, LumenViewStyle } from './lx.types';
+import { LumenStyleSheetTheme } from './theme.types';
+type StyleFn = (state: PressableStateCallbackType) => ViewStyle;
+export type PressableStyleItem = ViewStyle | StyleFn | PressableStyleItem[] | null | undefined;
+export type ExtendRNPressableProps = Omit<PressableProps, 'style'> & {
+    style?: PressableStyleItem;
+};
+/**
+ * View API that extends lx style property
+ */
+export type StyledViewProps = {
+    /**
+     * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+     */
+    lx?: LumenViewStyle;
+} & ViewProps;
+/**
+ * Text API that extends lx style property
+ */
+export type StyledTextProps = {
+    /**
+     * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+     */
+    lx?: LumenTextStyle;
+    /**
+     * Typography preset
+     */
+    typography?: keyof LumenStyleSheetTheme['typographies'];
+} & RNTextProps;
+/**
+ * Pressable API that extends lx style property
+ */
+export type StyledPressableProps = {
+    /**
+     * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+     */
+    lx?: LumenViewStyle;
+} & ExtendRNPressableProps;
+export {};
+//# sourceMappingURL=factories.types.d.ts.map

package/dist/src/styles/types/factories.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"factories.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/factories.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,0BAA0B,EAC1B,SAAS,IAAI,WAAW,EACxB,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,OAAO,GACP,kBAAkB,EAAE,GACpB,IAAI,GACJ,SAAS,CAAC;AAEd,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACzD,GAAG,WAAW,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,sBAAsB,CAAC"}

package/dist/src/styles/types/factories.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/styles/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './create.types';
 export * from './theme.types';
-export * from './styled.types';
+export * from './lx.types';
+export * from './factories.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/styles/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/src/styles/types/index.js

@@ -1,3 +1,4 @@
 export * from './create.types';
 export * from './theme.types';
-export * from './styled.types';
+export * from './lx.types';
+export * from './factories.types';

package/dist/src/styles/types/{styled.types.d.ts → lx.types.d.ts}

@@ -11,7 +11,6 @@ type TextColorToken = keyof LumenStyleSheetTheme['colors']['text'];
 type BorderColorToken = keyof LumenStyleSheetTheme['colors']['border'];
 type BorderRadiusToken = keyof LumenStyleSheetTheme['borderRadius'];
 type ShadowToken = keyof LumenStyleSheetTheme['shadows'];
-type TypographyToken = keyof LumenStyleSheetTheme['typographies'];
 /**
  * Main public types - combine token props with RN props
  */
@@ -127,31 +126,9 @@ export type LumenViewStyle = {
 };
 export type LumenTextStyle = LumenViewStyle & {
     color?: TextColorToken;
-    typography?: TypographyToken;
     textAlign?: TextStyle['textAlign'];
     textTransform?: TextStyle['textTransform'];
     textDecorationLine?: TextStyle['textDecorationLine'];
 };
-/**
- * Derived style-only types (for internal resolver use)
- */
-export type LumenViewStyleLX = {
-    /**
-     * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
-     */
-    lx?: LumenViewStyle;
-};
-export type LumenPressableStyleLX = {
-    /**
-     * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
-     */
-    lx?: LumenViewStyle;
-};
-export type LumenTextStyleLX = {
-    /**
-     * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
-     */
-    lx?: LumenTextStyle;
-};
 export {};
-//# sourceMappingURL=styled.types.d.ts.map
+//# sourceMappingURL=lx.types.d.ts.map

package/dist/src/styles/types/lx.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lx.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/lx.types.ts"],"names":[],"mappings":"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"}

package/dist/src/styles/types/lx.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/icon-template.js

@@ -10,7 +10,7 @@ const template = (variables, { tpl }) => {
  * 
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  * 
  * @example
@@ -20,8 +20,8 @@ const template = (variables, { tpl }) => {
  * <${componentName} />
  * 
  * @example
- * // With custom size and className (NativeWind)
- * <${componentName} size={40} className="text-warning" />
+ * // With custom size and style
+ * <${componentName} size={40} color="warning" lx={{ marginTop: 's4' }} />
  * 
  * @example
  * // Used within a Button component

package/jest.config.ts

@@ -2,7 +2,6 @@ import type { Config } from 'jest';
 
 const transformIncludePatterns = [
   '@react-native/polyfills',
-  'react-native-css-interop',
   'react-native-svg',
   'react-native-reanimated',
   '(jest-)?react-native',

package/jest.setup.ts

@@ -44,16 +44,6 @@ jest.mock('@gorhom/bottom-sheet', () => {
   };
 });
 
-// Mock react-native-css-interop to pass through components unchanged
-jest.mock('react-native-css-interop', () => {
-  const mockReact = jest.requireActual<typeof import('react')>('react');
-  return {
-    cssInterop: (component: any) => component,
-    createInteropElement: (component: any, ...args: any[]) =>
-      mockReact.createElement(component, ...args),
-  };
-});
-
 // Mock react-native-reanimated
 jest.mock('react-native-reanimated', () => {
   const mockRN =