@cdx-ui/components 0.0.1-beta.7 → 0.0.1-beta.70

package/src/components/Checkbox/styles.ts

@@ -1,92 +1,92 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_STRONG,
-  COLOR_TEXT_PRIMARY,
-  DISABLED_CURSOR,
-  DISABLED_OPACITY,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { cva } from 'class-variance-authority';
+import { DISABLED_CURSOR, DISABLED_OPACITY, TRANSITION_COLORS } from '../../styles/primitives';
 
-export const checkboxRootVariants = cva(
-  ['flex-row items-center', DISABLED_OPACITY, DISABLED_CURSOR],
-  {
-    variants: {
-      size: {
-        small: 'gap-2',
-        default: 'gap-2.5',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
+// TODO: Handle text wrapping in the label
 
-export const checkboxIndicatorVariants = cva(
-  [
-    'items-center justify-center',
-    'rounded',
-    'border-2',
-    COLOR_BORDER_STRONG,
-    COLOR_BG_PRIMARY,
-    'data-[checked=true]:bg-slate-900 data-[checked=true]:border-slate-900',
-    'data-[indeterminate=true]:bg-slate-900 data-[indeterminate=true]:border-slate-900',
-    'data-[disabled=true]:opacity-50',
-    'data-[invalid=true]:border-red-500',
-    'data-[checked=true]:data-[invalid=true]:bg-red-500 data-[checked=true]:data-[invalid=true]:border-red-500',
-    'data-[indeterminate=true]:data-[invalid=true]:bg-red-500 data-[indeterminate=true]:data-[invalid=true]:border-red-500',
-    Platform.select({
-      web: [
-        TRANSITION_COLORS,
-        'data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:border-slate-400 data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:bg-slate-50',
-        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
-        'data-[invalid=true]:data-[hover=true]:border-red-400',
-        'data-[invalid=true]:data-[focus-visible=true]:ring-red-400/50',
-      ].join(' '),
-      default: '',
-    }),
-  ],
-  {
-    variants: {
-      size: {
-        small: 'h-4 w-4',
-        default: 'h-5 w-5',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
+export const checkboxRootVariants = cva([
+  'flex-row items-center gap-2.5',
+  DISABLED_OPACITY,
+  DISABLED_CURSOR,
+  // Suppress stray outline on the Pressable/label wrapper; focus ring is drawn on Checkbox.Indicator (Radio pattern).
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+]);
 
-export const checkboxIconVariants = cva(['text-white'], {
-  variants: {
-    size: {
-      small: 'h-3 w-3',
-      default: 'h-3.5 w-3.5',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const checkboxIndicatorVariants = cva([
+  'items-center justify-center',
+  'h-5 w-5',
+  'rounded',
+  'border-2 border-solid',
+  'data-[disabled=true]:opacity-50',
+  // Background — layered by specificity. checked=false acts as an explicit reset so the base bg
+  // reasserts when transitioning from checked/indeterminate on native (where absent attributes
+  // break data-[attr=false] selectors).
+  // IMPORTANT: On native (Uniwind), only the LAST data-[] condition in a compound chain is
+  // effectively evaluated. Place the most discriminating condition last to avoid false matches.
+  'data-[checked=false]:bg-surface-primary',
+  'data-[checked=true]:bg-surface-action-strong',
+  'data-[indeterminate=true]:bg-surface-action-strong',
+  // Border — invalid (later) beats checked/indeterminate.
+  'data-[checked=false]:border-content-secondary',
+  'data-[checked=true]:border-stroke-action',
+  'data-[indeterminate=true]:border-stroke-action',
+  'data-[invalid=true]:border-stroke-danger',
+  Platform.select({
+    web: [
+      // Invalid bg — compound selectors evaluate correctly on web.
+      'data-[invalid=true]:data-[checked=true]:bg-surface-danger-strong',
+      'data-[invalid=true]:data-[indeterminate=true]:bg-surface-danger-strong',
+      TRANSITION_COLORS,
+      // Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
+      'data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:bg-content-secondary/[0.08]',
+      // Hover — unchecked + invalid (overlay uses danger token)
+      'data-[hover=true]:data-[invalid=true]:data-[checked=false]:data-[indeterminate=false]:bg-surface-danger-strong/[0.08]',
+      // Hover — checked / indeterminate (bg + border darken together)
+      'data-[hover=true]:data-[checked=true]:bg-surface-action-strong-hover',
+      'data-[hover=true]:data-[checked=true]:border-[--color-surface-action-strong-hover]',
+      'data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-hover',
+      'data-[hover=true]:data-[indeterminate=true]:border-[--color-surface-action-strong-hover]',
+      'data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
+      'data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-[--color-surface-danger-strong-hover]',
+      'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
+      'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-[--color-surface-danger-strong-hover]',
+      // Active — CSS :active pseudo-class (web root does not track press via data-active).
+      // data-[hover=true] guard ensures active beats hover by specificity (0,3,0 > 0,2,0).
+      'web:active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:border-[--color-surface-action-strong-active]',
+      'web:active:data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-active',
+      'web:active:data-[hover=true]:data-[indeterminate=true]:border-[--color-surface-action-strong-active]',
+      'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-[--color-surface-danger-strong-active]',
+      'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+      'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-[--color-surface-danger-strong-active]',
+      // Focus ring
+      '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',
+    ].join(' '),
+    default: [
+      // Invalid bg is NOT styled on native. Compound data-[] selectors cannot express
+      // "invalid AND checked" without false-matching other states (Uniwind only evaluates
+      // the last condition). Invalid state is communicated via border-stroke-danger (single
+      // condition, always correct). The fill stays action-strong for checked/indeterminate.
+      //
+      // Active — native tracks press via data-[active] from usePress.
+      // Place data-[active=true] last so the rule only fires during press.
+      // 'data-[checked=false]:data-[invalid=true]:bg-transparent',
+      'data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong',
+      'data-[checked=true]:data-[active=true]:bg-surface-action-strong-active',
+      'data-[checked=true]:data-[active=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+      'data-[indeterminate=true]:data-[active=true]:bg-surface-action-strong-active',
+    ].join(' '),
+  }),
+]);
 
-export const checkboxLabelVariants = cva(
-  [COLOR_TEXT_PRIMARY, 'data-[disabled=true]:text-slate-400'],
-  {
-    variants: {
-      size: {
-        small: 'text-sm',
-        default: 'text-base',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
+export const checkboxIconVariants = cva(['text-white', 'h-5 w-5']);
+
+export const checkboxLabelVariants = cva([
+  'text-content-primary text-base',
+  'data-[disabled=true]:text-content-tertiary',
+]);
 
 export const checkboxGroupVariants = cva([], {
   variants: {
@@ -99,5 +99,3 @@ export const checkboxGroupVariants = cva([], {
     direction: 'column',
   },
 });
-
-export type CheckboxVariantProps = VariantProps<typeof checkboxRootVariants>;

package/src/components/Chip/index.tsx

@@ -1,32 +1,62 @@
-import { forwardRef, type ReactNode } from 'react';
-import { View, Text as RNText, type ViewProps, type TextProps } from 'react-native';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { Text, View, type TextProps } from 'react-native';
+import {
+  ChipRoot as ChipRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  type IChipProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { Avatar, type AvatarProps } from '../Avatar';
 import { Icon, type IconProps } from '../Icon';
-import { chipRootVariants, chipLabelVariants, chipIconVariants, ChipVariants } from './styles';
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
+import {
+  chipAvatarVariants,
+  chipIconVariants,
+  chipLabelVariants,
+  chipRootVariants,
+  type ChipVariantProps,
+} from './styles';
 
 const SCOPE = 'CHIP';
 
-const Root = withStyleContext(View, SCOPE);
-
-const useChipStyleContext = () => useStyleContext(SCOPE) as ChipVariants;
+const useChipStyleContext = () => useStyleContext(SCOPE) as ChipVariantProps;
 
 // =============================================================================
-// STYLED ROOT COMPONENT
+// ROOT
 // =============================================================================
 
-export interface ChipProps extends ViewProps, ChipVariants {
-  children?: ReactNode;
+export interface ChipProps extends IChipProps, ChipVariantProps {
   className?: string;
+  children?: ReactNode;
 }
 
 const ChipRoot = forwardRef<View, ChipProps>(
-  ({ children, color = 'default', className, style, ...props }, ref) => {
-    const computedClassName = cn(chipRootVariants({ color }), className);
+  (
+    { children, variant = 'tint', size = 'default', color = 'default', className, style, ...props },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, size, color } }),
+      [parent, variant, size, color],
+    );
+
+    const computedClassName = cn(chipRootVariants({ variant, size, color }), className);
 
     return (
-      <Root ref={ref} className={computedClassName} style={style} context={{ color }} {...props}>
-        {children}
-      </Root>
+      <ParentContext.Provider value={ctx}>
+        <ChipRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'chip' }))}
+        >
+          {children}
+        </ChipRootPrimitive>
+      </ParentContext.Provider>
     );
   },
 );
@@ -34,24 +64,31 @@ const ChipRoot = forwardRef<View, ChipProps>(
 ChipRoot.displayName = 'Chip';
 
 // =============================================================================
-// STYLED LABEL COMPONENT
+// LABEL
 // =============================================================================
 
 export interface ChipLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const ChipLabel = forwardRef<RNText, ChipLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { color } = useChipStyleContext();
-
-    const computedClassName = cn(chipLabelVariants({ color }), className);
+const ChipLabel = forwardRef<Text, ChipLabelProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { size, variant, color } = useChipStyleContext();
+    const computedClassName = cn(chipLabelVariants({ size, variant, color }), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'chip-label' }))}
+      >
         {children}
-      </RNText>
+      </Comp>
     );
   },
 );
@@ -59,33 +96,100 @@ const ChipLabel = forwardRef<RNText, ChipLabelProps>(
 ChipLabel.displayName = 'Chip.Label';
 
 // =============================================================================
-// STYLED ICON COMPONENT
+// ICON
 // =============================================================================
 
-export interface ChipIconProps extends Omit<IconProps, 'children'> {}
-
-const ChipIcon = ({ className, style, as, ...props }: ChipIconProps) => {
-  const { color } = useChipStyleContext();
+export interface ChipIconProps extends Omit<IconProps, 'children' | 'as'> {
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set, in which
+   * case the consumer's substituted element is rendered instead.
+   */
+  as?: IconProps['as'];
+  /**
+   * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.
+   * CVA uses this attribute to apply leading/trailing margin offsets logically
+   * (RTL-aware). Omit when the icon is freely positioned within a custom layout.
+   */
+  position?: IconSlotPosition;
+}
 
-  const computedClassName = cn(chipIconVariants({ color }), className);
+const ChipIcon = ({ asChild, className, style, as, position, ...props }: ChipIconProps) => {
+  const { size, color } = useChipStyleContext();
+  const computedClassName = cn(chipIconVariants({ size, color }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'chip-icon' }),
+          positionToDataIcon(position),
+        )}
+      />
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(
+        props,
+        dataAttributes({ slot: 'chip-icon' }),
+        positionToDataIcon(position),
+      )}
+    />
+  );
 };
 
 ChipIcon.displayName = 'Chip.Icon';
 
 // =============================================================================
-// COMPOUND COMPONENT EXPORT
+// AVATAR
+// =============================================================================
+
+export interface ChipAvatarProps extends Omit<AvatarProps, 'size'> {}
+
+const ChipAvatar = ({ className, style, children, ...props }: ChipAvatarProps) => {
+  const { size } = useChipStyleContext();
+  // chipAvatarVariants sets w/h and the leading-edge negative margin.
+  // Avatar renders with size="sm" (its smallest named size) but chipAvatarVariants
+  // overrides the w/h via tailwind-merge so the chip size wins.
+  const computedClassName = cn(chipAvatarVariants({ size }), className);
+
+  return (
+    <Avatar size="sm" className={computedClassName} style={style} {...props}>
+      {children}
+    </Avatar>
+  );
+};
+
+ChipAvatar.displayName = 'Chip.Avatar';
+
+// =============================================================================
+// COMPOUND EXPORT
 // =============================================================================
 
 type ChipCompoundComponent = typeof ChipRoot & {
   Label: typeof ChipLabel;
   Icon: typeof ChipIcon;
+  Avatar: typeof ChipAvatar;
 };
 
 export const Chip = Object.assign(ChipRoot, {
   Label: ChipLabel,
   Icon: ChipIcon,
+  Avatar: ChipAvatar,
 }) as ChipCompoundComponent;
 
-export { type ChipVariants } from './styles';
+export { type ChipVariantProps } from './styles';

package/src/components/Chip/styles.ts

@@ -1,52 +1,254 @@
+import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+
+const chipInteractiveRoot = [
+  TRANSITION_COLORS,
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  DISABLED_CURSOR,
+  Platform.select({
+    web: [
+      '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',
+    ].join(' '),
+    default: '',
+  }),
+];
 
 export const chipRootVariants = cva(
-  ['flex-row items-center justify-center rounded-full px-2 py-1 gap-1.5 self-start'],
+  ['flex-row items-center justify-center self-start overflow-hidden', ...chipInteractiveRoot],
   {
     variants: {
+      variant: {
+        tint: [],
+        outline: ['bg-transparent', 'border'],
+      },
       color: {
-        default: 'bg-surface-neutral-tint',
-        error: 'bg-surface-danger-tint',
-        info: 'bg-surface-info-tint',
-        success: 'bg-surface-success-tint',
-        warning: 'bg-surface-warning-tint',
+        default: [],
+        action: [],
+        danger: [],
+        warning: [],
+        success: [],
+        info: [],
+      },
+      size: {
+        default: 'h-8 max-h-8 min-h-8 gap-1.5 px-3 rounded-lg',
+        small: 'h-6 max-h-6 min-h-6 gap-1 px-1.5 rounded-md',
+        xsmall: 'h-4 max-h-4 min-h-4 gap-0.5 px-1 rounded-sm',
       },
     },
+    compoundVariants: [
+      // ── tint × color ────────────────────────────────────────────────────
+      {
+        variant: 'tint',
+        color: 'default',
+        className: [
+          'bg-surface-neutral-tint',
+          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',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'action',
+        className: [
+          'bg-surface-action-tint',
+          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',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'danger',
+        className: [
+          'bg-surface-danger-tint',
+          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',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'warning',
+        className: [
+          'bg-surface-warning-tint',
+          Platform.select({
+            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',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'success',
+        className: [
+          'bg-surface-success-tint',
+          Platform.select({
+            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',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'info',
+        className: [
+          'bg-surface-info-tint',
+          Platform.select({
+            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',
+          }),
+        ],
+      },
+
+      // ── outline × color ───────────────────────────────────────────────────
+      {
+        variant: 'outline',
+        color: 'default',
+        className: [
+          'border-stroke-primary',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-neutral-tint',
+            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'action',
+        className: [
+          'border-stroke-action',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-tint',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'danger',
+        className: [
+          'border-stroke-danger',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-tint',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'warning',
+        className: [
+          'border-stroke-warning',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-warning-tint',
+            web: 'data-[hover=true]:bg-surface-warning-tint-hover data-[active=true]:data-[hover=true]:bg-surface-warning-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'success',
+        className: [
+          'border-stroke-success',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-success-tint',
+            web: 'data-[hover=true]:bg-surface-success-tint-hover data-[active=true]:data-[hover=true]:bg-surface-success-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'info',
+        className: [
+          'border-stroke-info',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-info-tint',
+            web: 'data-[hover=true]:bg-surface-info-tint-hover data-[active=true]:data-[hover=true]:bg-surface-info-tint-active',
+          }),
+        ],
+      },
+    ],
     defaultVariants: {
+      variant: 'tint',
       color: 'default',
+      size: 'default',
     },
   },
 );
 
-// TODO: letter-spacing values (tracking-wider) are not working on web, but the font-mono-medium is.
-export const chipLabelVariants = cva(['label-sm font-mono-medium'], {
+export const chipLabelVariants = cva(['font-sans-medium'], {
   variants: {
+    variant: {
+      tint: 'text-content-primary',
+      outline: 'text-content-primary',
+    },
     color: {
-      default: 'text-content-primary',
-      error: 'text-content-primary',
-      info: 'text-content-primary',
-      success: 'text-content-primary',
-      warning: 'text-content-primary',
+      default: [],
+      action: [],
+      danger: [],
+      warning: [],
+      success: [],
+      info: [],
+    },
+    size: {
+      default: 'body-md',
+      small: 'body-sm',
+      xsmall: 'body-xs',
     },
   },
+  compoundVariants: [
+    { variant: 'outline', color: 'action', className: 'text-content-action' },
+    { variant: 'outline', color: 'danger', className: 'text-content-danger' },
+    { variant: 'outline', color: 'warning', className: 'text-content-warning' },
+    { variant: 'outline', color: 'success', className: 'text-content-success' },
+    { variant: 'outline', color: 'info', className: 'text-content-info' },
+  ],
   defaultVariants: {
+    variant: 'tint',
     color: 'default',
+    size: 'default',
   },
 });
 
-export const chipIconVariants = cva(['size-4'], {
+export const chipIconVariants = cva(['shrink-0'], {
   variants: {
+    size: {
+      default: 'size-5 data-[icon=inline-start]:-ms-1.5 data-[icon=inline-end]:-me-1.5',
+      small: 'size-4 data-[icon=inline-start]:-ms-0.5 data-[icon=inline-end]:-me-0.5',
+      xsmall: 'size-2.5 data-[icon=inline-start]:-ms-px data-[icon=inline-end]:-me-px',
+    },
     color: {
       default: 'text-content-primary',
-      error: 'text-content-danger',
-      info: 'text-content-info',
-      success: 'text-content-success',
+      action: 'text-content-action',
+      danger: 'text-content-danger',
       warning: 'text-content-warning',
+      success: 'text-content-success',
+      info: 'text-content-info',
     },
   },
   defaultVariants: {
+    size: 'default',
     color: 'default',
   },
 });
 
-export type ChipVariants = VariantProps<typeof chipRootVariants>;
+export const chipAvatarVariants = cva(['shrink-0 rounded-full overflow-hidden'], {
+  variants: {
+    size: {
+      default: 'size-5 -ms-1.5',
+      small: 'size-4 -ms-0.5',
+      xsmall: 'size-2.5 -ms-px',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export type ChipVariantProps = VariantProps<typeof chipRootVariants>;