@cdx-ui/components 0.1.7 → 0.2.0

package/src/components/Text/index.tsx

@@ -1,16 +1,43 @@
 import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react';
 import { Text as RNText } from 'react-native';
+import { useHasTextAncestor } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
-import { textStyle, TextVariantProps } from './styles';
+import { nestedTextStyle, textStyle, type TextVariantProps } from './styles';
 
-export type TextProps = TextVariantProps &
-  ComponentPropsWithoutRef<typeof RNText> & { className?: string };
+export type TextColor = NonNullable<TextVariantProps['color']>;
+export type TextSize = NonNullable<TextVariantProps['size']>;
+export type TextWeight = NonNullable<TextVariantProps['weight']>;
+
+export type TextProps = Omit<TextVariantProps, 'color' | 'size' | 'weight'> &
+  ComponentPropsWithoutRef<typeof RNText> & {
+    /**
+     * Semantic content color, mapped to the matching `text-content-*` token.
+     * A `Text` nested inside another text element inherits its parent's color when omitted.
+     * @default 'primary'
+     */
+    color?: TextColor;
+    /**
+     * Body typography style. A nested `Text` inherits its parent's size when omitted, and
+     * setting it keeps the parent's font family and weight.
+     * @default 'md'
+     */
+    size?: TextSize;
+    /**
+     * Font weight. A nested `Text` inherits its parent's weight when omitted.
+     * @default 'normal'
+     */
+    weight?: TextWeight;
+    className?: string;
+  };
 
 export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(
-  { className, size = 'md', ...props },
+  { className, color, size, weight, italic, ...props },
   ref,
 ) {
-  return <RNText className={cn(textStyle({ size }), className)} {...props} ref={ref} />;
+  const variants = { color, size, weight, italic };
+  const classes = useHasTextAncestor() ? nestedTextStyle(variants) : textStyle(variants);
+
+  return <RNText className={cn(classes, className)} {...props} ref={ref} />;
 });
 
 Text.displayName = 'Text';

package/src/components/Text/styles.ts

@@ -1,9 +1,20 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from '@cdx-ui/utils';
+import { CONTENT_COLOR } from '../../styles/constants';
+
+const TEXT_WEIGHT = {
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+} as const;
+
+const TEXT_ITALIC = {
+  true: 'italic',
+} as const;
 
 export const textStyle = cva(
   [
-    'text-content-primary',
     Platform.select({
       web: 'font-body my-0 bg-transparent no-underline',
       default: '',
@@ -11,6 +22,7 @@ export const textStyle = cva(
   ],
   {
     variants: {
+      color: CONTENT_COLOR,
       size: {
         xl: 'body-xl',
         lg: 'body-lg',
@@ -18,8 +30,34 @@ export const textStyle = cva(
         sm: 'body-sm',
         xs: 'body-xs',
       },
+      weight: TEXT_WEIGHT,
+      italic: TEXT_ITALIC,
+    },
+    defaultVariants: {
+      color: 'primary',
+      size: 'md',
+      weight: 'normal',
     },
   },
 );
 
 export type TextVariantProps = VariantProps<typeof textStyle>;
+
+// A `Text` inside another text element emits only the props it is given, with no
+// base classes or defaults, so everything it omits inherits from the parent. Its
+// sizes use the `-size` companions of the body styles, which leave the font
+// family and weight to inherit too.
+export const nestedTextStyle = cva([], {
+  variants: {
+    color: CONTENT_COLOR,
+    size: {
+      xl: 'body-xl-size',
+      lg: 'body-lg-size',
+      md: 'body-md-size',
+      sm: 'body-sm-size',
+      xs: 'body-xs-size',
+    } satisfies Record<NonNullable<TextVariantProps['size']>, string>,
+    weight: TEXT_WEIGHT,
+    italic: TEXT_ITALIC,
+  },
+});

package/src/components/Toast/hooks.ts

@@ -12,7 +12,6 @@ export function useButtonColor({
   color: ButtonProps['color'];
   toastColor: ToastColorInternal;
 }) {
-  // TODO: Add toastActionVariants to styles.ts to restore color-aware action styling
   return useMemo(() => {
     if (color) return color;
 

package/src/components/Toast/index.tsx

@@ -35,6 +35,10 @@ import {
   toastLabelVariants,
   toastDescriptionVariants,
   toastIconVariants,
+  toastActionRootVariants,
+  toastActionLabelVariants,
+  toastCloseRootVariants,
+  toastCloseIconVariants,
   toastStyleSheet,
   toastTextVariants,
   toastWrapperVariants,
@@ -415,10 +419,8 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
   const { children, variant, color, size = 'small', className, ...restProps } = props;
 
   const { color: toastColor } = useToastStyleContext();
-
-  // TODO: Add toastActionVariants to styles.ts to restore color-aware action styling
-
   const buttonColor = useButtonColor({ color, toastColor });
+  const usesNeutralStandIn = toastColor === 'neutral' && !color;
 
   return (
     <Button
@@ -426,10 +428,12 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
       variant={variant ?? 'outline'}
       color={buttonColor}
       size={size}
-      className={className}
+      className={cn(usesNeutralStandIn ? toastActionRootVariants() : undefined, className)}
       {...restProps}
     >
-      <Button.Label>{children}</Button.Label>
+      <Button.Label className={usesNeutralStandIn ? toastActionLabelVariants() : undefined}>
+        {children}
+      </Button.Label>
     </Button>
   );
 });
@@ -437,8 +441,9 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
 // --------------------------------------------------
 
 const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
-  const { children, size = 'small', className, onPress, ...restProps } = props;
-  const { hide, id } = useToastStyleContext();
+  const { children, size = 'small', className, onPress, iconClassName, ...restProps } = props;
+  const { hide, id, color: toastColor } = useToastStyleContext();
+  const usesNeutralStandIn = toastColor === 'neutral';
 
   /**
    * Handle close button press
@@ -460,7 +465,8 @@ const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
       variant="ghost"
       size={size}
       aria-label="Close"
-      className={className}
+      className={cn(usesNeutralStandIn ? toastCloseRootVariants() : undefined, className)}
+      iconClassName={cn(usesNeutralStandIn ? toastCloseIconVariants() : undefined, iconClassName)}
       onPress={handlePress}
       as={CloseIcon}
       {...restProps}

package/src/components/Toast/styles.ts

@@ -1,6 +1,15 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { cva, type VariantProps } from '@cdx-ui/utils';
 
+const NEUTRAL_ON_STRONG_INTERACTION = Platform.select({
+  default: 'data-[active=true]:bg-surface-neutral-strong',
+  web: [
+    'data-[hover=true]:bg-surface-neutral-strong-hover',
+    'data-[active=true]:data-[hover=true]:bg-surface-neutral-strong',
+    'web:data-[focus-visible=true]:ring-offset-surface-neutral-strong-active',
+  ].join(' '),
+});
+
 /**
  * Toast root styles
  *
@@ -40,17 +49,18 @@ export const toastRootVariants = cva(
     // shadow and clips the child's transform mid-transition, producing a
     // visual "cut off" during enter/exit. Consumers that need clipping for
     // custom child content (e.g. a background image) can add it themselves.
-    'flex-row items-center gap-3 rounded-[var(--border-radius-default)] min-h-12 px-4 py-2 shadow-lg bg-surface-primary border border-stroke-secondary',
+    'flex-row items-center gap-3 rounded-[var(--border-radius-default)] min-h-12 px-4 py-2 shadow-lg border border-transparent',
     'native:overflow-hidden',
   ],
   {
     variants: {
       color: {
-        neutral: '',
-        info: '',
-        success: '',
-        warning: '',
-        danger: '',
+        // color.component.toast.neutral.surface
+        neutral: 'bg-surface-neutral-strong-active',
+        info: 'bg-surface-info-subtle',
+        success: 'bg-surface-success-subtle',
+        warning: 'bg-surface-warning-subtle',
+        danger: 'bg-surface-danger-subtle',
       },
     },
     defaultVariants: {
@@ -146,11 +156,12 @@ export const toastTextVariants = cva(['flex-1 flex-col min-w-0']);
 export const toastLabelVariants = cva(['text-base font-medium'], {
   variants: {
     color: {
-      neutral: 'text-content-primary',
-      info: 'text-content-info',
-      success: 'text-content-success',
-      warning: 'text-content-warning',
-      danger: 'text-content-danger',
+      // color.component.toast.neutral.content
+      neutral: 'text-content-neutral-on-strong',
+      info: 'text-content-info-on-subtle',
+      success: 'text-content-success-on-subtle',
+      warning: 'text-content-warning-on-subtle',
+      danger: 'text-content-danger-on-subtle',
     },
   },
   defaultVariants: {
@@ -158,14 +169,15 @@ export const toastLabelVariants = cva(['text-base font-medium'], {
   },
 });
 
-export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
+export const toastDescriptionVariants = cva(['text-sm'], {
   variants: {
     color: {
-      neutral: 'text-content-primary',
-      info: 'text-content-info',
-      success: 'text-content-success',
-      warning: 'text-content-warning',
-      danger: 'text-content-danger',
+      // color.component.toast.neutral.content
+      neutral: 'text-content-neutral-on-strong',
+      info: 'text-content-info-on-subtle',
+      success: 'text-content-success-on-subtle',
+      warning: 'text-content-warning-on-subtle',
+      danger: 'text-content-danger-on-subtle',
     },
   },
   defaultVariants: {
@@ -176,7 +188,8 @@ export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
 export const toastIconVariants = cva(['size-5'], {
   variants: {
     color: {
-      neutral: 'text-content-primary',
+      // color.component.toast.neutral.content
+      neutral: 'text-content-neutral-on-strong',
       info: 'text-content-info',
       success: 'text-content-success',
       warning: 'text-content-warning',
@@ -188,6 +201,21 @@ export const toastIconVariants = cva(['size-5'], {
   },
 });
 
+export const toastActionRootVariants = cva([
+  'border-content-neutral-on-strong', // color.component.toast.neutral.action
+  NEUTRAL_ON_STRONG_INTERACTION,
+]);
+
+export const toastActionLabelVariants = cva([
+  'text-content-neutral-on-strong', // color.component.toast.neutral.action
+]);
+
+export const toastCloseRootVariants = cva([NEUTRAL_ON_STRONG_INTERACTION]);
+
+export const toastCloseIconVariants = cva([
+  'text-content-neutral-on-strong', // color.component.toast.neutral.content
+]);
+
 export const toastStyleSheet = StyleSheet.create({
   root: {
     borderCurve: 'continuous',

package/src/components/Toast/types.ts

@@ -228,7 +228,7 @@ export interface ToastDescriptionProps {
 /**
  * Props for the Toast.Icon component
  */
-export interface ToastIconProps extends Omit<IconProps, 'children' | 'as'> {
+export interface ToastIconProps extends Omit<IconProps, 'children' | 'as' | 'color'> {
   asChild?: boolean;
   /**
    * Forge icon component to render. Required unless `asChild` is set.

package/src/components/ToggleButton/index.tsx

@@ -157,7 +157,7 @@ ToggleButtonLabel.displayName = 'ToggleButton.Label';
 // STYLED ICON COMPONENT
 // =============================================================================
 
-export interface ToggleButtonIconProps extends Omit<IconProps, 'children' | 'as'> {
+export interface ToggleButtonIconProps extends Omit<IconProps, 'children' | 'as' | 'color'> {
   /** Render a custom element instead of the default icon. */
   asChild?: boolean;
   /** Forge icon component to render. */
@@ -333,14 +333,16 @@ const ToggleButtonGroup = forwardRef<View, ToggleButtonGroupProps>(
   },
 );
 
-ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+ToggleButtonGroup.displayName = 'ToggleButton.Group';
 
-export const ToggleButton = Object.assign(ToggleButtonRoot, {
-  Label: ToggleButtonLabel,
-  Icon: ToggleButtonIcon,
-}) as typeof ToggleButtonRoot & {
+type ToggleButtonCompoundComponent = typeof ToggleButtonRoot & {
   Label: typeof ToggleButtonLabel;
   Icon: typeof ToggleButtonIcon;
+  Group: typeof ToggleButtonGroup;
 };
 
-export { ToggleButtonGroup };
+export const ToggleButton = Object.assign(ToggleButtonRoot, {
+  Label: ToggleButtonLabel,
+  Icon: ToggleButtonIcon,
+  Group: ToggleButtonGroup,
+}) as ToggleButtonCompoundComponent;

package/src/components/index.ts

@@ -10,6 +10,12 @@ export * from './Card';
 export * from './Carousel';
 export * from './Checkbox';
 export * from './Chip';
+export * from './ColorArea';
+export * from './ColorField';
+export * from './ColorPicker';
+export * from './ColorSlider';
+export { ColorSwatch, type ColorSwatchProps, type ColorSwatchVariantProps } from './ColorSwatch';
+export * from './ColorSwatchPicker';
 export * from './CurrencyInput';
 export * from './DateField';
 export * from './Calendar';

package/src/components/picker/surfaces.tsx

@@ -2,10 +2,12 @@ import { useCallback, useEffect, useRef, useState, type ReactNode, type RefObjec
 import { ScrollView, View } from 'react-native';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import {
+  dataAttributes,
   OverlayContainer,
   useAnchoredOverlay,
   useDismissOverlay,
   useEscapeKey,
+  type OverlayWidthPolicy,
 } from '@cdx-ui/primitives';
 import { cn, mergeRefs } from '@cdx-ui/utils';
 import { Dialog } from '../Dialog';
@@ -107,6 +109,9 @@ interface PickerPopoverSurfaceProps {
   triggerRef?: RefObject<View | null>;
   children: ReactNode;
   className?: string;
+  contentClassName?: string;
+  dataSlot?: string;
+  width?: OverlayWidthPolicy;
 }
 
 export function PickerPopoverSurface({
@@ -117,6 +122,9 @@ export function PickerPopoverSurface({
   triggerRef,
   children,
   className,
+  contentClassName,
+  dataSlot,
+  width = 'anchor',
 }: PickerPopoverSurfaceProps) {
   const contentRef = useRef<View>(null);
   const [dismissEnabled, setDismissEnabled] = useState(false);
@@ -144,7 +152,7 @@ export function PickerPopoverSurface({
     placement: 'bottom-start',
     offset: 4,
     collisionBehavior: 'flip-shift',
-    width: 'anchor',
+    width,
   });
 
   const excludeRefs = triggerRef ? [anchorRef, triggerRef] : [anchorRef];
@@ -168,8 +176,13 @@ export function PickerPopoverSurface({
         className={cn(pickerPopoverContentVariants(), className)}
         style={style}
         accessibilityViewIsModal
+        {...dataAttributes({ slot: dataSlot })}
       >
-        <ScrollView scrollEventThrottle={16} showsVerticalScrollIndicator={false}>
+        <ScrollView
+          contentContainerClassName={contentClassName}
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator={false}
+        >
           {children}
         </ScrollView>
       </View>

package/src/providers/toast/insets-container.tsx

@@ -1,12 +1,21 @@
 import type { ReactNode } from 'react';
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { Platform, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { SafeAreaInsetsContext, type EdgeInsets } from 'react-native-safe-area-context';
 import { FullWindowOverlay, NOTIFICATION_OVERLAY_Z_INDEX } from '@cdx-ui/primitives';
 import type { ToastInsets } from './types';
 
 const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
 
+/**
+ * The viewport spans the whole window, so every full-size layer in it must let
+ * pointer events through to the page. React Native Web only expands `box-none`
+ * for `StyleSheet.create` styles, not inline style objects.
+ */
+export const passThroughStyles = StyleSheet.create({
+  boxNone: { pointerEvents: 'box-none' },
+});
+
 interface InsetsContainerProps {
   /**
    * When true, uses a regular View instead of FullWindowOverlay on iOS.
@@ -41,6 +50,8 @@ interface InsetsContainerProps {
    * Custom wrapper function to wrap the toast content
    * Receives children and should return a component that wraps them
    * The wrapper should apply flex: 1 (via className or style) to ensure proper layout
+   * and `pointerEvents: 'box-none'` (from a `StyleSheet.create` style) so it does not block
+   * interaction with the page behind
    * Can be any component wrapper - KeyboardAvoidingView, View, or any custom component
    */
   contentWrapper?: (children: ReactNode) => React.ReactElement;
@@ -199,20 +210,23 @@ export function InsetsContainer({
   const content = (
     <View
       ref={containerRef}
-      className="absolute web:fixed inset-0 pointer-events-box-none"
+      className="absolute web:fixed inset-0"
       role="region"
       aria-label={announceLabel}
       {...(Platform.OS === 'web' && {
         'aria-live': 'polite',
         'aria-atomic': false,
       })}
-      style={{
-        ...(Platform.OS === 'web' ? { zIndex: NOTIFICATION_OVERLAY_Z_INDEX } : {}),
-        paddingTop: finalInsets.top,
-        paddingBottom: finalInsets.bottom,
-        paddingLeft: finalInsets.left,
-        paddingRight: finalInsets.right,
-      }}
+      style={[
+        passThroughStyles.boxNone,
+        {
+          ...(Platform.OS === 'web' ? { zIndex: NOTIFICATION_OVERLAY_Z_INDEX } : {}),
+          paddingTop: finalInsets.top,
+          paddingBottom: finalInsets.bottom,
+          paddingLeft: finalInsets.left,
+          paddingRight: finalInsets.right,
+        },
+      ]}
     >
       {contentWrapper ? contentWrapper(children) : children}
     </View>

package/src/providers/toast/provider.tsx

@@ -12,7 +12,7 @@ import { useSharedValue } from 'react-native-reanimated';
 import { createPortalFn, useOverlayStackRegistration } from '@cdx-ui/primitives';
 import { DefaultToast } from '../../components/Toast';
 import type { ToastPlacement } from '../../components/Toast/types';
-import { InsetsContainer } from './insets-container';
+import { InsetsContainer, passThroughStyles } from './insets-container';
 import { ToastLifecycleContext, type ToastLifecycleContextValue } from './lifecycle.context';
 import { toastReducer } from './reducer';
 import { ToastConfigContext } from './toast-config.context';
@@ -628,7 +628,7 @@ export function ToastProvider({
         resumeAll={resumeAll}
         hide={hide}
       >
-        <View className="flex-1">
+        <View className="flex-1" style={passThroughStyles.boxNone}>
           {toasts.map((toastItem) => {
             const placement = toastItem.placement;
             const index = placementIndexes[placement];

package/src/providers/toast/types.ts

@@ -79,16 +79,21 @@ export interface ToastProviderProps {
    * Custom wrapper function to wrap the toast content
    * Receives children and should return a component that wraps them
    * The wrapper should apply flex: 1 (via className or style) to ensure proper layout
+   * and `pointerEvents: 'box-none'` so it does not block interaction with the page behind.
+   * On web, `box-none` only takes effect from a `StyleSheet.create` style, not an inline object.
    * Can be any component wrapper - KeyboardAvoidingView, View, or any custom component
    *
    * @example
    * ```tsx
+   * const styles = StyleSheet.create({ passThrough: { pointerEvents: 'box-none' } });
+   *
    * <ToastProvider
    *   contentWrapper={(children) => (
    *     <KeyboardAvoidingView
    *       behavior="padding"
    *       keyboardVerticalOffset={24}
    *       className="flex-1"
+   *       style={styles.passThrough}
    *     >
    *       {children}
    *     </KeyboardAvoidingView>

package/src/styles/constants.ts

@@ -9,6 +9,19 @@ export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
 export const DISABLED_CURSOR =
   'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';
 
+// ─── Content color ───────────────────────────────────────
+// The `color` variant shared by `Text` and `Icon`.
+export const CONTENT_COLOR = {
+  primary: 'text-content-primary',
+  secondary: 'text-content-secondary',
+  tertiary: 'text-content-tertiary',
+  action: 'text-content-action',
+  danger: 'text-content-danger',
+  warning: 'text-content-warning',
+  success: 'text-content-success',
+  info: 'text-content-info',
+} as const;
+
 // Web-only iOS Safari focus-zoom guard. Figma Viewport=Narrow (<600px) uses body/lg
 // (16px / 24px); Viewport=Wide (≥600px) keeps the size variant's original px size.
 export const WEB_NARROW_FIELD_TEXT = 'web:max-[600px]:text-base web:max-[600px]:leading-normal';