@cdx-ui/components 0.0.1-beta.16 → 0.0.1-beta.161

package/src/components/Input/styles.ts

@@ -1,11 +1,12 @@
-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 inputRootVariants = cva(
   [
-    'w-full flex-row items-stretch overflow-hidden',
+    'w-full flex-row items-center overflow-hidden',
     'bg-surface-primary',
-    'border-solid border-[length:var(--border-width-default)] border-stroke-primary',
+    'border-solid border-stroke-primary',
+    'web:border-default native:border-[length:var(--border-width-default)]',
     'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
     'data-[disabled=true]:bg-surface-secondary',
@@ -14,8 +15,20 @@ export const inputRootVariants = cva(
     'data-[readonly=true]:cursor-default',
     'data-[readonly=true]:bg-surface-secondary',
     'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
-    'data-[focus=true]:border-[length:var(--border-width-focused)]',
-    'data-[focus=true]:border-stroke-action',
+    // Web: inset ring avoids a border-width change so the shell never shifts on focus and
+    // no per-size padding compensation is required. Recolor the border to match the ring so
+    // the two read as a single focus outline instead of a gray border + colored ring.
+    'web:data-[focus=true]:ring-inset',
+    'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
+    'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[focus=true]:data-[invalid=false]:border-stroke-action',
+    'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    // Native: thicker border on focus; size variants below subtract a hairline of padding
+    // so layout doesn't shift by 1px.
+    'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'native:data-[field-state=focused]:border-stroke-action',
+    'native:data-[field-state=focused-invalid]:border-stroke-danger',
     'data-[invalid=true]:border-stroke-danger',
   ],
   {
@@ -24,11 +37,15 @@ export const inputRootVariants = cva(
         outline: [],
       },
       size: {
-        // TODO: Find a cleaner approach to preventing layout shift when focus border is applied.
-        default: ['h-10 px-4 py-2 gap-2', 'data-[focus=true]:px-[15px] data-[focus=true]:py-[7px]'],
+        default: [
+          'h-11 min-h-11 px-4 py-3 gap-4',
+          '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 px-3 py-1.5 gap-1.5',
-          'data-[focus=true]:px-[11px] data-[focus=true]:py-[5px]',
+          'h-8 min-h-8 px-3 py-2 gap-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))]',
         ],
       },
     },
@@ -41,8 +58,14 @@ export const inputRootVariants = cva(
 
 export const inputFieldVariants = cva(
   [
-    'flex-1 justify-center bg-transparent p-0',
-    'font-body text-content-primary',
+    // `min-w-0` is critical on web: without it, a flex item defaults to `min-width: auto`,
+    // which is the input's intrinsic content width. When the shell ancestor uses
+    // `overflow-hidden` (for rounded corners), focusing the input via `<label htmlFor>`
+    // would make the browser auto-scroll the shell to bring the input into view — visually
+    // collapsing the left padding to zero. With `min-w-0` the field can shrink below its
+    // intrinsic width so the shell never overflows and never gets scrolled.
+    'flex-1 min-w-0 justify-center bg-transparent p-0',
+    'text-content-primary',
     'placeholder:text-content-tertiary',
     'web:outline-none',
     'tracking-normal',
@@ -60,7 +83,7 @@ export const inputFieldVariants = cva(
   },
 );
 
-export const inputSlotVariants = cva(['items-center justify-center self-center']);
+export const inputSlotVariants = cva(['items-center justify-center self-center shrink-0']);
 
 export const inputIconVariants = cva(['text-content-tertiary'], {
   variants: {

package/src/components/InsuranceDisclosure/index.tsx

@@ -0,0 +1,59 @@
+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 {
+  insuranceDisclosureLogoVariants,
+  insuranceDisclosureRootVariants,
+  insuranceDisclosureTextVariants,
+} from './styles';
+
+export interface InsuranceDisclosureProps extends Omit<HStackProps, 'children'> {
+  logoSource: string | ImageSourcePropType;
+  logoAccessibilityLabel: string;
+  label?: string;
+  className?: string;
+}
+
+export const InsuranceDisclosure = forwardRef<
+  ComponentRef<typeof HStack>,
+  InsuranceDisclosureProps
+>(function InsuranceDisclosure(
+  { logoSource, logoAccessibilityLabel, label, className, style, ...props },
+  ref,
+) {
+  return (
+    <HStack
+      ref={ref}
+      space="md"
+      className={cn(insuranceDisclosureRootVariants(), 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' }))}
+      />
+      {label ? (
+        <View
+          className="min-w-0 shrink"
+          {...mergeDataAttributes({}, dataAttributes({ slot: 'insurance-disclosure-content' }))}
+        >
+          <Text size="xs" className={insuranceDisclosureTextVariants()}>
+            {label}
+          </Text>
+        </View>
+      ) : null}
+    </HStack>
+  );
+});
+
+InsuranceDisclosure.displayName = 'InsuranceDisclosure';

package/src/components/InsuranceDisclosure/styles.ts

@@ -0,0 +1,12 @@
+import { cva } 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 insuranceDisclosureLogoVariants = cva(['h-[23px] w-[37px]']);
+
+export const insuranceDisclosureTextVariants = cva(['shrink text-content-secondary']);

package/src/components/Link/index.tsx

@@ -1,31 +1,47 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text as RNText, type TextProps, type View } from 'react-native';
-import { createLink, type ILinkProps } from '@cdx-ui/primitives';
+import { Platform, Text, View, type TextProps } from 'react-native';
+import {
+  LinkRoot as LinkRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useLinkInteractionContext,
+  type ILinkProps,
+} from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
-import { linkRootVariants, linkLabelVariants, linkIconVariants } from './styles';
+import {
+  linkIconVariants,
+  linkLabelVariants,
+  linkNativeUnderlineVariants,
+  linkRootVariants,
+} from './styles';
 
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 
-const LinkPrimitive = createLink({
-  Root: Pressable,
-});
-
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
 
 export interface LinkProps extends ILinkProps {
+  asChild?: boolean;
   className?: string;
+  children?: ReactNode;
 }
 
 const LinkRoot = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
   const rootClassName = cn(linkRootVariants(), className);
 
   return (
-    <LinkPrimitive ref={ref} className={rootClassName} style={style} {...props}>
+    <LinkRootPrimitive
+      ref={ref}
+      className={rootClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'link' }))}
+    >
       {children}
-    </LinkPrimitive>
+    </LinkRootPrimitive>
   );
 });
 
@@ -36,19 +52,34 @@ LinkRoot.displayName = 'Link';
 // =============================================================================
 
 export interface LinkLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const LinkLabel = forwardRef<RNText, LinkLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(linkLabelVariants(), className);
-
-    return (
-      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+const LinkLabel = forwardRef<Text, LinkLabelProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { visited } = useLinkInteractionContext();
+    const computedClassName = cn(linkLabelVariants({ visited }), className);
+    const Comp = asChild ? Slot : Text;
+
+    const textElement = (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'link-label' }))}
+      >
         {children}
-      </RNText>
+      </Comp>
     );
+
+    if (Platform.OS === 'web') {
+      return textElement;
+    }
+
+    return <View className={cn(linkNativeUnderlineVariants({ visited }))}>{textElement}</View>;
   },
 );
 
@@ -61,9 +92,18 @@ LinkLabel.displayName = 'Link.Label';
 export interface LinkIconProps extends Omit<IconProps, 'children'> {}
 
 const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
-  const computedClassName = cn(linkIconVariants(), className);
+  const { visited } = useLinkInteractionContext();
+  const computedClassName = cn(linkIconVariants({ visited }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'link-icon' }))}
+    />
+  );
 };
 
 LinkIcon.displayName = 'Link.Icon';

package/src/components/Link/styles.ts

@@ -1,21 +1,58 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { TRANSITION_COLORS } from '../../styles/primitives';
-
-// TODO: Handle visited state
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
 
 export const linkRootVariants = cva([
   'flex-row items-center gap-1',
-  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  Platform.select({ web: 'web:inline-flex web:self-start', default: '' }),
   TRANSITION_COLORS,
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  'web:data-[focus-visible=true]:rounded-[2px]',
   'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+  // Web: set color on the anchor so Label/Icon can text-inherit (incl. browser :visited).
+  'web:text-content-link',
+  'web:visited:text-content-link-visited',
+  'web:hover:text-content-primary',
+  'web:visited:hover:text-content-primary',
+  'data-[visited=true]:text-content-link-visited',
+  'web:data-[hover=true]:text-content-primary',
 ]);
 
-export const linkLabelVariants = cva([
-  'text-content-link',
-  'body-md',
-  'underline underline-offset-4',
-]);
+export const linkLabelVariants = cva(
+  [
+    'body-md',
+    Platform.select({ web: 'underline underline-offset-4', default: '' }),
+    Platform.select({ web: 'text-inherit', default: 'text-content-link' }),
+  ],
+  {
+    variants: {
+      visited: {
+        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+        false: '',
+      },
+    },
+    defaultVariants: { visited: false },
+  },
+);
+
+export const linkNativeUnderlineVariants = cva(['border-b border-content-link pb-0.5'], {
+  variants: {
+    visited: {
+      true: 'border-content-link-visited',
+      false: '',
+    },
+  },
+  defaultVariants: { visited: false },
+});
 
-export const linkIconVariants = cva(['text-content-link', 'size-4']);
+export const linkIconVariants = cva(['size-4', 'text-content-link'], {
+  variants: {
+    visited: {
+      true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+      false: '',
+    },
+  },
+  defaultVariants: { visited: false },
+});
 
 export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;