@cdx-ui/components 0.1.7 → 0.2.0

package/src/components/ColorSlider/index.tsx

@@ -0,0 +1,147 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type PressableStateCallbackType, type TextProps } from 'react-native';
+import {
+  ColorSliderRail as ColorSliderRailPrimitive,
+  ColorSliderRoot as ColorSliderRootPrimitive,
+  ColorSliderThumb as ColorSliderThumbPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useColorSliderContext,
+  type IColorSliderProps,
+  type IColorSliderRailProps,
+  type IColorSliderThumbProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { ColorSliderRailPaint } from './ColorSliderRailPaint';
+import {
+  colorSliderOutputVariants,
+  colorSliderRailVariants,
+  colorSliderThumbVariants,
+  colorSliderVariants,
+} from './styles';
+
+export type ColorSliderProps = IColorSliderProps & {
+  readonly asChild?: boolean;
+  readonly className?: string;
+  readonly children?: ReactNode;
+};
+
+const ColorSliderRoot = forwardRef<View, ColorSliderProps>(
+  ({ asChild, className, style, orientation = 'horizontal', children, ...props }, ref) => (
+    <ColorSliderRootPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(colorSliderVariants({ orientation }), className)}
+      style={style}
+      orientation={orientation}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'color-slider' }))}
+    >
+      {children}
+    </ColorSliderRootPrimitive>
+  ),
+);
+
+ColorSliderRoot.displayName = 'ColorSlider';
+
+export interface ColorSliderRailProps extends IColorSliderRailProps {
+  readonly className?: string;
+  readonly children?: ReactNode;
+}
+
+const ColorSliderRail = forwardRef<View, ColorSliderRailProps>(
+  ({ asChild, className, style, hitSlop, children, ...props }, ref) => {
+    const { orientation, thumbSize } = useColorSliderContext();
+    const endCap =
+      orientation === 'vertical'
+        ? { top: thumbSize.height / 2, bottom: thumbSize.height / 2 }
+        : { left: thumbSize.width / 2, right: thumbSize.width / 2 };
+
+    return (
+      <ColorSliderRailPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={cn(colorSliderRailVariants({ orientation }), className)}
+        style={style}
+        hitSlop={hitSlop ?? endCap}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-slider-rail' }))}
+      >
+        <ColorSliderRailPaint />
+        {children}
+      </ColorSliderRailPrimitive>
+    );
+  },
+);
+
+ColorSliderRail.displayName = 'ColorSlider.Rail';
+
+export interface ColorSliderThumbProps extends IColorSliderThumbProps {
+  readonly className?: string;
+  readonly children?: ReactNode;
+}
+
+const ColorSliderThumb = forwardRef<View, ColorSliderThumbProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { value } = useColorSliderContext();
+    const fillStyle = { backgroundColor: value.toString('hex') };
+
+    return (
+      <ColorSliderThumbPrimitive
+        ref={ref}
+        className={cn(colorSliderThumbVariants(), className)}
+        style={
+          typeof style === 'function'
+            ? (state: PressableStateCallbackType) => [fillStyle, style(state)]
+            : [fillStyle, style]
+        }
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-slider-thumb' }))}
+      >
+        {children}
+      </ColorSliderThumbPrimitive>
+    );
+  },
+);
+
+ColorSliderThumb.displayName = 'ColorSlider.Thumb';
+
+export interface ColorSliderOutputProps extends TextProps {
+  readonly asChild?: boolean;
+  readonly className?: string;
+  readonly children?: ReactNode;
+}
+
+const ColorSliderOutput = forwardRef<Text, ColorSliderOutputProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { valueLabel } = useColorSliderContext();
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(colorSliderOutputVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-slider-output' }))}
+      >
+        {children ?? valueLabel}
+      </Comp>
+    );
+  },
+);
+
+ColorSliderOutput.displayName = 'ColorSlider.Output';
+
+type ColorSliderCompoundComponent = typeof ColorSliderRoot & {
+  Rail: typeof ColorSliderRail;
+  Thumb: typeof ColorSliderThumb;
+  Output: typeof ColorSliderOutput;
+};
+
+export const ColorSlider = Object.assign(ColorSliderRoot, {
+  Rail: ColorSliderRail,
+  Thumb: ColorSliderThumb,
+  Output: ColorSliderOutput,
+}) as ColorSliderCompoundComponent;

package/src/components/ColorSlider/styles.ts

@@ -0,0 +1,72 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR } from '../../styles/constants';
+
+export const colorSliderVariants = cva(
+  [
+    'relative select-none',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+    DISABLED_CURSOR,
+  ],
+  {
+    variants: {
+      orientation: {
+        horizontal: 'w-full',
+        vertical: 'h-48',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+// The rail inset equals the `size-5` thumb's radius so the thumb sits flush inside the pill ends.
+export const colorSliderRailVariants = cva(['relative touch-none'], {
+  variants: {
+    orientation: {
+      horizontal: 'mx-2.5 h-5 w-auto',
+      vertical: 'my-2.5 w-5 flex-1',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+});
+
+export const colorSliderRailPaintVariants = cva(
+  ['absolute overflow-hidden rounded-[var(--border-radius-round)]'],
+  {
+    variants: {
+      orientation: {
+        horizontal: '-inset-x-2.5 inset-y-0',
+        vertical: '-inset-y-2.5 inset-x-0',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+export const colorSliderThumbVariants = cva([
+  'z-2 box-border size-5 rounded-[var(--border-radius-round)]',
+  'border-2 border-surface-primary shadow-md',
+  'transition-[transform,box-shadow,opacity] duration-150',
+  'data-[dragging=true]:transition-none',
+  'web:outline-none web:active:cursor-grabbing',
+  Platform.select({
+    default: 'data-[focus=true]:scale-105',
+    web: [
+      'web:cursor-grab',
+      'data-[hover=true]:scale-110',
+      'data-[dragging=true]:scale-110',
+      'data-[focus-visible=true]:ring-4',
+      'data-[focus-visible=true]:ring-stroke-focus',
+    ].join(' '),
+  }),
+]);
+
+export const colorSliderOutputVariants = cva(['text-sm font-medium text-content-primary']);
+
+export type ColorSliderVariantProps = VariantProps<typeof colorSliderVariants>;

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/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/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