@cdx-ui/components 0.1.7 → 0.2.0

package/src/components/ColorArea/ColorAreaPaint.web.tsx

@@ -0,0 +1,31 @@
+import { View, type ViewStyle } from 'react-native';
+import { useColorAreaContext } from '@cdx-ui/primitives';
+import { colorAreaPaintVariants } from './styles';
+
+export function ColorAreaPaint() {
+  const { value, isRTL } = useColorAreaContext();
+  const hue = value
+    .withChannel('hsb', 'saturation', 100)
+    .withChannel('hsb', 'brightness', 100)
+    .toString('hex');
+  const direction = isRTL ? 'to left' : 'to right';
+  const paintStyle = {
+    backgroundImage: [
+      'linear-gradient(to bottom, transparent, #000000)',
+      `linear-gradient(${direction}, #FFFFFF, ${hue})`,
+    ].join(', '),
+    pointerEvents: 'none',
+  } as unknown as ViewStyle;
+
+  return (
+    <View
+      className={colorAreaPaintVariants()}
+      style={paintStyle}
+      accessible={false}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    />
+  );
+}
+
+ColorAreaPaint.displayName = 'ColorAreaPaint';

package/src/components/ColorArea/index.tsx

@@ -0,0 +1,71 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View } from 'react-native';
+import {
+  ColorAreaRoot as ColorAreaRootPrimitive,
+  ColorAreaThumb as ColorAreaThumbPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  useColorAreaContext,
+  type IColorAreaProps,
+  type IColorAreaThumbProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { ColorAreaPaint } from './ColorAreaPaint';
+import { colorAreaThumbVariants, colorAreaVariants } from './styles';
+
+export interface ColorAreaProps extends IColorAreaProps {
+  readonly asChild?: boolean;
+  readonly className?: string;
+  readonly children?: ReactNode;
+}
+
+const ColorAreaRoot = forwardRef<View, ColorAreaProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <ColorAreaRootPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(colorAreaVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'color-area' }))}
+    >
+      <ColorAreaPaint />
+      {children}
+    </ColorAreaRootPrimitive>
+  ),
+);
+
+ColorAreaRoot.displayName = 'ColorArea';
+
+export interface ColorAreaThumbProps extends IColorAreaThumbProps {
+  readonly className?: string;
+  readonly children?: ReactNode;
+}
+
+const ColorAreaThumb = forwardRef<View, ColorAreaThumbProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { value } = useColorAreaContext();
+
+    return (
+      <ColorAreaThumbPrimitive
+        ref={ref}
+        className={cn(colorAreaThumbVariants(), className)}
+        style={[{ backgroundColor: value.toString('hex') }, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-area-thumb' }))}
+      >
+        {children}
+      </ColorAreaThumbPrimitive>
+    );
+  },
+);
+
+ColorAreaThumb.displayName = 'ColorArea.Thumb';
+
+type ColorAreaCompoundComponent = typeof ColorAreaRoot & {
+  Thumb: typeof ColorAreaThumb;
+};
+
+export const ColorArea = Object.assign(ColorAreaRoot, {
+  Thumb: ColorAreaThumb,
+}) as ColorAreaCompoundComponent;

package/src/components/ColorArea/styles.ts

@@ -0,0 +1,18 @@
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR } from '../../styles/constants';
+
+export const colorAreaVariants = cva([
+  'relative aspect-square w-full touch-none select-none',
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  DISABLED_CURSOR,
+]);
+
+export const colorAreaPaintVariants = cva([
+  'absolute inset-0 overflow-hidden rounded-[var(--border-radius-default)]',
+]);
+
+export const colorAreaThumbVariants = cva([
+  'z-2 size-5 rounded-[var(--border-radius-round)]',
+  'border-2 border-surface-primary shadow-md',
+  'transition-none',
+]);

package/src/components/ColorField/index.tsx

@@ -0,0 +1,181 @@
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { TextInput, View, type ViewProps } from 'react-native';
+import {
+  ColorFieldInput as ColorFieldInputPrimitive,
+  ColorFieldRoot as ColorFieldRootPrimitive,
+  InputRoot as InputRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useColorFieldContext,
+  type ColorFieldInputProps as ColorFieldInputPrimitiveProps,
+  type ColorFieldRootProps as ColorFieldRootPrimitiveProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
+import {
+  colorFieldGroupVariants,
+  colorFieldInputPlaceholderVariants,
+  colorFieldInputVariants,
+  colorFieldSlotVariants,
+  colorFieldVariants,
+  type ColorFieldGroupVariantProps,
+} from './styles';
+
+const SCOPE = 'COLOR_FIELD';
+
+type ColorFieldStyleContext = ColorFieldGroupVariantProps & {
+  readonly fullWidth?: boolean;
+};
+
+const useColorFieldStyleContext = (): ColorFieldStyleContext =>
+  (useParentContext()[SCOPE] as ColorFieldStyleContext | undefined) ?? {};
+
+export type ColorFieldProps = ColorFieldRootPrimitiveProps &
+  ColorFieldGroupVariantProps & {
+    readonly className?: string;
+    /** When true (the default), the group stretches to fill its container. */
+    readonly fullWidth?: boolean;
+  };
+
+const ColorFieldRoot = forwardRef<View, ColorFieldProps>(
+  (
+    { variant = 'outline', size = 'default', fullWidth, className, children, style, ...props },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const context = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, size, fullWidth } }),
+      [fullWidth, parent, size, variant],
+    );
+
+    return (
+      <ParentContext.Provider value={context}>
+        <ColorFieldRootPrimitive
+          ref={ref}
+          className={cn(colorFieldVariants(), className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'color-field' }))}
+        >
+          {children}
+        </ColorFieldRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+ColorFieldRoot.displayName = 'ColorField';
+
+export interface ColorFieldGroupProps extends ViewProps, ColorFieldGroupVariantProps {
+  readonly asChild?: boolean;
+  readonly className?: string;
+  readonly children?: ReactNode;
+  readonly fullWidth?: boolean;
+}
+
+const ColorFieldGroup = forwardRef<View, ColorFieldGroupProps>(
+  ({ asChild, variant, size, fullWidth, className, children, style, ...props }, ref) => {
+    const inherited = useColorFieldStyleContext();
+    const { disabled, invalid, readOnly, required } = useColorFieldContext();
+    const resolvedVariant = variant ?? inherited.variant ?? 'outline';
+    const resolvedSize = size ?? inherited.size ?? 'default';
+    const resolvedFullWidth = fullWidth ?? inherited.fullWidth ?? true;
+
+    return (
+      <InputRootPrimitive
+        ref={ref}
+        asChild={asChild}
+        isDisabled={disabled}
+        isInvalid={invalid}
+        isReadOnly={readOnly}
+        isRequired={required}
+        className={cn(
+          colorFieldGroupVariants({
+            variant: resolvedVariant,
+            size: resolvedSize,
+          }),
+          !resolvedFullWidth && 'w-auto self-start',
+          className,
+        )}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-field-group' }))}
+      >
+        {children}
+      </InputRootPrimitive>
+    );
+  },
+);
+
+ColorFieldGroup.displayName = 'ColorField.Group';
+
+export type ColorFieldInputProps = ColorFieldInputPrimitiveProps & {
+  readonly className?: string;
+  readonly placeholderTextColorClassName?: string;
+};
+
+const ColorFieldInput = forwardRef<TextInput, ColorFieldInputProps>(
+  ({ className, placeholderTextColorClassName, style, ...props }, ref) => {
+    const { size } = useColorFieldStyleContext();
+
+    return (
+      <ColorFieldInputPrimitive
+        ref={ref}
+        className={cn(colorFieldInputVariants({ size: size ?? 'default' }), className)}
+        placeholderTextColorClassName={cn(
+          colorFieldInputPlaceholderVariants(),
+          placeholderTextColorClassName,
+        )}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-field-input' }))}
+      />
+    );
+  },
+);
+
+ColorFieldInput.displayName = 'ColorField.Input';
+
+export interface ColorFieldSlotProps extends ViewProps {
+  readonly asChild?: boolean;
+  readonly className?: string;
+  readonly children?: ReactNode;
+  readonly position?: IconSlotPosition;
+}
+
+const ColorFieldSlot = forwardRef<View, ColorFieldSlotProps>(
+  ({ asChild, position, className, children, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(colorFieldSlotVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'color-field-slot' }),
+          positionToDataIcon(position),
+        )}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ColorFieldSlot.displayName = 'ColorField.Slot';
+
+type ColorFieldCompoundComponent = typeof ColorFieldRoot & {
+  Group: typeof ColorFieldGroup;
+  Input: typeof ColorFieldInput;
+  Slot: typeof ColorFieldSlot;
+};
+
+export const ColorField = Object.assign(ColorFieldRoot, {
+  Group: ColorFieldGroup,
+  Input: ColorFieldInput,
+  Slot: ColorFieldSlot,
+}) as ColorFieldCompoundComponent;

package/src/components/ColorField/styles.ts

@@ -0,0 +1,20 @@
+import { cva } from '@cdx-ui/utils';
+import {
+  inputFieldPlaceholderVariants,
+  inputFieldVariants,
+  inputRootVariants,
+  inputSlotVariants,
+  type InputVariantProps,
+} from '../Input/styles';
+
+export const colorFieldVariants = cva('gap-1.5');
+
+export const colorFieldGroupVariants = inputRootVariants;
+
+export const colorFieldInputVariants = inputFieldVariants;
+
+export const colorFieldInputPlaceholderVariants = inputFieldPlaceholderVariants;
+
+export const colorFieldSlotVariants = inputSlotVariants;
+
+export type ColorFieldGroupVariantProps = InputVariantProps;

package/src/components/ColorPicker/index.tsx

@@ -0,0 +1,110 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View } from 'react-native';
+import {
+  ColorPickerProvider,
+  ColorPickerRoot as ColorPickerRootPrimitive,
+  ColorPickerRootProvider,
+  ColorPickerTrigger as ColorPickerTriggerPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  useColorPickerRootContext,
+  type ColorPickerRootProps as ColorPickerRootPrimitiveProps,
+  type ColorPickerTriggerProps as ColorPickerTriggerPrimitiveProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { PickerPopoverSurface } from '../picker/surfaces';
+import {
+  colorPickerPopoverContentVariants,
+  colorPickerPopoverVariants,
+  colorPickerTriggerVariants,
+  colorPickerVariants,
+} from './styles';
+
+export interface ColorPickerProps extends ColorPickerRootPrimitiveProps {
+  readonly className?: string;
+}
+
+const ColorPickerRoot = forwardRef<View, ColorPickerProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <ColorPickerRootPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(colorPickerVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'color-picker' }))}
+    >
+      {children}
+    </ColorPickerRootPrimitive>
+  ),
+);
+
+ColorPickerRoot.displayName = 'ColorPicker';
+
+export interface ColorPickerTriggerProps extends ColorPickerTriggerPrimitiveProps {
+  readonly className?: string;
+}
+
+const ColorPickerTrigger = forwardRef<View, ColorPickerTriggerProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <ColorPickerTriggerPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={asChild ? className : cn(colorPickerTriggerVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'color-picker-trigger' }))}
+    >
+      {children}
+    </ColorPickerTriggerPrimitive>
+  ),
+);
+
+ColorPickerTrigger.displayName = 'ColorPicker.Trigger';
+
+export interface ColorPickerPopoverProps {
+  readonly className?: string;
+  readonly contentClassName?: string;
+  readonly children: ReactNode;
+}
+
+const registerPopoverSurface = (type: 'popover') => {
+  void type;
+};
+
+function ColorPickerPopover({ className, contentClassName, children }: ColorPickerPopoverProps) {
+  const context = useColorPickerRootContext();
+
+  return (
+    <PickerPopoverSurface
+      open={context.open}
+      setOpen={context.setOpen}
+      registerSurface={registerPopoverSurface}
+      anchorRef={context.anchorRef}
+      triggerRef={context.triggerRef}
+      className={cn(colorPickerPopoverVariants(), className)}
+      contentClassName={cn(colorPickerPopoverContentVariants(), contentClassName)}
+      dataSlot="color-picker-popover"
+      width="content"
+    >
+      <ColorPickerRootProvider value={context}>
+        <ColorPickerProvider value={context}>{children}</ColorPickerProvider>
+      </ColorPickerRootProvider>
+    </PickerPopoverSurface>
+  );
+}
+
+ColorPickerPopover.displayName = 'ColorPicker.Popover';
+
+type ColorPickerCompoundComponent = typeof ColorPickerRoot & {
+  Trigger: typeof ColorPickerTrigger;
+  Popover: typeof ColorPickerPopover;
+};
+
+export const ColorPicker = Object.assign(ColorPickerRoot, {
+  Trigger: ColorPickerTrigger,
+  Popover: ColorPickerPopover,
+}) as ColorPickerCompoundComponent;
+
+export { parseColor } from '@cdx-ui/primitives';
+export type { Color } from '@cdx-ui/primitives';

package/src/components/ColorPicker/styles.ts

@@ -0,0 +1,33 @@
+import { Platform } from 'react-native';
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const colorPickerVariants = cva(['items-start gap-2']);
+
+export const colorPickerTriggerVariants = cva([
+  'h-10 self-start flex-row items-center justify-center gap-2 px-3',
+  'rounded-[var(--border-radius-button)]',
+  'border border-stroke-action bg-transparent',
+  TRANSITION_COLORS,
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  DISABLED_CURSOR,
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  'web:data-[focus-visible=true]:ring-2',
+  'web:data-[focus-visible=true]:ring-stroke-focus',
+  'web:data-[focus-visible=true]:ring-offset-2',
+  Platform.select({
+    default: 'data-[active=true]:bg-surface-action-tint-active',
+    web: [
+      'data-[hover=true]:bg-surface-action-tint-hover',
+      'data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+    ].join(' '),
+  }),
+]);
+
+/**
+ * Padding lives on the scroll content, not the popover: the popover's `ScrollView` clips at its
+ * own bounds, and slider/area thumbs overhang their track ends by half a thumb plus shadow.
+ */
+export const colorPickerPopoverVariants = cva(['w-80 p-0']);
+
+export const colorPickerPopoverContentVariants = cva(['gap-3 p-4']);

package/src/components/ColorSlider/ColorSliderRailPaint.tsx

@@ -0,0 +1,60 @@
+import { useId } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Defs, LinearGradient, Rect, Stop, Svg } from 'react-native-svg';
+import { useColorSliderContext } from '@cdx-ui/primitives';
+import { colorSliderRailPaintVariants } from './styles';
+
+function getStopOffset(index: number, count: number, railSize: number, endCap: number): string {
+  const ratio = index / (count - 1);
+  if (railSize <= 0 || endCap <= 0) {
+    return `${String(ratio * 100)}%`;
+  }
+  return `${String(((endCap + ratio * railSize) / (railSize + 2 * endCap)) * 100)}%`;
+}
+
+export function ColorSliderRailPaint() {
+  const { gradientColors, orientation, layout, thumbSize } = useColorSliderContext();
+  const gradientId = useId();
+  const isVertical = orientation === 'vertical';
+  const railSize = (isVertical ? layout?.height : layout?.width) ?? 0;
+  const endCap = (isVertical ? thumbSize.height : thumbSize.width) / 2;
+
+  return (
+    <View
+      className={colorSliderRailPaintVariants({ orientation })}
+      style={styles.paint}
+      accessible={false}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    >
+      <Svg width="100%" height="100%">
+        <Defs>
+          <LinearGradient
+            id={gradientId}
+            x1="0%"
+            y1={orientation === 'vertical' ? '100%' : '0%'}
+            x2={orientation === 'horizontal' ? '100%' : '0%'}
+            y2="0%"
+          >
+            {gradientColors.map((color, index) => (
+              <Stop
+                key={`${color}-${String(index)}`}
+                offset={getStopOffset(index, gradientColors.length, railSize, endCap)}
+                stopColor={color}
+              />
+            ))}
+          </LinearGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill={`url(#${gradientId})`} />
+      </Svg>
+    </View>
+  );
+}
+
+ColorSliderRailPaint.displayName = 'ColorSliderRailPaint';
+
+const styles = StyleSheet.create({
+  paint: {
+    pointerEvents: 'none',
+  },
+});

package/src/components/ColorSlider/ColorSliderRailPaint.web.tsx

@@ -0,0 +1,33 @@
+import { View, type ViewStyle } from 'react-native';
+import { useColorSliderContext } from '@cdx-ui/primitives';
+import { colorSliderRailPaintVariants } from './styles';
+
+function getGradientStops(colors: readonly string[], endCap: number): string {
+  if (endCap <= 0 || colors.length < 2) {
+    return colors.join(', ');
+  }
+  const first = `${colors[0]} ${String(endCap)}px`;
+  const last = `${colors[colors.length - 1]} calc(100% - ${String(endCap)}px)`;
+  return [first, ...colors.slice(1, -1), last].join(', ');
+}
+
+export function ColorSliderRailPaint() {
+  const { gradientColors, orientation, thumbSize } = useColorSliderContext();
+  const direction = orientation === 'vertical' ? 'to top' : 'to right';
+  const endCap = (orientation === 'vertical' ? thumbSize.height : thumbSize.width) / 2;
+  const paintStyle = {
+    backgroundImage: `linear-gradient(${direction}, ${getGradientStops(gradientColors, endCap)})`,
+  } as unknown as ViewStyle;
+
+  return (
+    <View
+      className={colorSliderRailPaintVariants({ orientation })}
+      style={paintStyle}
+      accessible={false}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    />
+  );
+}
+
+ColorSliderRailPaint.displayName = 'ColorSliderRailPaint';