@cdx-ui/components 0.0.1-beta.15 → 0.0.1-beta.151

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,66 @@
-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 {
+export interface SwitchProps extends ISwitchProps {
+  /**
+   * Track and thumb size.
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional Uniwind/Tailwind classes, merged after the switch's own styles. */
   className?: string;
+  /** Accessible label announced by screen readers. */
+  accessibilityLabel?: string;
+  /** Called when the switch receives focus. */
+  onFocus?: () => void;
+  /** Called when the switch loses focus. */
+  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/Switch/styles.ts

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 // =============================================================================
 // NATIVE — Uniwind className bindings for RN Switch