@cdx-ui/components 0.0.1-alpha.14 → 0.0.1-alpha.16

package/src/components/Checkbox/index.tsx

@@ -1,7 +1,9 @@
 import { forwardRef, type ReactNode } from 'react';
 import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
+import { Check, CheckIndeterminateSmall } from '@cdx-ui/icons';
 import { createCheckbox, type ICheckboxProps } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, IconProps } from '../Icon';
 import {
   type CheckboxVariantProps,
   checkboxGroupVariants,
@@ -35,17 +37,23 @@ export interface CheckboxProps extends ICheckboxProps, CheckboxVariantProps {
 }
 
 const CheckboxRoot = forwardRef<View, CheckboxProps>(
-  ({ size = 'md', className, children, style, ...props }, ref) => {
+  ({ size = 'default', className, isIndeterminate, children, style, ...props }, ref) => {
     const computedClassName = cn(checkboxRootVariants({ size }), className);
 
     return (
       <CheckboxPrimitive
         ref={ref as any}
         className={computedClassName}
+        isIndeterminate={isIndeterminate}
         style={style}
         context={{ size }}
         {...props}
       >
+        <CheckboxIndicator>
+          <CheckboxPrimitive.Icon>
+            <CheckboxIcon as={isIndeterminate ? CheckIndeterminateSmall : Check} />
+          </CheckboxPrimitive.Icon>
+        </CheckboxIndicator>
         {children}
       </CheckboxPrimitive>
     );
@@ -87,28 +95,14 @@ CheckboxIndicator.displayName = 'Checkbox.Indicator';
 // CHECKBOX ICON
 // =============================================================================
 
-export interface CheckboxIconProps extends ViewProps {
-  className?: string;
-  children?: ReactNode;
-}
+export interface CheckboxIconProps extends Omit<IconProps, 'children'> {}
 
-const CheckboxIcon = forwardRef<View, CheckboxIconProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { size } = useCheckboxStyleContext();
-    const computedClassName = cn(checkboxIconVariants({ size }), className);
+const CheckboxIcon = ({ className, style, ...props }: CheckboxIconProps) => {
+  const { size } = useCheckboxStyleContext();
+  const computedClassName = cn(checkboxIconVariants({ size }), className);
 
-    return (
-      <CheckboxPrimitive.Icon
-        ref={ref as any}
-        className={computedClassName}
-        style={style}
-        {...props}
-      >
-        {children}
-      </CheckboxPrimitive.Icon>
-    );
-  },
-);
+  return <Icon className={computedClassName} style={style} {...props} />;
+};
 
 CheckboxIcon.displayName = 'Checkbox.Icon';
 

package/src/components/Checkbox/styles.ts

@@ -1,20 +1,25 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_STRONG,
+  COLOR_TEXT_PRIMARY,
+  DISABLED_CURSOR,
+  DISABLED_OPACITY,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
 
 export const checkboxRootVariants = cva(
-  [
-    'flex-row items-center',
-    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed',
-  ],
+  ['flex-row items-center', DISABLED_OPACITY, DISABLED_CURSOR],
   {
     variants: {
       size: {
-        sm: 'gap-2',
-        md: 'gap-2.5',
+        small: 'gap-2',
+        default: 'gap-2.5',
       },
     },
     defaultVariants: {
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -23,18 +28,22 @@ 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',
+    'border-2',
+    COLOR_BORDER_STRONG,
+    COLOR_BG_PRIMARY,
+    'data-[checked=true]:bg-slate-900 data-[checked=true]:border-slate-900',
+    'data-[indeterminate=true]:bg-slate-900 data-[indeterminate=true]:border-slate-900',
+    'data-[disabled=true]:opacity-50',
     'data-[invalid=true]:border-red-500',
     'data-[checked=true]:data-[invalid=true]:bg-red-500 data-[checked=true]:data-[invalid=true]:border-red-500',
+    'data-[indeterminate=true]:data-[invalid=true]:bg-red-500 data-[indeterminate=true]:data-[invalid=true]:border-red-500',
     Platform.select({
       web: [
-        'transition-colors duration-150',
-        'data-[hover=true]:data-[checked=false]:border-zinc-500 data-[hover=true]:data-[checked=false]:bg-zinc-50',
-        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-blue-300/50 data-[focus-visible=true]:ring-offset-1',
+        TRANSITION_COLORS,
+        'data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:border-slate-400 data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:bg-slate-50',
+        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
         'data-[invalid=true]:data-[hover=true]:border-red-400',
-        'data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50',
+        'data-[invalid=true]:data-[focus-visible=true]:ring-red-400/50',
       ].join(' '),
       default: '',
     }),
@@ -42,12 +51,12 @@ export const checkboxIndicatorVariants = cva(
   {
     variants: {
       size: {
-        sm: 'h-4 w-4',
-        md: 'h-5 w-5',
+        small: 'h-4 w-4',
+        default: 'h-5 w-5',
       },
     },
     defaultVariants: {
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -55,26 +64,26 @@ export const checkboxIndicatorVariants = cva(
 export const checkboxIconVariants = cva(['text-white'], {
   variants: {
     size: {
-      sm: 'h-3 w-3',
-      md: 'h-3.5 w-3.5',
+      small: 'h-3 w-3',
+      default: 'h-3.5 w-3.5',
     },
   },
   defaultVariants: {
-    size: 'md',
+    size: 'default',
   },
 });
 
 export const checkboxLabelVariants = cva(
-  ['text-neutral-text-primary', 'data-[disabled=true]:text-neutral-text-tertiary'],
+  [COLOR_TEXT_PRIMARY, 'data-[disabled=true]:text-slate-400'],
   {
     variants: {
       size: {
-        sm: 'text-sm',
-        md: 'text-base',
+        small: 'text-sm',
+        default: 'text-base',
       },
     },
     defaultVariants: {
-      size: 'md',
+      size: 'default',
     },
   },
 );

package/src/components/Heading/index.tsx

@@ -11,7 +11,10 @@ const sizeToLevel = {
   xs: 5,
 } as const;
 
-export type HeadingProps = HeadingVariantProps & ComponentPropsWithoutRef<typeof Text>;
+export type HeadingProps = HeadingVariantProps &
+  ComponentPropsWithoutRef<typeof Text> & {
+    className?: string;
+  };
 
 export const Heading = memo(
   forwardRef<ComponentRef<typeof Text>, HeadingProps>(function Heading(

package/src/components/Heading/styles.tsx

@@ -1,11 +1,12 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
 
 export const headingStyle = cva(
   [
-    'font-sans text-foreground font-bold font-heading tracking-sm my-0',
+    `${COLOR_TEXT_PRIMARY} font-semibold tracking-tight my-0`,
     Platform.select({
-      web: 'bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word',
+      web: 'font-sans bg-transparent display-inline no-underline',
       default: '',
     }),
   ],

package/src/components/Icon/index.tsx

@@ -1,8 +1,9 @@
 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';
 
-type IconProps = CdxIconProps & {
+export type IconProps = CdxIconProps & {
   className?: string; // TODO: Why does this need to specified manually?
   as: CdxIcon;
 };
@@ -44,6 +45,10 @@ const StyledIcon = withUniwind(IconImpl, {
  */
 export function Icon({ as: IconComponent, className, ...props }: IconProps) {
   return (
-    <StyledIcon as={IconComponent} className={cn('text-foreground size-5', className)} {...props} />
+    <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/styles.ts

@@ -1,7 +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',
-  'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-blue-300/50',
+  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';