@cdx-ui/components 0.0.1-beta.13 → 0.0.1-beta.131

package/src/components/Radio/index.tsx

@@ -1,6 +1,14 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
-import { createRadio, dataAttributes, type IRadioProps } from '@cdx-ui/primitives';
+import { Text, type TextProps, View, type ViewProps } from 'react-native';
+import {
+  RadioRoot as RadioRootPrimitive,
+  RadioGroup as RadioGroupPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useRadioContext,
+  type IRadioProps,
+} from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import {
   radioGroupVariants,
@@ -10,43 +18,6 @@ import {
   radioRootVariants,
 } from './styles';
 
-// =============================================================================
-// STYLED INDICATOR BASE
-// =============================================================================
-
-const RadioIndicatorBase = forwardRef<View, ViewProps & { className?: string }>(
-  ({ className, children, style, ...props }, ref) => {
-    // On web, data attributes arrive as `dataSet: { checked: true }`.
-    // On native, they arrive as individual `data-checked: "true"` props.
-    const ds = (props as any).dataSet;
-    const isChecked = ds ? ds.checked === true : (props as any)['data-checked'] === 'true';
-    const isInvalid = ds ? ds.invalid === true : (props as any)['data-invalid'] === 'true';
-
-    return (
-      <View ref={ref} className={cn(radioIndicatorVariants(), className)} style={style} {...props}>
-        <View
-          className={cn(radioInnerDotVariants())}
-          {...dataAttributes({ checked: isChecked, invalid: isInvalid })}
-        />
-        {children}
-      </View>
-    );
-  },
-);
-
-RadioIndicatorBase.displayName = 'Radio.IndicatorBase';
-
-// =============================================================================
-// PRIMITIVE ASSEMBLY
-// =============================================================================
-
-const RadioPrimitive = createRadio({
-  Root: Pressable,
-  Indicator: RadioIndicatorBase,
-  Label: Text,
-  Group: View,
-});
-
 // =============================================================================
 // RADIO ROOT
 // =============================================================================
@@ -60,29 +31,89 @@ const RadioRoot = forwardRef<View, RadioProps>(({ className, children, style, ..
   const computedClassName = cn(radioRootVariants(), className);
 
   return (
-    <RadioPrimitive ref={ref as any} className={computedClassName} style={style} {...props}>
+    <RadioRootPrimitive
+      ref={ref}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'radio' }))}
+    >
+      <RadioIndicator />
       {children}
-    </RadioPrimitive>
+    </RadioRootPrimitive>
   );
 });
 
 RadioRoot.displayName = 'Radio';
 
 // =============================================================================
-// RADIO INDICATOR
+// RADIO INDICATOR (styled-only, reads context for data-* styling)
 // =============================================================================
 
+/** Compound checked × invalid × active state for native Uniwind selectors (single data-field-state). */
+const INDICATOR_STATES = {
+  'unchecked:false:false': 'idle',
+  'unchecked:true:false': 'invalid',
+  'unchecked:false:true': 'active',
+  'unchecked:true:true': 'invalid-active',
+  'checked:false:false': 'checked',
+  'checked:true:false': 'checked-invalid',
+  'checked:false:true': 'checked-active',
+  'checked:true:true': 'checked-invalid-active',
+} as const;
+
 export interface RadioIndicatorProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly, isPressed, isFocusVisible } =
+      useRadioContext();
+
+    const checkState = isChecked ? 'checked' : 'unchecked';
+    const fieldState =
+      INDICATOR_STATES[
+        `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
+      ];
+
+    const computedClassName = cn(radioIndicatorVariants(), className);
+    const Comp = asChild ? Slot : View;
+
     return (
-      <RadioPrimitive.Indicator ref={ref as any} className={className} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'radio-indicator',
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+            active: isPressed,
+            fieldState,
+          }),
+        )}
+      >
+        <View
+          className={cn(radioInnerDotVariants())}
+          {...dataAttributes({
+            checked: isChecked,
+            invalid: isInvalid,
+            hover: isHovered,
+            fieldState,
+          })}
+        />
         {children}
-      </RadioPrimitive.Indicator>
+      </Comp>
     );
   },
 );
@@ -90,22 +121,30 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
 RadioIndicator.displayName = 'Radio.Indicator';
 
 // =============================================================================
-// RADIO LABEL
+// RADIO LABEL (styled-only)
 // =============================================================================
 
 export interface RadioLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const RadioLabel = forwardRef<Text, RadioLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(radioLabelVariants(), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <RadioPrimitive.Label ref={ref as any} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'radio-label' }))}
+      >
         {children}
-      </RadioPrimitive.Label>
+      </Comp>
     );
   },
 );
@@ -113,7 +152,7 @@ const RadioLabel = forwardRef<Text, RadioLabelProps>(
 RadioLabel.displayName = 'Radio.Label';
 
 // =============================================================================
-// RADIO GROUP
+// RADIO GROUP (wraps the primitive)
 // =============================================================================
 
 export interface RadioGroupProps extends ViewProps {
@@ -128,6 +167,8 @@ export interface RadioGroupProps extends ViewProps {
   isReadOnly?: boolean;
   direction?: 'column' | 'row';
   name?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 }
 
 const RadioGroup = forwardRef<View, RadioGroupProps>(
@@ -152,8 +193,8 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(
     const computedClassName = cn(radioGroupVariants({ direction }), className);
 
     return (
-      <RadioPrimitive.Group
-        ref={ref as any}
+      <RadioGroupPrimitive
+        ref={ref}
         className={computedClassName}
         style={style}
         value={value}
@@ -164,10 +205,12 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(
         isRequired={isRequired}
         isReadOnly={isReadOnly}
         name={name}
+        direction={direction}
         {...viewProps}
+        {...mergeDataAttributes(viewProps, dataAttributes({ slot: 'radio-group' }))}
       >
         {children}
-      </RadioPrimitive.Group>
+      </RadioGroupPrimitive>
     );
   },
 );

package/src/components/Radio/styles.ts

@@ -1,8 +1,6 @@
 import { Platform } from 'react-native';
 import { cva } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
-
-// TODO: Add hover, active, and focus-visible styles based on Figma
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 export const radioRootVariants = cva([
   'flex-row items-center gap-2',
@@ -15,25 +13,37 @@ export const radioIndicatorVariants = cva([
   'rounded-[var(--border-radius-round)]',
   'border-[length:var(--border-width-selected)]',
   'h-5 w-5',
-  'border-stroke-primary',
-  'data-[checked=false]:border-slate-300',
   'bg-surface-primary',
+  'data-[checked=false]:border-content-secondary',
   'data-[checked=true]:border-stroke-action',
   'data-[invalid=true]:border-stroke-danger',
-  'data-[checked=true]:data-[invalid=true]:border-stroke-danger',
   Platform.select({
     web: [
       TRANSITION_COLORS,
-      'data-[hover=true]:data-[checked=false]:border-slate-400',
-      'data-[hover=true]:data-[checked=false]:bg-slate-50',
+      'group',
+      // Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
+      'data-[hover=true]:data-[checked=false]:bg-content-secondary/[0.08]',
+      // Hover — unchecked + invalid (overlay uses danger token)
+      'data-[hover=true]:data-[invalid=true]:data-[checked=false]:bg-surface-danger-strong/[0.08]',
+      'data-[hover=true]:data-[checked=true]:border-surface-action-strong-hover',
+      'data-[hover=true]:data-[invalid=true]:border-surface-danger-strong-hover',
+      // Active — CSS :active (web root does not track press via data-active).
+      // data-[hover=true] guard ensures active beats hover by specificity (0,3,0 > 0,2,0).
+      'web:active:data-[hover=true]:data-[checked=false]:border-stroke-hover',
+      'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-surface-danger-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
       'web:data-[focus-visible=true]:outline-none',
-      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-offset-2',
-      'web:data-[focus-visible=true]:data-[checked=false]:ring-slate-400/50',
-      'web:data-[focus-visible=true]:data-[checked=true]:ring-stroke-focus',
-      'data-[invalid=true]:data-[hover=true]:border-stroke-danger',
-      'web:data-[invalid=true]:data-[focus-visible=true]:ring-stroke-danger',
+      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+    ].join(' '),
+    default: [
+      // Native: Uniwind only evaluates the last data-[] condition in a compound chain.
+      // Use single-condition data-[field-state=...] selectors (emitted by RadioIndicator).
+      'data-[field-state=active]:border-stroke-hover',
+      'data-[field-state=invalid-active]:border-surface-danger-strong-active',
+      'data-[field-state=checked-active]:border-surface-action-strong-active',
+      'data-[field-state=checked-invalid-active]:border-surface-danger-strong-active',
     ].join(' '),
-    default: '',
   }),
 ]);
 
@@ -44,6 +54,19 @@ export const radioInnerDotVariants = cva([
   'data-[checked=true]:scale-100',
   'bg-surface-action-strong',
   'data-[invalid=true]:bg-surface-danger-strong',
+  Platform.select({
+    web: [
+      'data-[hover=true]:bg-surface-action-strong-hover',
+      'data-[hover=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
+      // Active via group-active on indicator (inner dot is not the :active target).
+      'web:group-active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active',
+      'web:group-active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+    ].join(' '),
+    default: [
+      'data-[field-state=checked-active]:bg-surface-action-strong-active',
+      'data-[field-state=checked-invalid-active]:bg-surface-danger-strong-active',
+    ].join(' '),
+  }),
 ]);
 
 export const radioLabelVariants = cva(['body-md', 'text-content-primary']);

package/src/components/ScopedTheme/index.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import { ScopedTheme as UniwindScopedTheme } from 'uniwind';
+
+export type ScopedThemeProps = ComponentProps<typeof UniwindScopedTheme>;
+
+/**
+ * Forces a specific theme on a component subtree, regardless of the application's
+ * global theme. Useful for marketing heroes, embedded widgets, or preview surfaces
+ * that must render in a fixed mode.
+ *
+ * Wraps Uniwind's `ScopedTheme` to keep `uniwind` an internal implementation detail.
+ *
+ * Web requires `@custom-variant dark (&:where(.dark, .dark *));` in the consuming
+ * app's `global.css`. See the Storybook story (`Theming/ScopedTheme`) for the full
+ * mechanism, light-vs-dark asymmetry, and dynamic-switch caveat.
+ */
+export const ScopedTheme = (props: ScopedThemeProps) => <UniwindScopedTheme {...props} />;

package/src/components/ScrollShadow/index.tsx

@@ -0,0 +1,119 @@
+import { Children, cloneElement, isValidElement, type ReactNode } from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  scrollShadowContainerVariants,
+  scrollShadowOverlayVariants,
+  scrollShadowVariants,
+  type ScrollShadowVariantProps,
+} from './styles';
+import { useScrollShadow, type ScrollShadowCapability } from './useScrollShadow';
+
+export type { ScrollShadowCapability };
+
+export interface ScrollShadowProps extends ScrollShadowVariantProps {
+  children: ReactNode;
+  className?: string;
+  /**
+   * Tailwind `from-*` utility for edge overlays — match the surface behind the scroll area.
+   * Pair with a low opacity (e.g. `from-surface-secondary/40`) for a light fade.
+   * @default 'from-background/35'
+   */
+  fadeFromClassName?: string;
+  /**
+   * Shadow fade size in pixels.
+   * @default 64
+   */
+  size?: number;
+  /**
+   * Scroll offset before showing edge shadows.
+   * @default 0
+   */
+  offset?: number;
+  onCapabilityChange?: (capability: ScrollShadowCapability) => void;
+  style?: ViewStyle;
+}
+
+interface ScrollShadowChildProps {
+  className?: string;
+  style?: ViewStyle;
+  onLayout?: (event: Parameters<ReturnType<typeof useScrollShadow>['handleLayout']>[0]) => void;
+  onContentSizeChange?: (width: number, height: number) => void;
+  onScroll?: (event: Parameters<ReturnType<typeof useScrollShadow>['handleScroll']>[0]) => void;
+  ref?: React.Ref<unknown>;
+}
+
+export function ScrollShadow({
+  children,
+  className,
+  fadeFromClassName = 'from-background/35',
+  hideScrollBar = false,
+  orientation = 'horizontal',
+  offset = 0,
+  onCapabilityChange,
+  size = 64,
+  style,
+}: ScrollShadowProps) {
+  const resolvedOrientation = orientation ?? 'horizontal';
+  const child = Children.only(children);
+
+  if (!isValidElement<ScrollShadowChildProps>(child)) {
+    throw new Error('ScrollShadow expects a single React element child.');
+  }
+
+  const { capability, handleContentSizeChange, handleLayout, handleScroll } = useScrollShadow({
+    offset,
+    onCapabilityChange,
+    orientation: resolvedOrientation,
+  });
+
+  const overlayFade = cn(fadeFromClassName, 'to-transparent');
+  const overlayAxisSize = resolvedOrientation === 'horizontal' ? { width: size } : { height: size };
+
+  return (
+    <View className={cn(scrollShadowContainerVariants(), className)} style={style}>
+      {cloneElement(child, {
+        className: cn(scrollShadowVariants({ hideScrollBar }), child.props.className),
+        onContentSizeChange: (width: number, height: number) => {
+          handleContentSizeChange(width, height);
+          child.props.onContentSizeChange?.(width, height);
+        },
+        onLayout: (event) => {
+          handleLayout(event);
+          child.props.onLayout?.(event);
+        },
+        onScroll: (event) => {
+          handleScroll(event);
+          child.props.onScroll?.(event);
+        },
+        style: StyleSheet.flatten([child.props.style]),
+      })}
+      {capability.canScrollBefore ? (
+        <View
+          pointerEvents="none"
+          className={cn(
+            scrollShadowOverlayVariants({
+              orientation: resolvedOrientation,
+              edge: 'start',
+            }),
+            overlayFade,
+          )}
+          style={overlayAxisSize}
+        />
+      ) : null}
+      {capability.canScrollAfter ? (
+        <View
+          pointerEvents="none"
+          className={cn(
+            scrollShadowOverlayVariants({
+              orientation: resolvedOrientation,
+              edge: 'end',
+            }),
+            overlayFade,
+          )}
+          style={overlayAxisSize}
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/components/ScrollShadow/styles.ts

@@ -0,0 +1,57 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const scrollShadowVariants = cva([], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: '',
+    },
+    hideScrollBar: {
+      true: 'web:[scrollbar-width:none] web:[&::-webkit-scrollbar]:hidden',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    hideScrollBar: false,
+  },
+});
+
+export const scrollShadowContainerVariants = cva('relative min-w-0 w-full');
+
+export const scrollShadowOverlayVariants = cva('pointer-events-none absolute z-10', {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: '',
+    },
+    edge: {
+      start: '',
+      end: '',
+    },
+  },
+  compoundVariants: [
+    {
+      orientation: 'horizontal',
+      edge: 'start',
+      className: 'left-0 top-0 bottom-0 bg-gradient-to-r',
+    },
+    {
+      orientation: 'horizontal',
+      edge: 'end',
+      className: 'right-0 top-0 bottom-0 bg-gradient-to-l',
+    },
+    {
+      orientation: 'vertical',
+      edge: 'start',
+      className: 'left-0 right-0 top-0 bg-gradient-to-b',
+    },
+    {
+      orientation: 'vertical',
+      edge: 'end',
+      className: 'left-0 right-0 bottom-0 bg-gradient-to-t',
+    },
+  ],
+});
+
+export type ScrollShadowVariantProps = VariantProps<typeof scrollShadowVariants>;

package/src/components/ScrollShadow/useScrollShadow.ts

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+export interface ScrollShadowCapability {
+  canScrollBefore: boolean;
+  canScrollAfter: boolean;
+}
+
+export interface UseScrollShadowOptions {
+  orientation?: 'horizontal' | 'vertical';
+  offset?: number;
+  onCapabilityChange?: (capability: ScrollShadowCapability) => void;
+}
+
+interface ScrollMetrics {
+  scrollOffset: number;
+  viewportSize: number;
+  contentSize: number;
+}
+
+const INITIAL_METRICS: ScrollMetrics = {
+  scrollOffset: 0,
+  viewportSize: 0,
+  contentSize: 0,
+};
+
+function getScrollCapability(metrics: ScrollMetrics, offset: number): ScrollShadowCapability {
+  const { scrollOffset, viewportSize, contentSize } = metrics;
+
+  if (viewportSize <= 0 || contentSize <= viewportSize) {
+    return { canScrollBefore: false, canScrollAfter: false };
+  }
+
+  return {
+    canScrollBefore: scrollOffset > offset,
+    canScrollAfter: scrollOffset + viewportSize + offset < contentSize,
+  };
+}
+
+export function useScrollShadow({
+  orientation = 'horizontal',
+  offset = 0,
+  onCapabilityChange,
+}: UseScrollShadowOptions = {}) {
+  const metricsRef = useRef<ScrollMetrics>(INITIAL_METRICS);
+  const [capability, setCapability] = useState<ScrollShadowCapability>({
+    canScrollBefore: false,
+    canScrollAfter: false,
+  });
+
+  const updateCapability = useCallback(() => {
+    const nextCapability = getScrollCapability(metricsRef.current, offset);
+
+    setCapability((prev) => {
+      if (
+        prev.canScrollBefore === nextCapability.canScrollBefore &&
+        prev.canScrollAfter === nextCapability.canScrollAfter
+      ) {
+        return prev;
+      }
+
+      onCapabilityChange?.(nextCapability);
+      return nextCapability;
+    });
+  }, [offset, onCapabilityChange]);
+
+  useEffect(() => {
+    updateCapability();
+  }, [updateCapability]);
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width, height } = event.nativeEvent.layout;
+      metricsRef.current.viewportSize = orientation === 'vertical' ? height : width;
+      updateCapability();
+    },
+    [orientation, updateCapability],
+  );
+
+  const handleContentSizeChange = useCallback(
+    (width: number, height: number) => {
+      metricsRef.current.contentSize = orientation === 'vertical' ? height : width;
+      updateCapability();
+    },
+    [orientation, updateCapability],
+  );
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
+
+      metricsRef.current.scrollOffset =
+        orientation === 'vertical' ? contentOffset.y : contentOffset.x;
+      metricsRef.current.viewportSize =
+        orientation === 'vertical' ? layoutMeasurement.height : layoutMeasurement.width;
+      metricsRef.current.contentSize =
+        orientation === 'vertical' ? contentSize.height : contentSize.width;
+
+      updateCapability();
+    },
+    [orientation, updateCapability],
+  );
+
+  return {
+    capability,
+    handleLayout,
+    handleContentSizeChange,
+    handleScroll,
+  };
+}