@cdx-ui/components 0.0.1-beta.5 → 0.0.1-beta.50

package/src/components/Chip/index.tsx

@@ -1,40 +1,92 @@
-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 { Pressable, Text as RNText, View, type TextProps } from 'react-native';
+import { createChip, type IChipProps } from '@cdx-ui/primitives';
+import {
+  cn,
+  ParentContext,
+  useParentContext,
+  useStyleContext,
+  withStyleContext,
+  type WithStyleContextProps,
+} from '@cdx-ui/utils';
+import { Avatar, type AvatarProps } from '../Avatar';
 import { Icon, type IconProps } from '../Icon';
-import { chipRootVariants, chipLabelVariants, chipIconVariants, ChipVariants } from './styles';
+import {
+  chipAvatarVariants,
+  chipIconVariants,
+  chipLabelVariants,
+  chipRootVariants,
+  type ChipVariantProps,
+} from './styles';
 
 const SCOPE = 'CHIP';
 
-const Root = withStyleContext(View, SCOPE);
+const RootView = withStyleContext(View, SCOPE);
+const RootPressable = withStyleContext(Pressable, SCOPE);
 
-const useChipStyleContext = () => useStyleContext(SCOPE) as ChipVariants;
+const ChipPrimitive = createChip({
+  View: RootView,
+  Pressable: RootPressable,
+});
+
+const useChipStyleContext = () => useStyleContext(SCOPE) as ChipVariantProps;
 
 // =============================================================================
-// STYLED ROOT COMPONENT
+// ROOT
 // =============================================================================
 
-export interface ChipProps extends ViewProps, ChipVariants {
-  children?: ReactNode;
+export interface ChipProps extends IChipProps, ChipVariantProps, WithStyleContextProps {
   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,
+      asChild,
+      ...props
+    },
+    ref,
+  ) => {
+    const parentContextValues = useParentContext();
+    const styleContextValues = useMemo(
+      () => ({ ...parentContextValues, [SCOPE]: { variant, size, color } }),
+      [parentContextValues, variant, size, color],
+    );
 
-    return (
-      <Root ref={ref} className={computedClassName} style={style} context={{ color }} {...props}>
+    const computedClassName = cn(chipRootVariants({ variant, size, color }), className);
+
+    const root = (
+      <ChipPrimitive
+        ref={ref as never}
+        asChild={asChild}
+        className={computedClassName}
+        context={{ variant, size, color }}
+        style={style}
+        {...props}
+      >
         {children}
-      </Root>
+      </ChipPrimitive>
     );
+
+    if (asChild) {
+      return <ParentContext.Provider value={styleContextValues}>{root}</ParentContext.Provider>;
+    }
+
+    return root;
   },
 );
 
 ChipRoot.displayName = 'Chip';
 
 // =============================================================================
-// STYLED LABEL COMPONENT
+// LABEL
 // =============================================================================
 
 export interface ChipLabelProps extends TextProps {
@@ -44,9 +96,8 @@ export interface ChipLabelProps extends TextProps {
 
 const ChipLabel = forwardRef<RNText, ChipLabelProps>(
   ({ className, children, style, ...props }, ref) => {
-    const { color } = useChipStyleContext();
-
-    const computedClassName = cn(chipLabelVariants({ color }), className);
+    const { size, variant, color } = useChipStyleContext();
+    const computedClassName = cn(chipLabelVariants({ size, variant, color }), className);
 
     return (
       <RNText ref={ref} className={computedClassName} style={style} {...props}>
@@ -59,33 +110,59 @@ 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();
-
-  const computedClassName = cn(chipIconVariants({ color }), className);
+export interface ChipIconProps extends Omit<IconProps, 'children'> {
+  /** Leading (default) or trailing slot — applies the correct negative margin offset. */
+  slot?: 'leading' | 'trailing';
+  className?: string;
+}
 
+const ChipIcon = ({ className, style, as, slot, ...props }: ChipIconProps) => {
+  const { size, color } = useChipStyleContext();
+  const computedClassName = cn(chipIconVariants({ size, color, slot }), className);
   return <Icon as={as} className={computedClassName} style={style} {...props} />;
 };
 
 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 slot 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,266 @@
+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-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',
+      small: 'size-4',
+      xsmall: 'size-2.5',
+    },
     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',
+    },
+    slot: {
+      leading: '',
+      trailing: '',
     },
   },
+  compoundVariants: [
+    { slot: 'leading', size: 'default', className: '-ml-1.5' },
+    { slot: 'leading', size: 'small', className: '-ml-0.5' },
+    { slot: 'leading', size: 'xsmall', className: '-ml-px' },
+    { slot: 'trailing', size: 'default', className: '-mr-1.5' },
+    { slot: 'trailing', size: 'small', className: '-mr-0.5' },
+    { slot: 'trailing', size: 'xsmall', className: '-mr-px' },
+  ],
   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 -ml-1.5',
+      small: 'size-4 -ml-0.5',
+      xsmall: 'size-2.5 -ml-px',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export type ChipVariantProps = VariantProps<typeof chipRootVariants>;

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/Heading/styles.ts

@@ -5,7 +5,7 @@ export const headingStyle = cva(
   [
     `text-content-primary my-0`,
     Platform.select({
-      web: 'bg-transparent display-inline no-underline',
+      web: 'bg-transparent no-underline',
       default: '',
     }),
   ],

package/src/components/Icon/index.tsx

@@ -1,11 +1,10 @@
 import { withUniwind } from 'uniwind';
 import { cn } from '@cdx-ui/utils';
-import type { CdxIcon, CdxIconProps } from '@cdx-ui/icons';
-import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
+import type { ForgeIcon, ForgeIconProps } from '@cdx-ui/icons';
 
-export type IconProps = CdxIconProps & {
+export type IconProps = ForgeIconProps & {
   className?: string; // TODO: Why does this need to specified manually?
-  as: CdxIcon;
+  as: ForgeIcon;
 };
 
 function IconImpl({ as: IconComponent, ...props }: IconProps) {
@@ -38,16 +37,16 @@ const StyledIcon = withUniwind(IconImpl, {
  * <Icon as={ArrowRight} className="text-red-500 size-4" />
  * ```
  *
- * @param {CdxIcon} as - The CDX icon component to render.
+ * @param {ForgeIcon} as - The Forge icon component to render.
  * @param {string} className - Utility classes to style the icon using Uniwind.
  * @param {number} size - Icon size (overrides the size class).
- * @param {...CdxIconProps} ...props - Additional icon props passed to the "as" icon.
+ * @param {...ForgeIconProps} ...props - Additional icon props passed to the "as" icon.
  */
 export function Icon({ as: IconComponent, className, ...props }: IconProps) {
   return (
     <StyledIcon
       as={IconComponent}
-      className={cn(COLOR_TEXT_PRIMARY, 'size-5', className)}
+      className={cn('text-content-primary size-5', className)}
       {...props}
     />
   );

package/src/components/IconButton/index.tsx

@@ -6,7 +6,7 @@ import {
   type IButtonProps,
   useButtonContext,
 } from '@cdx-ui/primitives';
-import type { CdxIcon } from '@cdx-ui/icons';
+import type { ForgeIcon } from '@cdx-ui/icons';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
 import {
@@ -24,7 +24,7 @@ const IconButtonPrimitive = createButton({
   Icon: View,
 });
 
-function IconButtonGlyph({ as: IconComponent, className }: { as: CdxIcon; className: string }) {
+function IconButtonGlyph({ as: IconComponent, className }: { as: ForgeIcon; className: string }) {
   const { hover, focus, active, disabled, focusVisible } = useButtonContext();
   return (
     <Icon
@@ -43,8 +43,8 @@ function IconButtonGlyph({ as: IconComponent, className }: { as: CdxIcon; classN
 
 export interface IconButtonProps extends PressableProps, IButtonProps, IconButtonVariantProps {
   className?: string;
-  /** CDX icon component to render (icon-only control). */
-  as: CdxIcon;
+  /** Forge icon component to render (icon-only control). */
+  as: ForgeIcon;
   /** Passed through to the underlying `Icon`. */
   iconClassName?: IconProps['className'];
 }
@@ -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,
     );