@cdx-ui/primitives 0.1.7 → 0.2.0

package/src/color-slider/index.ts

@@ -0,0 +1,16 @@
+export { ColorSliderRoot, type ColorSliderRootProps } from './ColorSliderRoot';
+export { ColorSliderRail, type ColorSliderRailProps } from './ColorSliderRail';
+export { ColorSliderThumb, type ColorSliderThumbProps } from './ColorSliderThumb';
+export { useColorSliderContext } from './context';
+export type {
+  ColorSliderCommonProps,
+  ColorSliderConfiguration,
+  ColorSliderContextValue,
+  ColorSliderKeyboardEvent,
+  ColorSliderLayout,
+  ColorSliderOrientation,
+  ColorSliderSize,
+  IColorSliderProps,
+  IColorSliderRailProps,
+  IColorSliderThumbProps,
+} from './types';

package/src/color-slider/types.ts

@@ -0,0 +1,94 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import type { Color } from '../color';
+
+export type ColorSliderOrientation = 'horizontal' | 'vertical';
+
+export type ColorSliderConfiguration =
+  | {
+      readonly colorSpace: 'rgb';
+      readonly channel: 'red' | 'green' | 'blue';
+    }
+  | {
+      readonly colorSpace: 'hsl';
+      readonly channel: 'hue' | 'saturation' | 'lightness';
+    }
+  | {
+      readonly colorSpace: 'hsb';
+      readonly channel: 'hue' | 'saturation' | 'brightness';
+    };
+
+export interface ColorSliderCommonProps extends Omit<ViewProps, 'children'> {
+  /** Current controlled color. */
+  readonly value?: Color;
+  /** Initial color for uncontrolled usage. */
+  readonly defaultValue?: Color;
+  /** Called while the selected channel changes. */
+  readonly onValueChange?: (value: Color) => void;
+  /** Called when a pointer, keyboard, or screen reader interaction completes. */
+  readonly onValueChangeComplete?: (value: Color) => void;
+  /** Slider axis. @default `'horizontal'` */
+  readonly orientation?: ColorSliderOrientation;
+  /** Channel increment. Defaults to the channel's natural increment. */
+  readonly step?: number;
+  /** Shift-arrow and page-key increment. @default `10` */
+  readonly pageStep?: number;
+  /** Disables pointer, keyboard, and screen reader interaction. @default `false` */
+  readonly isDisabled?: boolean;
+  readonly children?: ReactNode;
+}
+
+export type IColorSliderProps = ColorSliderCommonProps & ColorSliderConfiguration;
+
+export interface IColorSliderRailProps extends ViewProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export interface IColorSliderThumbProps extends PressableProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export interface ColorSliderSize {
+  readonly width: number;
+  readonly height: number;
+}
+
+export interface ColorSliderLayout extends ColorSliderSize {
+  readonly x: number;
+  readonly y: number;
+}
+
+export type ColorSliderContextValue = ColorSliderConfiguration & {
+  readonly value: Color;
+  readonly channelValue: number;
+  readonly valueLabel: string;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly pageStep: number;
+  readonly percent: number;
+  readonly orientation: ColorSliderOrientation;
+  readonly isDisabled: boolean;
+  readonly isDragging: boolean;
+  readonly accessibilityLabel?: string;
+  readonly layout: ColorSliderLayout | null;
+  readonly thumbSize: ColorSliderSize;
+  readonly gradientColors: readonly string[];
+  readonly setLayout: (layout: ColorSliderLayout) => void;
+  readonly setThumbSize: (size: ColorSliderSize) => void;
+  readonly setIsDragging: (dragging: boolean) => void;
+  readonly setChannelValue: (value: number, complete?: boolean) => void;
+  readonly setValueFromRatio: (ratio: number, complete?: boolean) => void;
+};
+
+export interface ColorSliderKeyboardEvent {
+  readonly nativeEvent?: {
+    readonly key?: string;
+    readonly shiftKey?: boolean;
+  };
+  readonly key?: string;
+  readonly shiftKey?: boolean;
+  preventDefault?: () => void;
+}

package/src/color-slider/utils.ts

@@ -0,0 +1,79 @@
+import type { Color } from '../color';
+import type { ColorSliderConfiguration } from './types';
+
+const HUE_STOPS = [0, 60, 120, 180, 240, 300, 360] as const;
+
+export function clampColorSliderValue(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function getColorSliderRange({ colorSpace, channel }: ColorSliderConfiguration): {
+  min: number;
+  max: number;
+} {
+  if (colorSpace === 'rgb') {
+    return { min: 0, max: 255 };
+  }
+  if (channel === 'hue') {
+    return { min: 0, max: 360 };
+  }
+  return { min: 0, max: 100 };
+}
+
+export function getColorSliderChannelValue(
+  color: Color,
+  configuration: ColorSliderConfiguration,
+): number {
+  if (configuration.colorSpace === 'rgb') {
+    return color.getChannel('rgb', configuration.channel);
+  }
+  if (configuration.colorSpace === 'hsl') {
+    return color.getChannel('hsl', configuration.channel);
+  }
+  return color.getChannel('hsb', configuration.channel);
+}
+
+export function withColorSliderChannel(
+  color: Color,
+  configuration: ColorSliderConfiguration,
+  value: number,
+): Color {
+  if (configuration.colorSpace === 'rgb') {
+    return color.withChannel('rgb', configuration.channel, value);
+  }
+  if (configuration.colorSpace === 'hsl') {
+    return color.withChannel('hsl', configuration.channel, value);
+  }
+  return color.withChannel('hsb', configuration.channel, value);
+}
+
+export function formatColorSliderValue(
+  value: number,
+  configuration: ColorSliderConfiguration,
+): string {
+  const formatted = Number.isInteger(value) ? String(value) : value.toFixed(1);
+  if (configuration.channel === 'hue') {
+    return `${formatted}°`;
+  }
+  if (configuration.colorSpace !== 'rgb') {
+    return `${formatted}%`;
+  }
+  return formatted;
+}
+
+export function getColorSliderGradientColors(
+  color: Color,
+  configuration: ColorSliderConfiguration,
+): readonly string[] {
+  if (configuration.channel === 'hue') {
+    return HUE_STOPS.map((value) =>
+      withColorSliderChannel(color, configuration, value).toString('hex'),
+    );
+  }
+
+  const { min, max } = getColorSliderRange(configuration);
+  return [
+    withColorSliderChannel(color, configuration, min).toString('hex'),
+    withColorSliderChannel(color, configuration, max).toString('hex'),
+  ];
+}

package/src/color-swatch-picker/ColorSwatchPickerItem.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, useEffect, useMemo, type ComponentRef } from 'react';
+import { Pressable } from 'react-native';
+import { RadioRoot } from '../radio';
+import { ColorSwatchPickerItemProvider, useColorSwatchPickerContext } from './context';
+import type { IColorSwatchPickerItemProps } from './types';
+
+export interface ColorSwatchPickerItemProps extends IColorSwatchPickerItemProps {
+  asChild?: boolean;
+}
+
+export const ColorSwatchPickerItem = forwardRef<
+  ComponentRef<typeof Pressable>,
+  ColorSwatchPickerItemProps
+>(
+  (
+    {
+      asChild,
+      color,
+      isDisabled,
+      disabled,
+      accessibilityLabel,
+      'aria-label': ariaLabelProp,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { registerColor } = useColorSwatchPickerContext();
+    const colorValue = color.toString('hex');
+    const label = ariaLabelProp ?? accessibilityLabel ?? colorValue;
+    const contextValue = useMemo(() => ({ color }), [color]);
+
+    useEffect(() => registerColor(color), [color, registerColor]);
+
+    return (
+      <ColorSwatchPickerItemProvider value={contextValue}>
+        <RadioRoot
+          ref={ref}
+          asChild={asChild}
+          value={colorValue}
+          isDisabled={!!(isDisabled || disabled)}
+          disabled={disabled}
+          aria-label={label}
+          accessibilityLabel={label}
+          {...props}
+        >
+          {children}
+        </RadioRoot>
+      </ColorSwatchPickerItemProvider>
+    );
+  },
+);
+
+ColorSwatchPickerItem.displayName = 'ColorSwatchPickerItem';

package/src/color-swatch-picker/ColorSwatchPickerRoot.tsx

@@ -0,0 +1,94 @@
+import { forwardRef, useCallback, useMemo, useRef, type ComponentRef } from 'react';
+import { View } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { RadioGroup } from '../radio';
+import { useOptionalColorPickerContext } from '../color-picker';
+import type { Color } from '../color';
+import { ColorSwatchPickerProvider } from './context';
+import type { IColorSwatchPickerProps } from './types';
+
+export interface ColorSwatchPickerRootProps extends IColorSwatchPickerProps {
+  asChild?: boolean;
+}
+
+export const ColorSwatchPickerRoot = forwardRef<
+  ComponentRef<typeof View>,
+  ColorSwatchPickerRootProps
+>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      isDisabled,
+      accessibilityLabel,
+      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 colorsRef = useRef(new Map<string, Color>());
+
+    const registerColor = useCallback((color: Color) => {
+      const key = color.toString('hex');
+      colorsRef.current.set(key, color);
+
+      return () => {
+        if (colorsRef.current.get(key) === color) {
+          colorsRef.current.delete(key);
+        }
+      };
+    }, []);
+
+    const handleValueChange = useCallback(
+      (key: string) => {
+        const color = colorsRef.current.get(key);
+
+        if (!color) {
+          return;
+        }
+
+        if (usesPickerContext) {
+          onValueChange?.(color);
+          picker.onValueChange(color);
+          return;
+        }
+
+        setLocalValue(color);
+      },
+      [onValueChange, picker, setLocalValue, usesPickerContext],
+    );
+
+    const contextValue = useMemo(() => ({ registerColor }), [registerColor]);
+
+    return (
+      <ColorSwatchPickerProvider value={contextValue}>
+        <RadioGroup
+          ref={ref}
+          asChild={asChild}
+          value={value?.toString('hex')}
+          onChange={handleValueChange}
+          isDisabled={isDisabled}
+          aria-label={props['aria-label'] ?? accessibilityLabel}
+          {...props}
+        >
+          {children}
+        </RadioGroup>
+      </ColorSwatchPickerProvider>
+    );
+  },
+);
+
+ColorSwatchPickerRoot.displayName = 'ColorSwatchPickerRoot';

package/src/color-swatch-picker/context.tsx

@@ -0,0 +1,22 @@
+import { createContext as createReactContext, useContext } from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { ColorSwatchPickerContextValue, ColorSwatchPickerItemContextValue } from './types';
+
+export const [ColorSwatchPickerProvider, useColorSwatchPickerContext] =
+  createContext<ColorSwatchPickerContextValue>('ColorSwatchPickerContext');
+
+const ColorSwatchPickerItemContext = createReactContext<ColorSwatchPickerItemContextValue | null>(
+  null,
+);
+
+export const ColorSwatchPickerItemProvider = ColorSwatchPickerItemContext.Provider;
+
+export function useColorSwatchPickerItemContext(): ColorSwatchPickerItemContextValue {
+  const context = useContext(ColorSwatchPickerItemContext);
+
+  if (!context) {
+    throw new Error('ColorSwatchPicker item slots must be used within ColorSwatchPicker.Item');
+  }
+
+  return context;
+}

package/src/color-swatch-picker/index.ts

@@ -0,0 +1,4 @@
+export { ColorSwatchPickerRoot, type ColorSwatchPickerRootProps } from './ColorSwatchPickerRoot';
+export { ColorSwatchPickerItem, type ColorSwatchPickerItemProps } from './ColorSwatchPickerItem';
+export { useColorSwatchPickerContext, useColorSwatchPickerItemContext } from './context';
+export type { IColorSwatchPickerItemProps, IColorSwatchPickerProps } from './types';

package/src/color-swatch-picker/types.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import type { Color } from '../color';
+
+export interface IColorSwatchPickerProps extends Omit<ViewProps, 'children'> {
+  value?: Color;
+  defaultValue?: Color;
+  onValueChange?: (value: Color) => void;
+  isDisabled?: boolean;
+  children?: ReactNode;
+}
+
+export interface IColorSwatchPickerItemProps extends Omit<PressableProps, 'children'> {
+  color: Color;
+  isDisabled?: boolean;
+  isHovered?: boolean;
+  isActive?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  children?: ReactNode;
+}
+
+export interface ColorSwatchPickerContextValue {
+  registerColor: (color: Color) => () => void;
+}
+
+export interface ColorSwatchPickerItemContextValue {
+  color: Color;
+}

package/src/index.ts

@@ -3,6 +3,12 @@ export * from './breadcrumbs';
 export * from './button';
 export * from './chip';
 export * from './checkbox';
+export * from './color';
+export * from './color-area';
+export * from './color-field';
+export * from './color-picker';
+export * from './color-slider';
+export * from './color-swatch-picker';
 export * from './dialog';
 export * from './drawer';
 export * from './field';
@@ -80,4 +86,5 @@ export {
 export { mapViewPropsToDom, type MapViewPropsToDomOptions } from './utils/mapViewPropsToDom';
 export { assignRef } from './utils/assignRef';
 export { createPortalFn } from './utils/createPortal';
+export { useHasTextAncestor } from './utils/textAncestor';
 export { Slot } from './slot';

package/src/react-native-web.d.ts

@@ -0,0 +1,6 @@
+declare module 'react-native-web/dist/exports/Text/TextAncestorContext' {
+  import type { Context } from 'react';
+
+  const TextAncestorContext: Context<boolean>;
+  export default TextAncestorContext;
+}

package/src/slider/useSliderPointer.ts

@@ -97,6 +97,9 @@ export function useWebSliderDrag({
         return;
       }
 
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+
       const trackSize = orientation === 'horizontal' ? layout.width : layout.height;
       const travel = getThumbTravel(trackSize, thumbSize);
       if (travel <= 0) {

package/src/utils/createPortal.web.ts

@@ -1,7 +1,8 @@
-import type React from 'react';
+import { createElement, type ReactNode, type ReactPortal } from 'react';
 import { createPortal } from 'react-dom';
+import { TextAncestorContext } from './textAncestor';
 
-type CreatePortalFn = (children: React.ReactNode, container: Element) => React.ReactPortal;
+type CreatePortalFn = (children: ReactNode, container: Element) => ReactPortal;
 
 /**
  * Web implementation — statically imports `ReactDOM.createPortal`.
@@ -14,5 +15,10 @@ type CreatePortalFn = (children: React.ReactNode, container: Element) => React.R
  * layout-animation path, leaving web overlays (Select, DatePicker) stuck at
  * opacity 0. A static ESM import guarantees `createPortalFn` resolves on web
  * regardless of the bundler's CommonJS interop.
+ *
+ * Portaled content leaves the DOM subtree of any `Text` it was rendered from,
+ * so the text-ancestor context is reset; otherwise a `Text` inside an overlay
+ * opened from a `Text` would skip its own typography and inherit nothing.
  */
-export const createPortalFn: CreatePortalFn = createPortal;
+export const createPortalFn: CreatePortalFn = (children, container) =>
+  createPortal(createElement(TextAncestorContext.Provider, { value: false }, children), container);

package/src/utils/textAncestor.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext, type Context } from 'react';
+import * as ReactNative from 'react-native';
+
+/**
+ * React Native's own text-ancestor context: `Text` provides `true`, and `View`
+ * (including the one inside `Modal`) resets it to `false`.
+ *
+ * It is exported as `unstable_`, so a React Native release that drops it falls
+ * back to a context nothing provides — every `Text` then styles itself as
+ * top-level instead of the module failing to load.
+ */
+export const TextAncestorContext: Context<boolean> =
+  (ReactNative as { unstable_TextAncestorContext?: Context<boolean> })
+    .unstable_TextAncestorContext ?? createContext(false);
+
+/** `true` when the calling component renders inside a host `Text`. */
+export function useHasTextAncestor(): boolean {
+  return useContext(TextAncestorContext);
+}

package/src/utils/textAncestor.web.ts

@@ -0,0 +1,19 @@
+import { useContext, type Context } from 'react';
+import RNWTextAncestorContext from 'react-native-web/dist/exports/Text/TextAncestorContext';
+
+/**
+ * React Native Web's text-ancestor context, which its `Text` provides. RNW does
+ * not export it, so this is a deep import. RNW's ESM and CommonJS builds each
+ * create their own context, so this must stay on the ESM path: it is the build
+ * bundlers resolve `react-native-web` to, and the path `babel-preset-expo`
+ * rewrites `react-native` imports to under Jest.
+ *
+ * Unlike native, RNW's `View` does not reset the context — CSS inherits through
+ * an inline `View` inside `Text`. DOM portals reset it in `createPortal.web.ts`.
+ */
+export const TextAncestorContext: Context<boolean> = RNWTextAncestorContext;
+
+/** `true` when the calling component renders inside a host `Text`. */
+export function useHasTextAncestor(): boolean {
+  return useContext(TextAncestorContext);
+}