@cdx-ui/primitives 0.1.7 → 0.2.1

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;
+}

package/src/color-picker/index.ts

@@ -0,0 +1,12 @@
+export {
+  ColorPickerProvider,
+  ColorPickerRootProvider,
+  useColorPickerContext,
+  useColorPickerRootContext,
+  useOptionalColorPickerContext,
+  type ColorPickerContextValue,
+  type ColorPickerRootContextValue,
+} from './context';
+export { ColorPickerRoot, type ColorPickerRootProps } from './ColorPickerRoot';
+export { ColorPickerTrigger, type ColorPickerTriggerProps } from './ColorPickerTrigger';
+export type { IColorPickerProps, IColorPickerTriggerProps } from './types';

package/src/color-picker/types.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { IButtonProps } from '../button';
+import type { Color } from '../color';
+
+export interface IColorPickerProps extends Omit<ViewProps, 'children'> {
+  /** Current controlled color. */
+  readonly value?: Color;
+  /** Initial color for uncontrolled usage. */
+  readonly defaultValue?: Color;
+  /** Called when a nested color control changes the current color. */
+  readonly onValueChange?: (value: Color) => void;
+  /** Controlled popover open state. */
+  readonly isOpen?: boolean;
+  /** Initial popover open state for uncontrolled usage. @default `false` */
+  readonly defaultOpen?: boolean;
+  /** Called when the popover open state changes. */
+  readonly onOpenChange?: (open: boolean) => void;
+  readonly children?: ReactNode;
+}
+
+export interface IColorPickerTriggerProps extends Omit<IButtonProps, 'children'> {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}