@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/dist/src/lib/Components/CardButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CardButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CardButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/src/lib/Components/CardButton/index.js

@@ -1,2 +1,2 @@
 export * from './CardButton';
-export * from './CardButton.types';
+export * from './types';

package/dist/src/lib/Components/CardButton/{CardButton.types.d.ts → types.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
-import { PressableProps } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
 import { IconSize } from '../Icon';
 export type CardButtonProps = {
     /**
@@ -15,7 +16,7 @@ export type CardButtonProps = {
      */
     icon?: React.ComponentType<{
         size?: IconSize;
-        className?: string;
+        style?: StyleProp<ViewStyle>;
     }>;
     /**
      * The main title of the card button.
@@ -29,5 +30,5 @@ export type CardButtonProps = {
      * If true, hides the chevron arrow on the right side.
      */
     hideChevron?: boolean;
-} & Omit<PressableProps, 'disabled'>;
-//# sourceMappingURL=CardButton.types.d.ts.map
+} & Omit<StyledPressableProps, 'disabled'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CardButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;KAAE,CAAC,CAAC;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/Checkbox/BaseCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckbox.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/BaseCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAoC,IAAI,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EACL,cAAc,EAEd,uBAAuB,EAGxB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAkDxC,KAAK,qBAAqB,GAAG,uBAAuB,GAAG;IACrD,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAKF,QAAA,MAAM,gBAAgB;;;;;;cATV,aAAa,CAAC,SAAS,CAAC;sBAChB,aAAa,CAAC,iBAAiB,CAAC;eACvC,aAAa,CAAC,UAAU,CAAC;eACzB,aAAa,CAAC,UAAU,CAAC;8BAqBrC,CAAC;AAgDF,QAAA,MAAM,qBAAqB;;8BA2BzB,CAAC;AAGH,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"BaseCheckbox.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/BaseCheckbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAGL,IAAI,EAEL,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,cAAc,EAEd,uBAAuB,EAGxB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAMxC,KAAK,qBAAqB,GAAG,uBAAuB,GAAG;IACrD,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAKF,QAAA,MAAM,gBAAgB;;;;;;cATV,aAAa,CAAC,SAAS,CAAC;sBAChB,aAAa,CAAC,iBAAiB,CAAC;eACvC,aAAa,CAAC,UAAU,CAAC;eACzB,aAAa,CAAC,UAAU,CAAC;8BAqBrC,CAAC;AA+CF,QAAA,MAAM,qBAAqB;;8BA6BzB,CAAC;AA0DH,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}

package/dist/src/lib/Components/Checkbox/BaseCheckbox.js

@@ -1,51 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
 import React, { useCallback } from 'react';
-import { Pressable, View } from 'react-native';
-import { cn } from '../../utils';
+import { Pressable, View, StyleSheet, } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { SlotPressable, SlotView } from '../Slot';
 const ROOT_COMPONENT_NAME = 'BaseCheckbox';
 const TRIGGER_COMPONENT_NAME = 'BaseCheckboxTrigger';
 const INDICATOR_COMPONENT_NAME = 'BaseCheckboxIndicator';
-const baseCheckboxVariants = {
-    trigger: cva([
-        'size-20 shrink-0 rounded-xs transition-colors',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2',
-    ], {
-        variants: {
-            checked: { true: '', false: 'border' },
-            disabled: { true: '', false: '' },
-        },
-        compoundVariants: [
-            {
-                checked: true,
-                disabled: false,
-                className: 'bg-active text-on-accent hover:bg-active-hover active:bg-active-pressed',
-            },
-            {
-                checked: false,
-                disabled: false,
-                className: 'border-muted bg-base hover:bg-base-hover active:bg-base-pressed',
-            },
-            {
-                checked: true,
-                disabled: true,
-                className: 'bg-disabled text-disabled',
-            },
-            {
-                checked: false,
-                disabled: true,
-                className: 'border-disabled bg-base',
-            },
-        ],
-        defaultVariants: {
-            checked: false,
-            disabled: false,
-        },
-    }),
-    indicator: cva(['flex size-full items-center justify-center']),
-};
 const [BaseCheckboxProvider, useBaseCheckboxContext] = createSafeContext(ROOT_COMPONENT_NAME);
 const BaseCheckboxRoot = React.forwardRef(({ disabled = false, checked, onCheckedChange, nativeID, ...props }, ref) => {
     return (_jsx(BaseCheckboxProvider, { value: {
@@ -56,11 +17,12 @@ const BaseCheckboxRoot = React.forwardRef(({ disabled = false, checked, onChecke
         }, children: _jsx(BaseCheckboxTrigger, { ref: ref, ...props }) }));
 });
 BaseCheckboxRoot.displayName = ROOT_COMPONENT_NAME;
-const BaseCheckboxTrigger = React.forwardRef(({ asChild, onPress: onPressProp, className, ...props }, ref) => {
+const BaseCheckboxTrigger = React.forwardRef(({ asChild, onPress: onPressProp, ...props }, ref) => {
     const { disabled, checked, onCheckedChange, nativeID } = useBaseCheckboxContext({
         consumerName: TRIGGER_COMPONENT_NAME,
         contextRequired: true,
     });
+    const styles = useStyles({ checked: !!checked, disabled: !!disabled });
     const onPress = useCallback((ev) => {
         if (disabled)
             return;
@@ -69,24 +31,69 @@ const BaseCheckboxTrigger = React.forwardRef(({ asChild, onPress: onPressProp, c
         onPressProp?.(ev);
     }, [disabled, checked, onCheckedChange, onPressProp]);
     const Component = asChild ? SlotPressable : Pressable;
-    return (_jsx(Component, { ref: ref, nativeID: nativeID, "aria-disabled": disabled, role: 'checkbox', "aria-checked": checked, onPress: onPress, className: cn(baseCheckboxVariants.trigger({ checked, disabled }), className), accessibilityState: {
+    return (_jsx(Component, { ref: ref, nativeID: nativeID, "aria-disabled": disabled, role: 'checkbox', "aria-checked": checked, onPress: onPress, style: styles.trigger, accessibilityState: {
             checked,
             disabled,
         }, disabled: disabled, ...props }));
 });
 BaseCheckboxTrigger.displayName = TRIGGER_COMPONENT_NAME;
-const BaseCheckboxIndicator = React.forwardRef(({ asChild, forceMount, className, ...props }, ref) => {
+const BaseCheckboxIndicator = React.forwardRef(({ asChild, forceMount, ...props }, ref) => {
     const { checked, disabled } = useBaseCheckboxContext({
         consumerName: INDICATOR_COMPONENT_NAME,
         contextRequired: true,
     });
+    const styles = useStyles({ checked: !!checked, disabled: !!disabled });
     if (!forceMount) {
         if (!checked) {
             return null;
         }
     }
     const Component = asChild ? SlotView : View;
-    return (_jsx(Component, { ref: ref, className: baseCheckboxVariants.indicator({ className }), "aria-disabled": disabled, "aria-hidden": !(forceMount || checked), role: 'presentation', ...props }));
+    return (_jsx(Component, { ref: ref, style: styles.indicator, "aria-disabled": disabled, "aria-hidden": !(forceMount || checked), role: 'presentation', ...props }));
 });
+const useStyles = ({ checked, disabled, }) => {
+    return useStyleSheet((t) => {
+        return {
+            trigger: StyleSheet.flatten([
+                {
+                    width: t.sizes.s20,
+                    height: t.sizes.s20,
+                    flexShrink: 0,
+                    borderRadius: t.borderRadius.xs,
+                },
+                !checked && {
+                    borderWidth: t.borderWidth.s1,
+                },
+                checked &&
+                    !disabled && {
+                    backgroundColor: t.colors.bg.active,
+                    color: t.colors.text.onAccent,
+                },
+                !checked &&
+                    !disabled && {
+                    borderColor: t.colors.border.muted,
+                    backgroundColor: t.colors.bg.base,
+                },
+                checked &&
+                    disabled && {
+                    backgroundColor: t.colors.bg.disabled,
+                    color: t.colors.text.disabled,
+                },
+                !checked &&
+                    disabled && {
+                    borderColor: t.colors.border.disabled,
+                    backgroundColor: t.colors.bg.base,
+                },
+            ]),
+            indicator: {
+                flex: 1,
+                width: t.sizes.full,
+                height: t.sizes.full,
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+        };
+    }, [checked, disabled]);
+};
 BaseCheckboxIndicator.displayName = INDICATOR_COMPONENT_NAME;
 export { BaseCheckboxIndicator, BaseCheckboxRoot };

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { View } from 'react-native';
 /**
  * The checkbox follows the design system tokens and supports checked, unchecked,
  * disabled, and focus states with proper hover and active interactions.
@@ -7,11 +6,11 @@ import { View } from 'react-native';
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs#dos-and-donts Guidelines}
  *
- * @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 checkbox's core appearance.
  *
  * @example
- * import { Checkbox } from '@ledgerhq/lumen-ui-react';
+ * import { Checkbox } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic controlled checkbox
  * const [checked, setChecked] = useState(false);
@@ -30,10 +29,7 @@ export declare const Checkbox: React.ForwardRefExoticComponent<{
     onCheckedChange?: (checked: boolean) => void;
     defaultChecked?: boolean;
     label?: React.ReactNode;
-} & Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
-    asChild?: boolean;
 } & {
-    onKeyDown?: (ev: React.KeyboardEvent) => void;
-    onKeyUp?: (ev: React.KeyboardEvent) => void;
-} & React.RefAttributes<View>>;
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<import("react-native").View>>;
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAoBpC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;8BA2CpB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ;;;;;;;;wFA4CpB,CAAC"}

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

@@ -1,22 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import { useControllableState } from '../../utils';
 import { Label } from '../Label';
+import { Box } from '../Utility';
 import { BaseCheckboxIndicator, BaseCheckboxRoot } from './BaseCheckbox';
-const checkboxVariants = {
-    root: cva(['flex flex-row items-center gap-8']),
-    icon: cva('shrink-0', {
-        variants: {
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-black',
-            },
-        },
-    }),
-};
 /**
  * The checkbox follows the design system tokens and supports checked, unchecked,
  * disabled, and focus states with proper hover and active interactions.
@@ -24,11 +13,11 @@ const checkboxVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs#dos-and-donts Guidelines}
  *
- * @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 checkbox's core appearance.
  *
  * @example
- * import { Checkbox } from '@ledgerhq/lumen-ui-react';
+ * import { Checkbox } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic controlled checkbox
  * const [checked, setChecked] = useState(false);
@@ -41,12 +30,28 @@ const checkboxVariants = {
  * // Uncontrolled checkbox with default state
  * <Checkbox defaultChecked={true} onCheckedChange={handleChange} />
  */
-export const Checkbox = React.forwardRef(({ className, checked: checkedProp, onCheckedChange: onCheckedChangeProp, defaultChecked = false, disabled = false, label, ...props }, ref) => {
+export const Checkbox = React.forwardRef(({ lx, style, checked: checkedProp, onCheckedChange: onCheckedChangeProp, defaultChecked = false, disabled = false, label, ...props }, ref) => {
     const [checked, onCheckedChange] = useControllableState({
         prop: checkedProp,
         onChange: onCheckedChangeProp,
         defaultProp: defaultChecked,
     });
-    return (_jsxs(View, { className: checkboxVariants.root({ className }), children: [_jsx(BaseCheckboxRoot, { ref: ref, disabled: disabled, checked: checked, onCheckedChange: onCheckedChange, ...props, children: _jsx(BaseCheckboxIndicator, { children: _jsx(Check, { size: 16, className: checkboxVariants.icon({ disabled }) }) }) }), label && (_jsx(Label, { disabled: disabled, onPress: () => onCheckedChange(!checked), children: label }))] }));
+    const styles = useStyles({ disabled });
+    return (_jsxs(Box, { ref: ref, lx: lx, style: [styles.root, style], ...props, children: [_jsx(BaseCheckboxRoot, { disabled: disabled, checked: checked, onCheckedChange: onCheckedChange, children: _jsx(BaseCheckboxIndicator, { children: _jsx(Check, { size: 16, style: styles.icon }) }) }), label && (_jsx(Label, { disabled: disabled, onPress: () => onCheckedChange(!checked), children: label }))] }));
 });
+const useStyles = ({ disabled }) => {
+    return useStyleSheet((t) => {
+        return {
+            root: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: t.spacings.s8,
+            },
+            icon: {
+                flexShrink: 0,
+                color: disabled ? t.colors.text.disabled : t.colors.text.black,
+            },
+        };
+    }, [disabled]);
+};
 Checkbox.displayName = 'Checkbox';

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAsC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAsC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAwCvB,CAAC"}

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../Utility';
 import { Checkbox } from './Checkbox';
 const meta = {
     title: 'Selection/Checkbox',
     component: Checkbox,
     parameters: {
-        layout: 'centered',
+        layout: 'fullscreen',
         docs: {
             source: {
                 language: 'tsx',
@@ -45,12 +46,27 @@ export default meta;
  */
 export const Base = {
     render: (args) => {
-        return (_jsx("div", { className: 'flex size-80 items-center justify-center', children: _jsx(Checkbox, { ...args }) }));
+        return (_jsx(Box, { style: {
+                flex: 1,
+                minHeight: 96,
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 24,
+            }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsx(Checkbox, { ...args }) }) }));
     },
 };
 /**
  * Interactive example showing all states.
  */
 export const AllStates = {
-    render: () => (_jsxs("div", { className: 'grid grid-cols-3 gap-48 p-16 text-base', children: [_jsxs("div", { className: 'space-y-16', children: [_jsx("h3", { className: 'heading-4', children: "Enabled" }), _jsxs("div", { className: 'space-y-8', children: [_jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Checkbox, { label: 'Unchecked', accessibilityLabel: 'Unchecked', defaultChecked: false }) }), _jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Checkbox, { label: 'Checked', defaultChecked: true }) })] })] }), _jsxs("div", { className: 'space-y-16', children: [_jsx("h3", { className: 'heading-4', children: "Disabled" }), _jsxs("div", { className: 'space-y-8', children: [_jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Checkbox, { label: 'Unchecked', disabled: true, defaultChecked: false }) }), _jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Checkbox, { label: 'Checked', disabled: true, defaultChecked: true }) })] })] })] })),
+    render: () => (_jsx(Box, { style: {
+            flex: 1,
+            minHeight: 96,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+        }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Box, { style: {
+                    flexDirection: 'row',
+                    gap: 48,
+                }, children: [_jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Enabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Checkbox, { label: 'Unchecked', accessibilityLabel: 'Unchecked', defaultChecked: false }), _jsx(Checkbox, { label: 'Checked', defaultChecked: true })] })] }), _jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Disabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Checkbox, { label: 'Unchecked', disabled: true, defaultChecked: false }), _jsx(Checkbox, { label: 'Checked', disabled: true, defaultChecked: true })] })] })] }) }) })),
 };

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

@@ -1,4 +1,4 @@
-import { SlottablePressableProps } from '../../types';
+import { StyledViewProps } from '../../../styles';
 export type CheckboxProps = {
     /**
      * The disabled state of the checkbox.
@@ -20,5 +20,5 @@ export type CheckboxProps = {
      * The label of the checkbox.
      */
     label?: React.ReactNode;
-} & SlottablePressableProps;
+} & StyledViewProps;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,GAAG,eAAe,CAAC"}

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

@@ -1,7 +1,11 @@
 import { Svg } from 'react-native-svg';
+import { IconSize } from './types';
 export declare const Icon: import("react").ForwardRefExoticComponent<{
-    size?: import("./Icon.types").IconSize;
-    className?: string;
-    children: React.ReactNode;
-} & import("react-native-svg").SvgProps & import("react").RefAttributes<Svg>>;
+    size?: IconSize;
+    color?: import("../../../styles").LumenTextStyle["color"];
+    children?: React.ReactNode;
+} & {
+    lx?: import("../../../styles").LumenTextStyle;
+    typography?: keyof import("../../../styles").LumenStyleSheetTheme["typographies"];
+} & import("react-native").TextProps & Omit<import("react-native-svg").SvgProps, "style"> & import("react").RefAttributes<Svg>>;
 //# sourceMappingURL=Icon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAyBvC,eAAO,MAAM,IAAI;;;;6EAiBhB,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmC9C,eAAO,MAAM,IAAI;;;;;;uBAHsB,8DAGxB;+HAoBd,CAAC"}

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

@@ -1,29 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
-import { cssInterop } from 'nativewind';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Svg } from 'react-native-svg';
-import { cn } from '../../utils';
-cssInterop(Svg, {
-    className: 'style',
-});
-const iconVariants = cva('inline-block', {
-    variants: {
-        size: {
-            12: 'icon-w-12 icon-h-12 icon-stroke-12',
-            16: 'icon-w-16 icon-h-16 icon-stroke-16',
-            20: 'icon-w-20 icon-h-20 icon-stroke-20',
-            24: 'icon-w-24 icon-h-24 icon-stroke-24',
-            40: 'icon-w-40 icon-h-40 icon-stroke-40',
-            48: 'icon-w-48 icon-h-48 icon-stroke-48',
-            56: 'icon-w-56 icon-h-56 icon-stroke-56',
-        },
-    },
-    defaultVariants: {
-        size: 24,
-    },
-});
-export const Icon = forwardRef(({ size = 24, className = '', children, viewBox, ...props }, ref) => {
-    return (_jsx(Svg, { ref: ref, width: size, height: size, className: cn(className, iconVariants({ size }), 'inline-block'), viewBox: viewBox, fill: 'none', pointerEvents: 'none', ...props, children: children }));
+import { useResolveTextStyle, useTheme } from '../../../styles';
+const iconSizeMap = {
+    12: 's12',
+    16: 's16',
+    20: 's20',
+    24: 's24',
+    40: 's40',
+    48: 's48',
+    56: 's56',
+};
+const useStyles = (lx, size, color) => {
+    const { theme } = useTheme();
+    const resolvedStyle = useResolveTextStyle(lx || {});
+    const resolvedColor = useResolveTextStyle({ color });
+    return useMemo(() => {
+        return {
+            container: {
+                ...resolvedStyle,
+                width: theme.icon.width[iconSizeMap[size]],
+                height: theme.icon.height[iconSizeMap[size]],
+                strokeWidth: theme.icon.borderWidth[iconSizeMap[size]],
+            },
+            color: resolvedColor.color || resolvedStyle.color || theme.colors.text.base,
+        };
+    }, [size, theme, resolvedStyle, resolvedColor.color]);
+};
+export const Icon = forwardRef(({ size = 24, color, lx = {}, children, viewBox, ...props }, ref) => {
+    const styles = useStyles(lx, size, color);
+    return (_jsx(Svg, { ref: ref, width: styles.container.width, height: styles.container.height, strokeWidth: styles.container.strokeWidth, viewBox: viewBox, color: styles.color, fill: 'none', pointerEvents: 'none', ...props, children: children }));
 });
 Icon.displayName = 'Icon';

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

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import * as Icons from '../../Symbols';
-import { IconSize } from './Icon.types';
+import type { IconSize } from './types';
 declare const meta: Meta;
 export default meta;
 type IconName = keyof typeof Icons;
 type IconStoryProps = {
     size: IconSize;
     name: IconName;
-    className?: string;
+    color?: string;
 };
 export declare const Icon: StoryObj<IconStoryProps>;
 export declare const IconSizes: StoryObj;

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,KAAK,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAGnC,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2CF,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,cAAc,CA0CzC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAwBvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,QAyDrB,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,KAAK,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAGnC,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoEF,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,cAAc,CA4CzC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QA0CvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,QA+ErB,CAAC"}

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

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { useTheme } from '../../../styles';
 import * as Icons from '../../Symbols';
-import { Search } from '../Search/Search';
+import { SearchInput } from '../SearchInput/SearchInput';
+import { Box, Text, Pressable } from '../Utility';
 const meta = {
     title: 'Symbols/Interface Icons',
 };
 export default meta;
 const sizes = [12, 16, 20, 24, 40, 48, 56];
 const iconNames = Object.keys(Icons);
-const IconCard = ({ name, size = 24, className = 'text-base', }) => {
+const IconCard = ({ name, size = 24, color }) => {
+    const { theme } = useTheme();
     const [copied, setCopied] = useState(false);
     const IconComponent = Icons[name];
+    const iconColor = color ?? theme.colors.text.base;
     const handleClick = async () => {
         try {
             await navigator.clipboard.writeText(name);
@@ -21,13 +25,32 @@ const IconCard = ({ name, size = 24, className = 'text-base', }) => {
             console.error('Failed to copy:', err);
         }
     };
-    return (_jsxs("div", { className: 'relative flex cursor-pointer flex-col items-center gap-2 rounded-lg p-4 transition-colors hover:bg-muted-pressed', onClick: handleClick, children: [_jsx(IconComponent, { size: size, className: className }), _jsx("span", { className: 'text-muted body-4', children: name }), copied && (_jsx("div", { className: 'absolute inset-0 flex items-center justify-center rounded-lg bg-muted', children: _jsx("span", { className: 'text-on-accent body-4', children: "Copied!" }) }))] }, name));
+    return (_jsxs(Pressable, { onPress: handleClick, lx: {
+            position: 'relative',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 's8',
+            borderRadius: 'sm',
+            padding: 's16',
+            width: 's96',
+        }, style: ({ pressed }) => ({
+            backgroundColor: pressed ? theme.colors.bg.mutedPressed : 'transparent',
+        }), children: [_jsx(IconComponent, { size: size, style: { color: iconColor } }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: name }), copied && (_jsx(Box, { lx: {
+                    position: 'absolute',
+                    top: 's0',
+                    left: 's0',
+                    right: 's0',
+                    bottom: 's0',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 'sm',
+                    backgroundColor: 'muted',
+                }, children: _jsx(Text, { typography: 'body4', lx: { color: 'onAccent' }, children: "Copied!" }) }))] }, name));
 };
 export const Icon = {
     args: {
         size: 24,
         name: 'Home',
-        className: 'text-base',
     },
     argTypes: {
         size: {
@@ -40,45 +63,75 @@ export const Icon = {
             options: iconNames,
             description: 'The name of the icon to display',
         },
-        className: {
-            control: 'text',
-            description: 'Additional CSS classes to apply (can be used for color)',
+        color: {
+            control: 'color',
+            description: 'The color of the icon',
         },
     },
     render: (args) => {
+        const { theme } = useTheme();
         const IconComponent = Icons[args.name];
-        return (_jsx("div", { className: 'p-8', children: _jsxs("div", { className: 'flex flex-col items-center gap-4', children: [_jsx(IconComponent, { size: args.size, className: args.className }), _jsx("span", { className: 'text-base', children: args.name })] }) }));
+        const iconColor = args.color ?? theme.colors.text.base;
+        return (_jsx(Box, { lx: { padding: 's8' }, children: _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(IconComponent, { size: args.size, style: { color: iconColor } }), _jsx(Text, { lx: { color: 'base' }, children: args.name })] }) }));
     },
     parameters: {
         docs: {
             source: {
                 code: `
-        <Information size={24} className="text-base" />
+        <Information size={24} style={{ color: theme.colors.text.base }} />
       `,
             },
         },
     },
 };
 export const IconSizes = {
-    render: () => (_jsx("div", { className: 'space-y-16 text-base', children: sizes.map((size) => (_jsxs("div", { children: [_jsxs("h3", { className: 'mb-16 heading-3', children: ["Size ", size, "px"] }), _jsx("div", { className: 'flex max-w-fit flex-wrap gap-16 rounded-lg border border-muted-subtle p-16', children: [
-                        'Home',
-                        'Settings',
-                        'Heart',
-                        'Star',
-                        'ArrowDown',
-                        'ArrowLeft',
-                        'ArrowRight',
-                        'ArrowUp',
-                    ].map((iconName) => (_jsx(IconCard, { name: iconName, size: size }, iconName))) })] }, size))) })),
+    render: () => {
+        const { theme } = useTheme();
+        return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: sizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column' }, children: [_jsxs(Text, { typography: 'heading3', lx: { marginBottom: 's16' }, children: ["Size ", size, "px"] }), _jsx(Box, { lx: {
+                            flexDirection: 'row',
+                            flexWrap: 'wrap',
+                            gap: 's8',
+                            borderRadius: 'sm',
+                            padding: 's8',
+                        }, style: {
+                            borderWidth: 1,
+                            borderColor: theme.colors.border.mutedSubtle,
+                        }, children: [
+                            'Home',
+                            'Settings',
+                            'Heart',
+                            'Star',
+                            'ArrowDown',
+                            'ArrowLeft',
+                            'ArrowRight',
+                            'ArrowUp',
+                        ].map((iconName) => (_jsx(IconCard, { name: iconName, size: size }, iconName))) })] }, size))) }));
+    },
 };
 export const Gallery = {
     parameters: {
         layout: 'fullscreen',
     },
     render: () => {
+        const { theme } = useTheme();
         const [searchTerm, setSearchTerm] = useState('');
         // Filter icons based on search term
         const filteredIcons = Object.entries(Icons).filter(([name]) => name.toLowerCase().includes(searchTerm.toLowerCase()));
-        return (_jsxs("div", { className: 'p-8', children: [_jsxs("div", { className: 'mb-32', children: [_jsx("div", { className: 'mb-8 max-w-md', children: _jsx(Search, { placeholder: 'Search icons...', value: searchTerm, onChangeText: setSearchTerm }) }), _jsx("div", { className: 'mb-4', children: _jsxs("span", { className: 'ml-8 text-muted body-3', children: [filteredIcons.length, " of ", Object.keys(Icons).length, " icons", searchTerm && ` matching "${searchTerm}"`] }) })] }), _jsx("div", { className: 'grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-8', children: filteredIcons.map(([name]) => (_jsx(IconCard, { name: name }, name))) }), filteredIcons.length === 0 && searchTerm && (_jsxs("div", { className: 'flex flex-col items-center justify-center py-16', children: [_jsxs("p", { className: 'text-muted body-2', children: ["No icons found matching \"", searchTerm, "\""] }), _jsx("button", { onClick: () => setSearchTerm(''), className: 'mt-4 text-interactive body-2 hover:text-interactive-hover', children: "Clear search" })] }))] }));
+        return (_jsxs(Box, { lx: {
+                width: 'full',
+                flexDirection: 'column',
+                alignItems: 'stretch',
+                padding: 's8',
+            }, children: [_jsxs(Box, { lx: { marginBottom: 's32' }, children: [_jsx(Box, { lx: { marginBottom: 's8', maxWidth: 's320' }, children: _jsx(SearchInput, { placeholder: 'Search icons...', value: searchTerm, onChangeText: setSearchTerm }) }), _jsx(Box, { lx: { marginBottom: 's4' }, children: _jsxs(Text, { typography: 'body3', lx: { marginLeft: 's8', color: 'muted' }, children: [filteredIcons.length, " of ", Object.keys(Icons).length, " icons", searchTerm && ` matching "${searchTerm}"`] }) })] }), _jsx(Box, { lx: { flexDirection: 'row', flexWrap: 'wrap', gap: 's8' }, children: filteredIcons.map(([name]) => (_jsx(IconCard, { name: name }, name))) }), filteredIcons.length === 0 && searchTerm && (_jsxs(Box, { lx: {
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        paddingVertical: 's16',
+                    }, children: [_jsxs(Text, { typography: 'body2', lx: { color: 'muted' }, children: ["No icons found matching \"", searchTerm, "\""] }), _jsx(Pressable, { onPress: () => setSearchTerm(''), style: ({ pressed }) => ({
+                                marginTop: 16,
+                                color: pressed
+                                    ? theme.colors.text.interactivePressed
+                                    : theme.colors.text.interactive,
+                            }), children: _jsx(Text, { typography: 'body2', lx: { color: 'interactive' }, children: "Clear search" }) })] }))] }));
     },
 };