@cdx-ui/primitives 0.1.7 → 0.2.0

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

package/src/color-field/ColorFieldRoot.tsx

@@ -0,0 +1,132 @@
+import { forwardRef, useCallback, useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import { useControllableState, useFormControl } from '@cdx-ui/utils';
+import { useOptionalColorPickerContext } from '../color-picker';
+import type { Color } from '../color';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ColorFieldProvider } from './context';
+import type { ColorFieldConfiguration, ColorFieldContextValue, IColorFieldProps } from './types';
+import { formatColorFieldValue, parseColorFieldValue } from './utils';
+
+export type ColorFieldRootProps = IColorFieldProps & {
+  readonly asChild?: boolean;
+};
+
+export const ColorFieldRoot = forwardRef<View, ColorFieldRootProps>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      colorSpace,
+      channel,
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const picker = useOptionalColorPickerContext();
+    const usesPickerContext =
+      picker !== null && valueProp === undefined && defaultValue === undefined;
+    const [localValue, setLocalValue] = useControllableState<Color>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+    const value = usesPickerContext ? picker.value : localValue;
+    const valueRef = useRef(value);
+    valueRef.current = value;
+
+    const formControl = useFormControl({
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired,
+    });
+    const disabled = Boolean(formControl.disabled);
+    const readOnly = Boolean(formControl.readOnly);
+    const invalid = Boolean(formControl['aria-invalid']);
+    const required = Boolean(formControl.required);
+    const configuration = useMemo<ColorFieldConfiguration>(
+      () =>
+        channel
+          ? ({ colorSpace, channel } as ColorFieldConfiguration)
+          : { colorSpace: undefined, channel: undefined },
+      [channel, colorSpace],
+    );
+
+    const commitText = useCallback(
+      (text: string) => {
+        if (disabled || readOnly) {
+          return undefined;
+        }
+
+        const nextValue = parseColorFieldValue(text, valueRef.current, configuration);
+        if (!nextValue) {
+          return undefined;
+        }
+
+        valueRef.current = nextValue;
+        if (usesPickerContext) {
+          onValueChange?.(nextValue);
+          picker.onValueChange(nextValue);
+        } else {
+          setLocalValue(nextValue);
+        }
+        return nextValue;
+      },
+      [configuration, disabled, onValueChange, picker, readOnly, setLocalValue, usesPickerContext],
+    );
+
+    const formatValue = useCallback(
+      () => formatColorFieldValue(valueRef.current, configuration),
+      [configuration],
+    );
+
+    const contextValue = useMemo<ColorFieldContextValue>(
+      () => ({
+        ...configuration,
+        value,
+        disabled,
+        readOnly,
+        invalid,
+        required,
+        commitText,
+        formatValue,
+      }),
+      [commitText, configuration, disabled, formatValue, invalid, readOnly, required, value],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ColorFieldProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled,
+              invalid,
+              readonly: readOnly,
+              required,
+              colorSpace: configuration.colorSpace,
+              channel: configuration.channel,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </ColorFieldProvider>
+    );
+  },
+);
+
+ColorFieldRoot.displayName = 'ColorFieldRoot';

package/src/color-field/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { ColorFieldContextValue } from './types';
+
+export const [ColorFieldProvider, useColorFieldContext] =
+  createContext<ColorFieldContextValue>('ColorFieldContext');

package/src/color-field/index.ts

@@ -0,0 +1,11 @@
+export { ColorFieldRoot } from './ColorFieldRoot';
+export type { ColorFieldRootProps } from './ColorFieldRoot';
+export { ColorFieldInput } from './ColorFieldInput';
+export type { ColorFieldInputProps } from './ColorFieldInput';
+export { useColorFieldContext } from './context';
+export type {
+  ColorFieldCommonProps,
+  ColorFieldConfiguration,
+  IColorFieldInputProps,
+  IColorFieldProps,
+} from './types';

package/src/color-field/types.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { IInputProps } from '../input';
+import type { Color } from '../color';
+
+export type ColorFieldConfiguration =
+  | {
+      readonly colorSpace?: undefined;
+      readonly channel?: undefined;
+    }
+  | {
+      readonly colorSpace: 'rgb';
+      readonly channel: 'red' | 'green' | 'blue';
+    }
+  | {
+      readonly colorSpace: 'hsl';
+      readonly channel: 'hue' | 'saturation' | 'lightness';
+    };
+
+export interface ColorFieldCommonProps extends Omit<ViewProps, 'children'> {
+  /** Current controlled color. */
+  readonly value?: Color;
+  /** Initial color for uncontrolled usage. */
+  readonly defaultValue?: Color;
+  /** Called when the input contains a valid color or channel value. */
+  readonly onValueChange?: (value: Color) => void;
+  readonly isDisabled?: boolean;
+  readonly isReadOnly?: boolean;
+  readonly isInvalid?: boolean;
+  readonly isRequired?: boolean;
+  readonly children?: ReactNode;
+}
+
+export type IColorFieldProps = ColorFieldCommonProps & ColorFieldConfiguration;
+
+export type IColorFieldInputProps = Omit<IInputProps, 'value' | 'defaultValue'>;
+
+export type ColorFieldContextValue = ColorFieldConfiguration & {
+  readonly value: Color | undefined;
+  readonly disabled: boolean;
+  readonly readOnly: boolean;
+  readonly invalid: boolean;
+  readonly required: boolean;
+  readonly commitText: (text: string) => Color | undefined;
+  readonly formatValue: () => string;
+};

package/src/color-field/utils.ts

@@ -0,0 +1,75 @@
+import { parseColor, type Color } from '../color';
+import type { ColorFieldConfiguration } from './types';
+
+const CHANNEL_VALUE_PATTERN = /^([+-]?(?:\d+(?:\.\d+)?|\.\d+))\s*([°%])?$/u;
+
+function formatNumber(value: number): string {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
+export function formatColorFieldValue(
+  value: Color | undefined,
+  configuration: ColorFieldConfiguration,
+): string {
+  if (!value) {
+    return '';
+  }
+
+  if (!configuration.channel) {
+    return value.toString('hex');
+  }
+
+  const channelValue = value.getChannel(configuration.colorSpace, configuration.channel);
+  const formattedValue = formatNumber(channelValue);
+
+  if (configuration.channel === 'hue') {
+    return `${formattedValue}°`;
+  }
+
+  if (configuration.colorSpace === 'hsl') {
+    return `${formattedValue}%`;
+  }
+
+  return formattedValue;
+}
+
+export function parseColorFieldValue(
+  text: string,
+  currentValue: Color | undefined,
+  configuration: ColorFieldConfiguration,
+): Color | undefined {
+  const normalizedText = text.trim();
+
+  if (!configuration.channel) {
+    return parseColor(normalizedText);
+  }
+
+  if (!currentValue) {
+    return undefined;
+  }
+
+  const match = CHANNEL_VALUE_PATTERN.exec(normalizedText);
+  if (!match) {
+    return undefined;
+  }
+
+  const value = Number(match[1]);
+  const unit = match[2];
+  if (!Number.isFinite(value)) {
+    return undefined;
+  }
+
+  if (configuration.colorSpace === 'rgb') {
+    if (unit || value < 0 || value > 255) {
+      return undefined;
+    }
+  } else if (configuration.channel === 'hue') {
+    if (unit === '%' || value < 0 || value > 360) {
+      return undefined;
+    }
+  } else if (unit === '°' || value < 0 || value > 100) {
+    return undefined;
+  }
+
+  return currentValue.withChannel(configuration.colorSpace, configuration.channel, value);
+}

package/src/color-picker/ColorPickerRoot.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, useCallback, useMemo, useRef, type ComponentRef } from 'react';
+import { View } from 'react-native';
+import { mergeRefs, useControllableState } from '@cdx-ui/utils';
+import type { Color } from '../color';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ColorPickerProvider, ColorPickerRootProvider } from './context';
+import type { IColorPickerProps } from './types';
+
+export interface ColorPickerRootProps extends IColorPickerProps {
+  readonly asChild?: boolean;
+}
+
+export const ColorPickerRoot = forwardRef<ComponentRef<typeof View>, ColorPickerRootProps>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      isOpen: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [value, setValueState] = useControllableState<Color>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+    const [open, setOpenState] = useControllableState<boolean>({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const anchorRef = useRef<ComponentRef<typeof View>>(null);
+    const triggerRef = useRef<ComponentRef<typeof View>>(null);
+
+    const setValue = useCallback(
+      (nextValue: Color) => {
+        setValueState(nextValue);
+      },
+      [setValueState],
+    );
+    const setOpen = useCallback(
+      (nextOpen: boolean) => {
+        setOpenState(nextOpen);
+      },
+      [setOpenState],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        value,
+        onValueChange: setValue,
+        open: open ?? false,
+        setOpen,
+        anchorRef,
+        triggerRef,
+      }),
+      [open, setOpen, setValue, value],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ColorPickerRootProvider value={contextValue}>
+        <ColorPickerProvider value={contextValue}>
+          <Comp
+            ref={mergeRefs(ref, anchorRef)}
+            {...props}
+            {...mergeDataAttributes(
+              props,
+              dataAttributes({
+                open: contextValue.open,
+                state: contextValue.open ? 'open' : 'closed',
+              }),
+            )}
+          >
+            {children}
+          </Comp>
+        </ColorPickerProvider>
+      </ColorPickerRootProvider>
+    );
+  },
+);
+
+ColorPickerRoot.displayName = 'ColorPickerRoot';

package/src/color-picker/ColorPickerTrigger.tsx

@@ -0,0 +1,96 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Platform, Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useColorPickerRootContext } from './context';
+import type { IColorPickerTriggerProps } from './types';
+
+export type ColorPickerTriggerProps = IColorPickerTriggerProps;
+
+export const ColorPickerTrigger = forwardRef<
+  ComponentRef<typeof Pressable>,
+  ColorPickerTriggerProps
+>(
+  (
+    {
+      asChild,
+      children,
+      isDisabled,
+      isHovered: isHoveredProp,
+      isActive: isActiveProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      accessibilityLabel = 'Open color picker',
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, setOpen, triggerRef } = useColorPickerRootContext();
+    const disabled = Boolean(isDisabled || props.disabled);
+    const { isFocused, focusProps } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { isPressed, pressProps } = usePress({ isDisabled: disabled }) as {
+      isPressed: boolean;
+      pressProps: Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+    };
+    const { isHovered, hoverProps } = useHover({ isDisabled: disabled });
+    const Comp = asChild ? Slot : Pressable;
+    const platformAccessibilityProps =
+      Platform.OS === 'web'
+        ? {
+            role: 'button' as const,
+            'aria-haspopup': 'dialog' as const,
+            'aria-expanded': open,
+            'aria-disabled': disabled || undefined,
+          }
+        : {
+            accessibilityRole: 'button' as const,
+            accessibilityState: { disabled, expanded: open },
+          };
+
+    return (
+      <Comp
+        ref={mergeRefs(ref, triggerRef)}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
+        {...props}
+        {...platformAccessibilityProps}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            state: open ? 'open' : 'closed',
+            disabled,
+            hover: isHoveredProp || isHovered,
+            active: isActiveProp || isPressed,
+            focus: isFocusedProp || isFocused,
+            focusVisible: isFocusVisibleProp || isFocusVisible,
+          }),
+        )}
+        onPress={composeEventHandlers(onPress, () => setOpen(!open))}
+        onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+        onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+        onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+        onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+        onFocus={composeEventHandlers(onFocus, focusProps.onFocus, focusRingProps.onFocus)}
+        onBlur={composeEventHandlers(onBlur, focusProps.onBlur, focusRingProps.onBlur)}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ColorPickerTrigger.displayName = 'ColorPickerTrigger';

package/src/color-picker/context.tsx

@@ -0,0 +1,47 @@
+import { createContext, useContext, type RefObject } from 'react';
+import type { View } from 'react-native';
+import type { Color } from '../color';
+
+export interface ColorPickerContextValue {
+  value: Color | undefined;
+  onValueChange: (value: Color) => void;
+}
+
+const ColorPickerContext = createContext<ColorPickerContextValue | null>(null);
+
+export const ColorPickerProvider = ColorPickerContext.Provider;
+
+export interface ColorPickerRootContextValue extends ColorPickerContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  anchorRef: RefObject<View | null>;
+  triggerRef: RefObject<View | null>;
+}
+
+const ColorPickerRootContext = createContext<ColorPickerRootContextValue | null>(null);
+
+export const ColorPickerRootProvider = ColorPickerRootContext.Provider;
+
+export function useColorPickerContext(): ColorPickerContextValue {
+  const context = useContext(ColorPickerContext);
+
+  if (!context) {
+    throw new Error('Color picker compound components must be used within ColorPicker');
+  }
+
+  return context;
+}
+
+export function useOptionalColorPickerContext(): ColorPickerContextValue | null {
+  return useContext(ColorPickerContext);
+}
+
+export function useColorPickerRootContext(): ColorPickerRootContextValue {
+  const context = useContext(ColorPickerRootContext);
+
+  if (!context) {
+    throw new Error('ColorPicker compound components must be used within ColorPickerRoot');
+  }
+
+  return context;
+}