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

package/src/components/Breadcrumbs/index.tsx

@@ -0,0 +1,311 @@
+import {
+  Children,
+  Fragment,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useMemo,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { Platform, Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  BreadcrumbsRoot as BreadcrumbsRootPrimitive,
+  LinkRoot as LinkRootPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  useBreadcrumbsContext,
+  type IBreadcrumbsProps,
+  type ILinkProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  breadcrumbItemVariants,
+  breadcrumbDisabledCursor,
+  breadcrumbItemRootVariants,
+  breadcrumbRootVariants,
+  breadcrumbSeparatorVariants,
+} from './styles';
+
+export type { BreadcrumbColor } from '@cdx-ui/primitives';
+export type { BreadcrumbVariantProps } from './styles';
+
+type BreadcrumbItemState = 'current' | 'ancestor' | 'disabled';
+
+export interface BreadcrumbsProps extends IBreadcrumbsProps {
+  className?: string;
+  /**
+   * Separator rendered between breadcrumb items.
+   * @default `/`
+   */
+  separator?: ReactNode;
+  children?: ReactNode;
+}
+
+interface BreadcrumbItemInternalProps {
+  isLast?: boolean;
+}
+
+export interface BreadcrumbsItemProps extends Omit<ILinkProps, 'children' | 'disabled'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+function isBreadcrumbsItemElement(
+  child: unknown,
+): child is ReactElement<BreadcrumbsItemProps & BreadcrumbItemInternalProps> {
+  if (!isValidElement(child)) {
+    return false;
+  }
+  const type = child.type as { displayName?: string };
+  return type.displayName === 'Breadcrumbs.Item';
+}
+
+function isTextOnlyChild(children: ReactNode): children is string | number {
+  return typeof children === 'string' || typeof children === 'number';
+}
+
+function BreadcrumbItemContent({
+  children,
+  className,
+  state,
+}: {
+  children: ReactNode;
+  className: string;
+  state: BreadcrumbItemState;
+}) {
+  if (isTextOnlyChild(children)) {
+    return (
+      <Text className={className} {...dataAttributes({ state })}>
+        {children}
+      </Text>
+    );
+  }
+
+  return (
+    <View className={cn('flex-row items-center gap-1', className)} {...dataAttributes({ state })}>
+      {children}
+    </View>
+  );
+}
+
+function BreadcrumbsSeparator({ separator }: { separator: ReactNode }) {
+  const { isDisabled } = useBreadcrumbsContext();
+  const disabledClassName = isDisabled ? breadcrumbDisabledCursor : undefined;
+  const slotProps = mergeDataAttributes({}, dataAttributes({ slot: 'breadcrumbs-separator' }));
+  const a11yProps = {
+    accessibilityElementsHidden: true,
+    importantForAccessibility: 'no-hide-descendants' as const,
+    'aria-hidden': true,
+  };
+
+  if (isTextOnlyChild(separator)) {
+    return (
+      <Text
+        className={cn(breadcrumbSeparatorVariants(), disabledClassName)}
+        {...a11yProps}
+        {...slotProps}
+      >
+        {separator}
+      </Text>
+    );
+  }
+
+  return (
+    <View
+      className={cn(
+        breadcrumbSeparatorVariants(),
+        'items-center justify-center px-1',
+        disabledClassName,
+      )}
+      {...a11yProps}
+      {...slotProps}
+    >
+      {separator}
+    </View>
+  );
+}
+
+const BreadcrumbsRoot = forwardRef<View, BreadcrumbsProps>(
+  (
+    {
+      className,
+      style,
+      children,
+      separator = '/',
+      isDisabled = false,
+      isUnderlined = false,
+      color = 'neutral',
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const items = useMemo(
+      () => Children.toArray(children).filter(isBreadcrumbsItemElement),
+      [children],
+    );
+
+    const computedClassName = cn(breadcrumbRootVariants(), className);
+
+    return (
+      <BreadcrumbsRootPrimitive
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        isDisabled={isDisabled}
+        isUnderlined={isUnderlined}
+        color={color}
+        accessibilityLabel={accessibilityLabel}
+        {...props}
+      >
+        {items.map((child, index) => {
+          const isLast = index === items.length - 1;
+          const item = cloneElement(child, { isLast });
+
+          if (isLast) {
+            return (
+              <Fragment key={child.key ?? `breadcrumb-item-${String(index)}`}>{item}</Fragment>
+            );
+          }
+
+          return (
+            <Fragment key={child.key ?? `breadcrumb-item-${String(index)}`}>
+              {item}
+              <BreadcrumbsSeparator separator={separator} />
+            </Fragment>
+          );
+        })}
+      </BreadcrumbsRootPrimitive>
+    );
+  },
+);
+
+BreadcrumbsRoot.displayName = 'Breadcrumbs';
+
+function resolveStaticStyle(style: ILinkProps['style']): ViewProps['style'] {
+  return typeof style === 'function' ? undefined : style;
+}
+
+function getItemState(isLast: boolean, isDisabled: boolean): BreadcrumbItemState {
+  if (isLast) {
+    return 'current';
+  }
+  if (isDisabled) {
+    return 'disabled';
+  }
+  return 'ancestor';
+}
+
+const BreadcrumbsItem = forwardRef<View, BreadcrumbsItemProps & BreadcrumbItemInternalProps>(
+  (
+    { className, style, children, href, onPress, action, webProps, isLast = false, ...props },
+    ref,
+  ) => {
+    const { isDisabled, isUnderlined, color } = useBreadcrumbsContext();
+    const state = getItemState(isLast, isDisabled);
+    const isInteractive = !isDisabled && !isLast && !!href;
+
+    const labelClassName = cn(
+      breadcrumbItemVariants({
+        isUnderlined,
+        color,
+      }),
+      isDisabled ? breadcrumbDisabledCursor : undefined,
+      className,
+    );
+
+    const currentPageProps =
+      Platform.OS === 'web' && isLast ? ({ 'aria-current': 'page' as const } as const) : {};
+    const nativeCurrentPageProps =
+      Platform.OS !== 'web' && isLast
+        ? ({
+            accessibilityState: {
+              ...props.accessibilityState,
+              selected: true,
+            },
+          } as const)
+        : {};
+
+    if (isInteractive) {
+      return (
+        <LinkRootPrimitive
+          ref={ref}
+          href={href}
+          onPress={onPress}
+          action={action}
+          webProps={webProps}
+          className={breadcrumbItemRootVariants()}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'breadcrumbs-item', state }))}
+        >
+          <BreadcrumbItemContent className={labelClassName} state={state}>
+            {children}
+          </BreadcrumbItemContent>
+        </LinkRootPrimitive>
+      );
+    }
+
+    const staticStyle = resolveStaticStyle(style);
+
+    if (isTextOnlyChild(children)) {
+      return (
+        <Text
+          ref={ref as never}
+          className={cn(breadcrumbItemRootVariants(), labelClassName)}
+          style={staticStyle}
+          accessibilityRole={isLast ? 'text' : undefined}
+          {...(props as TextProps)}
+          {...currentPageProps}
+          {...nativeCurrentPageProps}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              slot: 'breadcrumbs-item',
+              state,
+            }),
+          )}
+        >
+          {children}
+        </Text>
+      );
+    }
+
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          breadcrumbItemRootVariants(),
+          'flex-row items-center',
+          isDisabled && breadcrumbDisabledCursor,
+        )}
+        style={staticStyle}
+        {...(props as ViewProps)}
+        {...currentPageProps}
+        {...nativeCurrentPageProps}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'breadcrumbs-item',
+            state,
+          }),
+        )}
+      >
+        <BreadcrumbItemContent className={labelClassName} state={state}>
+          {children}
+        </BreadcrumbItemContent>
+      </View>
+    );
+  },
+);
+
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+
+type BreadcrumbsCompoundComponent = typeof BreadcrumbsRoot & {
+  Item: typeof BreadcrumbsItem;
+};
+
+export const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+  Item: BreadcrumbsItem,
+}) as BreadcrumbsCompoundComponent;

package/src/components/Breadcrumbs/styles.ts

@@ -0,0 +1,63 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import type { BreadcrumbColor } from '@cdx-ui/primitives';
+import { TRANSITION_COLORS } from '../../styles/constants';
+
+export const breadcrumbRootVariants = cva([
+  'flex-row flex-wrap items-center',
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  'web:data-[disabled=true]:cursor-not-allowed',
+]);
+
+export const breadcrumbDisabledCursor = 'web:cursor-not-allowed';
+
+export const breadcrumbSeparatorVariants = cva(['body-md text-content-tertiary select-none px-1']);
+
+export const breadcrumbItemRootVariants = cva([
+  'self-start',
+  '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',
+]);
+
+const breadcrumbColorVariants = {
+  neutral: '',
+  action:
+    'data-[state=ancestor]:text-content-action data-[state=ancestor]:border-content-action web:data-[state=ancestor]:hover:text-content-primary',
+  danger:
+    'data-[state=ancestor]:text-content-danger data-[state=ancestor]:border-content-danger web:data-[state=ancestor]:hover:text-content-primary',
+  warning:
+    'data-[state=ancestor]:text-content-warning data-[state=ancestor]:border-content-warning web:data-[state=ancestor]:hover:text-content-primary',
+  success:
+    'data-[state=ancestor]:text-content-success data-[state=ancestor]:border-content-success web:data-[state=ancestor]:hover:text-content-primary',
+  info: 'data-[state=ancestor]:text-content-info data-[state=ancestor]:border-content-info web:data-[state=ancestor]:hover:text-content-primary',
+} satisfies Record<BreadcrumbColor, string>;
+
+export const breadcrumbItemVariants = cva(
+  [
+    'body-md',
+    TRANSITION_COLORS,
+    'data-[state=current]:text-content-primary',
+    'data-[state=ancestor]:text-content-secondary',
+    'data-[state=disabled]:text-content-tertiary',
+  ],
+  {
+    variants: {
+      isUnderlined: {
+        true: Platform.select({
+          web: 'data-[state=ancestor]:underline data-[state=ancestor]:underline-offset-4',
+          default:
+            'data-[state=ancestor]:border-b data-[state=ancestor]:border-content-secondary data-[state=ancestor]:pb-0.5',
+        }),
+        false: '',
+      },
+      color: breadcrumbColorVariants,
+    },
+    defaultVariants: {
+      isUnderlined: false,
+      color: 'neutral',
+    },
+  },
+);
+
+export type BreadcrumbVariantProps = VariantProps<typeof breadcrumbItemVariants>;

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useMemo, type ReactElement, type ReactNode } from 'react';
+import React, { forwardRef, useMemo, type ReactElement, type ReactNode } from 'react';
 import {
   ActivityIndicator,
   Text,
@@ -45,31 +45,42 @@ const useButtonStyleContext = () => useStyleContext(SCOPE) as ButtonVariantProps
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost';
 
-/** @deprecated Use {@link ButtonVariant} (`'solid'`) instead. */
-export type ButtonVariantStrong = 'strong';
-
-let hasWarnedStrongButtonVariant = false;
-
-export interface ButtonProps
-  extends PressableProps, IButtonProps, Omit<ButtonVariantProps, 'variant'> {
+export interface ButtonProps extends PressableProps, IButtonProps {
+  /**
+   * Render the consumer's child element in place of the default `Pressable` host —
+   * merges Button's props onto the child instead of wrapping it (e.g. `<Button asChild><Link /></Button>`).
+   */
+  asChild?: boolean;
   /**
    * Visual style variant.
    * @default 'solid'
    */
-  variant?:
-    | ButtonVariant
-    /**
-     * @deprecated Use `'solid'` instead.
-     */
-    | 'strong';
+  variant?: ButtonVariant;
+  /**
+   * Color theme applied to the button surface and content.
+   * @default 'action'
+   */
+  color?: 'action' | 'danger' | 'warning' | 'success' | 'info';
+  /**
+   * Height and horizontal padding scale.
+   * @default 'default'
+   */
+  size?: 'default' | 'small';
+  /**
+   * Stretch the button to fill the width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the button's own styles. */
   className?: string;
+  /** Button content — typically `Button.Label`, `Button.Icon`, and/or `Button.Spinner`. */
   children?: ReactNode;
 }
 
 const ButtonRoot = forwardRef<View, ButtonProps>(
   (
     {
-      variant: variantProp = 'solid',
+      variant = 'solid',
       color = 'action',
       size = 'default',
       fullWidth = false,
@@ -80,17 +91,6 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
     },
     ref,
   ) => {
-    // TODO: Remove this once the `strong` variant is removed.
-    useEffect(() => {
-      if (__DEV__ && variantProp === 'strong' && !hasWarnedStrongButtonVariant) {
-        hasWarnedStrongButtonVariant = true;
-        console.warn(
-          '[Button] The `strong` variant is deprecated and will be removed in a future major release. Use `solid` instead.',
-        );
-      }
-    }, [variantProp]);
-
-    const variant = variantProp === 'strong' ? 'solid' : variantProp;
     const computedClassName = cn(
       buttonRootVariants({ variant, color, size, fullWidth }),
       className,
@@ -125,8 +125,11 @@ ButtonRoot.displayName = 'Button';
 // =============================================================================
 
 export interface ButtonLabelProps extends TextProps {
+  /** Render the consumer's child element in place of the default `Text` host. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the label's own styles. */
   className?: string;
+  /** Label content (or a custom element when `asChild` is set). */
   children?: ReactNode;
 }
 
@@ -158,13 +161,24 @@ ButtonLabel.displayName = 'Button.Label';
 
 // TODO: Use ButtonGroupVariantProps
 export interface ButtonGroupProps extends Omit<ViewProps, 'children'> {
+  /** Render the consumer's child element in place of the default `View` host. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the group's own styles. */
   className?: string;
+  /** The buttons to group together. */
   children: ReactElement | ReactElement[];
+  /**
+   * Layout direction of the grouped buttons.
+   * @default 'row'
+   */
   flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  /** Disable every button in the group. */
   isDisabled?: boolean;
+  /** Remove the gap between buttons and merge their adjoining borders. */
   isAttached?: boolean;
+  /** Reverse the visual order of the buttons. */
   reversed?: boolean;
+  /** Alias of `reversed`. */
   isReversed?: boolean;
 }
 
@@ -264,6 +278,7 @@ ButtonGroup.displayName = 'Button.Group';
 // =============================================================================
 
 export interface ButtonIconProps 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
@@ -323,8 +338,11 @@ ButtonIcon.displayName = 'Button.Icon';
 // =============================================================================
 
 export interface ButtonSpinnerProps extends ActivityIndicatorProps {
+  /** Render the consumer's child element in place of the default `ActivityIndicator` host. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes for the spinner container. */
   className?: string;
+  /** Uniwind `accent-*` color class override for the spinner. */
   colorClassName?: string;
   /**
    * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.

package/src/components/Button/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';
 
 // TODO: Validate that `dark:` syntax works with Uniwind `ScopedTheme`
 
@@ -67,8 +67,8 @@ export const buttonRootVariants = cva(
         className: [
           'bg-surface-warning-strong',
           Platform.select({
-            default: 'data-[active=true]:bg-amber-600',
-            web: 'data-[hover=true]:bg-amber-500 data-[active=true]:data-[hover=true]:bg-amber-600',
+            default: 'data-[active=true]:bg-surface-warning-strong-active',
+            web: 'data-[hover=true]:bg-surface-warning-strong-hover data-[active=true]:data-[hover=true]:bg-surface-warning-strong-active',
           }),
         ],
       },
@@ -78,8 +78,8 @@ export const buttonRootVariants = cva(
         className: [
           'bg-surface-success-strong',
           Platform.select({
-            default: 'data-[active=true]:bg-green-800',
-            web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800',
+            default: 'data-[active=true]:bg-surface-success-strong-active',
+            web: 'data-[hover=true]:bg-surface-success-strong-hover data-[active=true]:data-[hover=true]:bg-surface-success-strong-active',
           }),
         ],
       },
@@ -89,8 +89,8 @@ export const buttonRootVariants = cva(
         className: [
           'bg-surface-info-strong',
           Platform.select({
-            default: 'data-[active=true]:bg-sky-700',
-            web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700',
+            default: 'data-[active=true]:bg-surface-info-strong-active',
+            web: 'data-[hover=true]:bg-surface-info-strong-hover data-[active=true]:data-[hover=true]:bg-surface-info-strong-active',
           }),
         ],
       },
@@ -102,8 +102,8 @@ export const buttonRootVariants = cva(
         className: [
           'border-stroke-action',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-action-subtle-active',
-            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
+            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',
           }),
         ],
       },
@@ -113,8 +113,8 @@ export const buttonRootVariants = cva(
         className: [
           'border-stroke-danger',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-danger-subtle-active',
-            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
+            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',
           }),
         ],
       },
@@ -124,8 +124,8 @@ export const buttonRootVariants = cva(
         className: [
           'border-stroke-warning',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-warning-subtle',
-            web: 'data-[hover=true]:bg-surface-warning-tint data-[active=true]:data-[hover=true]:bg-surface-warning-subtle',
+            default: 'data-[active=true]:bg-surface-warning-tint-active',
+            web: 'data-[hover=true]:bg-surface-warning-tint-hover data-[active=true]:data-[hover=true]:bg-surface-warning-tint-active',
           }),
         ],
       },
@@ -135,8 +135,8 @@ export const buttonRootVariants = cva(
         className: [
           'border-stroke-success',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-success-subtle',
-            web: 'data-[hover=true]:bg-surface-success-tint data-[active=true]:data-[hover=true]:bg-surface-success-subtle',
+            default: 'data-[active=true]:bg-surface-success-tint-active',
+            web: 'data-[hover=true]:bg-surface-success-tint-hover data-[active=true]:data-[hover=true]:bg-surface-success-tint-active',
           }),
         ],
       },
@@ -146,8 +146,8 @@ export const buttonRootVariants = cva(
         className: [
           'border-stroke-info',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-info-subtle',
-            web: 'data-[hover=true]:bg-surface-info-tint data-[active=true]:data-[hover=true]:bg-surface-info-subtle',
+            default: 'data-[active=true]:bg-surface-info-tint-active',
+            web: 'data-[hover=true]:bg-surface-info-tint-hover data-[active=true]:data-[hover=true]:bg-surface-info-tint-active',
           }),
         ],
       },
@@ -158,8 +158,8 @@ export const buttonRootVariants = cva(
         color: 'action',
         className: [
           Platform.select({
-            default: 'data-[active=true]:bg-surface-action-subtle-active',
-            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
+            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',
           }),
         ],
       },
@@ -168,8 +168,8 @@ export const buttonRootVariants = cva(
         color: 'danger',
         className: [
           Platform.select({
-            default: 'data-[active=true]:bg-surface-danger-subtle-active',
-            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
+            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',
           }),
         ],
       },
@@ -178,8 +178,8 @@ export const buttonRootVariants = cva(
         color: 'warning',
         className: [
           Platform.select({
-            default: 'data-[active=true]:bg-surface-warning-subtle',
-            web: 'data-[hover=true]:bg-surface-warning-tint data-[active=true]:data-[hover=true]:bg-surface-warning-subtle',
+            default: 'data-[active=true]:bg-surface-warning-tint-active',
+            web: 'data-[hover=true]:bg-surface-warning-tint-hover data-[active=true]:data-[hover=true]:bg-surface-warning-tint-active',
           }),
         ],
       },
@@ -188,8 +188,8 @@ export const buttonRootVariants = cva(
         color: 'success',
         className: [
           Platform.select({
-            default: 'data-[active=true]:bg-surface-success-subtle',
-            web: 'data-[hover=true]:bg-surface-success-tint data-[active=true]:data-[hover=true]:bg-surface-success-subtle',
+            default: 'data-[active=true]:bg-surface-success-tint-active',
+            web: 'data-[hover=true]:bg-surface-success-tint-hover data-[active=true]:data-[hover=true]:bg-surface-success-tint-active',
           }),
         ],
       },
@@ -198,8 +198,8 @@ export const buttonRootVariants = cva(
         color: 'info',
         className: [
           Platform.select({
-            default: 'data-[active=true]:bg-surface-info-subtle',
-            web: 'data-[hover=true]:bg-surface-info-tint data-[active=true]:data-[hover=true]:bg-surface-info-subtle',
+            default: 'data-[active=true]:bg-surface-info-tint-active',
+            web: 'data-[hover=true]:bg-surface-info-tint-hover data-[active=true]:data-[hover=true]:bg-surface-info-tint-active',
           }),
         ],
       },

package/src/components/CLAUDE.md

@@ -156,8 +156,8 @@ Each `styles.ts` exports CVA variant functions and their derived `VariantProps`
 
 ```ts
 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 componentRootVariants = cva(
   [
@@ -185,7 +185,7 @@ export type ComponentVariantProps = VariantProps<typeof componentRootVariants>;
 - **`data-[state]` selectors** — use `data-[disabled=true]:`, `data-[hover=true]:`, `data-[active=true]:`, `data-[focus-visible=true]:` for interaction states. Primitives emit these data attributes (Standard 1). **Interaction state is never a CVA variant input** (Standard 5). On native, prefer single-condition `data-[field-state=...]` selectors backed by a primitive-derived compound-state attribute over compound `data-[]:data-[]` chains (which only match the last condition); web may keep compound chains. See `Input/styles.ts` / `Select/styles.ts`.
 - **`data-[icon=inline-start|inline-end]` selectors** for icon/spinner position spacing (Standard 6) — pair with logical-property utilities (`me-*`/`ms-*`) so RTL flips automatically.
 - **`Platform.select()`** for platform-specific classes — web gets `data-[hover=true]` styles (hover exists on web); native responds only to `data-[active=true]` (press). Always set `default` (native) and `web` keys.
-- **Shared style primitives** — import `DISABLED_CURSOR`, `TRANSITION_COLORS`, etc. from `../../styles/primitives` for cross-component consistency.
+- **Shared style primitives** — import `DISABLED_CURSOR`, `TRANSITION_COLORS`, etc. from `../../styles/constants` for cross-component consistency.
 - **`web:` prefix** for web-only utilities — e.g., `web:outline-none`, `web:focus-visible:ring-2`.
 - **`compoundVariants`** for variant × variant combinations where simple variant merging is insufficient.
 - **`defaultVariants`** must match the destructured defaults in the component's `index.tsx`.