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

package/lib/typescript/components/index.d.ts

@@ -1,7 +1,9 @@
 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';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,QAAQ,CAAC"}

package/lib/typescript/metro/withCdxMetroConfig.d.ts

@@ -0,0 +1,19 @@
+import type { MetroConfig } from 'metro-config';
+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 declare function withCdxMetroConfig<T extends MetroConfig>(config: T, options: CdxMetroConfigOptions): T;
+//# sourceMappingURL=withCdxMetroConfig.d.ts.map

package/lib/typescript/metro/withCdxMetroConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withCdxMetroConfig.d.ts","sourceRoot":"","sources":["../../../src/metro/withCdxMetroConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,MAAM,WAAW,qBAAqB;IACpC,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,EACtD,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,qBAAqB,GAC7B,CAAC,CAKH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.10",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -9,13 +9,18 @@
   "exports": {
     ".": {
       "react-native": "./src/index.ts",
-      "source": "./src/index.ts",
       "types": "./lib/typescript/index.d.ts",
       "import": "./lib/module/index.js",
       "require": "./lib/commonjs/index.js",
       "default": "./lib/module/index.js"
     },
-    "./styles.css": "./src/styles.css"
+    "./styles.css": "./src/styles.css",
+    "./metro": {
+      "types": "./lib/typescript/metro/withCdxMetroConfig.d.ts",
+      "require": "./lib/commonjs/metro/withCdxMetroConfig.js",
+      "import": "./lib/module/metro/withCdxMetroConfig.js",
+      "default": "./lib/commonjs/metro/withCdxMetroConfig.js"
+    }
   },
   "files": [
     "lib",
@@ -36,30 +41,27 @@
     ]
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "react-native": ">=0.74.0",
-    "react-native-web": ">=0.19.0",
-    "uniwind": ">=1.3.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-web": ">=0.19.0"
   },
   "peerDependenciesMeta": {
     "react-native": {
       "optional": true
     },
-    "react-native-web": {
+    "react-native-reanimated": {
       "optional": true
     },
-    "react-dom": {
-      "optional": true
-    },
-    "uniwind": {
+    "react-native-web": {
       "optional": true
     }
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
-    "@cdx-ui/primitives": "0.0.1-alpha.1",
-    "@cdx-ui/utils": "0.0.1-alpha.1"
+    "uniwind": "1.4.1",
+    "@cdx-ui/primitives": "0.0.1-alpha.10",
+    "@cdx-ui/utils": "0.0.1-alpha.10"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Button/styles.ts

@@ -8,9 +8,10 @@ export const buttonRootVariants = cva(
   [
     'flex-row items-center justify-center',
     'rounded-md',
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
     'transition-colors duration-150', // TODO: Transition not working on mobile
     'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none',
-    'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-ring data-[focus-visible=true]:ring-offset-2 data-[focus-visible=true]:ring-offset-bg',
+    'web:data-[focus-visible=true]:ring-3',
   ],
   {
     variants: {
@@ -18,21 +19,21 @@ export const buttonRootVariants = cva(
         solid: [],
         subtle: [],
         outline: [
-          'bg-transparent border border-border',
-          'data-[hover=true]:bg-surface',
-          'data-[active=true]:bg-surface-raised',
+          'bg-transparent border border-neutral-border-strong',
+          'data-[hover=true]:bg-neutral-background',
+          'data-[active=true]:bg-neutral-border',
         ],
         ghost: [
           'bg-transparent',
-          'data-[hover=true]:bg-surface',
-          'data-[active=true]:bg-surface-raised',
+          'data-[hover=true]:bg-neutral-background',
+          'data-[active=true]:bg-neutral-border',
         ],
       },
       color: {
-        primary: [],
-        secondary: [],
-        success: [],
-        danger: [],
+        primary: 'web:data-[focus-visible=true]:ring-blue-300/50',
+        secondary: 'web:data-[focus-visible=true]:ring-amber-300/50',
+        success: 'web:data-[focus-visible=true]:ring-green-300/50',
+        danger: 'web:data-[focus-visible=true]:ring-red-300/50',
       },
       size: {
         sm: 'h-8 px-3 gap-1.5',
@@ -138,6 +139,7 @@ export const buttonRootVariants = cva(
         color: 'primary',
         className: [
           'border-blue-500',
+          'data-[focus-visible=true]:border-blue-500',
           Platform.select({
             default: 'data-[active=true]:border-blue-700 data-[active=true]:bg-blue-100',
             web: 'data-[hover=true]:border-blue-600 data-[hover=true]:bg-blue-100 data-[active=true]:data-[hover=true]:border-blue-700 data-[active=true]:data-[hover=true]:bg-blue-200',
@@ -149,6 +151,7 @@ export const buttonRootVariants = cva(
         color: 'secondary',
         className: [
           'border-amber-500',
+          'data-[focus-visible=true]:border-amber-500',
           Platform.select({
             default: 'data-[active=true]:border-amber-700 data-[active=true]:bg-amber-50',
             web: 'data-[hover=true]:border-amber-600 data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:border-amber-700 data-[active=true]:data-[hover=true]:bg-amber-100',
@@ -160,6 +163,7 @@ export const buttonRootVariants = cva(
         color: 'success',
         className: [
           'border-green-500',
+          'data-[focus-visible=true]:border-green-500',
           Platform.select({
             default: 'data-[active=true]:border-green-700 data-[active=true]:bg-green-100',
             web: 'data-[hover=true]:border-green-600 data-[hover=true]:bg-green-100 data-[active=true]:data-[hover=true]:border-green-700 data-[active=true]:data-[hover=true]:bg-green-200',
@@ -171,6 +175,7 @@ export const buttonRootVariants = cva(
         color: 'danger',
         className: [
           'border-red-500',
+          'data-[focus-visible=true]:border-red-500',
           Platform.select({
             default: 'data-[active=true]:border-red-700 data-[active=true]:bg-red-100',
             web: 'data-[hover=true]:border-red-600 data-[hover=true]:bg-red-100 data-[active=true]:data-[hover=true]:border-red-700 data-[active=true]:data-[hover=true]:bg-red-200',

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,215 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
+import { createCheckbox, type ICheckboxProps } from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import {
+  type CheckboxVariantProps,
+  checkboxGroupVariants,
+  checkboxIconVariants,
+  checkboxIndicatorVariants,
+  checkboxLabelVariants,
+  checkboxRootVariants,
+} from './styles';
+
+const SCOPE = 'CHECKBOX';
+
+const Root = withStyleContext(Pressable, SCOPE);
+
+const useCheckboxStyleContext = () => useStyleContext(SCOPE) as CheckboxVariantProps;
+
+const CheckboxPrimitive = createCheckbox({
+  Root,
+  Indicator: View,
+  Icon: View,
+  Label: Text,
+  Group: View,
+});
+
+// =============================================================================
+// CHECKBOX ROOT
+// =============================================================================
+
+export interface CheckboxProps extends ICheckboxProps, CheckboxVariantProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CheckboxRoot = forwardRef<View, CheckboxProps>(
+  ({ size = 'md', className, children, style, ...props }, ref) => {
+    const computedClassName = cn(checkboxRootVariants({ size }), className);
+
+    return (
+      <CheckboxPrimitive
+        ref={ref as any}
+        className={computedClassName}
+        style={style}
+        context={{ size }}
+        {...props}
+      >
+        {children}
+      </CheckboxPrimitive>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'Checkbox';
+
+// =============================================================================
+// CHECKBOX INDICATOR
+// =============================================================================
+
+export interface CheckboxIndicatorProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CheckboxIndicator = forwardRef<View, CheckboxIndicatorProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useCheckboxStyleContext();
+    const computedClassName = cn(checkboxIndicatorVariants({ size }), className);
+
+    return (
+      <CheckboxPrimitive.Indicator
+        ref={ref as any}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {children}
+      </CheckboxPrimitive.Indicator>
+    );
+  },
+);
+
+CheckboxIndicator.displayName = 'Checkbox.Indicator';
+
+// =============================================================================
+// CHECKBOX ICON
+// =============================================================================
+
+export interface CheckboxIconProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CheckboxIcon = forwardRef<View, CheckboxIconProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useCheckboxStyleContext();
+    const computedClassName = cn(checkboxIconVariants({ size }), className);
+
+    return (
+      <CheckboxPrimitive.Icon
+        ref={ref as any}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {children}
+      </CheckboxPrimitive.Icon>
+    );
+  },
+);
+
+CheckboxIcon.displayName = 'Checkbox.Icon';
+
+// =============================================================================
+// CHECKBOX LABEL
+// =============================================================================
+
+export interface CheckboxLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CheckboxLabel = forwardRef<Text, CheckboxLabelProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useCheckboxStyleContext();
+    const computedClassName = cn(checkboxLabelVariants({ size }), className);
+
+    return (
+      <CheckboxPrimitive.Label
+        ref={ref as any}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {children}
+      </CheckboxPrimitive.Label>
+    );
+  },
+);
+
+CheckboxLabel.displayName = 'Checkbox.Label';
+
+// =============================================================================
+// CHECKBOX GROUP
+// =============================================================================
+
+export interface CheckboxGroupProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  direction?: 'column' | 'row';
+}
+
+const CheckboxGroup = forwardRef<View, CheckboxGroupProps>(
+  (
+    {
+      className,
+      children,
+      style,
+      direction = 'column',
+      value,
+      onChange,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      ...viewProps
+    },
+    ref,
+  ) => {
+    const computedClassName = cn(checkboxGroupVariants({ direction }), className);
+
+    return (
+      <CheckboxPrimitive.Group
+        ref={ref as any}
+        className={computedClassName}
+        style={style}
+        value={value ?? []}
+        onChange={onChange}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isReadOnly={isReadOnly}
+        {...viewProps}
+      >
+        {children}
+      </CheckboxPrimitive.Group>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'Checkbox.Group';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type CheckboxCompoundComponent = typeof CheckboxRoot & {
+  Indicator: typeof CheckboxIndicator;
+  Icon: typeof CheckboxIcon;
+  Label: typeof CheckboxLabel;
+  Group: typeof CheckboxGroup;
+};
+
+export const Checkbox = Object.assign(CheckboxRoot, {
+  Indicator: CheckboxIndicator,
+  Icon: CheckboxIcon,
+  Label: CheckboxLabel,
+  Group: CheckboxGroup,
+}) as CheckboxCompoundComponent;
+
+export type { CheckboxVariantProps };

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,94 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const checkboxRootVariants = cva(
+  [
+    'flex-row items-center',
+    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'gap-2',
+        md: 'gap-2.5',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export const checkboxIndicatorVariants = cva(
+  [
+    'items-center justify-center',
+    'rounded',
+    'border-2 border-neutral-border-strong',
+    'data-[checked=true]:bg-blue-500 data-[checked=true]:border-blue-500',
+    'data-[disabled=true]:opacity-60',
+    'data-[invalid=true]:border-red-500',
+    'data-[checked=true]:data-[invalid=true]:bg-red-500 data-[checked=true]:data-[invalid=true]:border-red-500',
+    Platform.select({
+      web: [
+        'transition-colors duration-150',
+        'data-[hover=true]:border-zinc-500 data-[hover=true]:bg-zinc-50',
+        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-blue-300/50 data-[focus-visible=true]:ring-offset-1',
+        'data-[invalid=true]:data-[hover=true]:border-red-400',
+        'data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50',
+      ].join(' '),
+      default: '',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'h-4 w-4',
+        md: 'h-5 w-5',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export const checkboxIconVariants = cva(['text-white'], {
+  variants: {
+    size: {
+      sm: 'h-3 w-3',
+      md: 'h-3.5 w-3.5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const checkboxLabelVariants = cva(
+  ['text-neutral-text-primary', 'data-[disabled=true]:text-neutral-text-tertiary'],
+  {
+    variants: {
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export const checkboxGroupVariants = cva([], {
+  variants: {
+    direction: {
+      column: 'gap-2',
+      row: 'flex-row gap-4',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+  },
+});
+
+export type CheckboxVariantProps = VariantProps<typeof checkboxRootVariants>;

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,49 @@
+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: {
+      xs: spaceMap.xs,
+      sm: spaceMap.sm,
+      md: spaceMap.md,
+      lg: spaceMap.lg,
+      xl: spaceMap.xl,
+    },
+  },
+  defaultVariants: {
+    reversed: false,
+  },
+});
+
+export const vStackRootVariants = cva([], {
+  variants: {
+    reversed: {
+      true: 'flex-col-reverse',
+      false: 'flex-col',
+    },
+    space: {
+      xs: spaceMap.xs,
+      sm: spaceMap.sm,
+      md: spaceMap.md,
+      lg: spaceMap.lg,
+      xl: spaceMap.xl,
+    },
+  },
+  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';