@cdx-ui/components 0.1.6 → 0.2.0

package/src/components/ColorSwatch/index.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useOptionalColorPickerContext,
+  type Color,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { colorSwatchVariants, type ColorSwatchVariantProps } from './styles';
+
+export interface ColorSwatchProps extends ViewProps, ColorSwatchVariantProps {
+  asChild?: boolean;
+  color?: Color;
+  /** Visual dimension. `xs` = 16, `sm` = 24, and `lg` = 40. */
+  size?: 'xs' | 'sm' | 'lg';
+  /** Swatch outline shape. */
+  shape?: 'circle' | 'square';
+  className?: string;
+}
+
+interface ColorSwatchViewProps extends ColorSwatchProps {
+  slot: string;
+}
+
+export const ColorSwatchView = forwardRef<ComponentRef<typeof View>, ColorSwatchViewProps>(
+  ({ asChild, color, size = 'sm', shape = 'circle', slot, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(colorSwatchVariants({ size, shape }), className)}
+        style={[color ? { backgroundColor: color.toString('hex') } : undefined, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot }))}
+      />
+    );
+  },
+);
+
+ColorSwatchView.displayName = 'ColorSwatchView';
+
+export const ColorSwatch = forwardRef<ComponentRef<typeof View>, ColorSwatchProps>(
+  ({ color: colorProp, ...props }, ref) => {
+    const picker = useOptionalColorPickerContext();
+    const color = colorProp ?? picker?.value;
+
+    return <ColorSwatchView ref={ref} color={color} slot="color-swatch" {...props} />;
+  },
+);
+
+ColorSwatch.displayName = 'ColorSwatch';
+
+export type { ColorSwatchVariantProps };

package/src/components/ColorSwatch/styles.ts

@@ -0,0 +1,24 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export const colorSwatchVariants = cva(
+  ['shrink-0 overflow-hidden border border-stroke-secondary'],
+  {
+    variants: {
+      size: {
+        xs: 'size-4',
+        sm: 'size-6',
+        lg: 'size-10',
+      },
+      shape: {
+        circle: 'rounded-[var(--border-radius-round)]',
+        square: 'rounded-[var(--border-radius-default)]',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+      shape: 'circle',
+    },
+  },
+);
+
+export type ColorSwatchVariantProps = VariantProps<typeof colorSwatchVariants>;

package/src/components/ColorSwatchPicker/index.tsx

@@ -0,0 +1,150 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View } from 'react-native';
+import { Check } from '@cdx-ui/icons';
+import {
+  ColorSwatchPickerItem as ColorSwatchPickerItemPrimitive,
+  ColorSwatchPickerRoot as ColorSwatchPickerRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useColorSwatchPickerItemContext,
+  useRadioContext,
+  type IColorSwatchPickerItemProps,
+  type IColorSwatchPickerProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import { ColorSwatchView, type ColorSwatchProps } from '../ColorSwatch';
+import {
+  colorSwatchPickerIndicatorIconVariants,
+  colorSwatchPickerIndicatorVariants,
+  colorSwatchPickerItemVariants,
+  colorSwatchPickerVariants,
+} from './styles';
+
+export interface ColorSwatchPickerProps extends IColorSwatchPickerProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const ColorSwatchPickerRoot = forwardRef<View, ColorSwatchPickerProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <ColorSwatchPickerRootPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(colorSwatchPickerVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'color-swatch-picker' }))}
+    >
+      {children}
+    </ColorSwatchPickerRootPrimitive>
+  ),
+);
+
+ColorSwatchPickerRoot.displayName = 'ColorSwatchPicker';
+
+export interface ColorSwatchPickerItemProps extends IColorSwatchPickerItemProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const ColorSwatchPickerItem = forwardRef<View, ColorSwatchPickerItemProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <ColorSwatchPickerItemPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(colorSwatchPickerItemVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'color-swatch-picker-item' }))}
+    >
+      {children}
+    </ColorSwatchPickerItemPrimitive>
+  ),
+);
+
+ColorSwatchPickerItem.displayName = 'ColorSwatchPicker.Item';
+
+export interface ColorSwatchPickerSwatchProps extends Omit<ColorSwatchProps, 'color'> {}
+
+const ColorSwatchPickerSwatch = forwardRef<View, ColorSwatchPickerSwatchProps>((props, ref) => {
+  const { color } = useColorSwatchPickerItemContext();
+
+  return <ColorSwatchView ref={ref} color={color} slot="color-swatch-picker-swatch" {...props} />;
+});
+
+ColorSwatchPickerSwatch.displayName = 'ColorSwatchPicker.Swatch';
+
+export interface ColorSwatchPickerIndicatorProps extends Omit<IconProps, 'as' | 'children'> {
+  asChild?: boolean;
+  as?: IconProps['as'];
+  className?: string;
+  children?: ReactNode;
+}
+
+const ColorSwatchPickerIndicator = ({
+  asChild,
+  as = Check,
+  className,
+  style,
+  children,
+  ...props
+}: ColorSwatchPickerIndicatorProps) => {
+  const { isChecked } = useRadioContext();
+
+  if (!isChecked) {
+    return null;
+  }
+
+  const computedClassName = cn(colorSwatchPickerIndicatorIconVariants(), className);
+  const slotData = mergeDataAttributes(
+    props,
+    dataAttributes({ slot: 'color-swatch-picker-indicator' }),
+  );
+
+  return (
+    <View
+      className={colorSwatchPickerIndicatorVariants()}
+      accessibilityElementsHidden
+      aria-hidden
+      {...slotData}
+    >
+      {asChild ? (
+        <Slot
+          className={computedClassName}
+          style={style}
+          accessibilityElementsHidden
+          aria-hidden
+          {...props}
+        >
+          {children}
+        </Slot>
+      ) : (
+        <Icon
+          as={as}
+          className={computedClassName}
+          style={style}
+          accessibilityElementsHidden
+          aria-hidden
+          {...props}
+        />
+      )}
+    </View>
+  );
+};
+
+ColorSwatchPickerIndicator.displayName = 'ColorSwatchPicker.Indicator';
+
+type ColorSwatchPickerCompoundComponent = typeof ColorSwatchPickerRoot & {
+  Item: typeof ColorSwatchPickerItem;
+  Swatch: typeof ColorSwatchPickerSwatch;
+  Indicator: typeof ColorSwatchPickerIndicator;
+};
+
+export const ColorSwatchPicker = Object.assign(ColorSwatchPickerRoot, {
+  Item: ColorSwatchPickerItem,
+  Swatch: ColorSwatchPickerSwatch,
+  Indicator: ColorSwatchPickerIndicator,
+}) as ColorSwatchPickerCompoundComponent;

package/src/components/ColorSwatchPicker/styles.ts

@@ -0,0 +1,32 @@
+import { Platform } from 'react-native';
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const colorSwatchPickerVariants = cva([
+  'w-full flex-row flex-wrap justify-center gap-x-1 gap-y-2',
+]);
+
+export const colorSwatchPickerItemVariants = cva([
+  'relative min-h-11 min-w-11 items-center justify-center',
+  'rounded-[var(--border-radius-default)]',
+  TRANSITION_COLORS,
+  DISABLED_CURSOR,
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  'web: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(' '),
+  }),
+]);
+
+export const colorSwatchPickerIndicatorVariants = cva([
+  'pointer-events-none absolute inset-0 z-10 items-center justify-center',
+]);
+
+export const colorSwatchPickerIndicatorIconVariants = cva('size-4 text-[var(--color-white)]');

package/src/components/CurrencyInput/index.tsx

@@ -40,9 +40,9 @@ export interface CurrencyInputProps
       TextInputProps,
       'accessibilityLabel' | 'accessibilityHint' | 'testID' | 'onFocus' | 'onBlur' | 'returnKeyType'
     > {
-  /** Current numeric value. Renders formatted zero when undefined or null. */
+  /** Current amount in major currency units, not cents. Renders a formatted zero when omitted or null. */
   value?: number;
-  /** Called with the parsed number when the user changes the amount. */
+  /** Called with the parsed amount in major currency units, not cents, when the user edits the field. */
   onChangeValue?: (value: number) => void;
   /** Currency symbol rendered as an inline prefix. Defaults to `"$"`. */
   currencySymbol?: string;

package/src/components/Dialog/index.tsx

@@ -95,6 +95,7 @@ const AnimatedOverlay = Animated.createAnimatedComponent(DialogOverlayPrimitive)
 export interface DialogRootProps
   extends Omit<ViewProps, 'children' | 'role'>, IDialogRootProps, DialogVariantProps {
   className?: string;
+  /** Pass `'disable-all'` to turn off enter/exit and swipe animations for the popup and overlay. */
   animation?: AnimationRootDisableAll;
 }
 
@@ -174,7 +175,16 @@ export interface DialogPopupProps
   extends Omit<IDialogContentProps, 'asChild'>, Pick<DialogVariantProps, 'size'> {
   className?: string;
   children?: ReactNode;
+  /**
+   * On iOS, render in a plain `View` instead of `FullWindowOverlay`. Re-enables
+   * the element inspector, but the popup no longer layers above native modals.
+   * @default false
+   */
   disableFullWindowOverlay?: boolean;
+  /**
+   * Allow swipe-down to dismiss. Native only; no effect on web.
+   * @default true
+   */
   isSwipeable?: boolean;
   /**
    * Stacking order for the portal overlay layer (backdrop + popup panel).

package/src/components/Dialog/styles.ts

@@ -141,6 +141,7 @@ export const dialogCloseIconVariants = cva(['size-5 text-content-tertiary']);
 // ── Exported types ──────────────────────────────────────────
 
 export type DialogVariantProps = VariantProps<typeof dialogPopupVariants> & {
+  /** Removes horizontal padding from `Dialog.Content`. @default false */
   fullBleed?: boolean;
 };
 

package/src/components/Divider/index.tsx

@@ -15,10 +15,15 @@ export interface DividerProps extends ViewProps {
   className?: string;
   /** Renders a vertical divider instead of the default horizontal orientation. */
   vertical?: boolean;
+  /**
+   * When present, splits the divider into line, content, line.
+   * Use `Divider.Label` so the label receives the correct typography and accessibility treatment.
+   */
   children?: ReactNode;
 }
 
-export interface DividerLabelProps extends TextProps {
+export interface DividerLabelProps extends Omit<TextProps, 'color'> {
+  /** Renders the consumer's child element in place of the default `Text` host. */
   asChild?: boolean;
   className?: string;
 }

package/src/components/Form/styles.ts

@@ -1,3 +1,3 @@
 import { cva } from '@cdx-ui/utils';
 
-export const formRootVariants = cva(['flex-col gap-4']);
+export const formRootVariants = cva(['flex flex-col gap-4']);

package/src/components/FullScreenDialog/animation.ts

@@ -0,0 +1,22 @@
+import { Easing, Keyframe } from 'react-native-reanimated';
+
+export const FULL_SCREEN_DIALOG_ENTER_MS = 300;
+export const FULL_SCREEN_DIALOG_EXIT_MS = 220;
+export const WEB_TRANSITION_SAFETY_MS = FULL_SCREEN_DIALOG_ENTER_MS + 100;
+
+const ENTER_EASING = Easing.bezier(0.32, 0.72, 0, 1);
+const EXIT_EASING = Easing.bezier(0.4, 0, 1, 1);
+
+/** Native slide-up surface motion. `offscreen` is the distance below the viewport to start from. */
+export function getFullScreenDialogSurfaceMotion(offscreen: number) {
+  return {
+    entering: new Keyframe({
+      0: { transform: [{ translateY: offscreen }] },
+      100: { transform: [{ translateY: 0 }], easing: ENTER_EASING },
+    }).duration(FULL_SCREEN_DIALOG_ENTER_MS),
+    exiting: new Keyframe({
+      0: { transform: [{ translateY: 0 }] },
+      100: { transform: [{ translateY: offscreen }], easing: EXIT_EASING },
+    }).duration(FULL_SCREEN_DIALOG_EXIT_MS),
+  };
+}