@cdx-ui/components 0.1.6 → 0.2.0

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

package/src/components/ColorSlider/index.tsx

@@ -0,0 +1,147 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type PressableStateCallbackType, type TextProps } from 'react-native';
+import {
+  ColorSliderRail as ColorSliderRailPrimitive,
+  ColorSliderRoot as ColorSliderRootPrimitive,
+  ColorSliderThumb as ColorSliderThumbPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useColorSliderContext,
+  type IColorSliderProps,
+  type IColorSliderRailProps,
+  type IColorSliderThumbProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { ColorSliderRailPaint } from './ColorSliderRailPaint';
+import {
+  colorSliderOutputVariants,
+  colorSliderRailVariants,
+  colorSliderThumbVariants,
+  colorSliderVariants,
+} from './styles';
+
+export type ColorSliderProps = IColorSliderProps & {
+  readonly asChild?: boolean;
+  readonly className?: string;
+  readonly children?: ReactNode;
+};
+
+const ColorSliderRoot = forwardRef<View, ColorSliderProps>(
+  ({ asChild, className, style, orientation = 'horizontal', children, ...props }, ref) => (
+    <ColorSliderRootPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(colorSliderVariants({ orientation }), className)}
+      style={style}
+      orientation={orientation}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'color-slider' }))}
+    >
+      {children}
+    </ColorSliderRootPrimitive>
+  ),
+);
+
+ColorSliderRoot.displayName = 'ColorSlider';
+
+export interface ColorSliderRailProps extends IColorSliderRailProps {
+  readonly className?: string;
+  readonly children?: ReactNode;
+}
+
+const ColorSliderRail = forwardRef<View, ColorSliderRailProps>(
+  ({ asChild, className, style, hitSlop, children, ...props }, ref) => {
+    const { orientation, thumbSize } = useColorSliderContext();
+    const endCap =
+      orientation === 'vertical'
+        ? { top: thumbSize.height / 2, bottom: thumbSize.height / 2 }
+        : { left: thumbSize.width / 2, right: thumbSize.width / 2 };
+
+    return (
+      <ColorSliderRailPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={cn(colorSliderRailVariants({ orientation }), className)}
+        style={style}
+        hitSlop={hitSlop ?? endCap}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-slider-rail' }))}
+      >
+        <ColorSliderRailPaint />
+        {children}
+      </ColorSliderRailPrimitive>
+    );
+  },
+);
+
+ColorSliderRail.displayName = 'ColorSlider.Rail';
+
+export interface ColorSliderThumbProps extends IColorSliderThumbProps {
+  readonly className?: string;
+  readonly children?: ReactNode;
+}
+
+const ColorSliderThumb = forwardRef<View, ColorSliderThumbProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { value } = useColorSliderContext();
+    const fillStyle = { backgroundColor: value.toString('hex') };
+
+    return (
+      <ColorSliderThumbPrimitive
+        ref={ref}
+        className={cn(colorSliderThumbVariants(), className)}
+        style={
+          typeof style === 'function'
+            ? (state: PressableStateCallbackType) => [fillStyle, style(state)]
+            : [fillStyle, style]
+        }
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-slider-thumb' }))}
+      >
+        {children}
+      </ColorSliderThumbPrimitive>
+    );
+  },
+);
+
+ColorSliderThumb.displayName = 'ColorSlider.Thumb';
+
+export interface ColorSliderOutputProps extends TextProps {
+  readonly asChild?: boolean;
+  readonly className?: string;
+  readonly children?: ReactNode;
+}
+
+const ColorSliderOutput = forwardRef<Text, ColorSliderOutputProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { valueLabel } = useColorSliderContext();
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(colorSliderOutputVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'color-slider-output' }))}
+      >
+        {children ?? valueLabel}
+      </Comp>
+    );
+  },
+);
+
+ColorSliderOutput.displayName = 'ColorSlider.Output';
+
+type ColorSliderCompoundComponent = typeof ColorSliderRoot & {
+  Rail: typeof ColorSliderRail;
+  Thumb: typeof ColorSliderThumb;
+  Output: typeof ColorSliderOutput;
+};
+
+export const ColorSlider = Object.assign(ColorSliderRoot, {
+  Rail: ColorSliderRail,
+  Thumb: ColorSliderThumb,
+  Output: ColorSliderOutput,
+}) as ColorSliderCompoundComponent;

package/src/components/ColorSlider/styles.ts

@@ -0,0 +1,72 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR } from '../../styles/constants';
+
+export const colorSliderVariants = cva(
+  [
+    'relative select-none',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+    DISABLED_CURSOR,
+  ],
+  {
+    variants: {
+      orientation: {
+        horizontal: 'w-full',
+        vertical: 'h-48',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+// The rail inset equals the `size-5` thumb's radius so the thumb sits flush inside the pill ends.
+export const colorSliderRailVariants = cva(['relative touch-none'], {
+  variants: {
+    orientation: {
+      horizontal: 'mx-2.5 h-5 w-auto',
+      vertical: 'my-2.5 w-5 flex-1',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+});
+
+export const colorSliderRailPaintVariants = cva(
+  ['absolute overflow-hidden rounded-[var(--border-radius-round)]'],
+  {
+    variants: {
+      orientation: {
+        horizontal: '-inset-x-2.5 inset-y-0',
+        vertical: '-inset-y-2.5 inset-x-0',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+export const colorSliderThumbVariants = cva([
+  'z-2 box-border size-5 rounded-[var(--border-radius-round)]',
+  'border-2 border-surface-primary shadow-md',
+  'transition-[transform,box-shadow,opacity] duration-150',
+  'data-[dragging=true]:transition-none',
+  'web:outline-none web:active:cursor-grabbing',
+  Platform.select({
+    default: 'data-[focus=true]:scale-105',
+    web: [
+      'web:cursor-grab',
+      'data-[hover=true]:scale-110',
+      'data-[dragging=true]:scale-110',
+      'data-[focus-visible=true]:ring-4',
+      'data-[focus-visible=true]:ring-stroke-focus',
+    ].join(' '),
+  }),
+]);
+
+export const colorSliderOutputVariants = cva(['text-sm font-medium text-content-primary']);
+
+export type ColorSliderVariantProps = VariantProps<typeof colorSliderVariants>;