@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Svg, SvgProps } from 'react-native-svg';
-import { IconProps } from './Icon.types';
+import { IconProps } from './types';
 /**
  * Create an Icon component for React Native
  * @param {string} iconName - The name of the icon

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

@@ -1 +1 @@
-{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;;;;;GAKG;AACH,QAAA,MAAM,UAAU,GACd,UAAU,MAAM,EAChB,SAAS,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,4FAgBtC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;GAKG;AACH,QAAA,MAAM,UAAU,GACd,UAAU,MAAM,EAChB,SAAS,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,4FAetC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -8,9 +8,8 @@ import { Icon } from './Icon';
  * @returns {ForwardRefExoticComponent} Icon component
  */
 const createIcon = (iconName, iconJsx) => {
-    const Component = forwardRef(({ className, ...props }, ref) => React.createElement(Icon, {
+    const Component = forwardRef(({ ...props }, ref) => React.createElement(Icon, {
         ref,
-        className,
         viewBox: iconJsx.props.viewBox,
         ...props,
         children: iconJsx.props.children,

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

@@ -1,3 +1,3 @@
 export * from './Icon';
-export * from './Icon.types';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { SvgProps } from 'react-native-svg';
+import { LumenTextStyle } from '../../../styles';
+import { TextProps } from '../Utility';
+export type IconSize = 12 | 16 | 20 | 24 | 40 | 48 | 56;
+export type IconProps = {
+    /**
+     * The size of the icon.
+     */
+    size?: IconSize;
+    /**
+     * The color of the icon.
+     */
+    color?: LumenTextStyle['color'];
+    /**
+     * The children of the icon.
+     */
+    children?: React.ReactNode;
+} & TextProps & Omit<SvgProps, 'style'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,SAAS,GACX,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC"}

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

@@ -1,23 +1,6 @@
 import React from 'react';
-import { BaseButtonProps } from '../Button';
-export type IconButtonProps = {
-    /**
-     * Accessible label for the IconButton
-     */
-    accessibilityLabel: string;
-    /**
-     * The icon to display in the button
-     */
-    icon: NonNullable<BaseButtonProps['icon']>;
-} & Omit<BaseButtonProps, 'isFull'>;
 export declare const IconButton: React.ForwardRefExoticComponent<{
-    /**
-     * Accessible label for the IconButton
-     */
     accessibilityLabel: string;
-    /**
-     * The icon to display in the button
-     */
-    icon: NonNullable<BaseButtonProps["icon"]>;
-} & Omit<BaseButtonProps, "isFull"> & React.RefAttributes<import("react-native").View>>;
+    icon: NonNullable<import("..").BaseButtonProps["icon"]>;
+} & Omit<import("..").BaseButtonProps, "isFull"> & React.RefAttributes<import("react-native").View>>;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC;CAC5C,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;AAEpC,eAAO,MAAM,UAAU;IAVrB;;OAEG;wBACiB,MAAM;IAC1B;;OAEG;UACG,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;uFAQ1C,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,UAAU;;;oGAKrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA4CjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmBhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyB3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAoB5B,CAAC"}
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAyCjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmBhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyB3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAoB5B,CAAC"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Close, Heart, Plus, Settings, Share } from '../../Symbols';
+import { Box } from '../Utility';
 import { IconButton } from './IconButton';
 const iconMap = {
     Heart,
@@ -11,9 +12,6 @@ const iconMap = {
 const meta = {
     title: 'Action/IconButton',
     component: IconButton,
-    parameters: {
-        layout: 'centered',
-    },
     argTypes: {
         icon: {
             options: Object.keys(iconMap),
@@ -21,11 +19,11 @@ const meta = {
             control: {
                 type: 'select',
                 labels: {
-                    Heart: '❤️ Heart',
-                    Plus: '➕ Plus',
-                    Settings: '⚙️ Settings',
-                    Share: '📤 Share',
-                    Close: '✖️ Close',
+                    Heart: 'Heart',
+                    Plus: 'Plus',
+                    Settings: 'Settings',
+                    Share: 'Share',
+                    Close: 'Close',
                 },
             },
         },
@@ -63,14 +61,14 @@ export const Base = {
     },
 };
 export const AppearanceShowcase = {
-    render: () => (_jsxs("div", { className: 'flex gap-8', children: [_jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'accent' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'base' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'gray' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'transparent' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'no-background' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'red' })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'row', gap: 's8' }, children: [_jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'accent' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'base' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'gray' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'transparent' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'no-background' }), _jsx(IconButton, { accessibilityLabel: 'Add', icon: Plus, appearance: 'red' })] })),
 };
 export const SizesShowcase = {
-    render: () => (_jsxs("div", { className: 'flex items-center gap-8', children: [_jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'xs' }), _jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'sm' }), _jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'md' }), _jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'lg' })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's8' }, children: [_jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'xs' }), _jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'sm' }), _jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'md' }), _jsx(IconButton, { accessibilityLabel: 'Add to favorites', icon: Heart, size: 'lg' })] })),
 };
 export const StatesShowcase = {
     args: {
         appearance: 'base',
     },
-    render: ({ appearance }) => (_jsxs("div", { className: 'flex items-center gap-8', children: [_jsx(IconButton, { accessibilityLabel: 'Settings', appearance: appearance, icon: Settings, disabled: true }), _jsx(IconButton, { accessibilityLabel: 'Settings', appearance: appearance, icon: Settings, loading: true })] })),
+    render: ({ appearance }) => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'flex-start', gap: 's8' }, children: [_jsx(IconButton, { accessibilityLabel: 'Settings', appearance: appearance, icon: Settings, disabled: true }), _jsx(IconButton, { accessibilityLabel: 'Settings', appearance: appearance, icon: Settings, loading: true })] })),
 };

package/dist/src/lib/Components/IconButton/index.d.ts

@@ -1,2 +1,3 @@
 export * from './IconButton';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { BaseButtonProps } from '../Button';
+export type IconButtonProps = {
+    /**
+     * Accessible label for the IconButton
+     */
+    accessibilityLabel: string;
+    /**
+     * The icon to display in the button
+     */
+    icon: NonNullable<BaseButtonProps['icon']>;
+} & Omit<BaseButtonProps, 'isFull'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/IconButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC;CAC5C,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC"}

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

@@ -20,12 +20,12 @@ import { InteractiveIconProps } from './types';
  * import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * // Filled interactive icon for destructive actions
- * <InteractiveIcon iconType="filled" aria-label="Delete item" onPress={handleDelete}>
+ * <InteractiveIcon iconType="filled" accessibilityLabel="Delete item" onPress={handleDelete}>
  *   <DeleteCircleFill size={20} />
  * </InteractiveIcon>
  *
  * // Stroked interactive icon for secondary actions
- * <InteractiveIcon iconType="stroked" aria-label="Open settings" onPress={handleSettings}>
+ * <InteractiveIcon iconType="stroked" accessibilityLabel="Open settings" onPress={handleSettings}>
  *   <Settings size={20} />
  * </InteractiveIcon>
  */

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

@@ -1 +1 @@
-{"version":3,"file":"InteractiveIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA6B/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA4BpD,CAAC"}
+{"version":3,"file":"InteractiveIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAM9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA0C/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA4BpD,CAAC"}

package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.figma.js

@@ -22,5 +22,5 @@ figma.connect(InteractiveIcon, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ3
             url: 'https://ldls.vercel.app/?path=/docs/components-interactiveicon-overview--docs',
         },
     ],
-    example: (props) => (_jsx(InteractiveIcon, { iconType: props.iconType, disabled: props.disabled, "aria-label": 'Interactive icon', children: props.children })),
+    example: (props) => (_jsx(InteractiveIcon, { iconType: props.iconType, disabled: props.disabled, accessibilityLabel: 'Interactive icon', children: props.children })),
 });

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

@@ -1,31 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import { Pressable, View } from 'react-native';
-import { InjectStylesIntoChildren } from '../../utils';
-const buttonVariants = cva('inline-flex size-fit items-center justify-center rounded-full', {
-    variants: {
-        iconType: {
-            filled: '',
-            stroked: 'bg-base-transparent',
-        },
-        pressed: {
-            true: '',
-            false: '',
-        },
-        disabled: {
-            true: 'bg-disabled',
-            false: '',
-        },
-    },
-    compoundVariants: [
-        {
-            iconType: 'stroked',
-            pressed: true,
-            className: 'bg-base-transparent-pressed',
-        },
-    ],
-});
+import { StyleSheet, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { InjectStylesIntoChildren } from '../../utils/components/InjectStylesIntoChildren';
+import { Pressable } from '../Utility';
+const useStyles = ({ iconType, pressed, disabled, }) => {
+    return useStyleSheet((t) => {
+        const backgroundStyle = {
+            filled: { backgroundColor: t.colors.bg.base },
+            stroked: { backgroundColor: t.colors.bg.baseTransparent },
+        };
+        return {
+            container: StyleSheet.flatten([
+                {
+                    borderRadius: t.borderRadius.full,
+                },
+                backgroundStyle[iconType],
+                iconType === 'stroked' &&
+                    pressed && { backgroundColor: t.colors.bg.baseTransparentPressed },
+            ]),
+            icon: {
+                color: disabled
+                    ? t.colors.text.disabled
+                    : pressed
+                        ? t.colors.text.mutedPressed
+                        : t.colors.text.muted,
+            },
+        };
+    }, [iconType, pressed, disabled]);
+};
 /**
  * A specialized interactive component designed specifically for displaying pressable icons.
  *
@@ -46,18 +48,20 @@ const buttonVariants = cva('inline-flex size-fit items-center justify-center rou
  * import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * // Filled interactive icon for destructive actions
- * <InteractiveIcon iconType="filled" aria-label="Delete item" onPress={handleDelete}>
+ * <InteractiveIcon iconType="filled" accessibilityLabel="Delete item" onPress={handleDelete}>
  *   <DeleteCircleFill size={20} />
  * </InteractiveIcon>
  *
  * // Stroked interactive icon for secondary actions
- * <InteractiveIcon iconType="stroked" aria-label="Open settings" onPress={handleSettings}>
+ * <InteractiveIcon iconType="stroked" accessibilityLabel="Open settings" onPress={handleSettings}>
  *   <Settings size={20} />
  * </InteractiveIcon>
  */
-export const InteractiveIcon = ({ iconType, children, disabled = false, ...props }) => {
-    return (_jsx(Pressable, { accessibilityRole: 'button', accessibilityState: { disabled: !!disabled }, disabled: disabled, ...props, children: ({ pressed }) => {
-            const iconStyles = cn(pressed ? 'text-muted-pressed' : 'text-muted', disabled && 'text-disabled');
-            return (_jsx(View, { className: cn(buttonVariants({ iconType, pressed, disabled })), children: _jsx(InjectStylesIntoChildren, { styles: iconStyles, children: children }) }));
-        } }));
+export const InteractiveIcon = ({ iconType, children, disabled = false, style, lx, ...props }) => {
+    return (_jsx(Pressable, { lx: lx, style: [style, { alignItems: 'center', justifyContent: 'center' }], accessibilityRole: 'button', accessibilityState: { disabled: !!disabled }, disabled: disabled, ...props, children: ({ pressed }) => (_jsx(InteractiveIconContent, { iconType: iconType, pressed: pressed, disabled: !!disabled, children: children })) }));
+};
+const InteractiveIconContent = ({ iconType, pressed, disabled, children }) => {
+    const styles = useStyles({ iconType, pressed, disabled });
+    return (_jsx(View, { style: styles.container, children: _jsx(InjectStylesIntoChildren, { style: styles.icon, children: children }) }));
 };
+InteractiveIcon.displayName = 'InteractiveIcon';

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

@@ -3,7 +3,7 @@ import { InteractiveIcon } from './InteractiveIcon';
 declare const meta: Meta<typeof InteractiveIcon>;
 export default meta;
 type Story = StoryObj<typeof InteractiveIcon>;
-export declare const Filled: Story;
+export declare const Base: Story;
 export declare const Stroked: Story;
 export declare const IconTypeShowcase: Story;
 export declare const SizesShowcase: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"InteractiveIcon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAQ9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAuBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAE9C,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAmB9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAC"}
+{"version":3,"file":"InteractiveIcon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAQ9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAuBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAE9C,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA8B3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAsD5B,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text } from 'react-native';
 import { Settings, PenEdit, DeleteCircleFill, MoreVertical, } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { InteractiveIcon } from './InteractiveIcon';
 const meta = {
     component: InteractiveIcon,
@@ -27,17 +27,17 @@ const meta = {
     },
 };
 export default meta;
-export const Filled = {
+export const Base = {
     args: {
         iconType: 'filled',
         children: _jsx(DeleteCircleFill, {}),
-        'aria-label': 'Delete',
+        accessibilityLabel: 'Delete',
     },
     parameters: {
         docs: {
             source: {
                 code: `
-<InteractiveIcon iconType="filled" aria-label="Delete">
+<InteractiveIcon iconType="filled" accessibilityLabel="Delete">
   <DeleteCircleFill />
 </InteractiveIcon>
 `,
@@ -49,13 +49,13 @@ export const Stroked = {
     args: {
         iconType: 'stroked',
         children: _jsx(MoreVertical, {}),
-        'aria-label': 'More actions',
+        accessibilityLabel: 'More actions',
     },
     parameters: {
         docs: {
             source: {
                 code: `
-<InteractiveIcon iconType="stroked" aria-label="More actions">
+<InteractiveIcon iconType="stroked" accessibilityLabel="More actions">
   <MoreVertical />
 </InteractiveIcon>
 `,
@@ -65,17 +65,26 @@ export const Stroked = {
 };
 export const IconTypeShowcase = {
     render: () => {
-        return (_jsxs(View, { className: 'flex flex-row gap-16 p-8', children: [_jsxs(View, { className: 'flex flex-col items-center gap-4', children: [_jsx(Text, { className: 'text-muted body-3', children: "Filled" }), _jsx(InteractiveIcon, { iconType: 'filled', "aria-label": 'Delete', children: _jsx(DeleteCircleFill, {}) })] }), _jsxs(View, { className: 'flex flex-col items-center gap-4', children: [_jsx(Text, { className: 'text-muted body-3', children: "Stroked" }), _jsx(InteractiveIcon, { iconType: 'stroked', "aria-label": 'More actions', children: _jsx(MoreVertical, {}) })] })] }));
+        return (_jsxs(Box, { lx: { flexDirection: 'row', gap: 's16', padding: 's8' }, children: [_jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Filled" }), _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Delete', children: _jsx(DeleteCircleFill, {}) })] }), _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Stroked" }), _jsx(InteractiveIcon, { iconType: 'stroked', accessibilityLabel: 'More actions', children: _jsx(MoreVertical, {}) })] })] }));
     },
 };
 export const SizesShowcase = {
     render: () => {
         const iconSizes = [16, 20, 24, 40];
-        return (_jsx(View, { className: 'flex flex-col gap-16 p-8', children: iconSizes.map((size) => (_jsxs(View, { className: 'flex flex-row gap-16', children: [_jsx(View, { className: 'flex w-72 items-center justify-center', children: _jsx(InteractiveIcon, { iconType: 'stroked', "aria-label": 'More', children: _jsx(MoreVertical, { size: size }) }, size) }), _jsxs(Text, { className: 'body-3', children: [size, "px"] })] }, size))) }));
+        return (_jsx(Box, { lx: { flexDirection: 'row', gap: 's12', padding: 's8' }, children: iconSizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { lx: {
+                            width: 's72',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }, children: _jsx(InteractiveIcon, { iconType: 'stroked', accessibilityLabel: 'More', children: _jsx(DeleteCircleFill, { size: size }) }, size) }), _jsxs(Text, { lx: { textAlign: 'center' }, typography: 'body3', children: [size, "px"] })] }, size))) }));
     },
 };
 export const StatesShowcase = {
     render: () => {
-        return (_jsxs(View, { className: 'flex flex-row gap-16 bg-base p-8', children: [_jsxs(View, { className: 'flex flex-col items-center gap-4', children: [_jsx(Text, { className: 'text-muted body-3', children: "Filled enabled" }), _jsx(InteractiveIcon, { iconType: 'filled', "aria-label": 'Delete', children: _jsx(DeleteCircleFill, {}) })] }), _jsxs(View, { className: 'flex flex-col items-center gap-4', children: [_jsx(Text, { className: 'text-muted body-3', children: "Stroked enabled" }), _jsx(InteractiveIcon, { iconType: 'stroked', "aria-label": 'More actions', children: _jsx(MoreVertical, {}) })] }), _jsxs(View, { className: 'flex flex-col items-center gap-4', children: [_jsx(Text, { className: 'text-muted body-3', children: "Filled disabled" }), _jsx(InteractiveIcon, { iconType: 'filled', "aria-label": 'Delete', disabled: true, children: _jsx(DeleteCircleFill, {}) })] }), _jsxs(View, { className: 'flex flex-col items-center gap-4', children: [_jsx(Text, { className: 'text-muted body-3', children: "Stroked disabled" }), _jsx(InteractiveIcon, { iconType: 'stroked', "aria-label": 'More actions', disabled: true, children: _jsx(MoreVertical, {}) })] })] }));
+        return (_jsxs(Box, { lx: {
+                flexDirection: 'row',
+                gap: 's16',
+                backgroundColor: 'base',
+                padding: 's8',
+            }, children: [_jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Filled enabled" }), _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Delete', children: _jsx(DeleteCircleFill, {}) })] }), _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Stroked enabled" }), _jsx(InteractiveIcon, { iconType: 'stroked', accessibilityLabel: 'More actions', children: _jsx(MoreVertical, {}) })] }), _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Filled disabled" }), _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Delete', disabled: true, children: _jsx(DeleteCircleFill, {}) })] }), _jsxs(Box, { lx: { flexDirection: 'column', alignItems: 'center', gap: 's4' }, children: [_jsx(Text, { lx: { color: 'muted' }, typography: 'body3', children: "Stroked disabled" }), _jsx(InteractiveIcon, { iconType: 'stroked', accessibilityLabel: 'More actions', disabled: true, children: _jsx(MoreVertical, {}) })] })] }));
     },
 };

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

@@ -1,14 +1,10 @@
-import { ReactNode } from 'react';
-import { PressableProps } from 'react-native';
+import { PropsWithChildren } from 'react';
+import { StyledPressableProps } from '../../../styles';
 export type InteractiveIconProps = {
     /**
      * The visual style of the icon button.
      * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
      */
     iconType: 'filled' | 'stroked';
-    /**
-     * The icon component to display inside the button. Should be a single icon element from the design system.
-     */
-    children: ReactNode;
-} & PressableProps;
+} & PropsWithChildren & Omit<StyledPressableProps, 'children'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,GAAG,iBAAiB,GACnB,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Text } from 'react-native';
 /**
  * A label that should be used to describe a form field.
  *
@@ -8,5 +7,5 @@ import { Text } from 'react-native';
  */
 export declare const Label: React.ForwardRefExoticComponent<{
     disabled?: boolean;
-} & import("react-native").TextProps & React.RefAttributes<Text>>;
+} & Omit<import("../../../styles").StyledTextProps, "typography"> & React.RefAttributes<import("react-native").Text>>;
 //# sourceMappingURL=Label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAapC;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;iEAkBjB,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAiB1C;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;qHA6BjB,CAAC"}

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

@@ -1,23 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
-import { Text } from 'react-native';
-import { cn } from '../../utils';
-const labelVariants = cva(['body-2'], {
-    variants: {
-        disabled: {
-            true: 'text-disabled',
-            false: 'text-base',
+import { useStyleSheet } from '../../../styles';
+import { Text } from '../Utility';
+const useStyles = ({ disabled }) => {
+    return useStyleSheet((t) => ({
+        label: {
+            color: disabled ? t.colors.text.disabled : t.colors.text.base,
+            ...t.typographies.body2,
         },
-    },
-});
+    }), [disabled]);
+};
 /**
  * A label that should be used to describe a form field.
  *
  * Either choices fields like checkbox, switch or radio.
  * Or text fields like input, textarea, select, etc.
  */
-export const Label = forwardRef(({ className, disabled = false, children, onPress, onLongPress, ...props }, ref) => {
-    return (_jsx(Text, { ref: ref, disabled: disabled, onPress: disabled ? undefined : onPress, onLongPress: disabled ? undefined : onLongPress, className: cn(labelVariants({ disabled }), className), ...props, children: children }));
+export const Label = forwardRef(({ style, lx = {}, disabled = false, children, onPress, onLongPress, ...props }, ref) => {
+    const styles = useStyles({ disabled });
+    return (_jsx(Text, { lx: lx, ref: ref, style: [styles.label, style], disabled: disabled, onPress: disabled ? undefined : onPress, onLongPress: disabled ? undefined : onLongPress, ...props, children: children }));
 });
 Label.displayName = 'Label';

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

@@ -1,8 +1,8 @@
-import { TextProps } from 'react-native';
+import { TextProps } from '../Utility';
 export type LabelProps = {
     /**
      * The disabled state of the label.
      */
     disabled?: boolean;
-} & TextProps;
+} & Omit<TextProps, 'typography'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC"}

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

@@ -1,48 +1,6 @@
 import React from 'react';
-import { PressableProps, View } from 'react-native';
+import { View } from 'react-native';
 import { IconSize } from '../Icon';
-export type LinkProps = Omit<PressableProps, 'onPress' | 'children'> & {
-    /**
-     * The visual style of the link.
-     * @default base
-     */
-    appearance?: 'base' | 'accent';
-    /**
-     * The size variant of the link.
-     * @default md
-     */
-    size?: 'sm' | 'md';
-    /**
-     * Whether to underline the link text.
-     * @default true
-     */
-    underline?: boolean;
-    /**
-     * An optional icon component to render inside the link.
-     * The icon styles are defined by the link. Please do not override them.
-     */
-    icon?: React.ComponentType<{
-        size?: IconSize;
-        className?: string;
-    }>;
-    /**
-     * If true, displays an external link icon next to the link text.
-     * @default false
-     */
-    isExternal?: boolean;
-    /**
-     * The URL to navigate to
-     */
-    href?: string;
-    /**
-     * Custom press handler (overrides default href navigation)
-     */
-    onPress?: () => void;
-    /**
-     * The link's content, typically text.
-     */
-    children: React.ReactNode;
-};
 /**
  * A customizable link component that supports base and accent color appearances, optional underline, sizes, icons, and external link handling.
  * Opens URLs using React Native's Linking API.
@@ -50,7 +8,7 @@ export type LinkProps = Omit<PressableProps, 'onPress' | 'children'> & {
  * @see {@link https://ldls.vercel.app/?path=/docs/components-link-overview--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/components-link-implementation--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 link's core appearance (colors, padding, etc). Use the `appearance` and `underline` props instead.
  *
  * @example
@@ -78,46 +36,18 @@ export type LinkProps = Omit<PressableProps, 'onPress' | 'children'> & {
  *   Dashboard
  * </Link>
  */
-export declare const Link: React.ForwardRefExoticComponent<Omit<PressableProps, "children" | "onPress"> & {
-    /**
-     * The visual style of the link.
-     * @default base
-     */
+export declare const Link: React.ForwardRefExoticComponent<{
     appearance?: "base" | "accent";
-    /**
-     * The size variant of the link.
-     * @default md
-     */
     size?: "sm" | "md";
-    /**
-     * Whether to underline the link text.
-     * @default true
-     */
     underline?: boolean;
-    /**
-     * An optional icon component to render inside the link.
-     * The icon styles are defined by the link. Please do not override them.
-     */
     icon?: React.ComponentType<{
         size?: IconSize;
-        className?: string;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     }>;
-    /**
-     * If true, displays an external link icon next to the link text.
-     * @default false
-     */
     isExternal?: boolean;
-    /**
-     * The URL to navigate to
-     */
     href?: string;
-    /**
-     * Custom press handler (overrides default href navigation)
-     */
     onPress?: () => void;
-    /**
-     * The link's content, typically text.
-     */
-    children: React.ReactNode;
-} & React.RefAttributes<View>>;
+} & {
+    children?: React.ReactNode | undefined;
+} & Omit<import("../../../styles").StyledPressableProps, "children" | "onPress"> & React.RefAttributes<View>>;
 //# sourceMappingURL=Link.d.ts.map