@cdx-ui/components 0.0.1-alpha.2 → 0.0.1-alpha.20

package/src/components/Icon/index.tsx

@@ -0,0 +1,54 @@
+import { withUniwind } from 'uniwind';
+import { cn } from '@cdx-ui/utils';
+import type { CdxIcon, CdxIconProps } from '@cdx-ui/icons';
+import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
+
+export type IconProps = CdxIconProps & {
+  className?: string; // TODO: Why does this need to specified manually?
+  as: CdxIcon;
+};
+
+function IconImpl({ as: IconComponent, ...props }: IconProps) {
+  return <IconComponent {...props} />;
+}
+
+const StyledIcon = withUniwind(IconImpl, {
+  size: {
+    fromClassName: 'className',
+    styleProperty: 'width',
+  },
+  color: {
+    fromClassName: 'className',
+    styleProperty: 'color',
+  },
+});
+
+/**
+ * A wrapper component for CDX icons with Uniwind `className` support via `withUniwind`.
+ *
+ * This component allows you to render any CDX icon while applying utility classes
+ * using `uniwind`. It avoids the need to wrap or configure each icon individually.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Icon } from '@cdx-ui/components';
+ * import { ArrowRight } from '@cdx-ui/icons';
+ *
+ * <Icon as={ArrowRight} className="text-red-500 size-4" />
+ * ```
+ *
+ * @param {CdxIcon} as - The CDX icon component to render.
+ * @param {string} className - Utility classes to style the icon using Uniwind.
+ * @param {number} size - Icon size (overrides the size class).
+ * @param {...CdxIconProps} ...props - Additional icon props passed to the "as" icon.
+ */
+export function Icon({ as: IconComponent, className, ...props }: IconProps) {
+  return (
+    <StyledIcon
+      as={IconComponent}
+      className={cn(COLOR_TEXT_PRIMARY, 'size-5', className)}
+      {...props}
+    />
+  );
+}

package/src/components/Input/index.tsx

@@ -7,6 +7,7 @@ import {
   type IInputSlotProps,
 } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, IconProps } from '../Icon';
 import { BaseInput } from './BaseInput';
 import {
   type InputVariantProps,
@@ -25,7 +26,6 @@ const useInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
 
 const InputPrimitive = createInput({
   Root,
-  Icon: View,
   Slot: View,
   Field: BaseInput,
 });
@@ -40,7 +40,7 @@ export interface InputProps extends ViewProps, IInputFieldProps, InputVariantPro
 }
 
 const InputRoot = forwardRef<View, InputProps>(
-  ({ variant = 'outline', size = 'md', className, children, style, ...props }, ref) => {
+  ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
     const computedClassName = cn(inputRootVariants({ variant, size }), className);
 
     return (
@@ -103,9 +103,7 @@ export interface InputSlotProps extends ViewProps, IInputSlotProps {
 
 const InputSlot = forwardRef<View, InputSlotProps>(
   ({ className, children, style, ...props }, ref) => {
-    const { size } = useInputStyleContext();
-
-    const computedClassName = cn(inputSlotVariants({ size }), className);
+    const computedClassName = cn(inputSlotVariants(), className);
 
     return (
       <InputPrimitive.Slot ref={ref} className={computedClassName} style={style} {...props}>
@@ -121,24 +119,15 @@ InputSlot.displayName = 'Input.Slot';
 // INPUT ICON
 // =============================================================================
 
-export interface InputIconProps extends ViewProps {
-  className?: string;
-  children?: ReactNode;
-}
+export interface InputIconProps extends Omit<IconProps, 'children'> {}
 
-const InputIcon = forwardRef<View, InputIconProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { size } = useInputStyleContext();
+const InputIcon = ({ className, style, as, ...props }: InputIconProps) => {
+  const { size } = useInputStyleContext();
 
-    const computedClassName = cn(inputIconVariants({ size }), className);
+  const computedClassName = cn(inputIconVariants({ size }), className);
 
-    return (
-      <InputPrimitive.Icon ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-      </InputPrimitive.Icon>
-    );
-  },
-);
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
 
 InputIcon.displayName = 'Input.Icon';
 

package/src/components/Input/styles.ts

@@ -1,83 +1,88 @@
 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,
+  SHADOW_SM,
+  SIZE_SCALE,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
 
 export const inputRootVariants = cva(
   [
-    'w-full flex-row items-center',
-    'border border-neutral-border-strong bg-neutral-surface shadow-sm',
-    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-interactive-disabled-background data-[disabled=true]:border-interactive-disabled',
-    'data-[focus=true]:border-interactive-focus',
+    'w-full flex-row items-stretch border',
+    COLOR_BG_PRIMARY,
+    COLOR_BORDER_DEFAULT,
+    RADIUS_SM,
+    SHADOW_SM,
+    TRANSITION_COLORS,
+    DISABLED_OPACITY,
+    DISABLED_CURSOR,
+    'data-[disabled=true]:bg-slate-50 data-[disabled=true]:border-slate-300',
+    'data-[readonly=true]:cursor-default',
+    'data-[readonly=true]:bg-slate-50',
+    'web:data-[hover=true]:data-[active=false]:border-slate-300',
+    'data-[focus=true]:border-slate-900',
     'data-[invalid=true]:border-red-500',
   ],
   {
     variants: {
       variant: {
         outline: [
-          'rounded-md px-3',
-          'web:focus-within:border-interactive-focus web:focus-within:ring-3 web:focus-within:ring-blue-300/50',
-          'web:data-[invalid=true]:focus-within:border-red-500 web:data-[invalid=true]:focus-within:ring-red-300/50',
+          'web:focus-within:border-slate-900 web:focus-within:ring-2 web:focus-within:ring-slate-400/50 web:focus-within:ring-offset-0',
+          'web:data-[invalid=true]:focus-within:border-red-500 web:data-[invalid=true]:focus-within:ring-2 web:data-[invalid=true]:focus-within:ring-red-400/50',
         ],
-        underlined:
-          'rounded-none border-t-0 border-l-0 border-r-0 border-b-neutral-border data-[focus=true]:border-b-interactive-focus shadow-none',
       },
       size: {
-        sm: 'h-9 py-1',
-        md: 'h-11 py-1.5',
-        lg: 'h-12 py-2',
+        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} py-2 ${SIZE_SCALE.default.gap}`,
+        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} py-1.5 ${SIZE_SCALE.small.gap}`,
       },
     },
     defaultVariants: {
       variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
 
 export const inputFieldVariants = cva(
   [
-    'flex-1 bg-transparent text-neutral-text-primary',
-    'placeholder:text-neutral-placeholder',
+    'flex-1 justify-center bg-transparent',
+    COLOR_TEXT_PRIMARY,
+    'placeholder:text-slate-400',
     'web:outline-none',
   ],
   {
     variants: {
       size: {
-        sm: 'text-sm leading-none',
-        md: 'text-base leading-none',
-        lg: 'text-lg leading-none',
+        default: 'text-[1rem]',
+        small: 'text-[0.875rem]',
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: 'default',
     },
   },
 );
 
-export const inputSlotVariants = cva(['items-center justify-center'], {
-  variants: {
-    size: {
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-6 w-6',
-    },
-  },
-  defaultVariants: {
-    size: 'sm',
-  },
-});
+export const inputSlotVariants = cva(['items-center justify-center self-center']);
 
-export const inputIconVariants = cva(['text-neutral-text-tertiary'], {
+export const inputIconVariants = cva([COLOR_TEXT_MUTED], {
   variants: {
     size: {
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-5 w-5',
+      default: 'size-5',
+      small: 'size-4',
     },
   },
   defaultVariants: {
-    size: 'sm',
+    size: 'default',
   },
 });
 
-export const inputFieldPlaceholderVariants = cva(['accent-neutral-placeholder']);
+export const inputFieldPlaceholderVariants = cva(['accent-slate-400']);
 
 export type InputVariantProps = VariantProps<typeof inputRootVariants>;

package/src/components/Link/index.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import { Pressable, type View } from 'react-native';
+import { createLink, type ILinkProps } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { linkRootVariants } from './styles';
+
+export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
+
+const LinkPrimitive = createLink({
+  Root: Pressable,
+});
+
+export interface LinkProps extends ILinkProps {
+  className?: string;
+}
+
+export const Link = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
+  const rootClassName = cn(linkRootVariants(), className);
+
+  return (
+    <LinkPrimitive ref={ref} className={rootClassName} style={style} {...props}>
+      {children}
+    </LinkPrimitive>
+  );
+});
+
+Link.displayName = 'Link';

package/src/components/Link/styles.ts

@@ -0,0 +1,16 @@
+import { Platform } from 'react-native';
+import { cva } from 'class-variance-authority';
+import { COLOR_TEXT_PRIMARY, TRANSITION_COLORS } from '../../styles/primitives';
+
+export const linkRootVariants = cva([
+  'flex-row items-center',
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  COLOR_TEXT_PRIMARY,
+  'underline decoration-slate-300 underline-offset-4',
+  TRANSITION_COLORS,
+  Platform.select({
+    web: 'data-[hover=true]:decoration-slate-900',
+    default: '',
+  }),
+  'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-slate-400/50 web:data-[focus-visible=true]:ring-offset-2',
+]);

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,7 @@ import {
   type ISelectValueProps,
 } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, IconProps } from '../Icon';
 import {
   type SelectVariantProps,
   selectContentVariants,
@@ -45,7 +47,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 +82,7 @@ const SelectTrigger = forwardRef<View, SelectTriggerProps>(
     return (
       <SelectPrimitive.Trigger ref={ref} className={computedClassName} style={style} {...props}>
         {children}
+        <SelectIcon as={ArrowDropDown} />
       </SelectPrimitive.Trigger>
     );
   },
@@ -96,9 +99,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 +112,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';
 

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',
+    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'],
+  [
+    'flex-1',
+    '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,16 @@ export const selectValueVariants = cva(
 // ── Icon ────────────────────────────────────────────────────
 
 export const selectIconVariants = cva(
-  ['items-center justify-center', 'data-[invalid=true]:text-red-500'],
+  ['items-center justify-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 +99,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 +118,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 +140,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}