@cdx-ui/components 0.0.1-alpha.1

package/src/components/Button/styles.ts

@@ -0,0 +1,410 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// TODO: Split into 2 files
+// TODO: Create cva wrapper
+
+export const buttonRootVariants = cva(
+  [
+    'flex-row items-center justify-center',
+    'rounded-md',
+    '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',
+  ],
+  {
+    variants: {
+      variant: {
+        solid: [],
+        subtle: [],
+        outline: [
+          'bg-transparent border border-border',
+          'data-[hover=true]:bg-surface',
+          'data-[active=true]:bg-surface-raised',
+        ],
+        ghost: [
+          'bg-transparent',
+          'data-[hover=true]:bg-surface',
+          'data-[active=true]:bg-surface-raised',
+        ],
+      },
+      color: {
+        primary: [],
+        secondary: [],
+        success: [],
+        danger: [],
+      },
+      size: {
+        sm: 'h-8 px-3 gap-1.5',
+        md: 'h-10 px-4 gap-2',
+        lg: 'h-12 px-6 gap-2.5',
+      },
+      fullWidth: {
+        true: 'w-full',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        color: 'primary',
+        className: [
+          'bg-blue-500',
+          Platform.select({
+            default: 'data-[active=true]:bg-blue-700',
+            web: 'data-[hover=true]:bg-blue-600 data-[active=true]:data-[hover=true]:bg-blue-700',
+          }),
+        ],
+      },
+      {
+        variant: 'solid',
+        color: 'secondary',
+        className: [
+          'bg-amber-500',
+          Platform.select({
+            default: 'data-[active=true]:bg-amber-700',
+            web: 'data-[hover=true]:bg-amber-600 data-[active=true]:data-[hover=true]:bg-amber-700',
+          }),
+        ],
+      },
+      {
+        variant: 'solid',
+        color: 'success',
+        className: [
+          'bg-green-500',
+          Platform.select({
+            default: 'data-[active=true]:bg-green-700',
+            web: 'data-[hover=true]:bg-green-600 data-[active=true]:data-[hover=true]:bg-green-700',
+          }),
+        ],
+      },
+      {
+        variant: 'solid',
+        color: 'danger',
+        className: [
+          'bg-red-500',
+          Platform.select({
+            default: 'data-[active=true]:bg-red-700',
+            web: 'data-[hover=true]:bg-red-600 data-[active=true]:data-[hover=true]:bg-red-700',
+          }),
+        ],
+      },
+      {
+        variant: 'subtle',
+        color: 'primary',
+        className: [
+          'bg-blue-100',
+          Platform.select({
+            default: 'data-[active=true]:bg-blue-200',
+            web: 'data-[hover=true]:bg-blue-200 data-[active=true]:data-[hover=true]:bg-blue-300',
+          }),
+        ],
+      },
+      {
+        variant: 'subtle',
+        color: 'secondary',
+        className: [
+          'bg-amber-200',
+          Platform.select({
+            default: 'data-[active=true]:bg-amber-300',
+            web: 'data-[hover=true]:bg-amber-300 data-[active=true]:data-[hover=true]:bg-amber-400',
+          }),
+        ],
+      },
+      {
+        variant: 'subtle',
+        color: 'success',
+        className: [
+          'bg-green-200',
+          Platform.select({
+            default: 'data-[active=true]:bg-green-300',
+            web: 'data-[hover=true]:bg-green-300 data-[active=true]:data-[hover=true]:bg-green-400',
+          }),
+        ],
+      },
+      {
+        variant: 'subtle',
+        color: 'danger',
+        className: [
+          'bg-red-200',
+          Platform.select({
+            default: 'data-[active=true]:bg-red-300',
+            web: 'data-[hover=true]:bg-red-300 data-[active=true]:data-[hover=true]:bg-red-400',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'primary',
+        className: [
+          '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',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'secondary',
+        className: [
+          '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',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'success',
+        className: [
+          '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',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'danger',
+        className: [
+          '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',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'primary',
+        className: [
+          'bg-transparent',
+          Platform.select({
+            default: 'data-[active=true]:bg-blue-100',
+            web: 'data-[hover=true]:bg-blue-50 data-[active=true]:data-[hover=true]:bg-blue-100',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'secondary',
+        className: [
+          'bg-transparent',
+          Platform.select({
+            default: 'data-[active=true]:bg-amber-100',
+            web: 'data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:bg-amber-100',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'success',
+        className: [
+          'bg-transparent',
+          Platform.select({
+            default: 'data-[active=true]:bg-green-100',
+            web: 'data-[hover=true]:bg-green-50 data-[active=true]:data-[hover=true]:bg-green-100',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'danger',
+        className: [
+          'bg-transparent',
+          Platform.select({
+            default: 'data-[active=true]:bg-red-100',
+            web: 'data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:bg-red-100',
+          }),
+        ],
+      },
+    ],
+    defaultVariants: {
+      variant: 'solid',
+      color: 'primary',
+      size: 'md',
+      fullWidth: false,
+    },
+  },
+);
+
+export const buttonTextVariants = cva(['font-medium', 'text-center'], {
+  variants: {
+    variant: {
+      solid: 'text-white',
+      subtle: [],
+      outline: [],
+      ghost: [],
+    },
+    color: {
+      primary: [],
+      secondary: [],
+      success: [],
+      danger: [],
+    },
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'subtle',
+      color: 'primary',
+      className: 'text-blue-950',
+    },
+    {
+      variant: 'subtle',
+      color: 'secondary',
+      className: 'text-amber-950',
+    },
+    {
+      variant: 'subtle',
+      color: 'success',
+      className: 'text-green-950',
+    },
+    {
+      variant: 'subtle',
+      color: 'danger',
+      className: 'text-red-950',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'primary',
+      className: [
+        'text-blue-500',
+        Platform.select({
+          default: 'data-[active=true]:text-blue-700',
+          web: 'data-[hover=true]:text-blue-600 data-[active=true]:data-[hover=true]:text-blue-700',
+        }),
+      ],
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'secondary',
+      className: [
+        'text-amber-600',
+        Platform.select({
+          default: 'data-[active=true]:text-amber-800',
+          web: 'data-[hover=true]:text-amber-700 data-[active=true]:data-[hover=true]:text-amber-800',
+        }),
+      ],
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'success',
+      className: [
+        'text-green-600',
+        Platform.select({
+          default: 'data-[active=true]:text-green-800',
+          web: 'data-[hover=true]:text-green-700 data-[active=true]:data-[hover=true]:text-green-800',
+        }),
+      ],
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'danger',
+      className: [
+        'text-red-500',
+        Platform.select({
+          default: 'data-[active=true]:text-red-700',
+          web: 'data-[hover=true]:text-red-600 data-[active=true]:data-[hover=true]:text-red-700',
+        }),
+      ],
+    },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    color: 'primary',
+    size: 'md',
+  },
+});
+
+export const buttonSpinnerVariants = cva([], {
+  variants: {
+    variant: {
+      solid: 'accent-white',
+      subtle: [],
+      outline: [],
+      ghost: [],
+    },
+    color: {
+      primary: [],
+      secondary: [],
+      success: [],
+      danger: [],
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'subtle',
+      color: 'primary',
+      className: 'accent-blue-950',
+    },
+    {
+      variant: 'subtle',
+      color: 'secondary',
+      className: 'accent-amber-950',
+    },
+    {
+      variant: 'subtle',
+      color: 'success',
+      className: 'accent-green-950',
+    },
+    {
+      variant: 'subtle',
+      color: 'danger',
+      className: 'accent-red-950',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'primary',
+      className: 'accent-blue-500',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'secondary',
+      className: 'accent-amber-600',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'success',
+      className: 'accent-green-600',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'danger',
+      className: 'accent-red-500',
+    },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    color: 'primary',
+  },
+});
+
+export const buttonGroupVariants = cva([], {
+  variants: {
+    flexDirection: {
+      row: Platform.select({ web: 'flex-row', default: '' }),
+      column: Platform.select({ web: 'flex-col', default: '' }),
+      'row-reverse': Platform.select({ web: 'flex-row-reverse', default: '' }),
+      'column-reverse': Platform.select({ web: 'flex-col-reverse', default: '' }),
+    },
+    isAttached: {
+      true: 'gap-0',
+      false: 'gap-2',
+    },
+  },
+  defaultVariants: {
+    flexDirection: 'row',
+    isAttached: false,
+  },
+});
+
+export type ButtonVariantProps = VariantProps<typeof buttonRootVariants>;
+export type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;

package/src/components/Input/BaseInput.tsx

@@ -0,0 +1 @@
+export { TextInput as BaseInput } from 'react-native';

package/src/components/Input/BaseInput.web.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react';
+import { TextInput } from 'react-native';
+
+export const BaseInput = forwardRef<any, any>((props, ref) => {
+  if (props.type === 'file') {
+    return React.createElement('input', {
+      ref,
+      type: 'file',
+      accept: props.accept || undefined,
+      multiple: props.multiple || undefined,
+      capture: props.capture || undefined,
+      disabled: props.disabled || undefined,
+      'aria-label': props['aria-label'],
+      'aria-required': props['aria-required'] || undefined,
+      'aria-invalid': props['aria-invalid'] || undefined,
+      'aria-disabled': props['aria-disabled'] || undefined,
+      onChange: (e: any) => {
+        const files = e.target.files;
+        if (files && props.onFiles) {
+          props.onFiles(Array.from(files));
+        }
+      },
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      style: {
+        flex: 1,
+        minWidth: 0,
+        border: 'none',
+        outline: 'none',
+        background: 'transparent',
+        cursor: props.disabled ? 'not-allowed' : 'pointer',
+        fontSize: 'inherit',
+        fontFamily: 'inherit',
+      },
+    });
+  }
+
+  return <TextInput ref={ref} {...props} />;
+});
+
+BaseInput.displayName = 'BaseInput';

package/src/components/Input/index.tsx

@@ -0,0 +1,161 @@
+import { forwardRef, type ReactNode } from 'react';
+import { type TextInput, View, type ViewProps } from 'react-native';
+import {
+  createInput,
+  type IInputFieldProps,
+  type IInputProps,
+  type IInputSlotProps,
+} from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { BaseInput } from './BaseInput';
+import {
+  type InputVariantProps,
+  inputFieldPlaceholderVariants,
+  inputFieldVariants,
+  inputIconVariants,
+  inputRootVariants,
+  inputSlotVariants,
+} from './styles';
+
+const SCOPE = 'INPUT';
+
+const Root = withStyleContext(View, SCOPE);
+
+const useInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
+
+const InputPrimitive = createInput({
+  Root,
+  Icon: View,
+  Slot: View,
+  Field: BaseInput,
+});
+
+// =============================================================================
+// INPUT (ROOT)
+// =============================================================================
+
+export interface InputProps extends ViewProps, IInputFieldProps, InputVariantProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const InputRoot = forwardRef<View, InputProps>(
+  ({ variant = 'outline', size = 'md', className, children, style, ...props }, ref) => {
+    const computedClassName = cn(inputRootVariants({ variant, size }), className);
+
+    return (
+      <InputPrimitive
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        context={{ variant, size }}
+        {...props}
+      >
+        {children}
+      </InputPrimitive>
+    );
+  },
+);
+
+InputRoot.displayName = 'Input';
+
+// =============================================================================
+// INPUT FIELD
+// =============================================================================
+
+export type InputFieldProps = IInputProps & {
+  className?: string;
+  placeholderTextColorClassName?: string;
+};
+
+const InputField = forwardRef<TextInput, InputFieldProps>(
+  ({ className, placeholderTextColorClassName, style, ...rest }, ref) => {
+    const { size } = useInputStyleContext();
+
+    const computedClassName = cn(inputFieldVariants({ size }), className);
+    const computedPlaceholderColorClassName = cn(
+      inputFieldPlaceholderVariants(),
+      placeholderTextColorClassName,
+    );
+
+    return (
+      <InputPrimitive.Field
+        ref={ref}
+        className={computedClassName}
+        placeholderTextColorClassName={computedPlaceholderColorClassName}
+        style={style}
+        {...rest}
+      />
+    );
+  },
+);
+
+InputField.displayName = 'Input.Field';
+
+// =============================================================================
+// INPUT SLOT
+// =============================================================================
+
+export interface InputSlotProps extends ViewProps, IInputSlotProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const InputSlot = forwardRef<View, InputSlotProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useInputStyleContext();
+
+    const computedClassName = cn(inputSlotVariants({ size }), className);
+
+    return (
+      <InputPrimitive.Slot ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </InputPrimitive.Slot>
+    );
+  },
+);
+
+InputSlot.displayName = 'Input.Slot';
+
+// =============================================================================
+// INPUT ICON
+// =============================================================================
+
+export interface InputIconProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const InputIcon = forwardRef<View, InputIconProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useInputStyleContext();
+
+    const computedClassName = cn(inputIconVariants({ size }), className);
+
+    return (
+      <InputPrimitive.Icon ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </InputPrimitive.Icon>
+    );
+  },
+);
+
+InputIcon.displayName = 'Input.Icon';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type InputCompoundComponent = typeof InputRoot & {
+  Field: typeof InputField;
+  Slot: typeof InputSlot;
+  Icon: typeof InputIcon;
+};
+
+export const Input = Object.assign(InputRoot, {
+  Field: InputField,
+  Slot: InputSlot,
+  Icon: InputIcon,
+}) as InputCompoundComponent;
+
+export type { InputVariantProps };

package/src/components/Input/styles.ts

@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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',
+    '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',
+        ],
+        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',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      size: 'md',
+    },
+  },
+);
+
+export const inputFieldVariants = cva(
+  [
+    'flex-1 bg-transparent text-neutral-text-primary',
+    'placeholder:text-neutral-placeholder',
+    'web:outline-none',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'text-sm leading-none',
+        md: 'text-base leading-none',
+        lg: 'text-lg leading-none',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+    },
+  },
+);
+
+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 inputIconVariants = cva(['text-neutral-text-tertiary'], {
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+export const inputFieldPlaceholderVariants = cva(['accent-neutral-placeholder']);
+
+export type InputVariantProps = VariantProps<typeof inputRootVariants>;