@cdx-ui/components 0.1.0 → 0.1.2

package/src/components/InsuranceDisclosure/FdicLockup.tsx

@@ -0,0 +1,23 @@
+import { Path, Svg } from 'react-native-svg';
+
+const FDIC_NAVY = '#003366';
+
+export function FdicLockup() {
+  return (
+    <Svg width="100%" height="100%" viewBox="0 0 44 20" fill="none">
+      <Path
+        d="M5.39953 18.3086H0.896923V1.73399H10.1587V6.06628H5.39953V8.7493H9.88382V13.0821H5.39953V18.3086Z"
+        fill={FDIC_NAVY}
+      />
+      <Path d="M30.228 1.69895H25.7254V18.308H30.228V1.69895Z" fill={FDIC_NAVY} />
+      <Path
+        d="M39.4208 13.924C37.2579 13.924 35.4679 12.1616 35.4679 10.0003C35.4679 7.83897 37.2579 6.07598 39.4208 6.07598C41.3929 6.07598 42.424 7.12483 43.1031 8.50623V2.55916C43.1031 2.55916 41.1094 1.665 39.2516 1.665C35.1252 1.665 30.6543 5.46047 30.6543 10.0003C30.6543 15.5582 34.9187 18.335 39.2516 18.335C41.1089 18.335 43.1031 17.4419 43.1031 17.4419V11.5466C42.2903 12.9479 41.3821 13.924 39.4208 13.924Z"
+        fill={FDIC_NAVY}
+      />
+      <Path
+        d="M15.3172 1.73399C18.1366 1.73399 24.946 2.42118 24.946 10.0132C24.946 17.6209 18.8254 18.2935 15.3172 18.293H10.7785V1.73399H15.3172ZM20.4752 9.98679C20.4752 7.02943 18.1027 5.99783 15.3102 5.99783V13.9758C18.1027 13.9758 20.4752 12.9436 20.4752 9.98679Z"
+        fill={FDIC_NAVY}
+      />
+    </Svg>
+  );
+}

package/src/components/InsuranceDisclosure/index.tsx

@@ -5,49 +5,89 @@ import { cn } from '@cdx-ui/utils';
 import { Image as ForgeImage } from '../Image/Image';
 import { HStack, type HStackProps } from '../Stack/HStack';
 import { Text } from '../Text';
+import { FdicLockup } from './FdicLockup';
 import {
   insuranceDisclosureLogoVariants,
   insuranceDisclosureRootVariants,
   insuranceDisclosureTextVariants,
 } from './styles';
 
-export interface InsuranceDisclosureProps extends Omit<HStackProps, 'children'> {
-  logoSource: string | ImageSourcePropType;
-  logoAccessibilityLabel: string;
+type InsuranceDisclosureSharedProps = Omit<HStackProps, 'children'> & {
+  /**
+   * When `true`, renders surface chrome (background, border, radius, padding).
+   * Defaults to `false` — unframed disclosures have no border or padding.
+   *
+   * @breakingChange Prior versions always rendered a bordered container with `p-4`.
+   * Pass `framed` to restore chrome; padding is now `px-3 py-2`.
+   */
+  framed?: boolean;
   label?: string;
   className?: string;
+};
+
+/** Bundled official FDIC lockup — omit `logoSource` to use the default mark. */
+export interface InsuranceDisclosureBundledLogoProps extends InsuranceDisclosureSharedProps {
+  logoSource?: undefined;
+  /** Ignored when the bundled FDIC lockup is used. */
+  logoAccessibilityLabel?: string;
+}
+
+/** Custom logo override — `logoAccessibilityLabel` is required. */
+export interface InsuranceDisclosureCustomLogoProps extends InsuranceDisclosureSharedProps {
+  /** Logo image — a remote URI string or a React Native image source. */
+  logoSource: string | ImageSourcePropType;
+  /** Accessible label for the custom logo, announced by assistive technology. */
+  logoAccessibilityLabel: string;
 }
 
+export type InsuranceDisclosureProps =
+  | InsuranceDisclosureBundledLogoProps
+  | InsuranceDisclosureCustomLogoProps;
+
 export const InsuranceDisclosure = forwardRef<
   ComponentRef<typeof HStack>,
   InsuranceDisclosureProps
 >(function InsuranceDisclosure(
-  { logoSource, logoAccessibilityLabel, label, className, style, ...props },
+  { framed = false, logoSource, logoAccessibilityLabel, label, className, style, ...props },
   ref,
 ) {
+  const useCustomLogo = logoSource != null;
+
   return (
     <HStack
       ref={ref}
       space="md"
-      className={cn(insuranceDisclosureRootVariants(), className)}
+      className={cn(insuranceDisclosureRootVariants({ framed }), className)}
       style={style}
       {...props}
       {...mergeDataAttributes(props, dataAttributes({ slot: 'insurance-disclosure' }))}
     >
-      <ForgeImage
-        source={logoSource}
-        accessibilityLabel={logoAccessibilityLabel}
-        accessible
-        resizeMode="contain"
-        className={insuranceDisclosureLogoVariants()}
-        {...mergeDataAttributes({}, dataAttributes({ slot: 'insurance-disclosure-logo' }))}
-      />
+      {useCustomLogo ? (
+        <ForgeImage
+          source={logoSource}
+          accessibilityLabel={logoAccessibilityLabel}
+          accessible={logoAccessibilityLabel != null}
+          resizeMode="contain"
+          className={insuranceDisclosureLogoVariants()}
+          {...mergeDataAttributes({}, dataAttributes({ slot: 'insurance-disclosure-logo' }))}
+        />
+      ) : (
+        <View
+          accessible
+          accessibilityRole="image"
+          accessibilityLabel="FDIC"
+          className={insuranceDisclosureLogoVariants()}
+          {...mergeDataAttributes({}, dataAttributes({ slot: 'insurance-disclosure-logo' }))}
+        >
+          <FdicLockup />
+        </View>
+      )}
       {label ? (
         <View
           className="min-w-0 shrink"
           {...mergeDataAttributes({}, dataAttributes({ slot: 'insurance-disclosure-content' }))}
         >
-          <Text size="xs" className={insuranceDisclosureTextVariants()}>
+          <Text size="sm" className={insuranceDisclosureTextVariants()}>
             {label}
           </Text>
         </View>

package/src/components/InsuranceDisclosure/styles.ts

@@ -1,12 +1,31 @@
-import { cva } from '@cdx-ui/utils';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
-export const insuranceDisclosureRootVariants = cva([
-  'w-full max-w-full items-center justify-start',
-  'border border-stroke-secondary',
-  'rounded-[var(--border-radius-default)]',
-  'p-4',
-]);
+export const insuranceDisclosureRootVariants = cva(
+  ['w-full max-w-full items-center justify-start'],
+  {
+    variants: {
+      framed: {
+        true: [
+          'bg-surface-primary',
+          'border border-stroke-secondary',
+          'rounded-[var(--border-radius-default)]',
+          'px-3 py-2',
+        ],
+        false: '',
+      },
+    },
+    defaultVariants: {
+      framed: false,
+    },
+  },
+);
+
+export type InsuranceDisclosureRootVariantProps = VariantProps<
+  typeof insuranceDisclosureRootVariants
+>;
 
-export const insuranceDisclosureLogoVariants = cva(['h-[23px] w-[37px]']);
+export const insuranceDisclosureLogoVariants = cva(['h-5 w-11 shrink-0']);
 
-export const insuranceDisclosureTextVariants = cva(['shrink text-content-secondary']);
+export const insuranceDisclosureTextVariants = cva([
+  'shrink text-content-primary italic [font-family:var(--font-body-italic)]',
+]);

package/src/components/Radio/index.tsx

@@ -74,10 +74,11 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
       useRadioContext();
 
     const checkState = isChecked ? 'checked' : 'unchecked';
-    const fieldState =
-      INDICATOR_STATES[
-        `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
-      ];
+    const fieldState = isReadOnly
+      ? (`readonly-${checkState}${isInvalid ? '-invalid' : ''}` as const)
+      : INDICATOR_STATES[
+          `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
+        ];
 
     const computedClassName = cn(radioIndicatorVariants(), className);
     const Comp = asChild ? Slot : View;
@@ -104,11 +105,18 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
         )}
       >
         <View
-          className={cn(radioInnerDotVariants())}
+          collapsable={false}
+          className={cn(
+            radioInnerDotVariants(),
+            // Native: unconditional bg so Uniwind does not have to win a data-attribute
+            // background over `bg-surface-action-strong` (web keeps compound selectors).
+            isReadOnly && isChecked && !isInvalid && 'bg-content-primary',
+          )}
           {...dataAttributes({
             checked: isChecked,
             invalid: isInvalid,
             hover: isHovered,
+            readonly: isReadOnly,
             fieldState,
           })}
         />
@@ -132,6 +140,7 @@ export interface RadioLabelProps extends TextProps {
 
 const RadioLabel = forwardRef<Text, RadioLabelProps>(
   ({ asChild, className, children, style, ...props }, ref) => {
+    const { isDisabled, isReadOnly } = useRadioContext();
     const computedClassName = cn(radioLabelVariants(), className);
     const Comp = asChild ? Slot : Text;
 
@@ -141,7 +150,14 @@ const RadioLabel = forwardRef<Text, RadioLabelProps>(
         className={computedClassName}
         style={style}
         {...props}
-        {...mergeDataAttributes(props, dataAttributes({ slot: 'radio-label' }))}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'radio-label',
+            disabled: isDisabled,
+            readonly: isReadOnly,
+          }),
+        )}
       >
         {children}
       </Comp>

package/src/components/Radio/styles.ts

@@ -1,11 +1,12 @@
 import { Platform } from 'react-native';
 import { cva } from '@cdx-ui/utils';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+import { DISABLED_CURSOR, DISABLED_OPACITY, TRANSITION_COLORS } from '../../styles/constants';
 
 export const radioRootVariants = cva([
   'flex-row items-center gap-2',
-  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  DISABLED_OPACITY,
   DISABLED_CURSOR,
+  'data-[readonly=true]:cursor-default',
   // Suppress default :focus-visible outline on the role="radio" Pressable;
   // focus ring is drawn on the indicator instead of wrapping the whole control.
   'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
@@ -16,7 +17,8 @@ export const radioIndicatorVariants = cva([
   'rounded-[var(--border-radius-round)]',
   'border-[length:var(--border-width-selected)]',
   'h-5 w-5',
-  'bg-surface-primary',
+  // Figma: indicator fill is transparent; selection reads via border + inner dot only.
+  'bg-transparent',
   'data-[checked=false]:border-content-secondary',
   'data-[checked=true]:border-stroke-action',
   'data-[invalid=true]:border-stroke-danger',
@@ -36,12 +38,32 @@ export const radioIndicatorVariants = cva([
       'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-surface-danger-strong-active',
       'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active',
       'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
+      // Focus ring — applies to read-only as well (focusable + aria-readonly).
       'web:data-[focus-visible=true]:outline-none',
       'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+      // Read-only — Figma: transparent fill + content-tertiary border (checked and unchecked).
+      // After hover/active so equal-or-higher specificity keeps the static treatment.
+      // Invalid is not a Figma readonly variant; retain danger so error remains visible.
+      'data-[readonly=true]:data-[checked=false]:border-content-tertiary',
+      'data-[readonly=true]:data-[checked=true]:border-content-tertiary',
+      'data-[readonly=true]:data-[invalid=true]:border-stroke-danger',
+      'data-[readonly=true]:data-[hover=true]:data-[checked=false]:bg-transparent',
+      'data-[readonly=true]:data-[hover=true]:data-[invalid=true]:data-[checked=false]:bg-transparent',
+      'data-[readonly=true]:data-[hover=true]:data-[checked=false]:border-content-tertiary',
+      'data-[readonly=true]:data-[hover=true]:data-[checked=true]:border-content-tertiary',
+      'data-[readonly=true]:data-[hover=true]:data-[invalid=true]:border-stroke-danger',
+      'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=false]:border-content-tertiary',
+      'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:border-content-tertiary',
+      'web:active:data-[readonly=true]:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-stroke-danger',
+      'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-stroke-danger',
     ].join(' '),
     default: [
       // Native: Uniwind only evaluates the last data-[] condition in a compound chain.
       // Use single-condition data-[field-state=...] selectors (emitted by RadioIndicator).
+      'data-[field-state=readonly-unchecked]:border-content-tertiary',
+      'data-[field-state=readonly-checked]:border-content-tertiary',
+      'data-[field-state=readonly-unchecked-invalid]:border-stroke-danger',
+      'data-[field-state=readonly-checked-invalid]:border-stroke-danger',
       'data-[field-state=active]:border-stroke-hover',
       'data-[field-state=invalid-active]:border-surface-danger-strong-active',
       'data-[field-state=checked-active]:border-surface-action-strong-active',
@@ -52,9 +74,12 @@ export const radioIndicatorVariants = cva([
 
 export const radioInnerDotVariants = cva([
   'rounded-[var(--border-radius-round)]',
+  'overflow-hidden',
   'h-2.5 w-2.5',
-  'scale-0',
-  'data-[checked=true]:scale-100',
+  // Opacity (not scale): iOS compositing of scale-0 views samples the parent ring, so the
+  // checked fill never paints and the dot looks content-tertiary instead of content-primary.
+  'opacity-0',
+  'data-[checked=true]:opacity-100',
   'bg-surface-action-strong',
   'data-[invalid=true]:bg-surface-danger-strong',
   Platform.select({
@@ -64,15 +89,30 @@ export const radioInnerDotVariants = cva([
       // Active via group-active on indicator (inner dot is not the :active target).
       'web:group-active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active',
       'web:group-active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+      // Read-only checked — Figma: content-primary dot; invalid retains danger.
+      'data-[readonly=true]:data-[checked=true]:bg-content-primary',
+      'data-[readonly=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong',
+      'web:group-active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:bg-content-primary',
+      'web:group-active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong',
     ].join(' '),
     default: [
       'data-[field-state=checked-active]:bg-surface-action-strong-active',
       'data-[field-state=checked-invalid-active]:bg-surface-danger-strong-active',
+      // `!` beats the base `bg-surface-action-strong` — Uniwind native does not cascade
+      // data-attribute backgrounds over an unconditional bg on the same View.
+      'data-[readonly=true]:bg-content-primary!',
+      'data-[field-state=readonly-checked]:bg-content-primary!',
+      'data-[field-state=readonly-checked-invalid]:bg-surface-danger-strong!',
     ].join(' '),
   }),
 ]);
 
-export const radioLabelVariants = cva(['body-md', 'text-content-primary']);
+export const radioLabelVariants = cva([
+  'body-md',
+  'text-content-primary',
+  'data-[disabled=true]:text-content-tertiary',
+  'data-[readonly=true]:cursor-default',
+]);
 
 export const radioGroupVariants = cva([], {
   variants: {

package/src/components/Select/styles.ts

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from '@cdx-ui/utils';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+import { DISABLED_CURSOR, TRANSITION_COLORS, WEB_NARROW_FIELD_TEXT } from '../../styles/constants';
 
 // ── Trigger ─────────────────────────────────────────────────
 
@@ -46,6 +46,9 @@ export const selectTriggerVariants = cva(
       size: {
         default: [
           'h-11 min-h-11 px-4 py-3 gap-4',
+          // Web <600px: trim vertical padding so 16px / leading-normal (24px line box) fits
+          // in h-11. Native and web ≥600px keep py-3 at 14px text (Figma Viewport=Wide).
+          'web:max-[600px]:py-2',
           // Native only: subtract one hairline so the wider focus border doesn't shift layout.
           'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
           'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
@@ -54,6 +57,9 @@ export const selectTriggerVariants = cva(
         ],
         small: [
           'h-8 min-h-8 px-3 py-2 gap-1.5',
+          // Web <600px: grow shell to h-9 so 16px text fits. Native and web ≥600px stay
+          // h-8 at 12px text.
+          'web:max-[600px]:h-9 web:max-[600px]:min-h-9 web:max-[600px]:py-1.5',
           'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
           'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
           'native:data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
@@ -80,8 +86,10 @@ export const selectValueVariants = cva(
   {
     variants: {
       size: {
-        default: 'text-[0.875rem]',
-        small: 'text-[0.75rem]',
+        // Web <600px: 16px matches Input/Textarea and prevents iOS Safari focus-zoom.
+        // Native and web ≥600px keep 14px / 12px (Figma Viewport=Wide).
+        default: ['text-[0.875rem]', WEB_NARROW_FIELD_TEXT],
+        small: ['text-[0.75rem]', WEB_NARROW_FIELD_TEXT],
       },
     },
     defaultVariants: {

package/src/components/Switch/styles.ts

@@ -4,40 +4,40 @@ import { cva, type VariantProps } from '@cdx-ui/utils';
 // NATIVE — Uniwind className bindings for RN Switch
 // =============================================================================
 
-export const switchThumbColorVariants = cva(['accent-white'], {
+export const switchThumbColorVariants = cva(['accent-surface-primary'], {
   variants: {
     isDisabled: {
-      true: 'accent-gray-200',
+      true: 'accent-surface-neutral-subtle',
       false: '',
     },
   },
   defaultVariants: { isDisabled: false },
 });
 
-export const switchTrackOnVariants = cva(['accent-blue-500'], {
+export const switchTrackOnVariants = cva(['accent-surface-action-strong'], {
   variants: {
     isInvalid: {
-      true: 'accent-red-500',
+      true: 'accent-surface-danger-strong',
       false: '',
     },
   },
   defaultVariants: { isInvalid: false },
 });
 
-export const switchTrackOffVariants = cva(['accent-gray-300'], {
+export const switchTrackOffVariants = cva(['accent-surface-neutral-subtle'], {
   variants: {
     isInvalid: {
-      true: 'accent-red-300',
+      true: 'accent-surface-danger-subtle',
       false: '',
     },
   },
   defaultVariants: { isInvalid: false },
 });
 
-export const switchIosBgVariants = cva(['accent-gray-300'], {
+export const switchIosBgVariants = cva(['accent-surface-neutral-subtle'], {
   variants: {
     isInvalid: {
-      true: 'accent-red-300',
+      true: 'accent-surface-danger-subtle',
       false: '',
     },
   },
@@ -53,8 +53,8 @@ export const switchTrackVariants = cva(
     'flex-row items-center rounded-full cursor-pointer',
     'transition-colors duration-200',
     'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed',
-    'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50',
-    'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50',
+    'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-stroke-focus/50',
+    'web:data-[invalid=true]:data-[focus-visible=true]:ring-stroke-danger/50',
   ],
   {
     variants: {
@@ -73,8 +73,8 @@ export const switchTrackVariants = cva(
 export const switchWebTrackColorVariants = cva([], {
   variants: {
     isChecked: {
-      true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
-      false: 'bg-gray-300 data-[hover=true]:bg-gray-400',
+      true: 'bg-surface-action-strong data-[hover=true]:bg-surface-action-strong-hover',
+      false: 'bg-surface-neutral-subtle data-[hover=true]:bg-surface-neutral-subtle-hover',
     },
     isInvalid: {
       true: '',
@@ -82,8 +82,16 @@ export const switchWebTrackColorVariants = cva([], {
     },
   },
   compoundVariants: [
-    { isChecked: true, isInvalid: true, className: 'bg-red-500 data-[hover=true]:bg-red-600' },
-    { isChecked: false, isInvalid: true, className: 'bg-red-300 data-[hover=true]:bg-red-400' },
+    {
+      isChecked: true,
+      isInvalid: true,
+      className: 'bg-surface-danger-strong data-[hover=true]:bg-surface-danger-strong-hover',
+    },
+    {
+      isChecked: false,
+      isInvalid: true,
+      className: 'bg-surface-danger-subtle data-[hover=true]:bg-surface-danger-subtle-hover',
+    },
   ],
   defaultVariants: {
     isChecked: false,
@@ -92,7 +100,7 @@ export const switchWebTrackColorVariants = cva([], {
 });
 
 export const switchThumbVariants = cva(
-  ['rounded-full bg-white shadow-sm', 'transition-transform duration-200'],
+  ['rounded-full bg-surface-primary shadow-sm', 'transition-transform duration-200'],
   {
     variants: {
       size: {

package/src/components/Textarea/styles.ts

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from '@cdx-ui/utils';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+import { DISABLED_CURSOR, TRANSITION_COLORS, WEB_NARROW_FIELD_TEXT } from '../../styles/constants';
 
 export const textareaRootVariants = cva(
   [
@@ -71,8 +71,10 @@ export const textareaFieldVariants = cva(
   {
     variants: {
       size: {
-        default: 'text-[0.875rem]',
-        small: 'text-[0.75rem]',
+        // Web <600px: 16px prevents iOS Safari focus-zoom. Native and web ≥600px keep
+        // 14px / 12px (Figma Viewport=Wide).
+        default: ['text-[0.875rem]', WEB_NARROW_FIELD_TEXT],
+        small: ['text-[0.75rem]', WEB_NARROW_FIELD_TEXT],
       },
     },
     defaultVariants: {

package/src/styles/constants.ts

@@ -8,3 +8,7 @@ export const TRANSITION_COLORS = 'transition-colors duration-150';
 export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
 export const DISABLED_CURSOR =
   'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';
+
+// Web-only iOS Safari focus-zoom guard. Figma Viewport=Narrow (<600px) uses body/lg
+// (16px / 24px); Viewport=Wide (≥600px) keeps the size variant's original px size.
+export const WEB_NARROW_FIELD_TEXT = 'web:max-[600px]:text-base web:max-[600px]:leading-normal';