@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../Utility';
 import { Switch } from './Switch';
 const meta = {
     title: 'Selection/Switch',
     component: Switch,
     parameters: {
-        layout: 'centered',
+        layout: 'fullscreen',
         docs: {
             source: {
                 language: 'tsx',
@@ -38,12 +39,27 @@ export default meta;
  */
 export const Base = {
     render: (args) => {
-        return (_jsx("div", { className: 'flex size-80 items-center justify-center', children: _jsx(Switch, { ...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(Switch, { ...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(Switch, { defaultChecked: false }) }), _jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Switch, { "aria-labelledby": '', 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(Switch, { disabled: true, defaultChecked: false }) }), _jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Switch, { 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(Switch, { defaultChecked: false }), _jsx(Switch, { "aria-labelledby": '', defaultChecked: true })] })] }), _jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Disabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Switch, { disabled: true, defaultChecked: false }), _jsx(Switch, { disabled: true, defaultChecked: true })] })] })] }) }) })),
 };

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

@@ -1,4 +1,4 @@
-import { SlottablePressableProps } from '../../types';
+import { StyledPressableProps } from '../../../styles';
 export type SwitchProps = {
     /**
      * The disabled state of the switch.
@@ -24,5 +24,5 @@ export type SwitchProps = {
      * @default false
      */
     defaultChecked?: boolean;
-} & SlottablePressableProps;
+} & Omit<StyledPressableProps, 'children'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1,14 +1,38 @@
 import React from 'react';
-import { View } from 'react-native';
-import { IconSize } from '../Icon';
+/**
+ * A compact label used to categorize, classify, or highlight information with optional icon support.
+ *
+ * The appearance determines the color scheme used.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { Tag } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic tag
+ * <Tag label="Label" appearance="accent" />
+ *
+ * // Tag with icon
+ * <Tag
+ *   label="Success"
+ *   appearance="success"
+ *   icon={Check}
+ * />
+ *
+ * // Small tag
+ * <Tag label="Small" size="sm" />
+ */
 export declare const Tag: React.ForwardRefExoticComponent<{
     appearance?: "base" | "gray" | "accent" | "success" | "error" | "warning";
-    icon?: React.ComponentType<{
-        size?: IconSize;
-        className?: string;
-    }>;
+    icon?: React.ComponentType<import("../Icon").IconProps>;
     label: string;
-    size?: "sm" | "lg";
+    size?: "sm" | "md";
     disabled?: boolean;
-} & import("react-native").ViewProps & React.RefAttributes<View>>;
+} & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<import("react-native").View>>;
 //# sourceMappingURL=Tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAQ,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAkDnC,eAAO,MAAM,GAAG;;;YA7CkC,CAAC;iBAAqB,CAAC;;;;;iEAgFxE,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuG1B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,GAAG;;;;;;;;wFA+Bf,CAAC"}

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

@@ -1,62 +1,110 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { View, Text } from 'react-native';
-const tagVariants = {
-    root: cva('inline-flex w-fit flex-row items-center justify-center gap-4 rounded-xs', {
-        variants: {
-            appearance: {
-                base: 'bg-muted-transparent',
-                gray: 'bg-muted-transparent',
-                accent: 'bg-accent',
-                success: 'bg-success',
-                error: 'bg-error',
-                warning: 'bg-warning',
+import { StyleSheet, Text } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Box } from '../Utility';
+const useStyles = ({ appearance, size, disabled, }) => {
+    return useStyleSheet((t) => {
+        const bgColors = {
+            base: t.colors.bg.mutedTransparent,
+            gray: t.colors.bg.mutedTransparent,
+            accent: t.colors.bg.accent,
+            success: t.colors.bg.success,
+            error: t.colors.bg.error,
+            warning: t.colors.bg.warning,
+        };
+        const textColors = {
+            base: t.colors.text.base,
+            gray: t.colors.text.muted,
+            accent: t.colors.text.onAccent,
+            success: t.colors.text.success,
+            error: t.colors.text.error,
+            warning: t.colors.text.warning,
+        };
+        const sizeStyles = {
+            md: {
+                height: t.sizes.s24,
+                paddingHorizontal: t.spacings.s8,
+                paddingVertical: t.spacings.s4,
             },
-            size: {
-                lg: 'h-24 px-8 py-4 body-3',
-                sm: 'h-20 px-4 py-2 body-4',
+            sm: {
+                height: t.sizes.s20,
+                paddingHorizontal: t.spacings.s4,
+                paddingVertical: t.spacings.s2,
             },
-            disabled: {
-                true: 'bg-disabled',
-                false: '',
-            },
-        },
-        defaultVariants: {
-            appearance: 'accent',
-            size: 'lg',
-            disabled: false,
-        },
-    }),
-    inner: cva('', {
-        variants: {
-            appearance: {
-                base: 'text-base',
-                gray: 'text-muted',
-                accent: 'text-on-accent',
-                success: 'text-success',
-                error: 'text-error',
-                warning: 'text-warning',
-            },
-            disabled: {
-                true: 'text-disabled',
-                false: '',
-            },
-        },
-    }),
+        };
+        const textTypography = size === 'md' ? t.typographies.body3 : t.typographies.body4;
+        return {
+            root: StyleSheet.flatten([
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: t.spacings.s4,
+                    borderRadius: t.borderRadius.xs,
+                    backgroundColor: bgColors[appearance],
+                    ...sizeStyles[size],
+                },
+                disabled && {
+                    backgroundColor: t.colors.bg.disabled,
+                },
+            ]),
+            text: StyleSheet.flatten([
+                textTypography,
+                {
+                    color: textColors[appearance],
+                },
+                disabled && {
+                    color: t.colors.text.disabled,
+                },
+            ]),
+            icon: StyleSheet.flatten([
+                {
+                    flexShrink: 0,
+                    color: textColors[appearance],
+                },
+                disabled && {
+                    color: t.colors.text.disabled,
+                },
+            ]),
+        };
+    }, [appearance, size, disabled]);
+};
+const iconSizeMap = {
+    md: 16,
+    sm: 12,
 };
-export const Tag = React.forwardRef(({ className, appearance, size, icon, label, disabled, ...props }, ref) => {
-    const iconSizeMap = {
-        lg: 16,
-        sm: 12,
-    };
-    const calculatedIconSize = size ? iconSizeMap[size] : 16;
+/**
+ * A compact label used to categorize, classify, or highlight information with optional icon support.
+ *
+ * The appearance determines the color scheme used.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { Tag } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic tag
+ * <Tag label="Label" appearance="accent" />
+ *
+ * // Tag with icon
+ * <Tag
+ *   label="Success"
+ *   appearance="success"
+ *   icon={Check}
+ * />
+ *
+ * // Small tag
+ * <Tag label="Small" size="sm" />
+ */
+export const Tag = React.forwardRef(({ appearance = 'accent', size = 'md', icon, label, disabled = false, lx = {}, style, ...props }, ref) => {
+    const styles = useStyles({ appearance, size, disabled });
     const IconComponent = icon;
-    return (_jsxs(View, { className: cn(className, tagVariants.root({ appearance, size, disabled })), ref: ref, ...props, children: [IconComponent && (_jsx(IconComponent, { size: calculatedIconSize, className: tagVariants.inner({
-                    appearance,
-                    disabled,
-                    className: 'shrink-0',
-                }) })), _jsx(Text, { className: tagVariants.inner({ appearance, disabled }), children: label })] }));
+    const iconSize = iconSizeMap[size];
+    return (_jsxs(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.root, style]), ...props, children: [IconComponent && _jsx(IconComponent, { size: iconSize, style: styles.icon }), _jsx(Text, { style: styles.text, children: label })] }));
 });
 Tag.displayName = 'Tag';

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

@@ -3,8 +3,8 @@ import { Tag } from './Tag';
 declare const meta: Meta<typeof Tag>;
 export default meta;
 type Story = StoryObj<typeof Tag>;
-export declare const Default: Story;
-export declare const Showcase: Story;
-export declare const SizesShowcase: Story;
-export declare const ContentTypesShowcase: Story;
+export declare const Base: Story;
+export declare const AppearanceShowcase: Story;
+export declare const SizeShowcase: Story;
+export declare const ContentTypeShowcase: Story;
 //# sourceMappingURL=Tag.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAsB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAsB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuBhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
 import { Check } from '../../Symbols/Icons/Check';
+import { Box } from '../Utility/Box';
 import { Tag } from './Tag';
 const meta = {
     component: Tag,
@@ -12,7 +12,7 @@ const meta = {
         },
         size: {
             control: 'radio',
-            options: ['sm', 'lg'],
+            options: ['sm', 'md'],
         },
         label: {
             control: 'text',
@@ -26,20 +26,20 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {
+export const Base = {
     args: {
         label: 'Label',
         appearance: 'accent',
-        size: 'lg',
+        size: 'md',
     },
     render: (args) => _jsx(Tag, { ...args, icon: args.icon ? Check : undefined }),
 };
-export const Showcase = {
-    render: () => (_jsxs(View, { className: 'flex flex-col gap-16', children: [_jsxs(View, { className: 'flex flex-row gap-4', children: [_jsx(Tag, { appearance: 'base', label: 'Base' }), _jsx(Tag, { appearance: 'gray', label: 'Gray' }), _jsx(Tag, { appearance: 'accent', label: 'Accent' }), _jsx(Tag, { appearance: 'success', label: 'Success' }), _jsx(Tag, { appearance: 'error', label: 'Error' }), _jsx(Tag, { appearance: 'warning', label: 'Warning' }), _jsx(Tag, { label: 'Disabled', disabled: true })] }), _jsxs(View, { className: 'flex flex-row gap-4', children: [_jsx(Tag, { appearance: 'base', label: 'Base', icon: Check }), _jsx(Tag, { appearance: 'gray', label: 'Gray', icon: Check }), _jsx(Tag, { appearance: 'accent', label: 'Accent', icon: Check }), _jsx(Tag, { appearance: 'success', label: 'Success', icon: Check }), _jsx(Tag, { appearance: 'error', label: 'Error', icon: Check }), _jsx(Tag, { appearance: 'warning', label: 'Warning', icon: Check }), _jsx(Tag, { label: 'Disabled', icon: Check, disabled: true })] })] })),
+export const AppearanceShowcase = {
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Box, { lx: { flexDirection: 'row', gap: 's4' }, children: [_jsx(Tag, { appearance: 'base', label: 'Base' }), _jsx(Tag, { appearance: 'gray', label: 'Gray' }), _jsx(Tag, { appearance: 'accent', label: 'Accent' }), _jsx(Tag, { appearance: 'success', label: 'Success' }), _jsx(Tag, { appearance: 'error', label: 'Error' }), _jsx(Tag, { appearance: 'warning', label: 'Warning' }), _jsx(Tag, { label: 'Disabled', disabled: true })] }), _jsxs(Box, { lx: { flexDirection: 'row', gap: 's4' }, children: [_jsx(Tag, { appearance: 'base', label: 'Base', icon: Check }), _jsx(Tag, { appearance: 'gray', label: 'Gray', icon: Check }), _jsx(Tag, { appearance: 'accent', label: 'Accent', icon: Check }), _jsx(Tag, { appearance: 'success', label: 'Success', icon: Check }), _jsx(Tag, { appearance: 'error', label: 'Error', icon: Check }), _jsx(Tag, { appearance: 'warning', label: 'Warning', icon: Check }), _jsx(Tag, { label: 'Disabled', icon: Check, disabled: true })] })] })),
 };
-export const SizesShowcase = {
-    render: () => (_jsxs(View, { className: 'flex flex-row items-center gap-4', children: [_jsx(Tag, { size: 'lg', label: 'Large Tag' }), _jsx(Tag, { size: 'sm', label: 'Small Tag' })] })),
+export const SizeShowcase = {
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Tag, { size: 'md', label: 'Large Tag' }), _jsx(Tag, { size: 'sm', label: 'Small Tag' })] })),
 };
-export const ContentTypesShowcase = {
-    render: () => (_jsxs(View, { className: 'flex flex-row items-center gap-4', children: [_jsx(Tag, { label: 'Label only' }), _jsx(Tag, { icon: Check, label: 'Icon and Label' })] })),
+export const ContentTypeShowcase = {
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Tag, { label: 'Label only' }), _jsx(Tag, { icon: Check, label: 'Icon and Label' })] })),
 };

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { ViewProps } from 'react-native';
-import { IconSize } from '../Icon';
+import { StyledViewProps } from '../../../styles';
+import { IconProps } from '../Icon';
 export type TagProps = {
     /**
      * The appearance of the tag.
@@ -9,23 +9,21 @@ export type TagProps = {
     /**
      * The icon of the tag.
      */
-    icon?: ComponentType<{
-        size?: IconSize;
-        className?: string;
-    }>;
+    icon?: ComponentType<IconProps>;
     /**
      * The label of the tag.
      */
     label: string;
     /**
      * The size of the tag.
+     * @default 'md'
      */
-    size?: 'sm' | 'lg';
+    size?: 'sm' | 'md';
     /**
      * When `true`, prevents the user from interacting with the tag.
      *
      * @default false
      */
     disabled?: boolean;
-} & ViewProps;
-//# sourceMappingURL=Tag.types.d.ts.map
+} & StyledViewProps;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,MAAM,QAAQ,GAAG;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1E;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,eAAe,CAAC"}

package/dist/src/lib/Components/Tag/types.js

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

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
-import { type BaseInputProps } from '../BaseInput';
-export type TextInputProps = Omit<BaseInputProps, 'prefix' | 'labelClassName' | 'inputClassName'>;
 /**
  * A customizable input component with floating label, automatic clear button, error states, and focus/blur effects.
  *
@@ -11,7 +9,7 @@ export type TextInputProps = Omit<BaseInputProps, 'prefix' | 'labelClassName' |
  * - **Suffix elements** for icons, buttons, or custom content
  * - **Error state styling** with errorMessage support
  * - **Container-based spacing** with padding and gap for clean layout
- * - **Flexible styling** via className
+ * - **Flexible styling** via style props
  * - **React Native TextInput** with proper mobile behavior
  *
  * ## Clear Button Behavior
@@ -42,7 +40,7 @@ export type TextInputProps = Omit<BaseInputProps, 'prefix' | 'labelClassName' |
  *   label="Search"
  *   value={query}
  *   onChangeText={setQuery}
- *   suffix={<SearchIcon size={20} className="text-muted" />}
+ *   suffix={<SearchIcon size={20} />}
  *   hideClearButton={true} // Keep suffix visible
  * />
  *
@@ -56,5 +54,7 @@ export type TextInputProps = Omit<BaseInputProps, 'prefix' | 'labelClassName' |
  *   }}
  * />
  */
-export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<RNTextInput>>;
+export declare const TextInput: React.ForwardRefExoticComponent<Omit<import("../BaseInput").BaseInputProps, "prefix"> & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<RNTextInput>>;
 //# sourceMappingURL=TextInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,cAAc,EACd,QAAQ,GAAG,gBAAgB,GAAG,gBAAgB,CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,SAAS,oFAKpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAIxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,SAAS;;wEAKpB,CAAC"}

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

@@ -10,7 +10,7 @@ import { BaseInput } from '../BaseInput';
  * - **Suffix elements** for icons, buttons, or custom content
  * - **Error state styling** with errorMessage support
  * - **Container-based spacing** with padding and gap for clean layout
- * - **Flexible styling** via className
+ * - **Flexible styling** via style props
  * - **React Native TextInput** with proper mobile behavior
  *
  * ## Clear Button Behavior
@@ -41,7 +41,7 @@ import { BaseInput } from '../BaseInput';
  *   label="Search"
  *   value={query}
  *   onChangeText={setQuery}
- *   suffix={<SearchIcon size={20} className="text-muted" />}
+ *   suffix={<SearchIcon size={20} />}
  *   hideClearButton={true} // Keep suffix visible
  * />
  *

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAE7D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAuChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAmBxC,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAUnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC"}
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAuChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AA2BxC,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAUnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC"}

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

@@ -45,7 +45,13 @@ const meta = {
 export default meta;
 const TextInputStory = (args) => {
     const [value, setValue] = useState(args.initialValue ?? '');
-    return (_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsx(TextInput, { ...args, value: value, onChangeText: setValue, onClear: args.onClear }) }) }));
+    return (_jsx(View, { style: {
+            flex: 1,
+            minHeight: 96,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+        }, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(TextInput, { ...args, value: value, onChangeText: setValue, onClear: args.onClear }) }) }));
 };
 export const Base = {
     render: (args) => _jsx(TextInputStory, { ...args }),

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { BaseInputProps } from '../BaseInput';
+import { BoxProps } from '../Utility';
+export type TextInputProps = Omit<BaseInputProps, 'prefix'> & BoxProps;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC"}

package/dist/src/lib/Components/TextInput/types.js

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

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { TileProps } from './types';
+import React from 'react';
+import { View } from 'react-native';
 /**
  * A tile list item component that displays a spot icon at the top, title and optional description,
  * and optional trailing content at the bottom. It functions as a pressable component with active states,
@@ -8,6 +8,9 @@ import { TileProps } from './types';
  * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-overview--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-implementation--docs#dos-and-donts Guidelines}
  *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tile's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
  * @example
  * // Basic tile item
  * import { Tile, Spot } from '@ledgerhq/lumen-ui-rnative';
@@ -21,5 +24,14 @@ import { TileProps } from './types';
  *   onLongPress={() => console.log('Long pressed!')}
  * />
  */
-export declare const Tile: FC<TileProps>;
+export declare const Tile: React.ForwardRefExoticComponent<{
+    leadingContent: React.ReactNode;
+    title: string;
+    description?: string;
+    trailingContent?: React.ReactNode;
+    appearance?: "no-background" | "card";
+    disabled?: boolean;
+    onPress?: import("../../../styles").StyledPressableProps["onPress"];
+    onLongPress?: import("../../../styles").StyledPressableProps["onLongPress"];
+} & Omit<import("../../../styles").StyledPressableProps, "disabled" | "onPress" | "onLongPress"> & React.RefAttributes<View>>;
 //# sourceMappingURL=Tile.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiEpC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAwD9B,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAc,IAAI,EAAQ,MAAM,cAAc,CAAC;AAgItD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,IAAI;;;;;;;;;6HAuChB,CAAC"}