@cdx-ui/components 0.0.1-alpha.1 → 0.0.1-alpha.10

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

@@ -0,0 +1,69 @@
+import { forwardRef } from 'react';
+import { Pressable, View } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  switchThumbVariants,
+  switchTrackVariants,
+  switchWebTrackColorVariants,
+  type SwitchVariantProps,
+} from './styles';
+
+export interface BaseSwitchProps {
+  value?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  states?: Record<string, boolean | undefined>;
+  dataSet?: Record<string, string>;
+  className?: string;
+  size?: SwitchVariantProps['size'];
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+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;
+
+    return (
+      <Pressable
+        ref={ref}
+        role="switch"
+        aria-checked={isChecked}
+        aria-disabled={isDisabled}
+        disabled={isDisabled}
+        onPress={() => onValueChange?.(!isChecked)}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        tabIndex={0}
+        className={cn(
+          switchTrackVariants({ size }),
+          switchWebTrackColorVariants({ isChecked, isInvalid }),
+          className,
+        )}
+        // @ts-expect-error dataSet is a RNW/Uniwind prop not in Pressable types
+        dataSet={dataSet}
+        {...props}
+      >
+        <View className={cn(switchThumbVariants({ size, isChecked }))} />
+      </Pressable>
+    );
+  },
+);
+
+BaseSwitch.displayName = 'BaseSwitch';

package/src/components/Switch/index.tsx

@@ -0,0 +1,13 @@
+import { type ISwitchProps, createSwitch } 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;
+}
+
+export const Switch = SwitchPrimitive;
+
+export type { SwitchVariantProps };

package/src/components/Switch/styles.ts

@@ -0,0 +1,120 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// =============================================================================
+// NATIVE — Uniwind className bindings for RN Switch
+// =============================================================================
+
+export const switchThumbColorVariants = cva(['accent-white'], {
+  variants: {
+    isDisabled: {
+      true: 'accent-gray-200',
+      false: '',
+    },
+  },
+  defaultVariants: { isDisabled: false },
+});
+
+export const switchTrackOnVariants = cva(['accent-blue-500'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-500',
+      false: '',
+    },
+  },
+  defaultVariants: { isInvalid: false },
+});
+
+export const switchTrackOffVariants = cva(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: '',
+    },
+  },
+  defaultVariants: { isInvalid: false },
+});
+
+export const switchIosBgVariants = cva(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: '',
+    },
+  },
+  defaultVariants: { isInvalid: false },
+});
+
+// =============================================================================
+// WEB — Tailwind classes for custom Pressable toggle
+// =============================================================================
+
+export const switchTrackVariants = cva(
+  [
+    'flex-row items-center rounded-full cursor-pointer',
+    'transition-colors duration-200',
+    'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed',
+    'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50',
+    'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'w-9 h-5 p-0.5',
+        md: 'w-11 h-6 p-0.5',
+        lg: 'w-14 h-8 p-1',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export const switchWebTrackColorVariants = cva([], {
+  variants: {
+    isChecked: {
+      true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
+      false: 'bg-gray-300 data-[hover=true]:bg-gray-400',
+    },
+    isInvalid: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    { isChecked: true, isInvalid: true, className: 'bg-red-500 data-[hover=true]:bg-red-600' },
+    { isChecked: false, isInvalid: true, className: 'bg-red-300 data-[hover=true]:bg-red-400' },
+  ],
+  defaultVariants: {
+    isChecked: false,
+    isInvalid: false,
+  },
+});
+
+export const switchThumbVariants = cva(
+  ['rounded-full bg-white shadow-sm', 'transition-transform duration-200'],
+  {
+    variants: {
+      size: {
+        sm: 'w-4 h-4',
+        md: 'w-5 h-5',
+        lg: 'w-6 h-6',
+      },
+      isChecked: {
+        true: '',
+        false: 'translate-x-0',
+      },
+    },
+    compoundVariants: [
+      { size: 'sm', isChecked: true, className: 'translate-x-4' },
+      { size: 'md', isChecked: true, className: 'translate-x-5' },
+      { size: 'lg', isChecked: true, className: 'translate-x-6' },
+    ],
+    defaultVariants: {
+      size: 'md',
+      isChecked: false,
+    },
+  },
+);
+
+export type SwitchVariantProps = VariantProps<typeof switchTrackVariants>;

package/src/components/index.ts

@@ -1,6 +1,8 @@
 export * from './Box';
 export * from './Button';
+export * from './Checkbox';
 export * from './Input';
 export * from './Select';
+export * from './Switch';
 export { HStack, VStack } from './Stack';
 export * from './Text';

package/src/metro/withCdxMetroConfig.ts

@@ -0,0 +1,29 @@
+import type { MetroConfig } from 'metro-config';
+import { withUniwindConfig } from 'uniwind/metro';
+
+export interface CdxMetroConfigOptions {
+  /** Path to the CSS entry file (e.g., `'./global.css'`). */
+  cssEntryFile: string;
+  /** Path where generated Tailwind class type definitions are written. */
+  generatedTypesFile?: string;
+}
+
+/**
+ * Wraps a Metro config with CDX UI's styling-layer configuration.
+ *
+ * Today this delegates to Uniwind. If the styling layer is swapped (see
+ * `docs/research/uniwind-to-nativewind-contingency.md`), only the internals
+ * of this function change — consuming Metro configs stay the same.
+ *
+ * Must be the **outermost** Metro config wrapper (after any other wrappers
+ * like `withStorybook`).
+ */
+export function withCdxMetroConfig<T extends MetroConfig>(
+  config: T,
+  options: CdxMetroConfigOptions,
+): T {
+  return withUniwindConfig(config, {
+    cssEntryFile: options.cssEntryFile,
+    dtsFile: options.generatedTypesFile,
+  }) as T;
+}