@cdx-ui/primitives 0.1.7 → 0.2.0

package/src/color/Color.ts

@@ -0,0 +1,95 @@
+import { parseColor as parseStatelyColor } from '@react-stately/color';
+import type { Color, ColorChannelBySpace, ColorFormat, ColorSpace } from './types';
+
+const NUMBER_PATTERN = '[+-]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)';
+const HEX_PATTERN = /^#[\da-f]{3}(?:[\da-f]{3})?$/iu;
+const RGB_PATTERN = new RegExp(
+  `^rgb\\(\\s*${NUMBER_PATTERN}\\s*,\\s*${NUMBER_PATTERN}\\s*,\\s*${NUMBER_PATTERN}\\s*\\)$`,
+  'iu',
+);
+const HSL_PATTERN = new RegExp(
+  `^hsl\\(\\s*${NUMBER_PATTERN}\\s*,\\s*${NUMBER_PATTERN}%\\s*,\\s*${NUMBER_PATTERN}%\\s*\\)$`,
+  'iu',
+);
+
+type StatelyColor = ReturnType<typeof parseStatelyColor>;
+
+function isSupportedOpaqueColor(value: string): boolean {
+  return HEX_PATTERN.test(value) || RGB_PATTERN.test(value) || HSL_PATTERN.test(value);
+}
+
+function normalizeHue(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+
+  return ((value % 360) + 360) % 360;
+}
+
+function normalizeChannelValue(
+  color: StatelyColor,
+  channel: ColorChannelBySpace[ColorSpace],
+  value: number,
+): number {
+  if (!Number.isFinite(value)) {
+    return color.getChannelValue(channel);
+  }
+
+  if (channel === 'hue') {
+    return normalizeHue(value);
+  }
+
+  const { minValue, maxValue } = color.getChannelRange(channel);
+  const clampedValue = Math.min(maxValue, Math.max(minValue, value));
+
+  return channel === 'red' || channel === 'green' || channel === 'blue'
+    ? Math.round(clampedValue)
+    : clampedValue;
+}
+
+function createColor(color: StatelyColor): Color {
+  return {
+    toString(format: ColorFormat): string {
+      const value = color.toString(format);
+      return format === 'hex' ? value.toUpperCase() : value;
+    },
+    getChannel<S extends ColorSpace>(space: S, channel: ColorChannelBySpace[S]): number {
+      const value = color.toFormat(space).getChannelValue(channel);
+      return channel === 'hue' ? normalizeHue(value) : value;
+    },
+    withChannel<S extends ColorSpace>(
+      space: S,
+      channel: ColorChannelBySpace[S],
+      value: number,
+    ): Color {
+      const convertedColor = color.toFormat(space);
+      const channelValue = normalizeChannelValue(convertedColor, channel, value);
+      return createColor(convertedColor.withChannelValue(channel, channelValue));
+    },
+  };
+}
+
+export function parseColor(value: string): Color | undefined {
+  const normalizedValue = value.trim().toLowerCase();
+
+  if (!isSupportedOpaqueColor(normalizedValue)) {
+    return undefined;
+  }
+
+  try {
+    let color = parseStatelyColor(normalizedValue);
+
+    if (RGB_PATTERN.test(normalizedValue)) {
+      color = color
+        .withChannelValue('red', Math.round(color.getChannelValue('red')))
+        .withChannelValue('green', Math.round(color.getChannelValue('green')))
+        .withChannelValue('blue', Math.round(color.getChannelValue('blue')));
+    } else if (HSL_PATTERN.test(normalizedValue)) {
+      color = color.withChannelValue('hue', normalizeHue(color.getChannelValue('hue')));
+    }
+
+    return createColor(color);
+  } catch {
+    return undefined;
+  }
+}

package/src/color/index.ts

@@ -0,0 +1,2 @@
+export { parseColor } from './Color';
+export type { Color, ColorChannelBySpace, ColorFormat, ColorSpace } from './types';

package/src/color/types.ts

@@ -0,0 +1,19 @@
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+
+export type ColorSpace = 'rgb' | 'hsl' | 'hsb';
+
+export interface ColorChannelBySpace {
+  rgb: 'red' | 'green' | 'blue';
+  hsl: 'hue' | 'saturation' | 'lightness';
+  hsb: 'hue' | 'saturation' | 'brightness';
+}
+
+export interface Color {
+  toString(format: ColorFormat): string;
+  getChannel<S extends ColorSpace>(space: S, channel: ColorChannelBySpace[S]): number;
+  withChannel<S extends ColorSpace>(
+    space: S,
+    channel: ColorChannelBySpace[S],
+    value: number,
+  ): Color;
+}

package/src/color-area/ColorAreaAccessibility.tsx

@@ -0,0 +1,94 @@
+import { useCallback } from 'react';
+import { StyleSheet, View, type AccessibilityActionEvent } from 'react-native';
+import { useColorAreaContext } from './context';
+import { clampColorChannel, colorAreaValueText } from './utils';
+
+export interface ColorAreaAccessibilityProps {
+  readonly accessibilityLabel?: string;
+}
+
+export function ColorAreaAccessibility({ accessibilityLabel }: ColorAreaAccessibilityProps) {
+  const { value, xValue, yValue, step, isDisabled, setXValue, setYValue } = useColorAreaContext();
+
+  const handleSaturationAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      if (event.nativeEvent.actionName === 'increment') {
+        setXValue(xValue + step, true);
+      } else if (event.nativeEvent.actionName === 'decrement') {
+        setXValue(xValue - step, true);
+      }
+    },
+    [setXValue, step, xValue],
+  );
+
+  const handleBrightnessAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      if (event.nativeEvent.actionName === 'increment') {
+        setYValue(yValue + step, true);
+      } else if (event.nativeEvent.actionName === 'decrement') {
+        setYValue(yValue - step, true);
+      }
+    },
+    [setYValue, step, yValue],
+  );
+
+  const actionProps = {
+    accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }],
+  } as const;
+
+  return (
+    <>
+      <View
+        {...actionProps}
+        accessible
+        style={styles.saturationProxy}
+        accessibilityRole="adjustable"
+        accessibilityLabel={accessibilityLabel ? `${accessibilityLabel}, Saturation` : 'Saturation'}
+        accessibilityValue={{
+          min: 0,
+          max: 100,
+          now: Math.round(clampColorChannel(xValue)),
+          text: colorAreaValueText(value),
+        }}
+        accessibilityState={{ disabled: isDisabled }}
+        onAccessibilityAction={handleSaturationAction}
+      />
+      <View
+        {...actionProps}
+        accessible
+        style={styles.brightnessProxy}
+        accessibilityRole="adjustable"
+        accessibilityLabel={accessibilityLabel ? `${accessibilityLabel}, Brightness` : 'Brightness'}
+        accessibilityValue={{
+          min: 0,
+          max: 100,
+          now: Math.round(clampColorChannel(yValue)),
+          text: colorAreaValueText(value),
+        }}
+        accessibilityState={{ disabled: isDisabled }}
+        onAccessibilityAction={handleBrightnessAction}
+      />
+    </>
+  );
+}
+
+ColorAreaAccessibility.displayName = 'ColorAreaAccessibility';
+
+const styles = StyleSheet.create({
+  saturationProxy: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: '50%',
+    pointerEvents: 'none',
+  },
+  brightnessProxy: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: '50%',
+    pointerEvents: 'none',
+  },
+});

package/src/color-area/ColorAreaAccessibility.web.tsx

@@ -0,0 +1,52 @@
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useColorAreaContext } from './context';
+import type { ColorAreaKeyboardEvent } from './types';
+import { colorAreaValueText, snapColorChannel } from './utils';
+
+export interface ColorAreaAccessibilityProps {
+  readonly accessibilityLabel?: string;
+}
+
+export function ColorAreaAccessibility({ accessibilityLabel }: ColorAreaAccessibilityProps) {
+  const { value, xValue, yValue, step, isDisabled, setXValue, setYValue, handleKeyDown } =
+    useColorAreaContext();
+
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    handleKeyDown(event as unknown as ColorAreaKeyboardEvent);
+  };
+
+  return (
+    <>
+      <VisuallyHidden>
+        <input
+          type="range"
+          min={0}
+          max={100}
+          step={step}
+          value={snapColorChannel(xValue, step)}
+          disabled={isDisabled}
+          aria-label={accessibilityLabel ? `${accessibilityLabel}, Saturation` : 'Saturation'}
+          aria-valuetext={colorAreaValueText(value)}
+          onKeyDown={handleInputKeyDown}
+          onChange={(event) => setXValue(Number(event.currentTarget.value), true)}
+        />
+      </VisuallyHidden>
+      <VisuallyHidden>
+        <input
+          type="range"
+          min={0}
+          max={100}
+          step={step}
+          value={snapColorChannel(yValue, step)}
+          disabled={isDisabled}
+          aria-label={accessibilityLabel ? `${accessibilityLabel}, Brightness` : 'Brightness'}
+          aria-valuetext={colorAreaValueText(value)}
+          onKeyDown={handleInputKeyDown}
+          onChange={(event) => setYValue(Number(event.currentTarget.value), true)}
+        />
+      </VisuallyHidden>
+    </>
+  );
+}
+
+ColorAreaAccessibility.displayName = 'ColorAreaAccessibility';

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';