@cdx-ui/components 0.0.1-beta.99 → 0.1.1

package/src/components/IconButton/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { View, type PressableProps } from 'react-native';
 import {
   ButtonRoot,
@@ -16,7 +16,23 @@ import {
   iconButtonRootVariants,
 } from './styles';
 
-export interface IconButtonProps extends PressableProps, IButtonProps, IconButtonVariantProps {
+export type IconButtonVariant = 'solid' | 'subtle' | 'ghost';
+
+/** @deprecated Use {@link IconButtonVariant} (`'subtle'`) instead. */
+export type IconButtonVariantTint = 'tint';
+
+let hasWarnedIconButtonTintVariant = false;
+
+export interface IconButtonProps
+  extends PressableProps, IButtonProps, Omit<IconButtonVariantProps, 'variant'> {
+  /**
+   * Visual style variant.
+   * @default 'solid'
+   */
+  variant?:
+    | IconButtonVariant
+    /** @deprecated Use `'subtle'` instead. */
+    | 'tint';
   className?: string;
   /** Forge icon component to render (icon-only control). */
   as: ForgeIcon;
@@ -27,7 +43,7 @@ export interface IconButtonProps extends PressableProps, IButtonProps, IconButto
 const IconButtonRoot = forwardRef<View, IconButtonProps>(
   (
     {
-      variant = 'solid',
+      variant: variantProp = 'solid',
       color = 'neutral',
       size = 'default',
       className,
@@ -39,6 +55,17 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
     },
     ref,
   ) => {
+    useEffect(() => {
+      if (__DEV__ && variantProp === 'tint' && !hasWarnedIconButtonTintVariant) {
+        hasWarnedIconButtonTintVariant = true;
+        console.warn(
+          '[IconButton] The `tint` variant is deprecated and will be removed in a future major release. Use `subtle` instead.',
+        );
+      }
+    }, [variantProp]);
+
+    const variant = variantProp === 'tint' ? 'subtle' : variantProp;
+
     const rootClassName = cn(iconButtonRootVariants({ variant, color, size }), className);
 
     const glyphClassName = cn(
@@ -54,7 +81,11 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
         className={rootClassName}
         style={style}
         {...props}
-        {...mergeDataAttributes(props, dataAttributes({ slot: 'icon-button' }))}
+        {...mergeDataAttributes(
+          dataAttributes({ slot: 'icon-button' }),
+          // Consumer/parent compound slots (e.g. carousel-prev-button) win over the default.
+          props,
+        )}
       >
         <Icon as={IconComponent} className={glyphClassName} />
       </ButtonRoot>

package/src/components/IconButton/styles.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 export const iconButtonRootVariants = cva(
   [
@@ -16,7 +16,7 @@ export const iconButtonRootVariants = cva(
     variants: {
       variant: {
         solid: [],
-        tint: [],
+        subtle: [],
         ghost: ['bg-transparent'],
       },
       color: {
@@ -65,37 +65,37 @@ export const iconButtonRootVariants = cva(
         ],
       },
 
-      // ── tint × color ─────────────────────────────────────────────────
+      // ── subtle × color ─────────────────────────────────────────────────
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'neutral',
         className: [
-          'bg-surface-neutral-tint',
+          'bg-surface-neutral-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-neutral-tint-active',
-            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+            default: 'data-[active=true]:bg-surface-neutral-subtle-active',
+            web: 'data-[hover=true]:bg-surface-neutral-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-subtle-active',
           }),
         ],
       },
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'action',
         className: [
-          'bg-surface-action-tint',
+          'bg-surface-action-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-action-tint-active',
-            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
           }),
         ],
       },
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'danger',
         className: [
-          'bg-surface-danger-tint',
+          'bg-surface-danger-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-danger-tint-active',
-            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+            default: 'data-[active=true]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
           }),
         ],
       },
@@ -116,8 +116,8 @@ export const iconButtonRootVariants = cva(
         color: 'action',
         className: [
           Platform.select({
-            default: 'data-[active=true]:bg-surface-action-tint-active',
-            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
           }),
         ],
       },
@@ -126,8 +126,8 @@ export const iconButtonRootVariants = cva(
         color: 'danger',
         className: [
           Platform.select({
-            default: 'data-[active=true]:bg-surface-danger-tint-active',
-            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+            default: 'data-[active=true]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
           }),
         ],
       },
@@ -156,7 +156,7 @@ export const iconButtonIconColorVariants = cva([], {
   variants: {
     variant: {
       solid: [],
-      tint: [],
+      subtle: [],
       ghost: [],
     },
     color: {
@@ -169,9 +169,9 @@ export const iconButtonIconColorVariants = cva([], {
     { variant: 'solid', color: 'neutral', className: 'text-content-primary' },
     { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
     { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
-    { variant: 'tint', color: 'neutral', className: 'text-content-primary' },
-    { variant: 'tint', color: 'action', className: 'text-content-action-on-subtle' },
-    { variant: 'tint', color: 'danger', className: 'text-content-danger-on-subtle' },
+    { variant: 'subtle', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'subtle', color: 'action', className: 'text-content-action-on-subtle' },
+    { variant: 'subtle', color: 'danger', className: 'text-content-danger-on-subtle' },
     { variant: 'ghost', color: 'neutral', className: 'text-content-primary' },
     { variant: 'ghost', color: 'action', className: 'text-content-action' },
     { variant: 'ghost', color: 'danger', className: 'text-content-danger' },

package/src/components/Input/index.tsx

@@ -29,10 +29,23 @@ const useInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
 // INPUT (ROOT)
 // =============================================================================
 
-export interface InputProps extends ViewProps, IInputFieldProps, InputVariantProps {
+export interface InputProps extends ViewProps, IInputFieldProps {
+  /** Render the consumer's child element in place of the default `View` host. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the shell's own styles. */
   className?: string;
+  /** Shell content — typically `Input.Field` plus optional `Input.Slot`/`Input.Icon`. */
   children?: ReactNode;
+  /**
+   * Visual style variant.
+   * @default 'outline'
+   */
+  variant?: 'outline';
+  /**
+   * Height and padding scale.
+   * @default 'default'
+   */
+  size?: 'default' | 'small';
 }
 
 const InputRoot = forwardRef<View, InputProps>(
@@ -69,7 +82,9 @@ InputRoot.displayName = 'Input';
 // =============================================================================
 
 export type InputFieldProps = IInputProps & {
+  /** Additional Uniwind/Tailwind classes, merged after the field's own styles. */
   className?: string;
+  /** Uniwind class applied to the placeholder text color (native `placeholderTextColor`). */
   placeholderTextColorClassName?: string;
 };
 
@@ -103,8 +118,11 @@ InputField.displayName = 'Input.Field';
 // =============================================================================
 
 export interface InputSlotProps extends ViewProps, IInputSlotProps {
+  /** Render the consumer's child element in place of the default `View` host. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the slot's own styles. */
   className?: string;
+  /** Adornment content (icons, buttons, or adornment text). */
   children?: ReactNode;
 }
 
@@ -134,6 +152,7 @@ InputSlot.displayName = 'Input.Slot';
 // =============================================================================
 
 export interface InputIconProps extends Omit<IconProps, 'children' | 'as'> {
+  /** Render the consumer's child element in place of the default icon host. */
   asChild?: boolean;
   /**
    * Forge icon component to render. Required unless `asChild` is set, in which

package/src/components/Input/styles.ts

@@ -1,5 +1,5 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS, WEB_NARROW_FIELD_TEXT } from '../../styles/constants';
 
 export const inputRootVariants = cva(
   [
@@ -39,11 +39,17 @@ export const inputRootVariants = 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:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
           'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
         ],
         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))]',
         ],
@@ -73,8 +79,10 @@ export const inputFieldVariants = 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/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

@@ -0,0 +1,99 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View, type ImageSourcePropType } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+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';
+
+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(
+  { framed = false, logoSource, logoAccessibilityLabel, label, className, style, ...props },
+  ref,
+) {
+  const useCustomLogo = logoSource != null;
+
+  return (
+    <HStack
+      ref={ref}
+      space="md"
+      className={cn(insuranceDisclosureRootVariants({ framed }), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'insurance-disclosure' }))}
+    >
+      {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="sm" className={insuranceDisclosureTextVariants()}>
+            {label}
+          </Text>
+        </View>
+      ) : null}
+    </HStack>
+  );
+});
+
+InsuranceDisclosure.displayName = 'InsuranceDisclosure';

package/src/components/InsuranceDisclosure/styles.ts

@@ -0,0 +1,31 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+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-5 w-11 shrink-0']);
+
+export const insuranceDisclosureTextVariants = cva([
+  'shrink text-content-primary italic [font-family:var(--font-body-italic)]',
+]);

package/src/components/Link/index.tsx

@@ -24,6 +24,7 @@ export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitiv
 // =============================================================================
 
 export interface LinkProps extends ILinkProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }

package/src/components/Link/styles.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
 
 export const linkRootVariants = cva([
   'flex-row items-center gap-1',
@@ -45,17 +45,14 @@ export const linkNativeUnderlineVariants = cva(['border-b border-content-link pb
   defaultVariants: { visited: false },
 });
 
-export const linkIconVariants = cva(
-  ['size-4', Platform.select({ web: 'text-current', default: 'text-content-link' })],
-  {
-    variants: {
-      visited: {
-        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
-        false: '',
-      },
+export const linkIconVariants = cva(['size-4', 'text-content-link'], {
+  variants: {
+    visited: {
+      true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+      false: '',
     },
-    defaultVariants: { visited: false },
   },
-);
+  defaultVariants: { visited: false },
+});
 
 export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;

package/src/components/ListItem/styles.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
 
 // ── Root (row): density, separator, interactive feedback ───────────────────
 //