@cdx-ui/components 0.0.1-beta.23 → 0.0.1-beta.25

package/src/components/Field/FieldLabel.web.tsx

@@ -7,7 +7,7 @@ export type BaseFieldLabelProps = ViewProps & {
   htmlFor?: string;
   children?: ReactNode;
   /** @platform native — ignored on DOM `<label>`; set by form primitive for Uniwind. */
-  dataSet?: Record<string, string>;
+  dataSet?: Record<string, boolean | string>;
 };
 
 /** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */

package/src/components/Field/index.tsx

@@ -8,7 +8,7 @@ import {
   IFieldLabelProps,
   type IFieldRootProps,
 } from '@cdx-ui/primitives';
-import { cn } from '@cdx-ui/utils';
+import { cn, useFormControlContext } from '@cdx-ui/utils';
 import { Icon } from '../Icon';
 import { BaseFieldLabel } from './FieldLabel';
 import {
@@ -70,7 +70,14 @@ export interface FieldLabelProps extends IFieldLabelProps, FieldLabelVariantProp
 
 const FieldLabel = forwardRef<View, FieldLabelProps>(
   ({ className, children, style, htmlFor, ...props }, ref) => {
-    const labelClassName = cn(fieldLabelVariants(), className);
+    const { isLabelFocused, isInvalid } = useFormControlContext();
+    // Native: inject text-content-action via context (group-has CSS handles web).
+    // native: prefix keeps this class inert on web so it never conflicts with text-content-primary.
+    const labelClassName = cn(
+      fieldLabelVariants(),
+      isLabelFocused && !isInvalid && 'native:text-content-action',
+      className,
+    );
 
     return (
       <FieldPrimitive.Label
@@ -79,7 +86,7 @@ const FieldLabel = forwardRef<View, FieldLabelProps>(
         style={style}
         htmlFor={htmlFor}
         requiredIndicator={
-          <Text className="text-red-500" aria-hidden>
+          <Text className="text-content-danger" aria-hidden>
             {' *'}
           </Text>
         }

package/src/components/Field/styles.ts

@@ -1,23 +1,24 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { DISABLED_OPACITY } from '../../styles/primitives';
 
-export const fieldRootVariants = cva(['flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);
+export const fieldRootVariants = cva(['group flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);
 
 export const fieldLabelVariants = cva([
   'body-md',
   'font-medium',
   'text-content-primary',
   'flex-row items-center',
-  DISABLED_OPACITY,
+  'overflow-hidden',
   'web:cursor-pointer',
+  'web:group-has-[[data-focus=true]]:data-[invalid=false]:text-content-action',
   'data-[invalid=true]:text-content-danger',
 ]);
 
-export const fieldHelperVariants = cva(['flex-row items-center']);
+export const fieldHelperVariants = cva(['flex-row items-center min-h-4']);
 
 export const fieldHelperTextVariants = cva(['body-sm', 'text-content-tertiary']);
 
-export const fieldErrorVariants = cva(['flex-row items-center gap-1']);
+export const fieldErrorVariants = cva(['flex-row items-center gap-0.5 min-h-4']);
 
 export const fieldErrorTextVariants = cva(['body-sm', 'text-content-danger']);
 

package/src/components/IconButton/index.tsx

@@ -53,6 +53,7 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
   (
     {
       variant = 'solid',
+      color = 'neutral',
       size = 'default',
       className,
       style,
@@ -63,11 +64,11 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
     },
     ref,
   ) => {
-    const rootClassName = cn(iconButtonRootVariants({ variant, size }), className);
+    const rootClassName = cn(iconButtonRootVariants({ variant, color, size }), className);
 
     const glyphClassName = cn(
       iconButtonGlyphVariants({ size }),
-      iconButtonIconColorVariants(),
+      iconButtonIconColorVariants({ variant, color }),
       iconClassName,
     );
 

package/src/components/IconButton/styles.ts

@@ -10,33 +10,131 @@ export const iconButtonRootVariants = cva(
     TRANSITION_COLORS,
     'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
-    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-ring] web:data-[focus-visible=true]:ring-offset-2',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)] web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        solid: [
+        solid: [],
+        tint: [],
+        ghost: ['bg-transparent'],
+      },
+      color: {
+        neutral: [],
+        action: [],
+        danger: [],
+      },
+      size: {
+        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
+        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
+      },
+    },
+    compoundVariants: [
+      // ── solid × color ───────────────────────────────────────────────────
+      {
+        variant: 'solid',
+        color: 'neutral',
+        className: [
           'bg-surface-primary border border-stroke-secondary',
           Platform.select({
             default: 'data-[active=true]:bg-surface-primary-active',
             web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
           }),
         ],
-        ghost: [
-          'bg-transparent',
+      },
+      {
+        variant: 'solid',
+        color: 'action',
+        className: [
+          'bg-surface-action-strong',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-strong-active',
+            web: 'data-[hover=true]:bg-surface-action-strong-hover data-[active=true]:data-[hover=true]:bg-surface-action-strong-active',
+          }),
+        ],
+      },
+      {
+        variant: 'solid',
+        color: 'danger',
+        className: [
+          'bg-surface-danger-strong',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-strong-active',
+            web: 'data-[hover=true]:bg-surface-danger-strong-hover data-[active=true]:data-[hover=true]:bg-surface-danger-strong-active',
+          }),
+        ],
+      },
+
+      // ── tint × color ─────────────────────────────────────────────────
+      {
+        variant: 'tint',
+        color: 'neutral',
+        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',
+          }),
+        ],
+      },
+
+      // ── ghost × color ──────────────────────────────────────────────────
+      {
+        variant: 'ghost',
+        color: 'neutral',
+        className: [
           Platform.select({
             default: 'data-[active=true]:bg-surface-primary-active',
             web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
           }),
         ],
       },
-      size: {
-        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
-        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
+      {
+        variant: 'ghost',
+        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',
+          }),
+        ],
       },
-    },
+      {
+        variant: 'ghost',
+        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',
+          }),
+        ],
+      },
+    ],
     defaultVariants: {
       variant: 'solid',
+      color: 'neutral',
       size: 'default',
     },
   },
@@ -54,6 +152,34 @@ export const iconButtonGlyphVariants = cva([], {
   },
 });
 
-export const iconButtonIconColorVariants = cva(['text-content-primary']);
+export const iconButtonIconColorVariants = cva([], {
+  variants: {
+    variant: {
+      solid: [],
+      tint: [],
+      ghost: [],
+    },
+    color: {
+      neutral: [],
+      action: [],
+      danger: [],
+    },
+  },
+  compoundVariants: [
+    { 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: 'ghost', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'ghost', color: 'action', className: 'text-content-action' },
+    { variant: 'ghost', color: 'danger', className: 'text-content-danger' },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    color: 'neutral',
+  },
+});
 
 export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;

package/src/components/Input/styles.ts

@@ -3,7 +3,7 @@ import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
 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',
     'rounded-[var(--border-radius-default)]',
@@ -24,11 +24,16 @@ 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',
+          // Subtract one hairline from padding when focused so the wider focus border doesn’t shift layout.
+          'data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          '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',
+          'data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
         ],
       },
     },
@@ -42,7 +47,7 @@ export const inputRootVariants = cva(
 export const inputFieldVariants = cva(
   [
     'flex-1 justify-center bg-transparent p-0',
-    'font-body text-content-primary',
+    'text-content-primary',
     'placeholder:text-content-tertiary',
     'web:outline-none',
     'tracking-normal',
@@ -60,7 +65,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/Radio/index.tsx

@@ -21,12 +21,13 @@ const RadioIndicatorBase = forwardRef<View, ViewProps & { className?: string }>(
     const ds = (props as any).dataSet;
     const isChecked = ds ? ds.checked === true : (props as any)['data-checked'] === 'true';
     const isInvalid = ds ? ds.invalid === true : (props as any)['data-invalid'] === 'true';
+    const isHovered = ds ? ds.hover === true : (props as any)['data-hover'] === 'true';
 
     return (
       <View ref={ref} className={cn(radioIndicatorVariants(), className)} style={style} {...props}>
         <View
           className={cn(radioInnerDotVariants())}
-          {...dataAttributes({ checked: isChecked, invalid: isInvalid })}
+          {...dataAttributes({ checked: isChecked, invalid: isInvalid, hover: isHovered })}
         />
         {children}
       </View>

package/src/components/Radio/styles.ts

@@ -2,8 +2,6 @@ import { Platform } from 'react-native';
 import { cva } from 'class-variance-authority';
 import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
-// TODO: Add hover, active, and focus-visible styles based on Figma
-
 export const radioRootVariants = cva([
   'flex-row items-center gap-2',
   'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
@@ -15,23 +13,18 @@ export const radioIndicatorVariants = cva([
   'rounded-[var(--border-radius-round)]',
   'border-[length:var(--border-width-selected)]',
   'h-5 w-5',
-  'border-stroke-primary',
-  'data-[checked=false]:border-slate-300',
   'bg-surface-primary',
+  'data-[checked=false]:border-content-secondary',
   'data-[checked=true]:border-stroke-action',
   'data-[invalid=true]:border-stroke-danger',
   'data-[checked=true]:data-[invalid=true]:border-stroke-danger',
   Platform.select({
     web: [
       TRANSITION_COLORS,
-      'data-[hover=true]:data-[checked=false]:border-slate-400',
-      'data-[hover=true]:data-[checked=false]:bg-slate-50',
+      'data-[hover=true]:data-[checked=true]:border-surface-action-strong-hover',
+      'data-[hover=true]:data-[invalid=true]:border-surface-danger-strong-hover',
       'web:data-[focus-visible=true]:outline-none',
-      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-offset-2',
-      'web:data-[focus-visible=true]:data-[checked=false]:ring-slate-400/50',
-      'web:data-[focus-visible=true]:data-[checked=true]:ring-stroke-focus',
-      'data-[invalid=true]:data-[hover=true]:border-stroke-danger',
-      'web:data-[invalid=true]:data-[focus-visible=true]:ring-stroke-danger',
+      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)] web:data-[focus-visible=true]:ring-offset-2',
     ].join(' '),
     default: '',
   }),
@@ -44,6 +37,13 @@ export const radioInnerDotVariants = cva([
   'data-[checked=true]:scale-100',
   'bg-surface-action-strong',
   'data-[invalid=true]:bg-surface-danger-strong',
+  Platform.select({
+    web: [
+      'data-[hover=true]:bg-surface-action-strong-hover',
+      'data-[hover=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
+    ].join(' '),
+    default: '',
+  }),
 ]);
 
 export const radioLabelVariants = cva(['body-md', 'text-content-primary']);