@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Banner } from '../Banner';
+import { useState } from 'react';
+import { View } from 'react-native';
 import { Search } from './Search';
 const meta = {
     component: Search,
@@ -13,15 +14,76 @@ const meta = {
             },
         },
     },
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text when input is empty',
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message to display below input',
+        },
+        editable: {
+            control: 'boolean',
+            description: 'Whether the input is editable',
+        },
+        hideClearButton: {
+            control: 'boolean',
+            description: 'Hide the clear button',
+        },
+    },
 };
 export default meta;
-export const WebPreviewWarning = {
-    render: () => (_jsx(Banner, { appearance: 'warning', title: 'Unsupported previews on web', description: 'For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.' })),
-    parameters: {
-        docs: {
-            description: {
-                story: '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-            },
-        },
+const SearchStory = (args) => {
+    const [query, setQuery] = 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(Search, { ...args, value: query, onChangeText: setQuery, onClear: args.onClear }) }) }));
+};
+export const Base = {
+    render: (args) => _jsx(SearchStory, { ...args }),
+    args: {
+        placeholder: 'Search products',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithContent = {
+    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Search text' }),
+    args: {
+        placeholder: 'Search products',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithError = {
+    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Invalid search' }),
+    args: {
+        placeholder: 'Search products',
+        errorMessage: 'Search term is invalid',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const DisabledSearch = {
+    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Disabled search' }),
+    args: {
+        placeholder: 'Search products',
+        editable: false,
+        hideClearButton: false,
+    },
+};
+export const WithHiddenClearButton = {
+    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Search text' }),
+    args: {
+        placeholder: 'Search products',
+        editable: true,
+        hideClearButton: true,
+    },
+};
+export const WithClearCallback = {
+    render: (args) => (_jsx(SearchStory, { ...args, initialValue: 'Click clear to see callback', onClear: () => alert('Search cleared!') })),
+    args: {
+        placeholder: 'Search products',
+        editable: true,
+        hideClearButton: false,
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAYvE,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAMjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8DxC,CAAC;AAKF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6GtD,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAsBA,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkDtD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAUlD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgBlD,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAU1D,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAOvE,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAMjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8DxC,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyFtD,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAsBA,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkDtD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAUlD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgBlD,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAU1D,CAAC"}

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

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '@ledgerhq/lumen-utils-shared';
 import React, { useState, useEffect, useCallback, useId } from 'react';
 import { View, Text, Pressable } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { ChevronDown } from '../../Symbols';
 import { useControllableState, extractTextFromChildren } from '../../utils';
 import { SlotPressable } from '../Slot';
@@ -67,7 +66,6 @@ export const Select = ({ children, open: controlledOpen, defaultOpen = false, on
     return (_jsx(SelectContextProvider, { selectId: selectId, open: internalOpen ?? false, setOpen: setOpen, value: internalValue, onValueChange: handleValueChange, disabled: disabled, items: items, setItems: setItems, children: children }));
 };
 Select.displayName = 'Select';
-const AnimatedLabel = Animated.createAnimatedComponent(Animated.Text);
 export const SelectTrigger = ({ children, className, label, labelClassName, asChild = false, disabled: triggerDisabled, ...props }) => {
     const { selectId, setOpen, items, value, disabled: contextDisabled, label: contextLabel, onValueChange, } = useSelectSafeContext({
         consumerName: 'SelectTrigger',
@@ -100,22 +98,8 @@ export const SelectTrigger = ({ children, className, label, labelClassName, asCh
     ]);
     const hasValue = value !== undefined && value !== '';
     const isFloatingLabel = hasValue;
-    const labelFontSize = useSharedValue(hasValue ? 10 : 14);
-    const labelTop = useSharedValue(hasValue ? 10 : 16);
-    const animatedLabelStyle = useAnimatedStyle(() => ({
-        fontSize: labelFontSize.value,
-        top: labelTop.value,
-    }), []);
-    useEffect(() => {
-        labelFontSize.value = withTiming(isFloatingLabel ? 10 : 14, {
-            duration: 200,
-        });
-        labelTop.value = withTiming(isFloatingLabel ? 10 : 16, {
-            duration: 200,
-        });
-    }, [isFloatingLabel, labelFontSize, labelTop]);
     const Comp = asChild ? SlotPressable : Pressable;
-    return (_jsxs(Comp, { disabled: disabled, onPress: handlePress, className: cn(triggerStyles, disabled && 'opacity-50', className), ...props, children: [finalLabel && (_jsx(AnimatedLabel, { className: cn('absolute left-16 text-muted w-full', disabled && 'text-disabled', labelClassName), style: animatedLabelStyle, numberOfLines: 1, children: finalLabel })), _jsx(View, { className: cn('flex-1', finalLabel && hasValue && 'pt-16 pb-2', finalLabel && !hasValue && 'py-0'), children: children }), _jsx(ChevronDown, { size: 20, className: cn('text-muted ml-8', disabled && 'text-disabled') })] }));
+    return (_jsxs(Comp, { disabled: disabled, onPress: handlePress, className: cn(triggerStyles, disabled && 'opacity-50', className), ...props, children: [finalLabel && (_jsx(Text, { className: cn('absolute left-16 text-muted w-full transition-all duration-200', isFloatingLabel ? 'top-6 body-4' : 'top-14 body-2', disabled && 'text-disabled', labelClassName), numberOfLines: 1, children: finalLabel })), _jsx(View, { className: cn('flex-1', finalLabel && hasValue && 'pt-16 pb-2', finalLabel && !hasValue && 'py-0'), children: children }), _jsx(ChevronDown, { size: 20, className: cn('text-muted ml-8', disabled && 'text-disabled') })] }));
 };
 SelectTrigger.displayName = 'SelectTrigger';
 /**

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

@@ -1,23 +1,20 @@
-import Svg, { type SvgProps } from 'react-native-svg';
-import { IconSize } from '../../Components/Icon/Icon.types';
-export type SpinnerProps = SvgProps & {
-    /**
-     * The size of the spinner icon in pixels.
-     * @default 16
-     */
-    size?: IconSize;
-};
+import { View } from 'react-native';
 /**
  * A basic spinner component for loading states.
  *
  * @example
  * <Spinner />
+ *
+ * @example
+ * // With custom color
+ * <Spinner color={theme.colors.text.base} />
+ *
+ * @example
+ * // With lx props for layout
+ * <Spinner lx={{ marginTop: 's8' }} />
  */
-export declare const Spinner: import("react").ForwardRefExoticComponent<SvgProps & {
-    /**
-     * The size of the spinner icon in pixels.
-     * @default 16
-     */
-    size?: IconSize;
-} & import("react").RefAttributes<Svg>>;
+export declare const Spinner: import("react").ForwardRefExoticComponent<{
+    size?: import("../Icon").IconSize;
+    color?: string;
+} & Omit<import("../../../styles").StyledViewProps, "children"> & import("react").RefAttributes<View>>;
 //# sourceMappingURL=Spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAGA,OAAO,GAAG,EAAE,EAAQ,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG;IACpC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,OAAO;IAblB;;;OAGG;WACI,QAAQ;uCAkChB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AAQtD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO;;;sGA+CnB,CAAC"}

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

@@ -1,16 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { forwardRef } from 'react';
-import { View } from 'react-native';
+import { forwardRef, useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
+import { LumenStyleSheet } from '../../../styles';
+import { RuntimeConstants } from '../../utils';
+import { Box } from '../Utility';
 /**
  * A basic spinner component for loading states.
  *
  * @example
  * <Spinner />
+ *
+ * @example
+ * // With custom color
+ * <Spinner color={theme.colors.text.base} />
+ *
+ * @example
+ * // With lx props for layout
+ * <Spinner lx={{ marginTop: 's8' }} />
  */
-export const Spinner = forwardRef(({ className, size = 16, ...props }, ref) => {
+export const Spinner = forwardRef(({ lx, style, size = 16, color, ...props }, ref) => {
     const { t } = useCommonTranslation();
-    return (_jsx(View, { className: 'shrink-0 animate-spin', children: _jsx(Svg, { className: cn('text-base', className), width: size, height: size, viewBox: '0 0 16 16', fill: 'none', accessibilityLabel: t('components.spinner.loadingAriaLabel'), ref: ref, ...props, children: _jsx(Path, { d: 'M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round' }) }) }));
+    const { theme } = LumenStyleSheet.useTheme();
+    const spinValue = useRef(new Animated.Value(0)).current;
+    const strokeColor = color ?? theme.colors.text.base;
+    useEffect(() => {
+        const animation = Animated.loop(Animated.timing(spinValue, {
+            toValue: 1,
+            duration: 1000,
+            easing: Easing.linear,
+            useNativeDriver: RuntimeConstants.isNative,
+        }));
+        animation.start();
+        return () => animation.stop();
+    }, [spinValue]);
+    const spin = spinValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    return (_jsx(Box, { ref: ref, lx: { flexShrink: 0, ...lx }, style: style, ...props, children: _jsx(Animated.View, { style: { transform: [{ rotate: spin }] }, children: _jsx(Svg, { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', accessibilityLabel: t('components.spinner.loadingAriaLabel'), children: _jsx(Path, { d: 'M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8', stroke: strokeColor, strokeWidth: '1.5', strokeLinecap: 'round' }) }) }) }));
 });
+Spinner.displayName = 'Spinner';

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

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

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

@@ -18,7 +18,7 @@ export const Base = {
     args: {
         size: 40,
     },
-    render: ({ size }) => (_jsx("div", { className: 'flex items-center justify-center', children: _jsx(Spinner, { size: size }) })),
+    render: (args) => _jsx(Spinner, { ...args }),
 };
 export const Sizes = {
     argTypes: {

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { StyledViewProps } from '../../../styles';
+import { IconSize } from '../Icon';
+export type SpinnerProps = {
+    /**
+     * The size of the spinner icon in pixels.
+     * @default 16
+     */
+    size?: IconSize;
+    /**
+     * The color of the spinner stroke.
+     * @default text.base color.
+     */
+    color?: string;
+} & Omit<StyledViewProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

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

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

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

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

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

@@ -2,12 +2,13 @@ import React from 'react';
 import { View } from 'react-native';
 import { IconSize } from '../Icon';
 export declare const Tag: React.ForwardRefExoticComponent<{
-    appearance?: "base" | "gray" | "accent" | "success" | "error" | "warning" | "disabled";
+    appearance?: "base" | "gray" | "accent" | "success" | "error" | "warning";
     icon?: React.ComponentType<{
         size?: IconSize;
         className?: string;
     }>;
     label: string;
     size?: "sm" | "lg";
+    disabled?: boolean;
 } & import("react-native").ViewProps & React.RefAttributes<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;AA2CnC,eAAO,MAAM,GAAG;;;YApCR,CAAC;iBACG,CAAC;;;;iEA6DZ,CAAC"}
+{"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"}

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

@@ -13,16 +13,20 @@ const tagVariants = {
                 success: 'bg-success',
                 error: 'bg-error',
                 warning: 'bg-warning',
-                disabled: 'bg-disabled',
             },
             size: {
                 lg: 'h-24 px-8 py-4 body-3',
                 sm: 'h-20 px-4 py-2 body-4',
             },
+            disabled: {
+                true: 'bg-disabled',
+                false: '',
+            },
         },
         defaultVariants: {
             appearance: 'accent',
             size: 'lg',
+            disabled: false,
         },
     }),
     inner: cva('', {
@@ -34,18 +38,25 @@ const tagVariants = {
                 success: 'text-success',
                 error: 'text-error',
                 warning: 'text-warning',
-                disabled: 'text-disabled',
+            },
+            disabled: {
+                true: 'text-disabled',
+                false: '',
             },
         },
     }),
 };
-export const Tag = React.forwardRef(({ className, appearance, size, icon, label, ...props }, ref) => {
+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;
     const IconComponent = icon;
-    return (_jsxs(View, { className: cn(className, tagVariants.root({ appearance, size })), ref: ref, ...props, children: [IconComponent && (_jsx(IconComponent, { size: calculatedIconSize, className: tagVariants.inner({ appearance, className: 'shrink-0' }) })), _jsx(Text, { className: tagVariants.inner({ appearance }), children: label })] }));
+    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 })] }));
 });
 Tag.displayName = 'Tag';

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

@@ -35,7 +35,7 @@ export const Default = {
     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, { appearance: 'disabled', label: 'Disabled' })] }), _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, { appearance: 'disabled', label: 'Disabled', icon: Check })] })] })),
+    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 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' })] })),

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

@@ -5,7 +5,7 @@ export type TagProps = {
     /**
      * The appearance of the tag.
      */
-    appearance?: 'base' | 'gray' | 'accent' | 'success' | 'error' | 'warning' | 'disabled';
+    appearance?: 'base' | 'gray' | 'accent' | 'success' | 'error' | 'warning';
     /**
      * The icon of the tag.
      */
@@ -21,5 +21,11 @@ export type TagProps = {
      * The size of the tag.
      */
     size?: 'sm' | 'lg';
+    /**
+     * When `true`, prevents the user from interacting with the tag.
+     *
+     * @default false
+     */
+    disabled?: boolean;
 } & ViewProps;
 //# sourceMappingURL=Tag.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG;IACrB;;OAEG;IACH,UAAU,CAAC,EACP,MAAM,GACN,MAAM,GACN,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,UAAU,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,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;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,SAAS,CAAC"}

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

@@ -3,5 +3,12 @@ import { TextInput } from './TextInput';
 declare const meta: Meta<typeof TextInput>;
 export default meta;
 type Story = StoryObj<typeof TextInput>;
-export declare const WebPreviewWarning: Story;
+export declare const Base: Story;
+export declare const WithContent: Story;
+export declare const WithError: Story;
+export declare const DisabledTextInput: Story;
+export declare const WithHiddenClearButton: Story;
+export declare const WithClearCallback: Story;
+export declare const EmailKeyboard: Story;
+export declare const PhoneKeyboard: Story;
 //# sourceMappingURL=TextInput.stories.d.ts.map

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;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAYhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,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,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"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Banner } from '../Banner';
+import { useState } from 'react';
+import { View } from 'react-native';
 import { TextInput } from './TextInput';
 const meta = {
     component: TextInput,
@@ -13,15 +14,109 @@ const meta = {
             },
         },
     },
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Floating label text',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text when input is empty',
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message to display below input',
+        },
+        editable: {
+            control: 'boolean',
+            description: 'Whether the input is editable',
+        },
+        hideClearButton: {
+            control: 'boolean',
+            description: 'Hide the clear button',
+        },
+        keyboardType: {
+            control: 'select',
+            options: ['default', 'email-address', 'numeric', 'phone-pad', 'url'],
+            description: 'Keyboard type for input',
+        },
+    },
 };
 export default meta;
-export const WebPreviewWarning = {
-    render: () => (_jsx(Banner, { appearance: 'warning', title: 'Unsupported previews on web', description: 'For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.' })),
-    parameters: {
-        docs: {
-            description: {
-                story: '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-            },
-        },
+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 }) }) }));
+};
+export const Base = {
+    render: (args) => _jsx(TextInputStory, { ...args }),
+    args: {
+        label: 'Username',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const WithContent = {
+    render: (args) => _jsx(TextInputStory, { ...args, initialValue: 'johndoe' }),
+    args: {
+        label: 'Username',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const WithError = {
+    render: (args) => _jsx(TextInputStory, { ...args, initialValue: 'ab' }),
+    args: {
+        label: 'Username',
+        errorMessage: 'Username must be at least 3 characters',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const DisabledTextInput = {
+    render: (args) => _jsx(TextInputStory, { ...args, initialValue: 'johndoe' }),
+    args: {
+        label: 'Username',
+        editable: false,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const WithHiddenClearButton = {
+    render: (args) => (_jsx(TextInputStory, { ...args, initialValue: 'Content with hidden clear' })),
+    args: {
+        label: 'Label',
+        editable: true,
+        hideClearButton: true,
+        keyboardType: 'default',
+    },
+};
+export const WithClearCallback = {
+    render: (args) => (_jsx(TextInputStory, { ...args, initialValue: 'Click clear to see callback', onClear: () => alert('Input cleared!') })),
+    args: {
+        label: 'Label',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const EmailKeyboard = {
+    render: (args) => _jsx(TextInputStory, { ...args }),
+    args: {
+        label: 'Email',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'email-address',
+    },
+};
+export const PhoneKeyboard = {
+    render: (args) => _jsx(TextInputStory, { ...args }),
+    args: {
+        label: 'Phone Number',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'phone-pad',
     },
 };

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;AAmBpC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAmD9B,CAAC"}
+{"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"}

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

@@ -3,15 +3,61 @@ import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
 import { View, Pressable, Text } from 'react-native';
 const tileVariants = {
-    root: cva([
-        'relative flex w-full items-center gap-8 p-8',
-        'rounded-sm bg-base-transparent text-base transition-colors',
-    ], {
+    root: cva(['relative flex w-full items-center gap-8 p-8', 'rounded-sm text-base'], {
         variants: {
+            appearance: {
+                'no-background': 'bg-base-transparent',
+                card: 'bg-surface',
+            },
             pressed: {
-                true: 'bg-base-transparent-pressed',
-                false: 'bg-base-transparent',
+                true: '',
+                false: '',
+            },
+            disabled: {
+                true: '',
+                false: '',
+            },
+        },
+        compoundVariants: [
+            {
+                appearance: 'no-background',
+                pressed: true,
+                disabled: false,
+                className: 'bg-base-transparent-pressed',
             },
+            {
+                appearance: 'card',
+                pressed: true,
+                disabled: false,
+                className: 'bg-surface-pressed',
+            },
+        ],
+        defaultVariants: {
+            appearance: 'no-background',
+            pressed: false,
+            disabled: false,
+        },
+    }),
+    title: cva('w-full truncate text-center body-3-semi-bold', {
+        variants: {
+            disabled: {
+                true: 'text-disabled',
+                false: 'text-base',
+            },
+        },
+        defaultVariants: {
+            disabled: false,
+        },
+    }),
+    description: cva('w-full overflow-hidden truncate text-center body-3', {
+        variants: {
+            disabled: {
+                true: 'text-disabled',
+                false: 'text-muted',
+            },
+        },
+        defaultVariants: {
+            disabled: false,
         },
     }),
 };
@@ -36,6 +82,6 @@ const tileVariants = {
  *   onLongPress={() => console.log('Long pressed!')}
  * />
  */
-export const Tile = forwardRef(({ title, description, leadingContent, trailingContent, onPress, onLongPress, ...props }, ref) => {
-    return (_jsx(Pressable, { ref: ref, onPress: onPress, onLongPress: onLongPress, ...props, children: ({ pressed }) => (_jsx(View, { className: tileVariants.root({ pressed }), children: _jsxs(View, { className: 'flex w-full items-center gap-8', children: [_jsx(View, { className: 'flex items-center justify-center', children: leadingContent }), _jsxs(View, { className: 'flex w-full items-center gap-4', children: [_jsxs(View, { className: 'flex w-full items-center', children: [_jsx(Text, { numberOfLines: 1, className: 'w-full truncate text-center text-base body-3-semi-bold', children: title }), description && (_jsx(Text, { numberOfLines: 1, className: 'w-full overflow-hidden truncate text-center text-muted body-3', children: description }))] }), trailingContent] })] }) })) }));
+export const Tile = forwardRef(({ title, description, leadingContent, trailingContent, appearance = 'no-background', disabled = false, onPress, onLongPress, ...props }, ref) => {
+    return (_jsx(Pressable, { ref: ref, onPress: onPress, onLongPress: onLongPress, disabled: disabled, ...props, children: ({ pressed }) => (_jsx(View, { className: tileVariants.root({ appearance, pressed, disabled }), children: _jsxs(View, { className: 'w-full items-center gap-8', children: [_jsx(View, { className: 'items-center justify-center', children: leadingContent }), _jsxs(View, { className: 'w-full items-center gap-4', children: [_jsxs(View, { className: 'w-full items-center', children: [_jsx(Text, { numberOfLines: 1, className: tileVariants.title({ disabled }), children: title }), description && (_jsx(Text, { numberOfLines: 1, className: tileVariants.description({ disabled }), children: description }))] }), trailingContent] })] }) })) }));
 });