@cdx-ui/components 0.1.6 → 0.2.0

package/src/components/BottomSheet/index.tsx

@@ -1,5 +1,15 @@
-import React, { forwardRef, useCallback, useContext, useRef, type ReactNode } from 'react';
-import { Dimensions, View, ViewStyle } from 'react-native';
+import React, {
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { BackHandler, Dimensions, Platform, View, ViewStyle } from 'react-native';
 import { SafeAreaInsetsContext, type EdgeInsets } from 'react-native-safe-area-context';
 import { useResolveClassNames } from 'uniwind';
 import {
@@ -14,16 +24,13 @@ import {
   type BottomSheetFooterProps as GorhomBottomSheetFooterProps,
   type BottomSheetModalProps as GorhomBottomSheetModalProps,
 } from '@gorhom/bottom-sheet';
+import { useEscapeKey, useOverlayStackRegistration } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
-import { ArrowBack, Close } from '@cdx-ui/icons';
-import { Heading } from '../Heading';
-import { IconButton } from '../IconButton';
-import { Text } from '../Text';
+import { SheetHeader } from '../sheet-header';
 import {
   bottomSheetBackgroundClassName,
   bottomSheetContentVariants,
   bottomSheetFooterVariants,
-  bottomSheetHeaderVariants,
   bottomSheetModalContainerClassName,
 } from './styles';
 
@@ -37,131 +44,52 @@ function useSafeInsets(): EdgeInsets {
 export type BottomSheetModalRef = React.ComponentRef<typeof BottomSheetModal>;
 
 export interface BottomSheetHeaderProps {
+  /** Title text. Ignored when `children` is set. */
   title?: string;
+  /** Secondary line under the title. Has no effect without `title`, or when `children` is set. */
   subtitle?: string;
+  /** Custom header content. Replaces `title` and `subtitle`. */
   children?: ReactNode;
   className?: string;
+  /** Shows the close button when set. */
   onClose?: () => void;
+  /** Accessible name for the close button. @default Close */
   closeAccessibilityLabel?: string;
+  /** Shows the back button when set. */
   onBack?: () => void;
+  /** Accessible name for the back button. @default Go back */
   backAccessibilityLabel?: string;
 }
 
-function BottomSheetHeaderComponent(
-  {
-    title,
-    subtitle,
-    children,
-    className,
-    onClose,
-    closeAccessibilityLabel,
-    onBack,
-    backAccessibilityLabel = 'Go back',
-  }: BottomSheetHeaderProps,
-  ref: React.Ref<View>,
-) {
-  const hasTitle = title !== undefined && title !== '';
-  const hasContent = hasTitle || !!children || !!onBack;
-  const computedClassName = cn(bottomSheetHeaderVariants({ hasTitle: hasContent }), className);
-  return (
-    <View ref={ref} className={computedClassName}>
-      <BottomSheetBackButton
-        className={cn(!onBack && 'opacity-0')}
-        onPress={onBack}
-        {...(backAccessibilityLabel !== undefined && {
-          accessibilityLabel: backAccessibilityLabel,
-        })}
-      />
-      <View className="flex-1">
-        {children ??
-          (hasTitle ? (
-            <View>
-              <Heading size="sm" className="text-center">
-                {title}
-              </Heading>
-              {subtitle ? (
-                <Text size="sm" className="text-center text-content-secondary">
-                  {subtitle}
-                </Text>
-              ) : null}
-            </View>
-          ) : null)}
-      </View>
-      <BottomSheetCloseButton
-        className={cn(!onClose && 'opacity-0')}
-        onPress={onClose}
-        {...(closeAccessibilityLabel !== undefined && {
-          accessibilityLabel: closeAccessibilityLabel,
-        })}
-      />
-    </View>
-  );
-}
-
-BottomSheetHeaderComponent.displayName = 'BottomSheet.Header';
-
-const BottomSheetHeader = forwardRef<View, BottomSheetHeaderProps>(BottomSheetHeaderComponent);
-BottomSheetHeader.displayName = 'BottomSheet.Header';
-
-// =============================================================================
-// BACKBUTTON
-// =============================================================================
-interface BottomSheetBackButtonProps {
-  onPress?: () => void;
-  className?: string;
-  accessibilityLabel?: string;
-}
-
-function BottomSheetBackButton({
-  onPress,
-  className,
-  accessibilityLabel = 'Go back',
-}: Readonly<BottomSheetBackButtonProps>) {
-  return (
-    <IconButton
-      as={ArrowBack}
-      variant="solid"
-      color="neutral"
-      size="default"
-      onPress={onPress}
-      hitSlop={12}
-      accessibilityLabel={accessibilityLabel}
-      className={className}
-    />
-  );
-}
-
-BottomSheetBackButton.displayName = 'BottomSheet.BackButton';
-
-// =============================================================================
-// CLOSEBUTTON
-// =============================================================================
-interface BottomSheetCloseButtonProps {
-  onPress?: () => void;
-  className?: string;
-  accessibilityLabel?: string;
-}
-
-function BottomSheetCloseButton({
-  onPress,
-  className,
-  accessibilityLabel = 'Close',
-}: Readonly<BottomSheetCloseButtonProps>) {
-  return (
-    <IconButton
-      as={Close}
-      variant="solid"
-      color="neutral"
-      size="default"
-      onPress={onPress}
-      hitSlop={12}
-      accessibilityLabel={accessibilityLabel}
+const BottomSheetHeader = forwardRef<View, BottomSheetHeaderProps>(
+  (
+    {
+      title,
+      subtitle,
+      children,
+      className,
+      onClose,
+      closeAccessibilityLabel,
+      onBack,
+      backAccessibilityLabel,
+    },
+    ref,
+  ) => (
+    <SheetHeader
+      ref={ref}
+      title={title}
+      subtitle={subtitle}
       className={className}
-    />
-  );
-}
-
-BottomSheetCloseButton.displayName = 'BottomSheet.CloseButton';
+      onClose={onClose}
+      closeAccessibilityLabel={closeAccessibilityLabel}
+      onBack={onBack}
+      backAccessibilityLabel={backAccessibilityLabel}
+    >
+      {children}
+    </SheetHeader>
+  ),
+);
+BottomSheetHeader.displayName = 'BottomSheet.Header';
 
 // =============================================================================
 // CONTENT
@@ -170,6 +98,7 @@ BottomSheetCloseButton.displayName = 'BottomSheet.CloseButton';
 export interface BottomSheetContentProps {
   children?: ReactNode;
   className?: string;
+  /** Adds bottom padding equal to the safe-area inset. */
   hasSafeAreaInset?: boolean;
   style?: ViewStyle;
 }
@@ -228,7 +157,10 @@ BottomSheetFooter.displayName = 'BottomSheet.Footer';
 export interface BottomSheetModalProps extends GorhomBottomSheetModalProps {
   /** Show the drag handle indicator. When false, `handleComponent` is set to null. @default true */
   handleVisible?: boolean;
-  /** Footer content rendered via gorhom's BottomSheetFooter for proper animated positioning and safe-area handling. */
+  /**
+   * Footer content rendered via gorhom's BottomSheetFooter for animated positioning and safe-area handling.
+   * Pass it through this prop; a footer placed as a child does not animate with the sheet.
+   */
   footer?: ReactNode;
 }
 
@@ -253,7 +185,7 @@ const CustomBackground = (props: React.ComponentPropsWithoutRef<typeof View>) =>
 const BottomSheetModalStyled = forwardRef<
   React.ComponentRef<typeof BottomSheetModal>,
   BottomSheetModalProps
->(({ handleVisible = true, footer, onDismiss, onChange, ...rest }, ref) => {
+>(({ handleVisible = true, footer, onDismiss, onChange, onAnimate, ...rest }, ref) => {
   const renderFooter = useCallback(
     (props: GorhomBottomSheetFooterProps) => (
       <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
@@ -261,9 +193,67 @@ const BottomSheetModalStyled = forwardRef<
     [footer],
   );
 
+  const modalRef = useRef<BottomSheetModalRef | null>(null);
   const dismissedRef = useRef(false);
+  const sheetMountedRef = useRef(false);
+  const mountPendingRef = useRef(false);
+  const pendingDismissRef = useRef<Parameters<BottomSheetModalRef['dismiss']> | null>(null);
+  const [presented, setPresented] = useState(false);
+
+  // Must stay a callback ref: gorhom hands this ref to its modal provider, which
+  // reads `.current` to minimize and restore stacked sheets. A ref object would
+  // switch that stacking on.
+  const setModalRef = useCallback((instance: BottomSheetModalRef | null) => {
+    modalRef.current = instance;
+  }, []);
+
+  // gorhom mounts the sheet a frame after `present()` and silently drops a
+  // `dismiss()` that arrives before then, never reporting `onDismiss`. Holding
+  // it until the sheet mounts keeps the early Escape/back claim releasable.
+  const dismissSheet = useCallback((...args: Parameters<BottomSheetModalRef['dismiss']>) => {
+    if (mountPendingRef.current) {
+      pendingDismissRef.current = args;
+      return;
+    }
+    modalRef.current?.dismiss(...args);
+  }, []);
+
+  const markSheetMounted = useCallback(() => {
+    sheetMountedRef.current = true;
+    if (!mountPendingRef.current) return;
+    mountPendingRef.current = false;
+    const pendingDismiss = pendingDismissRef.current;
+    pendingDismissRef.current = null;
+    if (pendingDismiss) modalRef.current?.dismiss(...pendingDismiss);
+  }, []);
+
+  // `present()` claims Escape and back immediately; waiting for the first
+  // `onChange` would leave the overlay beneath in charge for the whole open animation.
+  useImperativeHandle(
+    ref,
+    (): BottomSheetModalRef => ({
+      present: (...args) => {
+        dismissedRef.current = false;
+        if (!sheetMountedRef.current) mountPendingRef.current = true;
+        setPresented(true);
+        modalRef.current?.present(...args);
+      },
+      dismiss: dismissSheet,
+      snapToIndex: (...args) => modalRef.current?.snapToIndex(...args),
+      snapToPosition: (...args) => modalRef.current?.snapToPosition(...args),
+      expand: (...args) => modalRef.current?.expand(...args),
+      collapse: (...args) => modalRef.current?.collapse(...args),
+      close: (...args) => modalRef.current?.close(...args),
+      forceClose: (...args) => modalRef.current?.forceClose(...args),
+    }),
+    [dismissSheet],
+  );
 
   const handleDismiss = useCallback(() => {
+    sheetMountedRef.current = false;
+    mountPendingRef.current = false;
+    pendingDismissRef.current = null;
+    setPresented(false);
     if (dismissedRef.current) return;
     dismissedRef.current = true;
     onDismiss?.();
@@ -272,11 +262,51 @@ const BottomSheetModalStyled = forwardRef<
   const handleChange = useCallback(
     (...args: Parameters<NonNullable<BottomSheetModalProps['onChange']>>) => {
       dismissedRef.current = false;
+      setPresented(args[0] >= 0);
+      if (args[0] >= 0) markSheetMounted();
       onChange?.(...args);
     },
-    [onChange],
+    [markSheetMounted, onChange],
   );
 
+  const handleAnimate = useCallback(
+    (...args: Parameters<NonNullable<BottomSheetModalProps['onAnimate']>>) => {
+      if (args[1] >= 0) markSheetMounted();
+      onAnimate?.(...args);
+    },
+    [markSheetMounted, onAnimate],
+  );
+
+  const id = useId();
+  const overlayId = `bottom-sheet-${id}`;
+  useEscapeKey(presented, dismissSheet, {
+    id: overlayId,
+    groupId: overlayId,
+    layer: 'modal',
+  });
+  const { isTopmost } = useOverlayStackRegistration({
+    active: presented && Platform.OS !== 'web',
+    capabilities: ['back'],
+    id: overlayId,
+    groupId: overlayId,
+    layer: 'modal',
+  });
+
+  useEffect(() => {
+    // BackHandler is native-only; react-native-web warns on every subscription.
+    if (!presented || Platform.OS === 'web') return;
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      if (!isTopmost('back')) return false;
+      dismissSheet();
+      return true;
+    });
+
+    return () => {
+      backHandler.remove();
+    };
+  }, [dismissSheet, isTopmost, presented]);
+
   const sheetContainerStyle = useResolveClassNames(bottomSheetModalContainerClassName);
   const handleIndicatorStyle = useResolveClassNames(
     'bg-surface-neutral-subtle w-9 h-[5px] rounded-full',
@@ -284,7 +314,7 @@ const BottomSheetModalStyled = forwardRef<
 
   return (
     <BottomSheetModal
-      ref={ref}
+      ref={setModalRef}
       enableDynamicSizing
       maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
       style={sheetContainerStyle}
@@ -295,6 +325,7 @@ const BottomSheetModalStyled = forwardRef<
       {...rest}
       onDismiss={handleDismiss}
       onChange={handleChange}
+      onAnimate={handleAnimate}
       {...(footer != null && { footerComponent: renderFooter })}
     />
   );

package/src/components/BottomSheet/styles.ts

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from '@cdx-ui/utils';
+import { cva } from '@cdx-ui/utils';
 
 /** Keep gorhom's animated container unclipped so web transforms can settle correctly. */
 export const bottomSheetModalContainerClassName = 'rounded-t-4xl';
@@ -6,27 +6,6 @@ export const bottomSheetModalContainerClassName = 'rounded-t-4xl';
 /** Clip the static background for rounded corners without clipping the animated sheet. */
 export const bottomSheetBackgroundClassName = `${bottomSheetModalContainerClassName} overflow-hidden bg-surface-primary`;
 
-export const bottomSheetHeaderVariants = cva(
-  [
-    'flex-row items-center justify-between min-h-11 px-4 pt-3 pb-2.5',
-    'bg-surface-primary',
-    'text-content-primary',
-  ],
-  {
-    variants: {
-      hasTitle: {
-        true: '',
-        false: 'justify-end',
-      },
-    },
-    defaultVariants: {
-      hasTitle: true,
-    },
-  },
-);
-
 export const bottomSheetContentVariants = cva(['bg-surface-primary', 'px-5 pb-5 gap-3']);
 
 export const bottomSheetFooterVariants = cva(['px-5 pb-5 gap-2', 'bg-surface-primary']);
-
-export type BottomSheetHeaderVariants = VariantProps<typeof bottomSheetHeaderVariants>;

package/src/components/Button/index.tsx

@@ -277,7 +277,7 @@ ButtonGroup.displayName = 'Button.Group';
 // STYLED ICON COMPONENT
 // =============================================================================
 
-export interface ButtonIconProps extends Omit<IconProps, 'children' | 'as'> {
+export interface ButtonIconProps extends Omit<IconProps, 'children' | 'as' | 'color'> {
   /** Render the consumer's child element in place of the default icon host. */
   asChild?: boolean;
   /**
@@ -342,7 +342,10 @@ export interface ButtonSpinnerProps extends ActivityIndicatorProps {
   asChild?: boolean;
   /** Additional Uniwind/Tailwind classes for the spinner container. */
   className?: string;
-  /** Uniwind `accent-*` color class override for the spinner. */
+  /**
+   * Uniwind `accent-*` color class override for the spinner.
+   * When omitted, the color is derived from the parent button's `variant` and `color`.
+   */
   colorClassName?: string;
   /**
    * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.
@@ -350,6 +353,11 @@ export interface ButtonSpinnerProps extends ActivityIndicatorProps {
    * Omit to apply the symmetric baseline gap.
    */
   position?: IconSlotPosition;
+  /**
+   * Screen reader label for the spinner.
+   * @default 'Loading'
+   */
+  accessibilityLabel?: string;
 }
 
 const ButtonSpinner = forwardRef<ActivityIndicator, ButtonSpinnerProps>(

package/src/components/Card/index.tsx

@@ -22,6 +22,11 @@ const SCOPE = 'CARD';
 const useCardStyleContext = () => useStyleContext(SCOPE) as CardVariantProps;
 
 export interface CardProps extends ViewProps, CardVariantProps {
+  /**
+   * When `true`, `Card.Content` drops its padding and `Card.Footer` uses standalone
+   * padding. Both inherit this unless they set their own `fullBleed`.
+   */
+  fullBleed?: CardVariantProps['fullBleed'];
   asChild?: boolean;
   className?: string;
   children?: ReactNode;
@@ -117,6 +122,10 @@ CardHeader.displayName = 'Card.Header';
 // =============================================================================
 
 export interface CardContentProps extends ViewProps, CardContentVariantProps {
+  /**
+   * Removes this region's padding. Inherits the parent `Card`'s `fullBleed` when omitted.
+   */
+  fullBleed?: CardContentVariantProps['fullBleed'];
   asChild?: boolean;
   className?: string;
   children?: ReactNode;
@@ -152,6 +161,11 @@ CardContent.displayName = 'Card.Content';
 // =============================================================================
 
 export interface CardFooterProps extends ViewProps, CardFooterVariantProps {
+  /**
+   * Uses standalone padding instead of flush-top padding. Inherits the parent
+   * `Card`'s `fullBleed` when omitted.
+   */
+  fullBleed?: CardFooterVariantProps['fullBleed'];
   asChild?: boolean;
   className?: string;
   children?: ReactNode;

package/src/components/Checkbox/index.tsx

@@ -138,7 +138,7 @@ CheckboxIndicator.displayName = 'Checkbox.Indicator';
 // CHECKBOX ICON (styled-only, reads context for conditional mount)
 // =============================================================================
 
-export interface CheckboxIconProps extends Omit<IconProps, 'children'> {}
+export interface CheckboxIconProps extends Omit<IconProps, 'children' | 'color'> {}
 
 const CheckboxIcon = ({ className, style, ...props }: CheckboxIconProps) => {
   const { isReadOnly } = useCheckboxContext();

package/src/components/Chip/index.tsx

@@ -42,7 +42,7 @@ let hasWarnedChipDefaultColor = false;
 
 export interface ChipProps extends IChipProps, Omit<ChipVariantProps, 'variant' | 'color'> {
   /**
-   * Visual style variant.
+   * Filled subtle surface (`subtle`) or transparent with a border (`outline`).
    * @default 'subtle'
    */
   variant?:
@@ -157,7 +157,7 @@ ChipLabel.displayName = 'Chip.Label';
 // ICON
 // =============================================================================
 
-export interface ChipIconProps extends Omit<IconProps, 'children' | 'as'> {
+export interface ChipIconProps extends Omit<IconProps, 'children' | 'as' | 'color'> {
   asChild?: boolean;
   /**
    * Forge icon component to render. Required unless `asChild` is set, in which

package/src/components/ColorArea/ColorAreaPaint.tsx

@@ -0,0 +1,51 @@
+import { useId } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Defs, LinearGradient, Rect, Stop, Svg } from 'react-native-svg';
+import { useColorAreaContext } from '@cdx-ui/primitives';
+import { colorAreaPaintVariants } from './styles';
+
+export function ColorAreaPaint() {
+  const { value, isRTL } = useColorAreaContext();
+  const horizontalGradientId = useId();
+  const verticalGradientId = useId();
+  const hue = value.withChannel('hsb', 'saturation', 100).withChannel('hsb', 'brightness', 100);
+
+  return (
+    <View
+      className={colorAreaPaintVariants()}
+      style={styles.paint}
+      accessible={false}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    >
+      <Svg width="100%" height="100%">
+        <Defs>
+          <LinearGradient
+            id={horizontalGradientId}
+            x1={isRTL ? '100%' : '0%'}
+            y1="0%"
+            x2={isRTL ? '0%' : '100%'}
+            y2="0%"
+          >
+            <Stop offset="0%" stopColor="#FFFFFF" />
+            <Stop offset="100%" stopColor={hue.toString('hex')} />
+          </LinearGradient>
+          <LinearGradient id={verticalGradientId} x1="0%" y1="0%" x2="0%" y2="100%">
+            <Stop offset="0%" stopColor="#000000" stopOpacity={0} />
+            <Stop offset="100%" stopColor="#000000" stopOpacity={1} />
+          </LinearGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill={`url(#${horizontalGradientId})`} />
+        <Rect width="100%" height="100%" fill={`url(#${verticalGradientId})`} />
+      </Svg>
+    </View>
+  );
+}
+
+ColorAreaPaint.displayName = 'ColorAreaPaint';
+
+const styles = StyleSheet.create({
+  paint: {
+    pointerEvents: 'none',
+  },
+});

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',
+]);