@cdx-ui/components 0.3.1 → 0.3.3

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

@@ -34,6 +34,8 @@ export * from './Field';
 export * from './Form';
 export * from './FullScreenDialog';
 export * from './Image';
+export * from './Insight';
+export * from './InsightStack';
 export * from './InsuranceDisclosure';
 export * from './Input';
 export * from './OtpInput';

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,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACjG,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,yBAAyB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,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,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACjG,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,yBAAyB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,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/lib/typescript/figma/CurrencyInput.figma.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyInput.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/CurrencyInput.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAuC1B,wBAUE"}
+{"version":3,"file":"CurrencyInput.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/CurrencyInput.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA2C1B,wBASE"}

package/lib/typescript/figma/Insight.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Insight.figma.d.ts.map

package/lib/typescript/figma/Insight.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Insight.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Insight.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAsD1B,wBAwBE"}

package/lib/typescript/figma/InsightStack.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=InsightStack.figma.d.ts.map

package/lib/typescript/figma/InsightStack.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsightStack.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/InsightStack.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAqB1B,wBAWE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -106,10 +106,10 @@
     "@marceloterreiro/flash-calendar": "2.0.0",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/formatters": "0.3.1",
-    "@cdx-ui/icons": "0.3.1",
-    "@cdx-ui/primitives": "0.3.1",
-    "@cdx-ui/utils": "0.3.1"
+    "@cdx-ui/formatters": "0.3.3",
+    "@cdx-ui/icons": "0.3.3",
+    "@cdx-ui/primitives": "0.3.3",
+    "@cdx-ui/utils": "0.3.3"
   },
   "devDependencies": {
     "@dnd-kit/core": "6.3.1",

package/src/components/BottomSheet/index.tsx

@@ -10,7 +10,14 @@ import React, {
   useState,
   type ReactNode,
 } from 'react';
-import { BackHandler, Dimensions, Platform, View, ViewStyle } from 'react-native';
+import {
+  BackHandler,
+  Dimensions,
+  Platform,
+  View,
+  ViewStyle,
+  type LayoutChangeEvent,
+} from 'react-native';
 import { SafeAreaInsetsContext, type EdgeInsets } from 'react-native-safe-area-context';
 import { useResolveClassNames } from 'uniwind';
 import {
@@ -38,8 +45,43 @@ import {
 
 const SCOPE = 'BOTTOM_SHEET';
 
-const useBottomSheetStyleContext = () =>
-  (useStyleContext(SCOPE) ?? {}) as BottomSheetContentVariantProps;
+interface BottomSheetScopeContext extends BottomSheetContentVariantProps {
+  hasFooter?: boolean;
+  /** Web only: height of the `footer` prop, measured by `BottomSheet.Modal`. */
+  footerHeight?: number;
+}
+
+const useBottomSheetScopeContext = () =>
+  useStyleContext(SCOPE) as BottomSheetScopeContext | undefined;
+
+const useBottomSheetStyleContext = (): BottomSheetContentVariantProps =>
+  useBottomSheetScopeContext() ?? {};
+
+const IS_WEB = Platform.OS === 'web';
+
+/**
+ * Resolves how a content wrapper reserves room for the footer.
+ *
+ * gorhom's footer margin adjustment is unsound on web: its reaction first runs with the
+ * unmeasured footer sentinel (-999) and adds it to `contentHeight`, then never adds the real
+ * footer height. Depending on whether content measures first, a dynamically sized sheet either
+ * parks below its container or opens with the footer covering its content. It cannot be fixed
+ * with padding because react-native-web only re-reports layout when the content box resizes.
+ *
+ * So on web, when the sheet's `footer` prop is measured here, a spacer child of the footer's
+ * height replaces gorhom's adjustment; its layout lands in the content measurement in any
+ * order. With no footer there is nothing to adjust. Otherwise (native, a raw gorhom
+ * `footerComponent`, or outside a `BottomSheet.Modal`) gorhom's adjustment is kept.
+ */
+function useFooterMargin(enableFooterMarginAdjustment: boolean | undefined) {
+  const scope = useBottomSheetScopeContext();
+  const enabled = enableFooterMarginAdjustment ?? scope?.hasFooter ?? true;
+  const spacerHeight = enabled && IS_WEB ? scope?.footerHeight : undefined;
+  return {
+    enableFooterMarginAdjustment: enabled && spacerHeight === undefined,
+    spacer: spacerHeight ? <View style={{ height: spacerHeight }} pointerEvents="none" /> : null,
+  };
+}
 
 const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
 
@@ -209,13 +251,35 @@ const BottomSheetModalStyled = forwardRef<
     ref,
   ) => {
     const parent = useParentContext();
-    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { fullBleed } }), [parent, fullBleed]);
+    const hasFooter = footer != null || rest.footerComponent != null;
+    const measuresFooter = IS_WEB && footer != null;
+    const [measuredFooterHeight, setMeasuredFooterHeight] = useState(0);
+    const footerHeight = measuresFooter ? measuredFooterHeight : undefined;
+    const ctx = useMemo(
+      () => ({
+        ...parent,
+        [SCOPE]: { fullBleed, hasFooter, footerHeight } satisfies BottomSheetScopeContext,
+      }),
+      [parent, fullBleed, hasFooter, footerHeight],
+    );
+
+    const handleFooterLayout = useCallback((event: LayoutChangeEvent) => {
+      setMeasuredFooterHeight(event.nativeEvent.layout.height);
+    }, []);
 
     const renderFooter = useCallback(
       (props: GorhomBottomSheetFooterProps) => (
-        <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
+        <GorhomBottomSheetFooter {...props}>
+          {measuresFooter ? (
+            <View onLayout={handleFooterLayout} pointerEvents="box-none">
+              {footer}
+            </View>
+          ) : (
+            footer
+          )}
+        </GorhomBottomSheetFooter>
       ),
-      [footer],
+      [footer, handleFooterLayout, measuresFooter],
     );
 
     const modalRef = useRef<BottomSheetModalRef | null>(null);
@@ -370,17 +434,22 @@ const BottomSheetModalStyled = forwardRef<
 BottomSheetModalStyled.displayName = 'BottomSheet.Modal';
 
 // =============================================================================
-// SCROLLVIEW WRAPPER (with footer margin adjustment enabled by default)
+// SCROLLVIEW WRAPPER (reserves room for the sheet's footer by default)
 // =============================================================================
 
 function BottomSheetScrollViewStyled({
-  enableFooterMarginAdjustment = true,
+  enableFooterMarginAdjustment,
   children,
   ...rest
 }: React.ComponentPropsWithoutRef<typeof BottomSheetScrollView>) {
+  const footerMargin = useFooterMargin(enableFooterMarginAdjustment);
   return (
-    <BottomSheetScrollView enableFooterMarginAdjustment={enableFooterMarginAdjustment} {...rest}>
+    <BottomSheetScrollView
+      enableFooterMarginAdjustment={footerMargin.enableFooterMarginAdjustment}
+      {...rest}
+    >
       {children}
+      {footerMargin.spacer}
     </BottomSheetScrollView>
   );
 }
@@ -388,17 +457,22 @@ function BottomSheetScrollViewStyled({
 BottomSheetScrollViewStyled.displayName = 'BottomSheet.ScrollView';
 
 // =============================================================================
-// VIEW WRAPPER (with footer margin adjustment enabled by default)
+// VIEW WRAPPER (reserves room for the sheet's footer by default)
 // =============================================================================
 
 function BottomSheetViewStyled({
-  enableFooterMarginAdjustment = true,
+  enableFooterMarginAdjustment,
   children,
   ...rest
 }: React.ComponentPropsWithoutRef<typeof BottomSheetView>) {
+  const footerMargin = useFooterMargin(enableFooterMarginAdjustment);
   return (
-    <BottomSheetView enableFooterMarginAdjustment={enableFooterMarginAdjustment} {...rest}>
+    <BottomSheetView
+      enableFooterMarginAdjustment={footerMargin.enableFooterMarginAdjustment}
+      {...rest}
+    >
       {children}
+      {footerMargin.spacer}
     </BottomSheetView>
   );
 }
@@ -466,5 +540,6 @@ export function useBottomSheet() {
  * ```
  */
 export function useBottomSheetScrollable() {
-  return useBottomSheetScrollableCreator({ enableFooterMarginAdjustment: true });
+  const enableFooterMarginAdjustment = useBottomSheetScopeContext()?.hasFooter ?? true;
+  return useBottomSheetScrollableCreator({ enableFooterMarginAdjustment });
 }

package/src/components/CurrencyInput/index.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useState } from 'react';
-import { type TextInput, type TextInputProps, type ViewProps } from 'react-native';
+import { Text, type TextInput, type TextInputProps, type ViewProps } from 'react-native';
 import {
   InputField as InputFieldPrimitive,
   InputRoot as InputRootPrimitive,
@@ -10,6 +10,7 @@ import { cn } from '@cdx-ui/utils';
 import {
   type CurrencyInputVariantProps,
   currencyInputFieldVariants,
+  currencyInputPrefixVariants,
   currencyInputRootVariants,
 } from './styles';
 
@@ -44,7 +45,10 @@ export interface CurrencyInputProps
   value?: number;
   /** Called with the parsed amount in major currency units, not cents, when the user edits the field. */
   onChangeValue?: (value: number) => void;
-  /** Currency symbol rendered as an inline prefix. Defaults to `"$"`. */
+  /**
+   * Currency symbol shown before the amount. Defaults to `"$"`. Part of the field text in
+   * `ghost`; a separate, non-editable prefix in `outline`.
+   */
   currencySymbol?: string;
   className?: string;
   style?: ViewProps['style'];
@@ -56,6 +60,7 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
       value,
       onChangeValue,
       currencySymbol = '$',
+      variant = 'ghost',
       size = 'default',
       isDisabled,
       isInvalid,
@@ -90,17 +95,25 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
     type BlurHandler = NonNullable<TextInputProps['onBlur']>;
     type SelectionChangeHandler = NonNullable<TextInputProps['onSelectionChange']>;
 
+    const isOutline = variant === 'outline';
+
+    // `outline` renders the symbol as a separate prefix, so the TextInput holds only the
+    // amount. Every caret index is measured against this field text, never the full display.
+    const fieldTextFor = (cents: number) => {
+      const amount = centsToAmountDisplay(cents);
+      return isOutline ? amount : `${currencySymbol}${amount}`;
+    };
+
     const displayCents = editingCents !== null ? editingCents : valueToCents(value);
-    const amountDisplay = centsToAmountDisplay(displayCents);
-    const fullDisplay = `${currencySymbol}${amountDisplay}`;
+    const fullDisplay = `${currencySymbol}${centsToAmountDisplay(displayCents)}`;
+    const fieldText = fieldTextFor(displayCents);
     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
+    // Index just past the last character of the field text for a given cents.
+    // Computed from `cents` (not the render-closure `fieldText`) 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 caretIndexFor = (cents: number) => fieldTextFor(cents).length;
 
     const pinCaret = (end: number) => setSelection({ start: end, end });
 
@@ -147,7 +160,7 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
       if (editingCents === null) {
         return;
       }
-      const end = fullDisplay.length;
+      const end = fieldText.length;
       const { selection: current } = e.nativeEvent;
       if (current.end < end) {
         pinCaret(end);
@@ -163,13 +176,24 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
         isFocused={isFocused}
         isHovered={isHovered}
         isFullWidth={isFullWidth}
-        className={cn(currencyInputRootVariants({ size }), className)}
+        className={cn(currencyInputRootVariants({ variant, size }), className)}
         style={style}
         {...dataAttributes({ slot: 'currency-input' })}
       >
+        {isOutline ? (
+          // Hidden from assistive tech: `accessibilityValue` already announces the symbol.
+          <Text
+            className={currencyInputPrefixVariants({ size })}
+            aria-hidden
+            importantForAccessibility="no-hide-descendants"
+            {...dataAttributes({ slot: 'currency-input-prefix' })}
+          >
+            {currencySymbol}
+          </Text>
+        ) : null}
         <InputFieldPrimitive
           ref={ref}
-          value={fullDisplay}
+          value={fieldText}
           selection={selection}
           onChangeText={handleChangeText}
           onSelectionChange={handleSelectionChange}
@@ -182,7 +206,7 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
           onFocus={handleFocus}
           onBlur={handleBlur}
           className={cn(
-            currencyInputFieldVariants({ size }),
+            currencyInputFieldVariants({ variant, size }),
             isEmpty ? 'text-content-tertiary' : 'text-content-primary',
           )}
         />

package/src/components/CurrencyInput/styles.ts

@@ -1,7 +1,23 @@
-import { cva, type VariantProps } from '@cdx-ui/utils';
+import { cn, cva } from '@cdx-ui/utils';
 import { DISABLED_CURSOR } from '../../styles/constants';
+import { inputFieldVariants, inputRootVariants } from '../Input/styles';
 
-export const currencyInputRootVariants = cva(
+export interface CurrencyInputVariantProps {
+  /**
+   * Visual style. `ghost` is the large, centered, borderless amount entry; `outline` renders
+   * the bordered `Input` shell with a leading currency-symbol prefix, for amounts that sit
+   * alongside other form fields.
+   * @default 'ghost'
+   */
+  variant?: 'ghost' | 'outline';
+  /**
+   * Height, padding, and text size.
+   * @default 'default'
+   */
+  size?: 'default' | 'small';
+}
+
+const currencyInputGhostRootVariants = cva(
   [
     'w-full items-center justify-center',
     'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
@@ -21,7 +37,7 @@ export const currencyInputRootVariants = cva(
   },
 );
 
-export const currencyInputFieldVariants = cva(
+const currencyInputGhostFieldVariants = cva(
   [
     'w-full bg-transparent p-0 text-center',
     'placeholder:text-content-tertiary',
@@ -41,4 +57,35 @@ export const currencyInputFieldVariants = cva(
   },
 );
 
-export type CurrencyInputVariantProps = VariantProps<typeof currencyInputRootVariants>;
+// `outline` delegates to the Input shell so border, focus, invalid, disabled, and read-only
+// treatments (including the native `data-[field-state=...]` focus selectors) stay in one place.
+// Figma `outlined` spaces the symbol 8px from the amount, tighter than Input's 16px slot gap.
+export const currencyInputRootVariants = ({
+  variant = 'ghost',
+  size = 'default',
+}: CurrencyInputVariantProps = {}): string =>
+  variant === 'outline'
+    ? cn(inputRootVariants({ variant: 'outline', size }), size === 'default' && 'gap-2')
+    : currencyInputGhostRootVariants({ size });
+
+export const currencyInputFieldVariants = ({
+  variant = 'ghost',
+  size = 'default',
+}: CurrencyInputVariantProps = {}): string =>
+  variant === 'outline' ? inputFieldVariants({ size }) : currencyInputGhostFieldVariants({ size });
+
+// Figma keeps the symbol at body-md on every viewport; only the amount grows to 16px on web <600px.
+export const currencyInputPrefixVariants = cva(
+  ['shrink-0 font-medium text-content-secondary tracking-normal'],
+  {
+    variants: {
+      size: {
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);