@cdx-ui/components 0.0.1-alpha.3 → 0.0.1-alpha.31

package/src/components/Select/index.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, type ReactNode } from 'react';
 import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
+import { ArrowDropDown } from '@cdx-ui/icons';
 import {
   createSelect,
   type ISelectContentProps,
@@ -10,6 +11,8 @@ import {
   type ISelectValueProps,
 } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, IconProps } from '../Icon';
+import { SelectTriggerHost } from './SelectTriggerHost';
 import {
   type SelectVariantProps,
   selectContentVariants,
@@ -28,7 +31,7 @@ const useSelectStyleContext = () => useStyleContext(SCOPE) as SelectVariantProps
 
 const SelectPrimitive = createSelect({
   Root,
-  Trigger: Pressable,
+  Trigger: SelectTriggerHost,
   Value: Text,
   Icon: View,
   Content: View,
@@ -45,7 +48,7 @@ export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps
 }
 
 const SelectRoot = forwardRef<View, SelectProps>(
-  ({ variant = 'outline', size = 'md', className, children, style, ...props }, ref) => {
+  ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
     return (
       <SelectPrimitive
         ref={ref}
@@ -80,6 +83,7 @@ const SelectTrigger = forwardRef<View, SelectTriggerProps>(
     return (
       <SelectPrimitive.Trigger ref={ref} className={computedClassName} style={style} {...props}>
         {children}
+        <SelectIcon as={ArrowDropDown} />
       </SelectPrimitive.Trigger>
     );
   },
@@ -96,9 +100,9 @@ export interface SelectValueProps extends TextProps, ISelectValueProps {
 }
 
 const SelectValue = forwardRef<Text, SelectValueProps>(({ className, style, ...props }, ref) => {
-  const { variant, size } = useSelectStyleContext();
+  const { size } = useSelectStyleContext();
 
-  const computedClassName = cn(selectValueVariants({ variant, size }), className);
+  const computedClassName = cn(selectValueVariants({ size }), className);
 
   return <SelectPrimitive.Value ref={ref} className={computedClassName} style={style} {...props} />;
 });
@@ -109,17 +113,15 @@ SelectValue.displayName = 'Select.Value';
 // STYLED ICON COMPONENT
 // =============================================================================
 
-export interface SelectIconProps extends ViewProps {
-  className?: string;
-}
+export interface SelectIconProps extends Omit<IconProps, 'children'> {}
 
-const SelectIcon = forwardRef<View, SelectIconProps>(({ className, style, ...props }, ref) => {
-  const { variant, size } = useSelectStyleContext();
+const SelectIcon = ({ className, style, ...props }: SelectIconProps) => {
+  const { size } = useSelectStyleContext();
 
-  const computedClassName = cn(selectIconVariants({ variant, size }), className);
+  const computedClassName = cn(selectIconVariants({ size }), className);
 
-  return <SelectPrimitive.Icon ref={ref} className={computedClassName} style={style} {...props} />;
-});
+  return <Icon className={computedClassName} style={style} {...props} />;
+};
 
 SelectIcon.displayName = 'Select.Icon';
 
@@ -211,5 +213,3 @@ export const Select = Object.assign(SelectRoot, {
   Item: SelectItem,
   ItemLabel: SelectItemLabel,
 }) as SelectCompoundComponent;
-
-export type { SelectVariantProps } from './styles';

package/src/components/Select/styles.ts

@@ -1,58 +1,58 @@
 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';
 
 // ── Trigger ─────────────────────────────────────────────────
 
 export const selectTriggerVariants = cva(
   [
-    'flex-row items-center justify-between',
-    'rounded-lg',
-    'transition-colors duration-150',
-    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none',
+    'flex w-full min-w-0 flex-row items-center justify-between text-start',
+    RADIUS_SM,
+    SHADOW_SM,
+    TRANSITION_COLORS,
+    COLOR_BG_PRIMARY,
+    `border ${COLOR_BORDER_DEFAULT}`,
+    DISABLED_OPACITY,
+    DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
-    'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-blue-500 data-[focus-visible=true]:ring-offset-2',
+    '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(' '),
+    }),
   ],
   {
     variants: {
       variant: {
-        outline: [
-          'bg-white border border-gray-300',
-          Platform.select({
-            default: 'data-[active=true]:border-gray-400',
-            web: 'data-[hover=true]:border-gray-400 data-[active=true]:data-[hover=true]:border-gray-500',
-          }),
-          'data-[state=open]:data-[invalid=false]:border-blue-500',
-          'data-[invalid=true]:border-red-500',
-          'data-[readonly=true]:bg-gray-50',
-        ],
-        filled: [
-          'bg-gray-100 border border-transparent',
-          Platform.select({
-            default: 'data-[active=true]:bg-gray-200',
-            web: 'data-[hover=true]:bg-gray-200 data-[active=true]:data-[hover=true]:bg-gray-300',
-          }),
-          'data-[state=open]:border-blue-500',
-          'data-[invalid=true]:border-red-500 data-[invalid=true]:border',
-          'data-[readonly=true]:bg-gray-200',
-        ],
-        ghost: [
-          'bg-transparent border border-transparent',
-          Platform.select({
-            default: 'data-[active=true]:bg-gray-100',
-            web: 'data-[hover=true]:bg-gray-50 data-[active=true]:data-[hover=true]:bg-gray-100',
-          }),
-          'data-[invalid=true]:border-red-500 data-[invalid=true]:border',
-        ],
+        outline: [],
       },
       size: {
-        sm: 'h-8 px-2.5 gap-1.5',
-        md: 'h-10 px-3 gap-2',
-        lg: 'h-12 px-4 gap-2.5',
+        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}`,
       },
     },
     defaultVariants: {
       variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -60,23 +60,21 @@ export const selectTriggerVariants = cva(
 // ── Value ───────────────────────────────────────────────────
 
 export const selectValueVariants = cva(
-  ['flex-1', 'data-[placeholder=true]:text-gray-400', 'data-[invalid=true]:text-red-600'],
+  [
+    'min-w-0 flex-1 text-start',
+    'data-[placeholder=true]:text-slate-400',
+    'data-[invalid=true]:text-red-600',
+    COLOR_TEXT_PRIMARY,
+  ],
   {
     variants: {
-      variant: {
-        outline: 'text-gray-900',
-        filled: 'text-gray-900',
-        ghost: 'text-gray-900',
-      },
       size: {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
+        default: SIZE_SCALE.default.text,
+        small: SIZE_SCALE.small.text,
       },
     },
     defaultVariants: {
-      variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -84,23 +82,20 @@ export const selectValueVariants = cva(
 // ── Icon ────────────────────────────────────────────────────
 
 export const selectIconVariants = cva(
-  ['items-center justify-center', 'data-[invalid=true]:text-red-500'],
+  [
+    'shrink-0 items-center justify-center self-center',
+    COLOR_TEXT_MUTED,
+    'data-[invalid=true]:text-red-500',
+  ],
   {
     variants: {
-      variant: {
-        outline: 'text-gray-500',
-        filled: 'text-gray-500',
-        ghost: 'text-gray-400',
-      },
       size: {
-        sm: 'h-4 w-4',
-        md: 'h-5 w-5',
-        lg: 'h-6 w-6',
+        default: 'h-5 w-5',
+        small: 'h-4 w-4',
       },
     },
     defaultVariants: {
-      variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -108,12 +103,12 @@ export const selectIconVariants = cva(
 // ── Content ─────────────────────────────────────────────────
 
 export const selectContentVariants = cva([
-  'bg-white',
-  'border border-gray-200',
+  COLOR_BG_PRIMARY,
+  `border ${COLOR_BORDER_DEFAULT}`,
   'overflow-hidden',
-  'rounded-lg',
+  RADIUS_MD,
   Platform.select({
-    web: 'shadow-lg',
+    web: SHADOW_MD,
     default: '',
   }),
   'max-h-60',
@@ -127,22 +122,21 @@ 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-blue-50',
+    'data-[state=checked]:bg-slate-50 data-[state=checked]:font-medium',
     Platform.select({
-      default: 'data-[active=true]:bg-gray-100',
-      web: 'data-[hover=true]:bg-gray-100 data-[active=true]:data-[hover=true]:bg-gray-200 data-[highlighted=true]:bg-blue-50',
+      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',
     }),
   ],
   {
     variants: {
       size: {
-        sm: 'px-2.5 py-1.5',
-        md: 'px-3 py-2',
-        lg: 'px-4 py-2.5',
+        default: 'px-3 py-2',
+        small: 'px-2.5 py-1.5',
       },
     },
     defaultVariants: {
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -150,17 +144,16 @@ export const selectItemVariants = cva(
 // ── ItemLabel ───────────────────────────────────────────────
 
 export const selectItemLabelVariants = cva(
-  ['text-gray-900', 'data-[state=checked]:font-semibold', 'data-[state=checked]:text-blue-700'],
+  [COLOR_TEXT_PRIMARY, 'data-[state=checked]:font-medium'],
   {
     variants: {
       size: {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
+        default: SIZE_SCALE.default.text,
+        small: SIZE_SCALE.small.text,
       },
     },
     defaultVariants: {
-      size: 'md',
+      size: 'default',
     },
   },
 );

package/src/components/Stack/HStack.tsx

@@ -1,21 +1,8 @@
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
-// import { spacing } from '@cdx-ui/tokens';
-
-// TODO: Integrate with tokens (multiply by spacing)
-const spaceScale = {
-  xs: 1,
-  sm: 2,
-  md: 3,
-  lg: 4,
-  xl: 5,
-  '2xl': 6,
-  '3xl': 7,
-  '4xl': 8,
-} as const;
-
-type StackSpace = keyof typeof spaceScale;
+import { cn } from '@cdx-ui/utils';
+import { hStackRootVariants, type StackSpace } from './styles';
 
 export interface HStackProps extends ViewProps {
   className?: string;
@@ -24,13 +11,15 @@ export interface HStackProps extends ViewProps {
 }
 
 export const HStack = forwardRef<View, HStackProps>(
-  ({ space, reversed, style, className, children, ...restProps }, ref: ForwardedRef<View>) => {
-    const gap = space ? spaceScale[space] : undefined;
+  (
+    { reversed = false, space, style, className, children, ...restProps },
+    ref: ForwardedRef<View>,
+  ) => {
     return (
       <View
         ref={ref}
-        className={className}
-        style={[{ flexDirection: reversed ? 'row-reverse' : 'row' }, gap ? { gap } : null, style]}
+        className={cn(hStackRootVariants({ reversed, space }), className)}
+        style={style}
         {...restProps}
       >
         {children}

package/src/components/Stack/VStack.tsx

@@ -1,21 +1,8 @@
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
-// import { spacing } from '@cdx-ui/tokens';
-
-// TODO: Integrate with tokens (multiply by spacing)
-const spaceScale = {
-  xs: 1,
-  sm: 2,
-  md: 3,
-  lg: 4,
-  xl: 5,
-  '2xl': 6,
-  '3xl': 7,
-  '4xl': 8,
-} as const;
-
-type StackSpace = keyof typeof spaceScale;
+import { cn } from '@cdx-ui/utils';
+import { vStackRootVariants, type StackSpace } from './styles';
 
 export interface VStackProps extends ViewProps {
   className?: string;
@@ -24,17 +11,15 @@ export interface VStackProps extends ViewProps {
 }
 
 export const VStack = forwardRef<View, VStackProps>(
-  ({ space, reversed, style, className, children, ...restProps }, ref: ForwardedRef<View>) => {
-    const gap = space ? spaceScale[space] : undefined;
+  (
+    { reversed = false, space, style, className, children, ...restProps },
+    ref: ForwardedRef<View>,
+  ) => {
     return (
       <View
         ref={ref}
-        className={className}
-        style={[
-          { flexDirection: reversed ? 'column-reverse' : 'column' },
-          gap ? { gap } : null,
-          style,
-        ]}
+        className={cn(vStackRootVariants({ reversed, space }), className)}
+        style={style}
         {...restProps}
       >
         {children}

package/src/components/Stack/styles.ts

@@ -0,0 +1,37 @@
+import { cva } from 'class-variance-authority';
+
+export type StackSpace = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+const spaceMap = {
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-3',
+  lg: 'gap-4',
+  xl: 'gap-5',
+} as const satisfies Record<StackSpace, string>;
+
+export const hStackRootVariants = cva([], {
+  variants: {
+    reversed: {
+      true: 'flex-row-reverse',
+      false: 'flex-row',
+    },
+    space: spaceMap,
+  },
+  defaultVariants: {
+    reversed: false,
+  },
+});
+
+export const vStackRootVariants = cva([], {
+  variants: {
+    reversed: {
+      true: 'flex-col-reverse',
+      false: 'flex-col',
+    },
+    space: spaceMap,
+  },
+  defaultVariants: {
+    reversed: false,
+  },
+});

package/src/components/Switch/BaseSwitch.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import { Switch as RNSwitch, type SwitchProps } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  switchIosBgVariants,
+  switchThumbColorVariants,
+  switchTrackOffVariants,
+  switchTrackOnVariants,
+} from './styles';
+
+export interface BaseSwitchProps extends Omit<SwitchProps, 'className'> {
+  states?: Record<string, boolean | undefined>;
+  dataSet?: Record<string, string>;
+  className?: string;
+  size?: string;
+}
+
+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;
+
+    const uniwindProps: Record<string, string | undefined> = {
+      className,
+      thumbColorClassName: cn(switchThumbColorVariants({ isDisabled })),
+      trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid })),
+      trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid })),
+      ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid })),
+    };
+
+    return (
+      <RNSwitch ref={ref} value={isChecked} disabled={isDisabled} {...uniwindProps} {...props} />
+    );
+  },
+);
+
+BaseSwitch.displayName = 'BaseSwitch';

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,11 @@
+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;

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>;