@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

package/dist/src/lib/Components/Select/Select.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React, { useState, useEffect, useCallback, useId } from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { ChevronDown } from '../../Symbols';
 import { useControllableState, extractTextFromChildren } from '../../utils';
 import { SlotPressable } from '../Slot';
+import { Box, Pressable, Text } from '../Utility';
 import { useSelectActions } from './GlobalSelectContext';
 import { SelectContextProvider, useSelectSafeContext } from './SelectContext';
-const triggerStyles = cn('group relative h-48 bg-muted rounded-sm px-16 flex-row items-center justify-between');
 /**
  * The root component that manages a select's state.
  *
@@ -66,7 +66,7 @@ export const Select = ({ children, open: controlledOpen, defaultOpen = false, on
     return (_jsx(SelectContextProvider, { selectId: selectId, open: internalOpen ?? false, setOpen: setOpen, value: internalValue, onValueChange: handleValueChange, disabled: disabled, items: items, setItems: setItems, children: children }));
 };
 Select.displayName = 'Select';
-export const SelectTrigger = ({ children, className, label, labelClassName, asChild = false, disabled: triggerDisabled, ...props }) => {
+export const SelectTrigger = ({ children, lx, style, label, asChild = false, disabled: triggerDisabled, ...props }) => {
     const { selectId, setOpen, items, value, disabled: contextDisabled, label: contextLabel, onValueChange, } = useSelectSafeContext({
         consumerName: 'SelectTrigger',
         contextRequired: true,
@@ -97,24 +97,104 @@ export const SelectTrigger = ({ children, className, label, labelClassName, asCh
         onValueChange,
     ]);
     const hasValue = value !== undefined && value !== '';
-    const isFloatingLabel = hasValue;
+    const styles = useTriggerStyles({
+        disabled: !!disabled,
+        hasValue,
+        hasLabel: !!finalLabel,
+    });
     const Comp = asChild ? SlotPressable : Pressable;
-    return (_jsxs(Comp, { disabled: disabled, onPress: handlePress, className: cn(triggerStyles, disabled && 'opacity-50', className), ...props, children: [finalLabel && (_jsx(Text, { className: cn('absolute left-16 text-muted w-full transition-all duration-200', isFloatingLabel ? 'top-6 body-4' : 'top-14 body-2', disabled && 'text-disabled', labelClassName), numberOfLines: 1, children: finalLabel })), _jsx(View, { className: cn('flex-1', finalLabel && hasValue && 'pt-16 pb-2', finalLabel && !hasValue && 'py-0'), children: children }), _jsx(ChevronDown, { size: 20, className: cn('text-muted ml-8', disabled && 'text-disabled') })] }));
+    return (_jsxs(Comp, { lx: lx, style: [styles.trigger, style], disabled: disabled, onPress: handlePress, ...props, children: [finalLabel && (_jsx(Text, { style: styles.label, numberOfLines: 1, children: finalLabel })), _jsx(View, { style: styles.contentWrapper, children: children }), _jsx(ChevronDown, { size: 20, style: styles.chevron })] }));
+};
+const useTriggerStyles = ({ disabled, hasValue, hasLabel, }) => {
+    return useStyleSheet((t) => {
+        return {
+            trigger: StyleSheet.flatten([
+                {
+                    position: 'relative',
+                    width: t.sizes.full,
+                    height: t.sizes.s48,
+                    backgroundColor: t.colors.bg.muted,
+                    borderRadius: t.borderRadius.sm,
+                    paddingHorizontal: t.spacings.s16,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                },
+                disabled && {
+                    opacity: 0.5,
+                },
+            ]),
+            label: StyleSheet.flatten([
+                t.typographies.body2,
+                {
+                    position: 'absolute',
+                    left: t.spacings.s16,
+                    color: t.colors.text.muted,
+                    width: '100%',
+                },
+                hasValue
+                    ? {
+                        top: t.spacings.s6,
+                        ...t.typographies.body4,
+                    }
+                    : {
+                        top: t.spacings.s14,
+                        ...t.typographies.body2,
+                    },
+                disabled && {
+                    color: t.colors.text.disabled,
+                },
+            ]),
+            contentWrapper: StyleSheet.flatten([
+                {
+                    flex: 1,
+                },
+                hasLabel &&
+                    hasValue && {
+                    paddingTop: t.spacings.s16,
+                    paddingBottom: t.spacings.s2,
+                },
+                hasLabel &&
+                    !hasValue && {
+                    paddingVertical: 0,
+                },
+            ]),
+            chevron: StyleSheet.flatten([
+                {
+                    flexShrink: 0,
+                    color: t.colors.text.muted,
+                    marginLeft: t.spacings.s8,
+                },
+                disabled && {
+                    color: t.colors.text.disabled,
+                },
+            ]),
+        };
+    }, [disabled, hasValue, hasLabel]);
 };
 SelectTrigger.displayName = 'SelectTrigger';
 /**
  * Displays the current selected value
  */
-export const SelectValue = ({ className }) => {
+export const SelectValue = () => {
     const { value, items } = useSelectSafeContext({
         consumerName: 'SelectValue',
         contextRequired: true,
     });
+    const styles = useStyleSheet((t) => ({
+        text: StyleSheet.flatten([
+            t.typographies.body2,
+            {
+                color: t.colors.text.base,
+                textAlign: 'left',
+            },
+        ]),
+    }), []);
     const selectedItem = items.find((item) => item.type === 'item' && item.value === value);
     if (!selectedItem || selectedItem.type !== 'item') {
         return null;
     }
-    return (_jsx(Text, { className: cn('truncate text-left text-base body-2', className), numberOfLines: 1, children: selectedItem.label }));
+    return (_jsx(Text, { style: styles.text, numberOfLines: 1, ellipsizeMode: 'tail', children: selectedItem.label }));
 };
 SelectValue.displayName = 'SelectValue';
 /**
@@ -169,12 +249,30 @@ export const SelectContent = ({ children }) => {
     return null;
 };
 SelectContent.displayName = 'SelectContent';
-export const SelectGroup = ({ children, className, ...props }) => {
-    return (_jsx(View, { className: cn('flex w-full gap-4', className), ...props, children: children }));
+export const SelectGroup = ({ children, lx, style, ...props }) => {
+    const styles = useStyleSheet((t) => ({
+        group: {
+            width: t.sizes.full,
+            gap: t.spacings.s4,
+        },
+    }), []);
+    return (_jsx(Box, { lx: lx, style: [styles.group, style], ...props, children: children }));
 };
 SelectGroup.displayName = 'SelectGroup';
-export const SelectLabel = ({ children, className, ...props }) => {
-    return (_jsx(Text, { className: cn('px-8 pb-0 pt-8 text-muted body-3-semi-bold mb-4', className), ...props, children: children }));
+export const SelectLabel = ({ children, lx, style, ...props }) => {
+    const styles = useStyleSheet((t) => ({
+        label: StyleSheet.flatten([
+            t.typographies.body3SemiBold,
+            {
+                paddingHorizontal: t.spacings.s8,
+                paddingBottom: 0,
+                paddingTop: t.spacings.s8,
+                color: t.colors.text.muted,
+                marginBottom: t.spacings.s4,
+            },
+        ]),
+    }), []);
+    return (_jsx(Text, { lx: lx, style: [styles.label, style], ...props, children: children }));
 };
 SelectLabel.displayName = 'SelectLabel';
 /**
@@ -187,11 +285,27 @@ export const SelectItem = () => {
     return null;
 };
 SelectItem.displayName = 'SelectItem';
-export const SelectItemText = ({ children, className, ...props }) => {
-    return (_jsx(Text, { className: cn('text-base body-2', className), ...props, children: children }));
+export const SelectItemText = ({ children, lx, style, ...props }) => {
+    const styles = useStyleSheet((t) => ({
+        text: StyleSheet.flatten([
+            t.typographies.body2,
+            {
+                color: t.colors.text.base,
+            },
+        ]),
+    }), []);
+    return (_jsx(Text, { lx: lx, style: [styles.text, style], ...props, children: children }));
 };
 SelectItemText.displayName = 'SelectItemText';
-export const SelectSeparator = ({ className, ...props }) => {
-    return (_jsx(View, { className: cn('mx-8 my-4 h-1 bg-muted-subtle', className), ...props }));
+export const SelectSeparator = ({ lx, style, ...props }) => {
+    const styles = useStyleSheet((t) => ({
+        separator: {
+            marginHorizontal: t.spacings.s8,
+            marginVertical: t.spacings.s4,
+            height: t.sizes.s1,
+            backgroundColor: t.colors.border.mutedSubtle,
+        },
+    }), []);
+    return _jsx(Box, { lx: lx, style: [styles.separator, style], ...props });
 };
 SelectSeparator.displayName = 'SelectSeparator';

package/dist/src/lib/Components/Select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EACL,MAAM,EASP,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAa7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,IAAI,EAAE,KAoClB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2CxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA8B5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuChC,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EACL,MAAM,EASP,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAgB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,IAAI,EAAE,KA2ClB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA2C/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqC5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA8ChC,CAAC"}

package/dist/src/lib/Components/Select/Select.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { View } from 'react-native';
+import { Box } from '../Utility';
 import { GlobalSelectBottomSheet } from './GlobalSelectBottomSheet';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemText, SelectGroup, SelectLabel, SelectSeparator, } from './Select';
 const meta = {
@@ -16,36 +16,64 @@ const meta = {
         SelectSeparator,
     },
     title: 'Selection/Select',
+    parameters: {
+        layout: 'fullscreen',
+    },
 };
 export default meta;
 export const Base = {
     render: () => {
         const [value, setValue] = useState('apple');
-        return (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Choose a fruit', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'apple', children: _jsx(SelectItemText, { children: "Apple" }) }), _jsx(SelectItem, { value: 'banana', children: _jsx(SelectItemText, { children: "Banana" }) }), _jsx(SelectItem, { value: 'orange', children: _jsx(SelectItemText, { children: "Orange" }) }), _jsx(SelectItem, { value: 'grape', children: _jsx(SelectItemText, { children: "Grape" }) }), _jsx(SelectItem, { value: 'mango', children: _jsx(SelectItemText, { children: "Mango" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
+                        flex: 1,
+                        minHeight: 400,
+                        padding: 24,
+                        width: '100%',
+                    }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Choose a fruit', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'apple', children: _jsx(SelectItemText, { children: "Apple" }) }), _jsx(SelectItem, { value: 'banana', children: _jsx(SelectItemText, { children: "Banana" }) }), _jsx(SelectItem, { value: 'orange', children: _jsx(SelectItemText, { children: "Orange" }) }), _jsx(SelectItem, { value: 'grape', children: _jsx(SelectItemText, { children: "Grape" }) }), _jsx(SelectItem, { value: 'mango', children: _jsx(SelectItemText, { children: "Mango" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
     },
 };
 export const WithGroups = {
     render: () => {
         const [value, setValue] = useState('btc');
-        return (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Select cryptocurrency', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Popular" }), _jsx(SelectItem, { value: 'btc', children: _jsx(SelectItemText, { children: "Bitcoin" }) }), _jsx(SelectItem, { value: 'eth', children: _jsx(SelectItemText, { children: "Ethereum" }) })] }), _jsx(SelectSeparator, {}), _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Altcoins" }), _jsx(SelectItem, { value: 'ada', children: _jsx(SelectItemText, { children: "Cardano" }) }), _jsx(SelectItem, { value: 'dot', children: _jsx(SelectItemText, { children: "Polkadot" }) }), _jsx(SelectItem, { value: 'sol', children: _jsx(SelectItemText, { children: "Solana" }) })] })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
+                        flex: 1,
+                        minHeight: 400,
+                        padding: 24,
+                        width: '100%',
+                    }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Select cryptocurrency', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Popular" }), _jsx(SelectItem, { value: 'btc', children: _jsx(SelectItemText, { children: "Bitcoin" }) }), _jsx(SelectItem, { value: 'eth', children: _jsx(SelectItemText, { children: "Ethereum" }) })] }), _jsx(SelectSeparator, {}), _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Altcoins" }), _jsx(SelectItem, { value: 'ada', children: _jsx(SelectItemText, { children: "Cardano" }) }), _jsx(SelectItem, { value: 'dot', children: _jsx(SelectItemText, { children: "Polkadot" }) }), _jsx(SelectItem, { value: 'sol', children: _jsx(SelectItemText, { children: "Solana" }) })] })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
     },
 };
 export const WithDisabledItems = {
     render: () => {
         const [value, setValue] = useState('option1');
-        return (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Select option', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'option1', children: _jsx(SelectItemText, { children: "Option 1" }) }), _jsx(SelectItem, { value: 'option2', disabled: true, children: _jsx(SelectItemText, { children: "Option 2 (Disabled)" }) }), _jsx(SelectItem, { value: 'option3', children: _jsx(SelectItemText, { children: "Option 3" }) }), _jsx(SelectItem, { value: 'option4', disabled: true, children: _jsx(SelectItemText, { children: "Option 4 (Disabled)" }) }), _jsx(SelectItem, { value: 'option5', children: _jsx(SelectItemText, { children: "Option 5" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
+                        flex: 1,
+                        minHeight: 400,
+                        padding: 24,
+                        width: '100%',
+                    }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Select option', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'option1', children: _jsx(SelectItemText, { children: "Option 1" }) }), _jsx(SelectItem, { value: 'option2', disabled: true, children: _jsx(SelectItemText, { children: "Option 2 (Disabled)" }) }), _jsx(SelectItem, { value: 'option3', children: _jsx(SelectItemText, { children: "Option 3" }) }), _jsx(SelectItem, { value: 'option4', disabled: true, children: _jsx(SelectItemText, { children: "Option 4 (Disabled)" }) }), _jsx(SelectItem, { value: 'option5', children: _jsx(SelectItemText, { children: "Option 5" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
     },
 };
 export const DisabledSelect = {
     render: () => {
         const [value, setValue] = useState('apple');
-        return (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsxs(Select, { value: value, onValueChange: setValue, disabled: true, children: [_jsx(SelectTrigger, { label: 'Disabled select', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'apple', children: _jsx(SelectItemText, { children: "Apple" }) }), _jsx(SelectItem, { value: 'banana', children: _jsx(SelectItemText, { children: "Banana" }) }), _jsx(SelectItem, { value: 'orange', children: _jsx(SelectItemText, { children: "Orange" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
+                        flex: 1,
+                        minHeight: 400,
+                        padding: 24,
+                        width: '100%',
+                    }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, disabled: true, children: [_jsx(SelectTrigger, { label: 'Disabled select', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'apple', children: _jsx(SelectItemText, { children: "Apple" }) }), _jsx(SelectItem, { value: 'banana', children: _jsx(SelectItemText, { children: "Banana" }) }), _jsx(SelectItem, { value: 'orange', children: _jsx(SelectItemText, { children: "Orange" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
     },
 };
 export const WithChangeCallback = {
     render: () => {
         const [value, setValue] = useState('option1');
-        return (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsxs(Select, { value: value, onValueChange: (newValue) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
+                        flex: 1,
+                        minHeight: 400,
+                        padding: 24,
+                        width: '100%',
+                    }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: (newValue) => {
                                 setValue(newValue);
                                 alert(`Selected: ${newValue}`);
                             }, onOpenChange: (open) => {

package/dist/src/lib/Components/Select/types.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
-import { PressableProps, ViewProps, TextProps } from 'react-native';
+import { PressableProps } from 'react-native';
+import { StyledViewProps, StyledPressableProps, StyledTextProps } from '../../../styles';
+import { BoxProps } from '../Utility';
 export type SelectProps = {
     /**
      * The children of the select (SelectTrigger, SelectContent)
@@ -44,28 +46,18 @@ export type SelectTriggerProps = {
      * The children to render inside the trigger
      */
     children?: ReactNode;
-    /**
-     * Extra class names to apply to the trigger element
-     * @example className='border-error'
-     */
-    className?: string;
     /**
      * The label text that floats above the input when focused or filled
      * @example label='Select an option'
      */
     label?: string;
-    /**
-     * Additional class names to apply to the label element
-     * @example labelClassName='text-error'
-     */
-    labelClassName?: string;
     /**
      * Change the default rendered element for the one passed as a child,
      * merging their props and behavior.
      * @default false
      */
     asChild?: boolean;
-} & Omit<PressableProps, 'children' | 'onPress'>;
+} & Omit<StyledPressableProps, 'children'>;
 export type SelectContentProps = {
     /**
      * The children of the select content (SelectItem, SelectGroup, etc.)
@@ -77,18 +69,14 @@ export type SelectGroupProps = {
      * The children of the select group (SelectLabel, SelectItem)
      */
     children: ReactNode;
-} & ViewProps;
+} & StyledViewProps;
 export type SelectLabelProps = {
     /**
      * The children of the select label
      * @required
      */
     children: ReactNode;
-    /**
-     * Extra class names to apply to the label element
-     */
-    className?: string;
-} & TextProps;
+} & StyledTextProps;
 export type SelectItemProps = {
     /**
      * The value of the select item
@@ -108,10 +96,6 @@ export type SelectItemProps = {
      * The disabled state of the select item
      */
     disabled?: boolean;
-    /**
-     * Extra class names to apply to the item element
-     */
-    className?: string;
 } & Omit<PressableProps, 'children' | 'onPress' | 'disabled'>;
 export type SelectItemTextProps = {
     /**
@@ -119,17 +103,8 @@ export type SelectItemTextProps = {
      * @required
      */
     children: ReactNode;
-    /**
-     * Extra class names to apply to the item text element
-     */
-    className?: string;
-} & TextProps;
-export type SelectSeparatorProps = {
-    /**
-     * Extra class names to apply to the separator element
-     */
-    className?: string;
-} & ViewProps;
+} & StyledTextProps;
+export type SelectSeparatorProps = {} & BoxProps;
 export type SelectItemData = {
     type: 'item';
     value: string;

package/dist/src/lib/Components/Select/types.d.ts.map

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

package/dist/src/lib/Components/Slot/Slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Slot/Slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,IAAI,EAEJ,IAAI,EACJ,KAAK,EACL,cAAc,EACd,SAAS,EACT,SAAS,EACT,UAAU,EAGV,0BAA0B,EAE3B,MAAM,cAAc,CAAC;AAEtB,QAAA,MAAM,aAAa,6EAoBjB,CAAC;AAIH,QAAA,MAAM,QAAQ,wEAmBb,CAAC;AAIF,QAAA,MAAM,QAAQ,wEAmBb,CAAC;AAQF,QAAA,MAAM,SAAS;eAHF,KAAK,CAAC,SAAS;+BAuB1B,CAAC;AAgFH,wBAAgB,cAAc,CAC5B,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC,WAK7D;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Slot/Slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,IAAI,EAEJ,IAAI,EACJ,KAAK,EACL,cAAc,EACd,SAAS,EACT,SAAS,EACT,UAAU,EAGV,0BAA0B,EAE3B,MAAM,cAAc,CAAC;AAEtB,QAAA,MAAM,aAAa,6EAoBjB,CAAC;AAIH,QAAA,MAAM,QAAQ,wEAmBb,CAAC;AAIF,QAAA,MAAM,QAAQ,wEAmBb,CAAC;AAQF,QAAA,MAAM,SAAS;eAHF,KAAK,CAAC,SAAS;+BAuB1B,CAAC;AA4EH,wBAAgB,cAAc,CAC5B,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC,WAK7D;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/lib/Components/Slot/Slot.js

@@ -91,11 +91,6 @@ function mergeProps(slotProps, childProps) {
         else if (propName === 'style') {
             overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
         }
-        else if (propName === 'className') {
-            overrideProps[propName] = [slotPropValue, childPropValue]
-                .filter(Boolean)
-                .join(' ');
-        }
     }
     return { ...slotProps, ...overrideProps };
 }

package/dist/src/lib/Components/Spinner/Spinner.d.ts

@@ -6,15 +6,15 @@ import { View } from 'react-native';
  * <Spinner />
  *
  * @example
- * // With custom color
- * <Spinner color={theme.colors.text.base} />
+ * // With custom color using lx prop
+ * <Spinner lx={{ color: 'interactive' }} />
  *
  * @example
- * // With lx props for layout
- * <Spinner lx={{ marginTop: 's8' }} />
+ * // With lx props for layout and color
+ * <Spinner lx={{ marginTop: 's8', color: 'muted' }} />
  */
 export declare const Spinner: import("react").ForwardRefExoticComponent<{
     size?: import("../Icon").IconSize;
-    color?: string;
-} & Omit<import("../../../styles").StyledViewProps, "children"> & import("react").RefAttributes<View>>;
+    color?: import("../../../styles").LumenTextStyle["color"];
+} & Omit<import("../../../styles").StyledTextProps, "children"> & import("react").RefAttributes<View>>;
 //# sourceMappingURL=Spinner.d.ts.map

package/dist/src/lib/Components/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AAQtD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO;;;sGA+CnB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AAsCtD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO;;;sGA4BnB,CAAC"}

package/dist/src/lib/Components/Spinner/Spinner.js

@@ -1,30 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, memo, useEffect, useRef } from 'react';
 import { Animated, Easing } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
-import { LumenStyleSheet } from '../../../styles';
+import { useResolveTextStyle, useTheme } from '../../../styles';
 import { RuntimeConstants } from '../../utils';
 import { Box } from '../Utility';
-/**
- * A basic spinner component for loading states.
- *
- * @example
- * <Spinner />
- *
- * @example
- * // With custom color
- * <Spinner color={theme.colors.text.base} />
- *
- * @example
- * // With lx props for layout
- * <Spinner lx={{ marginTop: 's8' }} />
- */
-export const Spinner = forwardRef(({ lx, style, size = 16, color, ...props }, ref) => {
-    const { t } = useCommonTranslation();
-    const { theme } = LumenStyleSheet.useTheme();
+const SpinAnimation = memo(({ children }) => {
     const spinValue = useRef(new Animated.Value(0)).current;
-    const strokeColor = color ?? theme.colors.text.base;
     useEffect(() => {
         const animation = Animated.loop(Animated.timing(spinValue, {
             toValue: 1,
@@ -39,6 +22,28 @@ export const Spinner = forwardRef(({ lx, style, size = 16, color, ...props }, re
         inputRange: [0, 1],
         outputRange: ['0deg', '360deg'],
     });
-    return (_jsx(Box, { ref: ref, lx: { flexShrink: 0, ...lx }, style: style, ...props, children: _jsx(Animated.View, { style: { transform: [{ rotate: spin }] }, children: _jsx(Svg, { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', accessibilityLabel: t('components.spinner.loadingAriaLabel'), children: _jsx(Path, { d: 'M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8', stroke: strokeColor, strokeWidth: '1.5', strokeLinecap: 'round' }) }) }) }));
+    return (_jsx(Animated.View, { style: { transform: [{ rotate: spin }] }, children: children }));
+});
+SpinAnimation.displayName = 'SpinAnimation';
+/**
+ * A basic spinner component for loading states.
+ *
+ * @example
+ * <Spinner />
+ *
+ * @example
+ * // With custom color using lx prop
+ * <Spinner lx={{ color: 'interactive' }} />
+ *
+ * @example
+ * // With lx props for layout and color
+ * <Spinner lx={{ marginTop: 's8', color: 'muted' }} />
+ */
+export const Spinner = forwardRef(({ lx = {}, size = 16, color, ...props }, ref) => {
+    const { t } = useCommonTranslation();
+    const { theme } = useTheme();
+    const resolvedColorStyle = useResolveTextStyle({ color });
+    const strokeColor = resolvedColorStyle?.color ?? theme.colors.text.base;
+    return (_jsx(Box, { ref: ref, lx: { flexShrink: 0, ...lx }, ...props, children: _jsx(SpinAnimation, { children: _jsx(Svg, { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', accessibilityLabel: t('components.spinner.loadingAriaLabel'), children: _jsx(Path, { d: 'M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8', stroke: strokeColor, strokeWidth: '1.5', strokeLinecap: 'round' }) }) }) }));
 });
 Spinner.displayName = 'Spinner';

package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts

@@ -5,4 +5,5 @@ export default meta;
 type Story = StoryObj<typeof Spinner>;
 export declare const Base: Story;
 export declare const Sizes: Story;
+export declare const Colors: Story;
 //# sourceMappingURL=Spinner.stories.d.ts.map

package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAY9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAsCnB,CAAC"}
+{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAY9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA2DnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAmCpB,CAAC"}

package/dist/src/lib/Components/Spinner/Spinner.stories.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
 import { Spinner } from './Spinner';
 const meta = {
     title: 'Communication/Spinner',
@@ -26,5 +28,23 @@ export const Sizes = {
             control: false,
         },
     },
-    render: () => (_jsxs("div", { className: 'flex items-center justify-center gap-32', children: [_jsxs("div", { className: 'flex flex-col items-center gap-4', children: [_jsx(Spinner, { size: 12 }), _jsx("span", { className: 'text-muted body-4', children: "12" })] }), _jsxs("div", { className: 'flex flex-col items-center gap-4', children: [_jsx(Spinner, { size: 16 }), _jsx("span", { className: 'text-muted body-4', children: "16" })] }), _jsxs("div", { className: 'flex flex-col items-center gap-4', children: [_jsx(Spinner, { size: 20 }), _jsx("span", { className: 'text-muted body-4', children: "20" })] }), _jsxs("div", { className: 'flex flex-col items-center gap-4', children: [_jsx(Spinner, { size: 24 }), _jsx("span", { className: 'text-muted body-4', children: "24" })] }), _jsxs("div", { className: 'flex flex-col items-center gap-4', children: [_jsx(Spinner, { size: 40 }), _jsx("span", { className: 'text-muted body-4', children: "40" })] }), _jsxs("div", { className: 'flex flex-col items-center gap-4', children: [_jsx(Spinner, { size: 48 }), _jsx("span", { className: 'text-muted body-4', children: "48" })] }), _jsxs("div", { className: 'flex flex-col items-center gap-4', children: [_jsx(Spinner, { size: 56 }), _jsx("span", { className: 'text-muted body-4', children: "56" })] })] })),
+    render: () => (_jsxs(Box, { lx: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 's32',
+        }, children: [_jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 12 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "12" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 16 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "16" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 20 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "20" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 24 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "24" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 40 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "40" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 48 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "48" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 56 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "56" })] })] })),
+};
+export const Colors = {
+    argTypes: {
+        size: {
+            control: false,
+        },
+    },
+    render: () => (_jsxs(Box, { lx: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 's32',
+        }, children: [_jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 40, color: 'base' }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "base" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 40, color: 'muted' }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "muted" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 40, color: 'interactive' }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "interactive" })] })] })),
 };

package/dist/src/lib/Components/Spinner/types.d.ts

@@ -1,5 +1,6 @@
-import { StyledViewProps } from '../../../styles';
+import { LumenTextStyle } from '../../../styles';
 import { IconSize } from '../Icon';
+import { TextProps } from '../Utility';
 export type SpinnerProps = {
     /**
      * The size of the spinner icon in pixels.
@@ -7,9 +8,9 @@ export type SpinnerProps = {
      */
     size?: IconSize;
     /**
-     * The color of the spinner stroke.
-     * @default text.base color.
+     * The color of the spinner icon.
+     * @default 'base'
      */
-    color?: string;
-} & Omit<StyledViewProps, 'children'>;
+    color?: LumenTextStyle['color'];
+} & Omit<TextProps, 'children'>;
 //# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Spinner/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/Spot/Spot.d.ts

@@ -1,4 +1,4 @@
-import { SpotProps } from './Spot.types';
+import { SpotProps } from './types';
 /**
  * A circular status indicator component that displays different types of content based on appearance.
  *
@@ -9,7 +9,7 @@ import { SpotProps } from './Spot.types';
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_media-graphics-spot--docs Storybook}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the spot's core appearance (colors, size, etc). Use the `appearance` prop instead.
  *
  * @example

package/dist/src/lib/Components/Spot/Spot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spot.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/Spot.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAkCnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CAgGpC,CAAC"}
+{"version":3,"file":"Spot.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/Spot.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAkB,SAAS,EAAY,MAAM,SAAS,CAAC;AA0E9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CA2DpC,CAAC"}