@cdx-ui/primitives 0.1.6 → 0.2.0

package/src/color-area/ColorAreaRoot.tsx

@@ -0,0 +1,326 @@
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  I18nManager,
+  PanResponder,
+  Platform,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+} from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { parseColor, type Color } from '../color';
+import { useOptionalColorPickerContext } from '../color-picker';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ColorAreaAccessibility } from './ColorAreaAccessibility';
+import { ColorAreaProvider } from './context';
+import type {
+  ColorAreaContextValue,
+  ColorAreaKeyboardEvent,
+  ColorAreaLayout,
+  IColorAreaProps,
+} from './types';
+import { clampColorChannel, snapColorChannel } from './utils';
+
+function createDefaultColor(): Color {
+  const color = parseColor('#FF0000');
+  if (!color) {
+    throw new Error('ColorArea default color could not be parsed');
+  }
+  return color;
+}
+
+const DEFAULT_COLOR = createDefaultColor();
+const EMPTY_LAYOUT: ColorAreaLayout = { width: 0, height: 0 };
+
+function getFinitePoint(event: GestureResponderEvent): { x: number; y: number } | null {
+  const { locationX: x, locationY: y } = event.nativeEvent;
+  return Number.isFinite(x) && Number.isFinite(y) ? { x, y } : null;
+}
+
+export interface ColorAreaRootProps extends IColorAreaProps {
+  readonly asChild?: boolean;
+}
+
+export const ColorAreaRoot = forwardRef<View, ColorAreaRootProps>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      onValueChangeComplete,
+      colorSpace = 'hsb',
+      xChannel = 'saturation',
+      yChannel = 'brightness',
+      step = 1,
+      pageStep = 10,
+      isRTL = I18nManager.isRTL,
+      isDisabled = false,
+      accessibilityLabel,
+      children,
+      onLayout,
+      ...props
+    },
+    ref,
+  ) => {
+    const picker = useOptionalColorPickerContext();
+    const usesPickerContext =
+      picker !== null && valueProp === undefined && defaultValue === undefined;
+    const [localValue, setLocalValue] = useControllableState<Color>({
+      prop: valueProp,
+      defaultProp: defaultValue ?? DEFAULT_COLOR,
+      onChange: onValueChange,
+    });
+    const value = (usesPickerContext ? picker.value : localValue) ?? DEFAULT_COLOR;
+    const [layout, setLayoutState] = useState<ColorAreaLayout>(EMPTY_LAYOUT);
+    const [thumbSize, setThumbSizeState] = useState<ColorAreaLayout>(EMPTY_LAYOUT);
+
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    const layoutRef = useRef(layout);
+    layoutRef.current = layout;
+    const isDisabledRef = useRef(isDisabled);
+    isDisabledRef.current = isDisabled;
+    const setChannelsFromPointRef = useRef<
+      ((x: number, y: number, complete?: boolean) => void) | undefined
+    >(undefined);
+    const lastValidPointRef = useRef<{ x: number; y: number } | null>(null);
+
+    const commitValue = useCallback(
+      (next: Color, complete = false) => {
+        if (isDisabled) {
+          return;
+        }
+
+        valueRef.current = next;
+        if (usesPickerContext) {
+          onValueChange?.(next);
+          picker.onValueChange(next);
+        } else {
+          setLocalValue(next);
+        }
+        if (complete) {
+          onValueChangeComplete?.(next);
+        }
+      },
+      [isDisabled, onValueChange, onValueChangeComplete, picker, setLocalValue, usesPickerContext],
+    );
+
+    const setXValue = useCallback(
+      (nextValue: number, complete = false) => {
+        commitValue(
+          valueRef.current.withChannel(colorSpace, xChannel, snapColorChannel(nextValue, step)),
+          complete,
+        );
+      },
+      [colorSpace, commitValue, step, xChannel],
+    );
+
+    const setYValue = useCallback(
+      (nextValue: number, complete = false) => {
+        commitValue(
+          valueRef.current.withChannel(colorSpace, yChannel, snapColorChannel(nextValue, step)),
+          complete,
+        );
+      },
+      [colorSpace, commitValue, step, yChannel],
+    );
+
+    const setChannelsFromPoint = useCallback(
+      (x: number, y: number, complete = false) => {
+        const currentLayout = layoutRef.current;
+        if (
+          isDisabledRef.current ||
+          !Number.isFinite(x) ||
+          !Number.isFinite(y) ||
+          !Number.isFinite(currentLayout.width) ||
+          !Number.isFinite(currentLayout.height) ||
+          currentLayout.width <= 0 ||
+          currentLayout.height <= 0
+        ) {
+          return;
+        }
+
+        const visualXRatio = clampColorChannel(x, 0, currentLayout.width) / currentLayout.width;
+        const xRatio = isRTL ? 1 - visualXRatio : visualXRatio;
+        const yRatio = 1 - clampColorChannel(y, 0, currentLayout.height) / currentLayout.height;
+        const next = valueRef.current
+          .withChannel(colorSpace, xChannel, xRatio * 100)
+          .withChannel(colorSpace, yChannel, yRatio * 100);
+
+        commitValue(next, complete);
+      },
+      [colorSpace, commitValue, isRTL, xChannel, yChannel],
+    );
+    setChannelsFromPointRef.current = setChannelsFromPoint;
+
+    const handleKeyDown = useCallback(
+      (event: ColorAreaKeyboardEvent) => {
+        if (isDisabled) {
+          return;
+        }
+
+        const key = event.nativeEvent?.key ?? event.key;
+        const shiftKey = event.nativeEvent?.shiftKey ?? event.shiftKey;
+        const increment = shiftKey ? pageStep : step;
+        const currentX = valueRef.current.getChannel(colorSpace, xChannel);
+        const currentY = valueRef.current.getChannel(colorSpace, yChannel);
+        let handled = true;
+
+        if (key === 'ArrowLeft') {
+          setXValue(currentX + (isRTL ? increment : -increment), true);
+        } else if (key === 'ArrowRight') {
+          setXValue(currentX + (isRTL ? -increment : increment), true);
+        } else if (key === 'ArrowUp') {
+          setYValue(currentY + increment, true);
+        } else if (key === 'ArrowDown') {
+          setYValue(currentY - increment, true);
+        } else if (key === 'PageUp') {
+          setYValue(currentY + pageStep, true);
+        } else if (key === 'PageDown') {
+          setYValue(currentY - pageStep, true);
+        } else if (key === 'Home') {
+          setXValue(currentX + (isRTL ? pageStep : -pageStep), true);
+        } else if (key === 'End') {
+          setXValue(currentX + (isRTL ? -pageStep : pageStep), true);
+        } else {
+          handled = false;
+        }
+
+        if (handled) {
+          event.preventDefault?.();
+        }
+      },
+      [colorSpace, isDisabled, isRTL, pageStep, setXValue, setYValue, step, xChannel, yChannel],
+    );
+
+    const panResponder = useMemo(() => {
+      const updateFromEvent = (event: GestureResponderEvent, complete = false) => {
+        const point = getFinitePoint(event);
+        if (point) {
+          lastValidPointRef.current = point;
+        }
+        const resolvedPoint = point ?? lastValidPointRef.current;
+        if (resolvedPoint) {
+          setChannelsFromPointRef.current?.(resolvedPoint.x, resolvedPoint.y, complete);
+        }
+      };
+
+      return PanResponder.create({
+        onStartShouldSetPanResponder: () => !isDisabledRef.current,
+        onMoveShouldSetPanResponder: () => !isDisabledRef.current,
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true,
+        onPanResponderGrant: (event) => {
+          lastValidPointRef.current = null;
+          updateFromEvent(event);
+        },
+        onPanResponderMove: (event) => {
+          updateFromEvent(event);
+        },
+        onPanResponderRelease: (event) => {
+          updateFromEvent(event, true);
+          lastValidPointRef.current = null;
+        },
+        onPanResponderTerminate: (event) => {
+          updateFromEvent(event, true);
+          lastValidPointRef.current = null;
+        },
+      });
+    }, []);
+
+    const setLayout = useCallback((next: ColorAreaLayout) => {
+      setLayoutState((previous) =>
+        previous.width === next.width && previous.height === next.height ? previous : next,
+      );
+    }, []);
+
+    const setThumbSize = useCallback((next: ColorAreaLayout) => {
+      setThumbSizeState((previous) =>
+        previous.width === next.width && previous.height === next.height ? previous : next,
+      );
+    }, []);
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        setLayout({ width, height });
+        onLayout?.(event);
+      },
+      [onLayout, setLayout],
+    );
+
+    const xValue = value.getChannel(colorSpace, xChannel);
+    const yValue = value.getChannel(colorSpace, yChannel);
+    const contextValue = useMemo<ColorAreaContextValue>(
+      () => ({
+        value,
+        xValue,
+        yValue,
+        xPercent: clampColorChannel(xValue),
+        yPercent: clampColorChannel(yValue),
+        layout,
+        thumbSize,
+        isRTL,
+        isDisabled,
+        step,
+        pageStep,
+        setLayout,
+        setThumbSize,
+        setChannelsFromPoint,
+        setXValue,
+        setYValue,
+        handleKeyDown,
+      }),
+      [
+        handleKeyDown,
+        isDisabled,
+        isRTL,
+        layout,
+        pageStep,
+        setChannelsFromPoint,
+        setLayout,
+        setThumbSize,
+        setXValue,
+        setYValue,
+        step,
+        thumbSize,
+        value,
+        xValue,
+        yValue,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ColorAreaProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          {...panResponder.panHandlers}
+          onLayout={handleLayout}
+          role={Platform.OS === 'web' ? 'group' : undefined}
+          aria-label={props['aria-label'] ?? accessibilityLabel}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityState={{ disabled: isDisabled }}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: isDisabled,
+              colorSpace,
+              xChannel,
+              yChannel,
+            }),
+          )}
+        >
+          {children}
+          <ColorAreaAccessibility accessibilityLabel={accessibilityLabel} />
+        </Comp>
+      </ColorAreaProvider>
+    );
+  },
+);
+
+ColorAreaRoot.displayName = 'ColorAreaRoot';

package/src/color-area/ColorAreaThumb.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, useCallback, useMemo } from 'react';
+import { View, type LayoutChangeEvent, type ViewStyle } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useColorAreaContext } from './context';
+import type { IColorAreaThumbProps } from './types';
+
+export interface ColorAreaThumbProps extends IColorAreaThumbProps {}
+
+export const ColorAreaThumb = forwardRef<View, ColorAreaThumbProps>(
+  ({ asChild, style, onLayout, children, ...props }, ref) => {
+    const { xPercent, yPercent, layout, thumbSize, isRTL, setThumbSize } = useColorAreaContext();
+
+    const positionStyle = useMemo<ViewStyle>(() => {
+      const visualXPercent = isRTL ? 100 - xPercent : xPercent;
+      const translateX = (visualXPercent / 100) * layout.width - thumbSize.width / 2;
+      const translateY = ((100 - yPercent) / 100) * layout.height - thumbSize.height / 2;
+
+      return {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        transform: [{ translateX }, { translateY }],
+      };
+    }, [isRTL, layout.height, layout.width, thumbSize.height, thumbSize.width, xPercent, yPercent]);
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        setThumbSize({ width, height });
+        onLayout?.(event);
+      },
+      [onLayout, setThumbSize],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        {...props}
+        accessible={false}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        onLayout={handleLayout}
+        style={[positionStyle, style]}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-area-thumb' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ColorAreaThumb.displayName = 'ColorAreaThumb';

package/src/color-area/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { ColorAreaContextValue } from './types';
+
+export const [ColorAreaProvider, useColorAreaContext] =
+  createContext<ColorAreaContextValue>('ColorAreaContext');

package/src/color-area/index.ts

@@ -0,0 +1,10 @@
+export { ColorAreaRoot, type ColorAreaRootProps } from './ColorAreaRoot';
+export { ColorAreaThumb, type ColorAreaThumbProps } from './ColorAreaThumb';
+export { useColorAreaContext } from './context';
+export type {
+  ColorAreaContextValue,
+  ColorAreaKeyboardEvent,
+  ColorAreaLayout,
+  IColorAreaProps,
+  IColorAreaThumbProps,
+} from './types';

package/src/color-area/types.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { Color } from '../color';
+
+export interface IColorAreaProps extends Omit<ViewProps, 'children'> {
+  /** Current controlled color. */
+  readonly value?: Color;
+  /** Initial color for uncontrolled usage. */
+  readonly defaultValue?: Color;
+  /** Called while either color channel changes. */
+  readonly onValueChange?: (value: Color) => void;
+  /** Called when a pointer, keyboard, or screen reader interaction completes. */
+  readonly onValueChangeComplete?: (value: Color) => void;
+  /** Color space represented by the area. @default `'hsb'` */
+  readonly colorSpace?: 'hsb';
+  /** Horizontal channel. @default `'saturation'` */
+  readonly xChannel?: 'saturation';
+  /** Vertical channel. @default `'brightness'` */
+  readonly yChannel?: 'brightness';
+  /** Arrow-key and screen-reader increment. @default `1` */
+  readonly step?: number;
+  /** Shift-arrow and page-key increment. @default `10` */
+  readonly pageStep?: number;
+  /** Overrides the platform layout direction for horizontal interaction. */
+  readonly isRTL?: boolean;
+  /** Disables pointer, keyboard, and screen reader interaction. @default `false` */
+  readonly isDisabled?: boolean;
+  readonly children?: ReactNode;
+}
+
+export interface IColorAreaThumbProps extends ViewProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export interface ColorAreaLayout {
+  readonly width: number;
+  readonly height: number;
+}
+
+export interface ColorAreaContextValue {
+  readonly value: Color;
+  readonly xValue: number;
+  readonly yValue: number;
+  readonly xPercent: number;
+  readonly yPercent: number;
+  readonly layout: ColorAreaLayout;
+  readonly thumbSize: ColorAreaLayout;
+  readonly isRTL: boolean;
+  readonly isDisabled: boolean;
+  readonly step: number;
+  readonly pageStep: number;
+  readonly setLayout: (layout: ColorAreaLayout) => void;
+  readonly setThumbSize: (size: ColorAreaLayout) => void;
+  readonly setChannelsFromPoint: (x: number, y: number, complete?: boolean) => void;
+  readonly setXValue: (value: number, complete?: boolean) => void;
+  readonly setYValue: (value: number, complete?: boolean) => void;
+  readonly handleKeyDown: (event: ColorAreaKeyboardEvent) => void;
+}
+
+export interface ColorAreaKeyboardEvent {
+  readonly nativeEvent?: {
+    readonly key?: string;
+    readonly shiftKey?: boolean;
+  };
+  readonly key?: string;
+  readonly shiftKey?: boolean;
+  preventDefault?: () => void;
+}

package/src/color-area/utils.ts

@@ -0,0 +1,51 @@
+import type { Color } from '../color';
+
+export function clampColorChannel(value: number, min = 0, max = 100): number {
+  if (!Number.isFinite(value)) {
+    return min;
+  }
+  return Math.min(max, Math.max(min, value));
+}
+
+export function snapColorChannel(value: number, step: number, min = 0, max = 100): number {
+  const clamped = clampColorChannel(value, min, max);
+  const snapped = step > 0 ? min + Math.round((clamped - min) / step) * step : clamped;
+  return clampColorChannel(snapped, min, max);
+}
+
+function describeColor(color: Color): string {
+  const hue = clampColorChannel(color.getChannel('hsb', 'hue'), 0, 360);
+  const saturation = clampColorChannel(color.getChannel('hsb', 'saturation'));
+  const brightness = clampColorChannel(color.getChannel('hsb', 'brightness'));
+
+  if (brightness <= 10) {
+    return 'black';
+  }
+  if (saturation <= 10) {
+    if (brightness >= 90) {
+      return 'white';
+    }
+    return brightness < 45 ? 'dark gray' : brightness > 75 ? 'light gray' : 'gray';
+  }
+
+  const names = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple', 'magenta'];
+  const index = Math.round((((hue % 360) + 360) % 360) / 45) % names.length;
+  const tone = brightness < 40 ? 'dark ' : brightness > 80 ? 'light ' : '';
+  const intensity = saturation > 75 ? 'vibrant ' : saturation < 40 ? 'muted ' : '';
+
+  return `${tone}${intensity}${names[index]}`;
+}
+
+export function colorAreaValueText(color: Color, changedChannel?: 'saturation' | 'brightness') {
+  const saturation = Math.round(clampColorChannel(color.getChannel('hsb', 'saturation')));
+  const brightness = Math.round(clampColorChannel(color.getChannel('hsb', 'brightness')));
+  const colorName = describeColor(color);
+
+  if (changedChannel === 'saturation') {
+    return `Saturation ${String(saturation)}%, ${colorName}`;
+  }
+  if (changedChannel === 'brightness') {
+    return `Brightness ${String(brightness)}%, ${colorName}`;
+  }
+  return `Saturation ${String(saturation)}%, Brightness ${String(brightness)}%, ${colorName}`;
+}

package/src/color-field/ColorFieldInput.tsx

@@ -0,0 +1,66 @@
+import { forwardRef, useEffect, useState } from 'react';
+import { TextInput } from 'react-native';
+import { InputField } from '../input';
+import { useColorFieldContext } from './context';
+import type { IColorFieldInputProps } from './types';
+
+export type ColorFieldInputProps = IColorFieldInputProps;
+
+export const ColorFieldInput = forwardRef<TextInput, ColorFieldInputProps>(
+  (
+    {
+      onChangeText,
+      onFocus,
+      onBlur,
+      editable,
+      keyboardType,
+      autoCapitalize = 'none',
+      autoCorrect = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const { value, colorSpace, disabled, readOnly, invalid, required, commitText, formatValue } =
+      useColorFieldContext();
+    const [text, setText] = useState(formatValue);
+    const [isEditing, setIsEditing] = useState(false);
+
+    useEffect(() => {
+      if (!isEditing) {
+        setText(formatValue());
+      }
+    }, [formatValue, isEditing, value]);
+
+    return (
+      <InputField
+        ref={ref}
+        {...props}
+        value={text}
+        editable={editable ?? !(disabled || readOnly)}
+        disabled={disabled}
+        isDisabled={disabled}
+        isReadOnly={readOnly}
+        isInvalid={invalid}
+        isRequired={required}
+        keyboardType={keyboardType ?? (colorSpace ? 'decimal-pad' : 'default')}
+        autoCapitalize={autoCapitalize}
+        autoCorrect={autoCorrect}
+        onChangeText={(nextText) => {
+          onChangeText?.(nextText);
+          setText(nextText);
+          commitText(nextText);
+        }}
+        onFocus={(event) => {
+          setIsEditing(true);
+          onFocus?.(event);
+        }}
+        onBlur={(event) => {
+          setIsEditing(false);
+          onBlur?.(event);
+        }}
+      />
+    );
+  },
+);
+
+ColorFieldInput.displayName = 'ColorFieldInput';