@cdx-ui/components 0.0.1-beta.76 → 0.0.1-beta.78

package/lib/typescript/components/BottomSheet/styles.d.ts

@@ -1,4 +1,3 @@
-import { type ViewStyle } from 'react-native';
 import { type VariantProps } from 'class-variance-authority';
 export declare const bottomSheetContainerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const bottomSheetHeaderVariants: (props?: ({
@@ -6,11 +5,7 @@ export declare const bottomSheetHeaderVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const bottomSheetContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const bottomSheetFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const bottomSheetSubtitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const bottomSheetBackButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const bottomSheetBackIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const bottomSheetCloseButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const bottomSheetCloseIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const handleIndicatorStyle: ViewStyle;
 export type BottomSheetHeaderVariants = VariantProps<typeof bottomSheetHeaderVariants>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/BottomSheet/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/BottomSheet/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUlE,eAAO,MAAM,4BAA4B,oFAIvC,CAAC;AAIH,eAAO,MAAM,yBAAyB;;8EAiBrC,CAAC;AAIF,eAAO,MAAM,0BAA0B,oFAAuC,CAAC;AAI/E,eAAO,MAAM,yBAAyB,oFAIpC,CAAC;AAIH,eAAO,MAAM,2BAA2B,oFAAyC,CAAC;AAIlF,eAAO,MAAM,6BAA6B,oFAAwD,CAAC;AAEnG,eAAO,MAAM,2BAA2B,oFAAiC,CAAC;AAI1E,eAAO,MAAM,8BAA8B,oFAAmD,CAAC;AAI/F,eAAO,MAAM,4BAA4B,oFAAiC,CAAC;AAK3E,eAAO,MAAM,oBAAoB,EAAE,SAKlC,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/BottomSheet/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,4BAA4B,oFAGvC,CAAC;AAEH,eAAO,MAAM,yBAAyB;;8EAiBrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oFAA0C,CAAC;AAElF,eAAO,MAAM,yBAAyB,oFAIpC,CAAC;AAEH,eAAO,MAAM,2BAA2B,oFAAiC,CAAC;AAE1E,eAAO,MAAM,4BAA4B,oFAAiC,CAAC;AAE3E,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC"}

package/lib/typescript/components/CurrencyInput/index.d.ts

@@ -0,0 +1,15 @@
+import { type TextInput, type TextInputProps, type ViewProps } from 'react-native';
+import { type IInputFieldProps } from '@cdx-ui/primitives';
+import { type CurrencyInputVariantProps } from './styles';
+export interface CurrencyInputProps extends IInputFieldProps, CurrencyInputVariantProps, Pick<TextInputProps, 'accessibilityLabel' | 'accessibilityHint' | 'testID' | 'onFocus' | 'onBlur'> {
+    /** Current numeric value. Renders formatted zero when undefined or null. */
+    value?: number;
+    /** Called with the parsed number when the user changes the amount. */
+    onChangeValue?: (value: number) => void;
+    /** Currency symbol rendered as an inline prefix. Defaults to `"$"`. */
+    currencySymbol?: string;
+    className?: string;
+    style?: ViewProps['style'];
+}
+export declare const CurrencyInput: import("react").ForwardRefExoticComponent<CurrencyInputProps & import("react").RefAttributes<TextInput>>;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/CurrencyInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CurrencyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,KAAK,yBAAyB,EAG/B,MAAM,UAAU,CAAC;AAqBlB,MAAM,WAAW,kBACf,SACE,gBAAgB,EAChB,yBAAyB,EACzB,IAAI,CACF,cAAc,EACd,oBAAoB,GAAG,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAC7E;IACH,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,0GAyIzB,CAAC"}

package/lib/typescript/components/CurrencyInput/styles.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const currencyInputRootVariants: (props?: ({
+    size?: "small" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const currencyInputFieldVariants: (props?: ({
+    size?: "small" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CurrencyInputVariantProps = VariantProps<typeof currencyInputRootVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/CurrencyInput/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CurrencyInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,yBAAyB;;8EAkBrC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;8EAkBtC,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC"}

package/lib/typescript/components/Select/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,qBAAqB;;;8EAgDjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;8EAiB9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAanC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,qBAAqB;;;8EA8CjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;8EAiB9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAanC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CurrencyInput';
 export * from './Dialog';
 export * from './Divider';
 export * from './Field';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.76",
+  "version": "0.0.1-beta.78",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.10.0",
-    "@cdx-ui/primitives": "0.0.1-beta.76",
-    "@cdx-ui/utils": "0.0.1-beta.76",
-    "@cdx-ui/icons": "0.0.1-beta.76"
+    "@cdx-ui/primitives": "0.0.1-beta.78",
+    "@cdx-ui/utils": "0.0.1-beta.78",
+    "@cdx-ui/icons": "0.0.1-beta.78"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/BottomSheet/index.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useCallback, useRef, type ReactNode } from 'react';
-import { Dimensions, Pressable, View, ViewStyle } from 'react-native';
+import { Dimensions, View, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useResolveClassNames } from 'uniwind';
 import {
   BottomSheetModal,
   BottomSheetModalProvider,
@@ -12,21 +13,15 @@ import {
   type BottomSheetFooterProps as GorhomBottomSheetFooterProps,
 } from '@gorhom/bottom-sheet';
 import { cn } from '@cdx-ui/utils';
-import { ArrowBackIosNew, Close } from '@cdx-ui/icons';
+import { ArrowBack, Close } from '@cdx-ui/icons';
 import { Heading } from '../Heading';
-import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
 import { Text } from '../Text';
 import {
-  bottomSheetBackButtonVariants,
-  bottomSheetBackIconVariants,
-  bottomSheetCloseButtonVariants,
-  bottomSheetCloseIconVariants,
   bottomSheetContainerVariants,
   bottomSheetContentVariants,
   bottomSheetFooterVariants,
   bottomSheetHeaderVariants,
-  bottomSheetSubtitleVariants,
-  handleIndicatorStyle,
 } from './styles';
 
 /** Ref type for BottomSheet; forwards the @gorhom modal ref (present, dismiss, snapToIndex, minimize, restore, etc.). */
@@ -61,36 +56,35 @@ function BottomSheetHeaderComponent(
   const computedClassName = cn(bottomSheetHeaderVariants({ hasTitle: hasContent }), className);
   return (
     <View ref={ref} className={computedClassName}>
-      {onBack && (
-        <Pressable
-          onPress={onBack}
-          hitSlop={12}
-          accessibilityRole="button"
-          accessibilityLabel={backAccessibilityLabel}
-          className={cn(bottomSheetBackButtonVariants())}
-        >
-          <Icon as={ArrowBackIosNew} className={bottomSheetBackIconVariants()} />
-        </Pressable>
-      )}
+      <BottomSheetBackButton
+        className={cn(!onBack && 'opacity-0')}
+        onPress={onBack}
+        {...(backAccessibilityLabel !== undefined && {
+          accessibilityLabel: backAccessibilityLabel,
+        })}
+      />
       <View className="flex-1">
         {children ??
           (hasTitle ? (
             <View>
-              <Heading size="xs" className="text-lg">
+              <Heading size="md" className="text-center">
                 {title}
               </Heading>
-              {subtitle ? <Text className={bottomSheetSubtitleVariants()}>{subtitle}</Text> : null}
+              {subtitle ? (
+                <Text size="sm" className="text-center text-content-secondary">
+                  {subtitle}
+                </Text>
+              ) : null}
             </View>
           ) : null)}
       </View>
-      {onClose && (
-        <BottomSheetCloseButton
-          onPress={onClose}
-          {...(closeAccessibilityLabel !== undefined && {
-            accessibilityLabel: closeAccessibilityLabel,
-          })}
-        />
-      )}
+      <BottomSheetCloseButton
+        className={cn(!onClose && 'opacity-0')}
+        onPress={onClose}
+        {...(closeAccessibilityLabel !== undefined && {
+          accessibilityLabel: closeAccessibilityLabel,
+        })}
+      />
     </View>
   );
 }
@@ -100,11 +94,41 @@ BottomSheetHeaderComponent.displayName = 'BottomSheet.Header';
 const BottomSheetHeader = forwardRef<View, BottomSheetHeaderProps>(BottomSheetHeaderComponent);
 BottomSheetHeader.displayName = 'BottomSheet.Header';
 
+// =============================================================================
+// BACKBUTTON
+// =============================================================================
+interface BottomSheetBackButtonProps {
+  onPress?: () => void;
+  className?: string;
+  accessibilityLabel?: string;
+}
+
+function BottomSheetBackButton({
+  onPress,
+  className,
+  accessibilityLabel = 'Go back',
+}: Readonly<BottomSheetBackButtonProps>) {
+  return (
+    <IconButton
+      as={ArrowBack}
+      variant="solid"
+      color="neutral"
+      size="default"
+      onPress={onPress}
+      hitSlop={12}
+      accessibilityLabel={accessibilityLabel}
+      className={className}
+    />
+  );
+}
+
+BottomSheetBackButton.displayName = 'BottomSheet.BackButton';
+
 // =============================================================================
 // CLOSEBUTTON
 // =============================================================================
 interface BottomSheetCloseButtonProps {
-  onPress: () => void;
+  onPress?: () => void;
   className?: string;
   accessibilityLabel?: string;
 }
@@ -113,17 +137,18 @@ function BottomSheetCloseButton({
   onPress,
   className,
   accessibilityLabel = 'Close',
-}: BottomSheetCloseButtonProps) {
+}: Readonly<BottomSheetCloseButtonProps>) {
   return (
-    <Pressable
+    <IconButton
+      as={Close}
+      variant="solid"
+      color="neutral"
+      size="default"
       onPress={onPress}
       hitSlop={12}
-      accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
-      className={cn(bottomSheetCloseButtonVariants(), className)}
-    >
-      <Icon as={Close} className={bottomSheetCloseIconVariants()} />
-    </Pressable>
+      className={className}
+    />
   );
 }
 
@@ -202,6 +227,13 @@ export interface BottomSheetModalProps extends React.ComponentPropsWithoutRef<
 
 const MAX_DYNAMIC_CONTENT_SIZE = Dimensions.get('window').height * 0.9;
 
+const SHEET_BORDER_RADIUS = 24;
+const sheetContainerStyle: ViewStyle = {
+  overflow: 'hidden',
+  borderTopLeftRadius: SHEET_BORDER_RADIUS,
+  borderTopRightRadius: SHEET_BORDER_RADIUS,
+};
+
 const CustomBackdrop = (props: BottomSheetBackdropProps) => {
   return (
     <BottomSheetBackdrop
@@ -214,10 +246,14 @@ const CustomBackdrop = (props: BottomSheetBackdropProps) => {
   );
 };
 
+const CustomBackground = (props: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View {...props} className={cn(bottomSheetContainerVariants())} />
+);
+
 const BottomSheetModalStyled = forwardRef<
   React.ComponentRef<typeof BottomSheetModal>,
   BottomSheetModalProps
->(({ handleVisible = true, footer, ...rest }, ref) => {
+>(({ handleVisible = true, footer, onDismiss, onChange, ...rest }, ref) => {
   const renderFooter = useCallback(
     (props: GorhomBottomSheetFooterProps) => (
       <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
@@ -225,18 +261,39 @@ const BottomSheetModalStyled = forwardRef<
     [footer],
   );
 
+  const dismissedRef = useRef(false);
+
+  const handleDismiss = useCallback(() => {
+    if (dismissedRef.current) return;
+    dismissedRef.current = true;
+    onDismiss?.();
+  }, [onDismiss]);
+
+  const handleChange = useCallback(
+    (...args: Parameters<NonNullable<BottomSheetModalProps['onChange']>>) => {
+      dismissedRef.current = false;
+      onChange?.(...args);
+    },
+    [onChange],
+  );
+
+  const handleIndicatorStyle = useResolveClassNames(
+    'bg-surface-neutral-subtle w-9 h-1 rounded-full',
+  );
+
   return (
     <BottomSheetModal
       ref={ref}
       enableDynamicSizing
       maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
+      style={sheetContainerStyle}
       handleComponent={handleVisible ? undefined : null}
       handleIndicatorStyle={handleVisible ? handleIndicatorStyle : undefined}
       backdropComponent={CustomBackdrop}
-      backgroundComponent={(backgroundProps) => (
-        <View {...backgroundProps} className={cn(bottomSheetContainerVariants())} />
-      )}
+      backgroundComponent={CustomBackground}
       {...rest}
+      onDismiss={handleDismiss}
+      onChange={handleChange}
       {...(footer != null && { footerComponent: renderFooter })}
     />
   );

package/src/components/BottomSheet/styles.ts

@@ -1,27 +1,15 @@
-import { type ViewStyle } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_PRIMARY,
-  COLOR_TEXT_SECONDARY,
-} from '../../styles/primitives';
-
-// ── Container ──────────────────────────────────────────────
 
 export const bottomSheetContainerVariants = cva([
-  'rounded-t-3xl border-t border-x overflow-hidden',
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
+  'rounded-t-3xl overflow-hidden',
+  'bg-surface-primary',
 ]);
 
-// ── Header ─────────────────────────────────────────────────
-
 export const bottomSheetHeaderVariants = cva(
   [
     'flex-row items-center justify-between min-h-12 px-4 pt-3 pb-2',
-    COLOR_BG_PRIMARY,
-    COLOR_TEXT_PRIMARY,
+    'bg-surface-primary',
+    'text-content-primary',
   ],
   {
     variants: {
@@ -36,44 +24,16 @@ export const bottomSheetHeaderVariants = cva(
   },
 );
 
-// ── Content ────────────────────────────────────────────────
-
-export const bottomSheetContentVariants = cva([COLOR_BG_PRIMARY, 'px-4 pb-6']);
-
-// ── Footer ─────────────────────────────────────────────────
+export const bottomSheetContentVariants = cva(['bg-surface-primary', 'p-5 pb-6']);
 
 export const bottomSheetFooterVariants = cva([
   'px-4 pt-3 pb-4 border-t',
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
+  'bg-surface-primary',
+  'border-stroke-secondary',
 ]);
 
-// ── Subtitle ────────────────────────────────────────────────
-
-export const bottomSheetSubtitleVariants = cva(['text-sm', COLOR_TEXT_SECONDARY]);
-
-// ── Back Button ─────────────────────────────────────────────
-
-export const bottomSheetBackButtonVariants = cva(['p-1 -m-1 mr-2 rounded-full active:opacity-70']);
-
 export const bottomSheetBackIconVariants = cva(['size-5 text-slate-500']);
 
-// ── Close Button ───────────────────────────────────────────
-
-export const bottomSheetCloseButtonVariants = cva(['p-1 -m-1 rounded-full active:opacity-70']);
-
-// ── Close Icon ─────────────────────────────────────────────
-
 export const bottomSheetCloseIconVariants = cva(['size-5 text-slate-500']);
 
-// ── Handle indicator ────────────────────────────────────────
-// Plain ViewStyle — gorhom's handleIndicatorStyle doesn't accept classNames.
-// slate-300 (#cbd5e1) maps to COLOR_BORDER_STRONG; update when raw token palette is available (TODO).
-export const handleIndicatorStyle: ViewStyle = {
-  backgroundColor: '#cbd5e1',
-  width: 36,
-  height: 4,
-  borderRadius: 2,
-};
-
 export type BottomSheetHeaderVariants = VariantProps<typeof bottomSheetHeaderVariants>;

package/src/components/CurrencyInput/index.tsx

@@ -0,0 +1,192 @@
+import { forwardRef, useState } from 'react';
+import { type TextInput, type TextInputProps, type ViewProps } from 'react-native';
+import {
+  InputField as InputFieldPrimitive,
+  InputRoot as InputRootPrimitive,
+  dataAttributes,
+  type IInputFieldProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  type CurrencyInputVariantProps,
+  currencyInputFieldVariants,
+  currencyInputRootVariants,
+} from './styles';
+
+// Hoisted at module scope — Intl instantiation is expensive (parses locale data).
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+// Cap the accumulated cents to 15 digits so the integer stays below
+// Number.MAX_SAFE_INTEGER (16 digits). Past that, parsing loses precision and the
+// amount garbles or resets — 15 digits already allows up to $9,999,999,999,999.99.
+const MAX_DIGITS = 15;
+
+function centsToAmountDisplay(cents: number): string {
+  return currencyFormatter.format(cents / 100);
+}
+
+function valueToCents(value: number | undefined | null): number {
+  return Math.round((value ?? 0) * 100);
+}
+
+export interface CurrencyInputProps
+  extends
+    IInputFieldProps,
+    CurrencyInputVariantProps,
+    Pick<
+      TextInputProps,
+      'accessibilityLabel' | 'accessibilityHint' | 'testID' | 'onFocus' | 'onBlur'
+    > {
+  /** Current numeric value. Renders formatted zero when undefined or null. */
+  value?: number;
+  /** Called with the parsed number when the user changes the amount. */
+  onChangeValue?: (value: number) => void;
+  /** Currency symbol rendered as an inline prefix. Defaults to `"$"`. */
+  currencySymbol?: string;
+  className?: string;
+  style?: ViewProps['style'];
+}
+
+export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
+  (
+    {
+      value,
+      onChangeValue,
+      currencySymbol = '$',
+      size = 'default',
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isFocused,
+      isHovered,
+      isFullWidth,
+      className,
+      style,
+      accessibilityLabel,
+      accessibilityHint,
+      testID,
+      onFocus,
+      onBlur,
+    },
+    ref,
+  ) => {
+    // null = display mode; number = active editing cents.
+    // Calculator-style cents accumulation: digits are always extracted from whatever
+    // the user types, interpreted as integer cents, then reformatted. The caret is
+    // kept at the end at all times so entry behaves like a banking amount pad — new
+    // digits append, backspace removes the rightmost digit.
+    const [editingCents, setEditingCents] = useState<number | null>(null);
+
+    // Controlled caret, pinned to the end of the formatted string. `undefined` in
+    // display mode so we never fight the platform when the field is not being edited.
+    const [selection, setSelection] = useState<{ start: number; end: number }>();
+
+    type FocusHandler = NonNullable<TextInputProps['onFocus']>;
+    type BlurHandler = NonNullable<TextInputProps['onBlur']>;
+    type SelectionChangeHandler = NonNullable<TextInputProps['onSelectionChange']>;
+
+    const displayCents = editingCents !== null ? editingCents : valueToCents(value);
+    const amountDisplay = centsToAmountDisplay(displayCents);
+    const fullDisplay = `${currencySymbol}${amountDisplay}`;
+    const isEmpty = displayCents === 0;
+
+    // Index just past the last character of the formatted string for a given cents.
+    // Computed from `cents` (not the render-closure `fullDisplay`) so the caret is
+    // correct in the same commit as a value change, even when a reformat adds or
+    // removes a grouping comma (e.g. 444.44 → 3,444.44) and changes the length.
+    const caretIndexFor = (cents: number) =>
+      `${currencySymbol}${centsToAmountDisplay(cents)}`.length;
+
+    const pinCaret = (end: number) => setSelection({ start: end, end });
+
+    const handleFocus: FocusHandler = (e) => {
+      // Initialise from the current value so existing amounts are preserved on focus.
+      const cents = valueToCents(value);
+      setEditingCents(cents);
+      pinCaret(caretIndexFor(cents));
+      onFocus?.(e);
+    };
+
+    const handleBlur: BlurHandler = (e) => {
+      setEditingCents(null);
+      setSelection(undefined);
+      onBlur?.(e);
+    };
+
+    const handleChangeText = (text: string) => {
+      // Extract only digit characters, interpret the resulting integer as cents.
+      // e.g. user typing '1' after '0.00' → digits '0001' → 1 cent → 0.01
+      // Backspace on '1.23' → '1.2' → digits '12' → 12 cents → 0.12
+      // Digits past the cap are dropped, so extra keystrokes are ignored rather
+      // than overflowing into an unsafe integer.
+      const digits = text.replace(/\D/g, '').slice(0, MAX_DIGITS);
+      const cents = parseInt(digits || '0', 10);
+      setEditingCents(cents);
+      pinCaret(caretIndexFor(cents));
+      onChangeValue?.(cents / 100);
+    };
+
+    const handleSelectionChange: SelectionChangeHandler = (e) => {
+      // Re-pin the caret to the end ONLY when it drifts to the LEFT of the end while
+      // editing — e.g. web hardware-keyboard arrow keys or a click/tap into the middle
+      // (native decimal-pad keyboards have no arrow keys, so those platforms rarely
+      // trigger this). Value-driven changes already pin the caret via
+      // `handleChangeText`/`handleFocus`.
+      //
+      // Crucially we do NOT touch the caret when it sits at or past the last-rendered
+      // end. While typing, the native caret momentarily lands one past our last render
+      // (the new value hasn't committed yet); re-pinning there would tug it back to the
+      // stale, one-shorter end and yank it one position left — the classic controlled-
+      // selection race. Ignoring forward positions sidesteps that entirely, and also
+      // prevents a feedback loop (the pin re-emits a selectionChange already at the end).
+      if (editingCents === null) {
+        return;
+      }
+      const end = fullDisplay.length;
+      const { selection: current } = e.nativeEvent;
+      if (current.end < end) {
+        pinCaret(end);
+      }
+    };
+
+    return (
+      <InputRootPrimitive
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isReadOnly={isReadOnly}
+        isRequired={isRequired}
+        isFocused={isFocused}
+        isHovered={isHovered}
+        isFullWidth={isFullWidth}
+        className={cn(currencyInputRootVariants({ size }), className)}
+        style={style}
+        {...dataAttributes({ slot: 'currency-input' })}
+      >
+        <InputFieldPrimitive
+          ref={ref}
+          value={fullDisplay}
+          selection={selection}
+          onChangeText={handleChangeText}
+          onSelectionChange={handleSelectionChange}
+          keyboardType="decimal-pad"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityValue={{ text: fullDisplay }}
+          testID={testID}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className={cn(
+            currencyInputFieldVariants({ size }),
+            isEmpty ? 'text-content-tertiary' : 'text-content-primary',
+          )}
+        />
+      </InputRootPrimitive>
+    );
+  },
+);
+
+CurrencyInput.displayName = 'CurrencyInput';

package/src/components/CurrencyInput/styles.ts

@@ -0,0 +1,44 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR } from '../../styles/primitives';
+
+export const currencyInputRootVariants = cva(
+  [
+    'w-full items-center justify-center',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+    DISABLED_CURSOR,
+    'data-[readonly=true]:cursor-default',
+  ],
+  {
+    variants: {
+      size: {
+        default: 'py-1',
+        small: 'py-0.5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const currencyInputFieldVariants = cva(
+  [
+    'w-full bg-transparent p-0 text-center',
+    'placeholder:text-content-tertiary',
+    'web:outline-none',
+    'data-[invalid=true]:text-content-danger',
+  ],
+  {
+    variants: {
+      size: {
+        default: 'heading-xl',
+        small: 'heading-lg',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export type CurrencyInputVariantProps = VariantProps<typeof currencyInputRootVariants>;

package/src/components/Link/styles.ts

@@ -46,7 +46,7 @@ export const linkNativeUnderlineVariants = cva(['border-b border-content-link pb
 });
 
 export const linkIconVariants = cva(
-  ['size-4', Platform.select({ web: 'text-inherit', default: 'text-content-link' })],
+  ['size-4', Platform.select({ web: 'text-current', default: 'text-content-link' })],
   {
     variants: {
       visited: {