@cdx-ui/components 0.1.7 → 0.2.1

package/src/components/ColorSwatch/index.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useOptionalColorPickerContext,
+  type Color,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { colorSwatchVariants, type ColorSwatchVariantProps } from './styles';
+
+export interface ColorSwatchProps extends ViewProps, ColorSwatchVariantProps {
+  asChild?: boolean;
+  color?: Color;
+  /** Visual dimension. `xs` = 16, `sm` = 24, and `lg` = 40. */
+  size?: 'xs' | 'sm' | 'lg';
+  /** Swatch outline shape. */
+  shape?: 'circle' | 'square';
+  className?: string;
+}
+
+interface ColorSwatchViewProps extends ColorSwatchProps {
+  slot: string;
+}
+
+export const ColorSwatchView = forwardRef<ComponentRef<typeof View>, ColorSwatchViewProps>(
+  ({ asChild, color, size = 'sm', shape = 'circle', slot, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(colorSwatchVariants({ size, shape }), className)}
+        style={[color ? { backgroundColor: color.toString('hex') } : undefined, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot }))}
+      />
+    );
+  },
+);
+
+ColorSwatchView.displayName = 'ColorSwatchView';
+
+export const ColorSwatch = forwardRef<ComponentRef<typeof View>, ColorSwatchProps>(
+  ({ color: colorProp, ...props }, ref) => {
+    const picker = useOptionalColorPickerContext();
+    const color = colorProp ?? picker?.value;
+
+    return <ColorSwatchView ref={ref} color={color} slot="color-swatch" {...props} />;
+  },
+);
+
+ColorSwatch.displayName = 'ColorSwatch';
+
+export type { ColorSwatchVariantProps };

package/src/components/ColorSwatch/styles.ts

@@ -0,0 +1,24 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export const colorSwatchVariants = cva(
+  ['shrink-0 overflow-hidden border border-stroke-secondary'],
+  {
+    variants: {
+      size: {
+        xs: 'size-4',
+        sm: 'size-6',
+        lg: 'size-10',
+      },
+      shape: {
+        circle: 'rounded-[var(--border-radius-round)]',
+        square: 'rounded-[var(--border-radius-default)]',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+      shape: 'circle',
+    },
+  },
+);
+
+export type ColorSwatchVariantProps = VariantProps<typeof colorSwatchVariants>;

package/src/components/ColorSwatchPicker/index.tsx

@@ -0,0 +1,150 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View } from 'react-native';
+import { Check } from '@cdx-ui/icons';
+import {
+  ColorSwatchPickerItem as ColorSwatchPickerItemPrimitive,
+  ColorSwatchPickerRoot as ColorSwatchPickerRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useColorSwatchPickerItemContext,
+  useRadioContext,
+  type IColorSwatchPickerItemProps,
+  type IColorSwatchPickerProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import { ColorSwatchView, type ColorSwatchProps } from '../ColorSwatch';
+import {
+  colorSwatchPickerIndicatorIconVariants,
+  colorSwatchPickerIndicatorVariants,
+  colorSwatchPickerItemVariants,
+  colorSwatchPickerVariants,
+} from './styles';
+
+export interface ColorSwatchPickerProps extends IColorSwatchPickerProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const ColorSwatchPickerRoot = forwardRef<View, ColorSwatchPickerProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <ColorSwatchPickerRootPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(colorSwatchPickerVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'color-swatch-picker' }))}
+    >
+      {children}
+    </ColorSwatchPickerRootPrimitive>
+  ),
+);
+
+ColorSwatchPickerRoot.displayName = 'ColorSwatchPicker';
+
+export interface ColorSwatchPickerItemProps extends IColorSwatchPickerItemProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const ColorSwatchPickerItem = forwardRef<View, ColorSwatchPickerItemProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <ColorSwatchPickerItemPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(colorSwatchPickerItemVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'color-swatch-picker-item' }))}
+    >
+      {children}
+    </ColorSwatchPickerItemPrimitive>
+  ),
+);
+
+ColorSwatchPickerItem.displayName = 'ColorSwatchPicker.Item';
+
+export interface ColorSwatchPickerSwatchProps extends Omit<ColorSwatchProps, 'color'> {}
+
+const ColorSwatchPickerSwatch = forwardRef<View, ColorSwatchPickerSwatchProps>((props, ref) => {
+  const { color } = useColorSwatchPickerItemContext();
+
+  return <ColorSwatchView ref={ref} color={color} slot="color-swatch-picker-swatch" {...props} />;
+});
+
+ColorSwatchPickerSwatch.displayName = 'ColorSwatchPicker.Swatch';
+
+export interface ColorSwatchPickerIndicatorProps extends Omit<IconProps, 'as' | 'children'> {
+  asChild?: boolean;
+  as?: IconProps['as'];
+  className?: string;
+  children?: ReactNode;
+}
+
+const ColorSwatchPickerIndicator = ({
+  asChild,
+  as = Check,
+  className,
+  style,
+  children,
+  ...props
+}: ColorSwatchPickerIndicatorProps) => {
+  const { isChecked } = useRadioContext();
+
+  if (!isChecked) {
+    return null;
+  }
+
+  const computedClassName = cn(colorSwatchPickerIndicatorIconVariants(), className);
+  const slotData = mergeDataAttributes(
+    props,
+    dataAttributes({ slot: 'color-swatch-picker-indicator' }),
+  );
+
+  return (
+    <View
+      className={colorSwatchPickerIndicatorVariants()}
+      accessibilityElementsHidden
+      aria-hidden
+      {...slotData}
+    >
+      {asChild ? (
+        <Slot
+          className={computedClassName}
+          style={style}
+          accessibilityElementsHidden
+          aria-hidden
+          {...props}
+        >
+          {children}
+        </Slot>
+      ) : (
+        <Icon
+          as={as}
+          className={computedClassName}
+          style={style}
+          accessibilityElementsHidden
+          aria-hidden
+          {...props}
+        />
+      )}
+    </View>
+  );
+};
+
+ColorSwatchPickerIndicator.displayName = 'ColorSwatchPicker.Indicator';
+
+type ColorSwatchPickerCompoundComponent = typeof ColorSwatchPickerRoot & {
+  Item: typeof ColorSwatchPickerItem;
+  Swatch: typeof ColorSwatchPickerSwatch;
+  Indicator: typeof ColorSwatchPickerIndicator;
+};
+
+export const ColorSwatchPicker = Object.assign(ColorSwatchPickerRoot, {
+  Item: ColorSwatchPickerItem,
+  Swatch: ColorSwatchPickerSwatch,
+  Indicator: ColorSwatchPickerIndicator,
+}) as ColorSwatchPickerCompoundComponent;

package/src/components/ColorSwatchPicker/styles.ts

@@ -0,0 +1,32 @@
+import { Platform } from 'react-native';
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const colorSwatchPickerVariants = cva([
+  'w-full flex-row flex-wrap justify-center gap-x-1 gap-y-2',
+]);
+
+export const colorSwatchPickerItemVariants = cva([
+  'relative min-h-11 min-w-11 items-center justify-center',
+  'rounded-[var(--border-radius-default)]',
+  TRANSITION_COLORS,
+  DISABLED_CURSOR,
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  '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',
+  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',
+    ].join(' '),
+  }),
+]);
+
+export const colorSwatchPickerIndicatorVariants = cva([
+  'pointer-events-none absolute inset-0 z-10 items-center justify-center',
+]);
+
+export const colorSwatchPickerIndicatorIconVariants = cva('size-4 text-[var(--color-white)]');

package/src/components/DatePicker/index.tsx

@@ -91,12 +91,21 @@ DatePickerTriggerIndicator.displayName = 'DatePicker.TriggerIndicator';
 
 type DatePickerCalendarProps = Omit<
   CalendarProps,
-  'value' | 'onValueChange' | 'minValue' | 'maxValue'
+  'value' | 'onValueChange' | 'minValue' | 'maxValue' | 'isDateUnavailable'
 >;
 
 const DatePickerCalendar = forwardRef<View, DatePickerCalendarProps>(({ ...props }, ref) => {
-  const { value, onValueChange, open, setOpen, minValue, maxValue, locale, labels } =
-    useDatePickerContext();
+  const {
+    value,
+    onValueChange,
+    open,
+    setOpen,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    locale,
+    labels,
+  } = useDatePickerContext();
 
   const handleValueChange = useCallback(
     (next: DateId | undefined) => {
@@ -115,6 +124,7 @@ const DatePickerCalendar = forwardRef<View, DatePickerCalendarProps>(({ ...props
       onValueChange={handleValueChange}
       minValue={minValue}
       maxValue={maxValue}
+      isDateUnavailable={isDateUnavailable}
       locale={locale}
       labels={labels}
       {...props}

package/src/components/Divider/index.tsx

@@ -22,7 +22,7 @@ export interface DividerProps extends ViewProps {
   children?: ReactNode;
 }
 
-export interface DividerLabelProps extends TextProps {
+export interface DividerLabelProps extends Omit<TextProps, 'color'> {
   /** Renders the consumer's child element in place of the default `Text` host. */
   asChild?: boolean;
   className?: string;

package/src/components/Field/index.tsx

@@ -177,14 +177,20 @@ FieldErrorIcon.displayName = 'Field.ErrorIcon';
 export interface FieldErrorProps extends ViewProps, FieldErrorVariantProps {
   asChild?: boolean;
   className?: string;
+  /**
+   * Error message. When omitted (or `null`), falls back to the message the field's control
+   * reports — for example `DatePicker`'s localized `minValue` / `maxValue` / `isDateUnavailable`
+   * message.
+   */
   children?: ReactNode;
 }
 
 const FieldError = forwardRef<View, FieldErrorProps>(
   ({ asChild, className, children, style, ...props }, ref) => {
-    const { isInvalid, feedbackId, setHasFeedbackText } = useFormControlContext();
+    const { isInvalid, errorMessage, feedbackId, setHasFeedbackText } = useFormControlContext();
+    const content = children ?? errorMessage;
 
-    const visible = Boolean(isInvalid && children);
+    const visible = Boolean(isInvalid && content);
 
     useEffect(() => {
       if (!visible) {
@@ -217,7 +223,7 @@ const FieldError = forwardRef<View, FieldErrorProps>(
         {...mergeDataAttributes(props, dataAttributes({ slot: 'field-error' }))}
       >
         <FieldErrorIcon />
-        <Text className={textClassName}>{children}</Text>
+        <Text className={textClassName}>{content}</Text>
       </Comp>
     );
   },

package/src/components/Heading/styles.ts

@@ -19,6 +19,9 @@ export const headingStyle = cva(
         xs: 'heading-xs',
       },
     },
+    defaultVariants: {
+      size: 'lg',
+    },
   },
 );
 

package/src/components/Icon/index.tsx

@@ -1,13 +1,30 @@
+import { useEffect } from 'react';
 import { withUniwind } from 'uniwind';
 import { cn } from '@cdx-ui/utils';
 import type { ForgeIcon, ForgeIconProps } from '@cdx-ui/icons';
+import { CONTENT_COLOR } from '../../styles/constants';
+import { iconStyle, type IconVariantProps } from './styles';
 
-export type IconProps = ForgeIconProps & {
+export type IconColor = NonNullable<IconVariantProps['color']>;
+
+type SvgColor = NonNullable<ForgeIconProps['color']>;
+
+export type IconProps = Omit<ForgeIconProps, 'color'> & {
+  /**
+   * Semantic content color, mapped to the matching `text-content-*` token.
+   *
+   * Any other value is deprecated: it is passed to the SVG unchanged, as before
+   * the semantic colors existed, and warns once in development.
+   * @default 'primary'
+   */
+  color?: IconColor | (string & {}) | Exclude<SvgColor, string>;
   className?: string; // TODO: Why does this need to specified manually?
   as: ForgeIcon;
 };
 
-function IconImpl({ as: IconComponent, ...props }: IconProps) {
+type IconImplProps = ForgeIconProps & Pick<IconProps, 'as' | 'className'>;
+
+function IconImpl({ as: IconComponent, ...props }: IconImplProps) {
   return <IconComponent {...props} />;
 }
 
@@ -41,19 +58,42 @@ const StyledIcon = withUniwind(withUniwind(IconImpl), {
  * import { Icon } from '@cdx-ui/components';
  * import { ArrowRight } from '@cdx-ui/icons';
  *
- * <Icon as={ArrowRight} className="text-red-500 size-4" />
+ * <Icon as={ArrowRight} color="action" className="size-4" />
  * ```
  *
  * @param {ForgeIcon} as - The Forge icon component to render.
- * @param {string} className - Utility classes to style the icon using Uniwind.
+ * @param {IconColor} color - Semantic content color. Defaults to `primary`.
+ * @param {string} className - Utility classes for size and placement, merged after the defaults.
  * @param {number} size - Icon size (overrides the size class).
  * @param {...ForgeIconProps} ...props - Additional icon props passed to the "as" icon.
  */
-export function Icon({ as: IconComponent, className, ...props }: IconProps) {
+let hasWarnedIconRawColor = false;
+
+function isIconColor(color: NonNullable<IconProps['color']>): color is IconColor {
+  return typeof color === 'string' && Object.prototype.hasOwnProperty.call(CONTENT_COLOR, color);
+}
+
+export function Icon({ as: IconComponent, color = 'primary', className, ...props }: IconProps) {
+  const isSemantic = isIconColor(color);
+  const semanticColor = isSemantic ? color : null;
+  const rawColor = isSemantic ? undefined : color;
+
+  useEffect(() => {
+    if (__DEV__ && rawColor !== undefined && !hasWarnedIconRawColor) {
+      hasWarnedIconRawColor = true;
+      console.warn(
+        `[Icon] Passing a raw \`color\` value is deprecated and will be removed in a future major release. Use a semantic color (${Object.keys(CONTENT_COLOR).join(', ')}) instead.`,
+      );
+    }
+  }, [rawColor]);
+
+  // A raw color skips the color class and reaches the SVG directly; `withUniwind`
+  // only maps `color` from `className` when the prop is undefined.
   return (
     <StyledIcon
       as={IconComponent}
-      className={cn('text-content-primary size-5', className)}
+      className={cn(iconStyle({ color: semanticColor }), className)}
+      color={rawColor}
       {...props}
     />
   );

package/src/components/Icon/styles.ts

@@ -0,0 +1,15 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { CONTENT_COLOR } from '../../styles/constants';
+
+// `shrink-0` matters on web only: react-native-svg renders a bare `<svg>`, which
+// falls back to the browser's `flex-shrink: 1`. Yoga already defaults to 0.
+export const iconStyle = cva(['size-5 shrink-0'], {
+  variants: {
+    color: CONTENT_COLOR,
+  },
+  defaultVariants: {
+    color: 'primary',
+  },
+});
+
+export type IconVariantProps = VariantProps<typeof iconStyle>;

package/src/components/Input/index.tsx

@@ -151,7 +151,7 @@ InputSlot.displayName = 'Input.Slot';
 // INPUT ICON
 // =============================================================================
 
-export interface InputIconProps extends Omit<IconProps, 'children' | 'as'> {
+export interface InputIconProps extends Omit<IconProps, 'children' | 'as' | 'color'> {
   /** Render the consumer's child element in place of the default icon host. */
   asChild?: boolean;
   /**

package/src/components/Link/index.tsx

@@ -91,7 +91,7 @@ LinkLabel.displayName = 'Link.Label';
 // STYLED ICON COMPONENT
 // =============================================================================
 
-export interface LinkIconProps extends Omit<IconProps, 'children'> {}
+export interface LinkIconProps extends Omit<IconProps, 'children' | 'color'> {}
 
 const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
   const { visited } = useLinkInteractionContext();

package/src/components/Menu/index.tsx

@@ -422,7 +422,7 @@ const MenuItemLabel = forwardRef<Text, MenuItemLabelProps>(
 
 MenuItemLabel.displayName = 'Menu.ItemLabel';
 
-export interface MenuItemIconProps extends Omit<IconProps, 'as' | 'children'> {
+export interface MenuItemIconProps extends Omit<IconProps, 'as' | 'children' | 'color'> {
   asChild?: boolean;
   as?: IconProps['as'];
   position?: IconSlotPosition;
@@ -508,7 +508,7 @@ const MenuItemShortcut = forwardRef<Text, MenuItemShortcutProps>(
 
 MenuItemShortcut.displayName = 'Menu.ItemShortcut';
 
-export interface MenuItemIndicatorProps extends Omit<IconProps, 'as' | 'children'> {
+export interface MenuItemIndicatorProps extends Omit<IconProps, 'as' | 'children' | 'color'> {
   asChild?: boolean;
   as?: IconProps['as'];
   isChecked?: boolean;

package/src/components/Select/index.tsx

@@ -191,7 +191,7 @@ SelectValue.displayName = 'Select.Value';
 // STYLED ICON (styled-only, reads context for state=open / invalid)
 // =============================================================================
 
-export interface SelectIconProps extends Omit<IconProps, 'children' | 'as'> {
+export interface SelectIconProps extends Omit<IconProps, 'children' | 'as' | 'color'> {
   asChild?: boolean;
   /**
    * Forge icon component to render. Required unless `asChild` is set, in which

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;