@cdx-ui/components 0.0.1-beta.8 → 0.0.1-beta.81

package/src/components/Select/styles.ts

@@ -1,44 +1,39 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_MUTED,
-  COLOR_TEXT_PRIMARY,
-  DISABLED_CURSOR,
-  DISABLED_OPACITY,
-  RADIUS_SM,
-  RADIUS_MD,
-  SHADOW_SM,
-  SHADOW_MD,
-  SIZE_SCALE,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
 // ── Trigger ─────────────────────────────────────────────────
 
 export const selectTriggerVariants = cva(
   [
     'flex w-full min-w-0 flex-row items-center justify-between text-start',
-    RADIUS_SM,
-    SHADOW_SM,
+    'bg-surface-primary',
+    'border border-stroke-primary',
+    'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
-    COLOR_BG_PRIMARY,
-    `border ${COLOR_BORDER_DEFAULT}`,
-    DISABLED_OPACITY,
+    'data-[disabled=true]:bg-surface-secondary',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
-    'data-[state=open]:border-slate-900',
-    'data-[invalid=true]:border-red-500',
-    'data-[readonly=true]:bg-slate-50',
-    Platform.select({
-      default: 'data-[active=true]:border-slate-300',
-      web: [
-        'data-[hover=true]:border-slate-300 data-[active=true]:data-[hover=true]:border-slate-400',
-        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
-        'data-[state=open]:ring-2 data-[state=open]:ring-slate-400/50',
-      ].join(' '),
-    }),
+    'data-[readonly=true]:bg-surface-secondary',
+    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+    // Web: inset ring avoids a border-width change so no padding compensation is needed.
+    'web:data-[focus=true]:ring-inset',
+    'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
+    'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[state=open]:ring-inset',
+    'web:data-[state=open]:ring-[length:var(--border-width-focused)]',
+    'web:data-[state=open]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[state=open]:data-[invalid=true]:ring-stroke-danger',
+    // Native: thicker border; size variants below compensate the layout shift.
+    'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'native:data-[focus=true]:data-[invalid=false]:border-stroke-action',
+    'native:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    'native:data-[state=open]:border-[length:var(--border-width-focused)]',
+    'native:data-[state=open]:data-[invalid=false]:border-stroke-action',
+    'native:data-[state=open]:data-[invalid=true]:border-stroke-danger',
+    'data-[invalid=true]:border-stroke-danger',
   ],
   {
     variants: {
@@ -46,8 +41,21 @@ export const selectTriggerVariants = cva(
         outline: [],
       },
       size: {
-        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} ${SIZE_SCALE.default.gap}`,
-        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} ${SIZE_SCALE.small.gap}`,
+        default: [
+          'h-11 min-h-11 px-4 py-3 gap-4',
+          // Native only: subtract one hairline so the wider focus border doesn't shift layout.
+          'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[state=open]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'native:data-[state=open]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+        ],
+        small: [
+          'h-8 min-h-8 px-3 py-2 gap-1.5',
+          'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+          'native:data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+        ],
       },
     },
     defaultVariants: {
@@ -62,15 +70,15 @@ export const selectTriggerVariants = cva(
 export const selectValueVariants = cva(
   [
     'min-w-0 flex-1 text-start',
-    'data-[placeholder=true]:text-slate-400',
-    'data-[invalid=true]:text-red-600',
-    COLOR_TEXT_PRIMARY,
+    'text-content-primary',
+    'data-[placeholder=true]:text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
   ],
   {
     variants: {
       size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {
@@ -84,14 +92,14 @@ export const selectValueVariants = cva(
 export const selectIconVariants = cva(
   [
     'shrink-0 items-center justify-center self-center',
-    COLOR_TEXT_MUTED,
-    'data-[invalid=true]:text-red-500',
+    'text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
   ],
   {
     variants: {
       size: {
-        default: 'h-5 w-5',
-        small: 'h-4 w-4',
+        default: 'size-5',
+        small: 'size-4',
       },
     },
     defaultVariants: {
@@ -103,12 +111,12 @@ export const selectIconVariants = cva(
 // ── Content ─────────────────────────────────────────────────
 
 export const selectContentVariants = cva([
-  COLOR_BG_PRIMARY,
-  `border ${COLOR_BORDER_DEFAULT}`,
+  'bg-surface-primary',
+  'border border-stroke-secondary',
   'overflow-hidden',
-  RADIUS_MD,
+  'rounded-xl',
   Platform.select({
-    web: SHADOW_MD,
+    web: 'shadow-sm',
     default: '',
   }),
   'max-h-60',
@@ -122,10 +130,10 @@ export const selectItemVariants = cva(
     'flex-row items-center',
     'transition-colors duration-100',
     'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[state=checked]:bg-slate-50 data-[state=checked]:font-medium',
+    'data-[state=checked]:bg-surface-action-tint data-[state=checked]:font-medium',
     Platform.select({
-      default: 'data-[active=true]:bg-slate-100',
-      web: 'data-[hover=true]:bg-slate-50 data-[active=true]:data-[hover=true]:bg-slate-100 data-[highlighted=true]:bg-slate-50',
+      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 data-[highlighted=true]:bg-surface-action-tint-hover',
     }),
   ],
   {
@@ -144,12 +152,12 @@ export const selectItemVariants = cva(
 // ── ItemLabel ───────────────────────────────────────────────
 
 export const selectItemLabelVariants = cva(
-  [COLOR_TEXT_PRIMARY, 'data-[state=checked]:font-medium'],
+  ['text-content-primary', 'data-[state=checked]:font-medium'],
   {
     variants: {
       size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {

package/src/components/Skeleton/index.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, useEffect } from 'react';
+import { type ViewProps } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '@cdx-ui/utils';
+import { skeletonVariants } from './styles';
+
+export interface SkeletonProps extends ViewProps {
+  className?: string;
+  /** Pulse animation duration in milliseconds. @default 1000 */
+  duration?: number;
+}
+
+export const Skeleton = forwardRef<Animated.View, SkeletonProps>(
+  ({ className, style, duration = 1000, ...props }, ref) => {
+    const opacity = useSharedValue(1);
+
+    useEffect(() => {
+      opacity.set(
+        withRepeat(withTiming(0.35, { duration, easing: Easing.inOut(Easing.ease) }), -1, true),
+      );
+    }, [duration, opacity]);
+
+    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.get() }));
+
+    return (
+      <Animated.View
+        ref={ref}
+        className={cn(skeletonVariants(), className)}
+        style={[animatedStyle, style]}
+        {...props}
+      />
+    );
+  },
+);
+
+Skeleton.displayName = 'Skeleton';

package/src/components/Skeleton/styles.ts

@@ -0,0 +1,5 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const skeletonVariants = cva(['bg-surface-neutral-subtle', 'rounded-md']);
+
+export type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;

package/src/components/Switch/BaseSwitch.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
-import { Switch as RNSwitch, type SwitchProps } from 'react-native';
-import { cn } from '@cdx-ui/utils';
+import { Switch as RNSwitch, type SwitchProps as RNSwitchProps } from 'react-native';
+import { mergeDataAttributes, type IUseSwitchReturn } from '@cdx-ui/primitives';
+import { cn, composeEventHandlers } from '@cdx-ui/utils';
 import {
   switchIosBgVariants,
   switchThumbColorVariants,
@@ -8,29 +9,50 @@ import {
   switchTrackOnVariants,
 } from './styles';
 
-export interface BaseSwitchProps extends Omit<SwitchProps, 'className'> {
-  states?: Record<string, boolean | undefined>;
-  dataSet?: Record<string, string>;
+export interface BaseSwitchProps extends Omit<
+  RNSwitchProps,
+  | 'value'
+  | 'disabled'
+  | 'onValueChange'
+  | 'thumbColor'
+  | 'trackColor'
+  | 'ios_backgroundColor'
+  | 'className'
+> {
+  switchState: IUseSwitchReturn;
   className?: string;
-  size?: string;
+  size?: string | null;
 }
 
+/**
+ * Native host for `Switch`. Renders `RNSwitch` with Uniwind className passthrough
+ * derived from the resolved interaction state in `switchState`.
+ *
+ * All state/a11y/interaction machinery lives in the `useSwitch` hook; this file
+ * is pure rendering (Standard 3: primitives must not carry styling machinery).
+ */
 export const BaseSwitch = forwardRef<RNSwitch, BaseSwitchProps>(
-  ({ states, className, disabled, value, ...props }, ref) => {
-    const isChecked = value ?? states?.checked ?? false;
-    const isDisabled = disabled ?? states?.disabled ?? false;
-    const isInvalid = states?.invalid ?? false;
-
+  ({ switchState, className, size: _size, onFocus, onBlur, ...props }, ref) => {
     const uniwindProps: Record<string, string | undefined> = {
       className,
-      thumbColorClassName: cn(switchThumbColorVariants({ isDisabled })),
-      trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid })),
-      trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid })),
-      ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid })),
+      thumbColorClassName: cn(switchThumbColorVariants({ isDisabled: switchState.isDisabled })),
+      trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid: switchState.isInvalid })),
+      trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid: switchState.isInvalid })),
+      ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid: switchState.isInvalid })),
     };
 
     return (
-      <RNSwitch ref={ref} value={isChecked} disabled={isDisabled} {...uniwindProps} {...props} />
+      <RNSwitch
+        ref={ref}
+        value={switchState.checked}
+        disabled={switchState.isDisabled}
+        onValueChange={switchState.setChecked}
+        onFocus={composeEventHandlers(onFocus, switchState.focusProps.onFocus)}
+        onBlur={composeEventHandlers(onBlur, switchState.focusProps.onBlur)}
+        {...uniwindProps}
+        {...props}
+        {...mergeDataAttributes(props, switchState.dataAttrs)}
+      />
     );
   },
 );

package/src/components/Switch/BaseSwitch.web.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { Pressable, View } from 'react-native';
-import { cn } from '@cdx-ui/utils';
+import { mergeDataAttributes, type IUseSwitchReturn } from '@cdx-ui/primitives';
+import { cn, composeEventHandlers } from '@cdx-ui/utils';
 import {
   switchThumbVariants,
   switchTrackVariants,
@@ -9,58 +10,50 @@ import {
 } from './styles';
 
 export interface BaseSwitchProps {
-  value?: boolean;
-  onValueChange?: (value: boolean) => void;
-  disabled?: boolean;
-  states?: Record<string, boolean | undefined>;
-  dataSet?: Record<string, string>;
+  switchState: IUseSwitchReturn;
   className?: string;
   size?: SwitchVariantProps['size'];
+  accessibilityLabel?: string;
   onFocus?: () => void;
   onBlur?: () => void;
 }
 
+/**
+ * Web host for `Switch`. Renders a custom `Pressable` + `View` toggle (preserving
+ * the existing visual contract) wired to the resolved state in `switchState`.
+ *
+ * `role="switch"` + `aria-checked` + keyboard semantics satisfy the same a11y
+ * contract that an `<input type="checkbox" role="switch">` would provide, without
+ * the visual rework an input swap would require (see spike notes in PR).
+ */
 export const BaseSwitch = forwardRef<View, BaseSwitchProps>(
-  (
-    {
-      value,
-      onValueChange,
-      disabled,
-      states,
-      dataSet,
-      className,
-      size = 'md',
-      onFocus,
-      onBlur,
-      ...props
-    },
-    ref,
-  ) => {
-    const isChecked = value ?? states?.checked ?? false;
-    const isDisabled = disabled ?? states?.disabled ?? false;
-    const isInvalid = states?.invalid ?? false;
-
+  ({ switchState, className, size = 'md', accessibilityLabel, onFocus, onBlur, ...props }, ref) => {
     return (
       <Pressable
         ref={ref}
         role="switch"
-        aria-checked={isChecked}
-        aria-disabled={isDisabled}
-        disabled={isDisabled}
-        onPress={() => onValueChange?.(!isChecked)}
-        onFocus={onFocus}
-        onBlur={onBlur}
+        aria-checked={switchState.checked}
+        aria-disabled={switchState.isDisabled}
+        accessibilityLabel={accessibilityLabel}
+        disabled={switchState.isDisabled}
+        onPress={() => switchState.setChecked(!switchState.checked)}
+        onFocus={composeEventHandlers(onFocus, switchState.focusProps.onFocus as () => void)}
+        onBlur={composeEventHandlers(onBlur, switchState.focusProps.onBlur as () => void)}
+        onHoverIn={switchState.hoverProps.onHoverIn as () => void}
+        onHoverOut={switchState.hoverProps.onHoverOut as () => void}
         tabIndex={0}
         className={cn(
           switchTrackVariants({ size }),
-          switchWebTrackColorVariants({ isChecked, isInvalid }),
+          switchWebTrackColorVariants({
+            isChecked: switchState.checked,
+            isInvalid: switchState.isInvalid,
+          }),
           className,
         )}
-        // @ts-expect-error dataSet is a RNW/Uniwind prop not in Pressable types
-        dataSet={dataSet}
         {...props}
+        {...mergeDataAttributes(props, switchState.dataAttrs)}
       >
-        <View className={cn(switchThumbVariants({ size, isChecked }))} />
+        <View className={cn(switchThumbVariants({ size, isChecked: switchState.checked }))} />
       </Pressable>
     );
   },

package/src/components/Switch/index.tsx

@@ -1,11 +1,58 @@
-import { type ISwitchProps, createSwitch } from '@cdx-ui/primitives';
+import { forwardRef } from 'react';
+import type { Switch as RNSwitch, View } from 'react-native';
+import {
+  dataAttributes,
+  mergeDataAttributes,
+  useSwitch,
+  type ISwitchProps,
+} from '@cdx-ui/primitives';
 import { BaseSwitch } from './BaseSwitch';
 import type { SwitchVariantProps } from './styles';
 
-const SwitchPrimitive = createSwitch({ Root: BaseSwitch });
-
 export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
   className?: string;
+  accessibilityLabel?: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
-export const Switch = SwitchPrimitive;
+export const Switch = forwardRef<RNSwitch | View, SwitchProps>(
+  (
+    {
+      className,
+      size,
+      value,
+      isChecked,
+      defaultValue,
+      disabled,
+      isDisabled,
+      isInvalid,
+      onValueChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const switchState = useSwitch({
+      value,
+      isChecked,
+      defaultValue,
+      disabled,
+      isDisabled,
+      isInvalid,
+      onValueChange,
+    });
+
+    return (
+      <BaseSwitch
+        ref={ref as never}
+        switchState={switchState}
+        className={className}
+        size={size}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'switch' }))}
+      />
+    );
+  },
+);
+
+Switch.displayName = 'Switch';

package/src/components/Text/styles.ts

@@ -3,9 +3,9 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 export const textStyle = cva(
   [
-    `text-content-primary font-normal`,
+    'text-content-primary',
     Platform.select({
-      web: 'font-sans my-0 bg-transparent display-inline no-underline',
+      web: 'font-body my-0 bg-transparent no-underline',
       default: '',
     }),
   ],