@cdx-ui/components 0.0.1-alpha.9 → 0.0.1-beta.2

package/src/components/Card/styles.ts

@@ -0,0 +1,41 @@
+import { cva } from 'class-variance-authority';
+import {
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+  COLOR_TEXT_PRIMARY,
+  RADIUS_SM,
+  SHADOW_SM,
+} from '../../styles/primitives';
+
+// ── Root ────────────────────────────────────────────────────
+
+export const cardRootVariants = cva([
+  COLOR_BG_PRIMARY,
+  `border ${COLOR_BORDER_DEFAULT}`,
+  RADIUS_SM,
+  SHADOW_SM,
+  'overflow-hidden',
+]);
+
+// ── Header ──────────────────────────────────────────────────
+
+export const cardHeaderVariants = cva([
+  'flex-row items-center justify-between p-4 border-b border-t-8',
+  COLOR_BORDER_DEFAULT,
+]);
+
+// ── Title ───────────────────────────────────────────────────
+
+export const cardTitleVariants = cva(['flex-1']);
+
+// ── Content ─────────────────────────────────────────────────
+
+export const cardContentVariants = cva([COLOR_TEXT_PRIMARY, 'p-4']);
+
+// ── Footer ──────────────────────────────────────────────────
+
+export const cardFooterVariants = cva([
+  'p-4 border-t',
+  COLOR_BORDER_DEFAULT,
+  'flex-row items-center gap-2',
+]);

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';
 
@@ -211,5 +205,3 @@ export const Checkbox = Object.assign(CheckboxRoot, {
   Label: CheckboxLabel,
   Group: CheckboxGroup,
 }) as CheckboxCompoundComponent;
-
-export type { CheckboxVariantProps };

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]: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',
+        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/Chip/index.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, Text as RNText, type ViewProps, type TextProps } from 'react-native';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import { chipRootVariants, chipLabelVariants, chipIconVariants, ChipVariants } from './styles';
+
+const SCOPE = 'CHIP';
+
+const Root = withStyleContext(View, SCOPE);
+
+const useChipStyleContext = () => useStyleContext(SCOPE) as ChipVariants;
+
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
+export interface ChipProps extends ViewProps, ChipVariants {
+  children?: ReactNode;
+  className?: string;
+}
+
+const ChipRoot = forwardRef<View, ChipProps>(
+  ({ children, color = 'default', className, style, ...props }, ref) => {
+    const computedClassName = cn(chipRootVariants({ color }), className);
+
+    return (
+      <Root ref={ref} className={computedClassName} style={style} context={{ color }} {...props}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+ChipRoot.displayName = 'Chip';
+
+// =============================================================================
+// STYLED LABEL COMPONENT
+// =============================================================================
+
+export interface ChipLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const ChipLabel = forwardRef<RNText, ChipLabelProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { color } = useChipStyleContext();
+
+    const computedClassName = cn(chipLabelVariants({ color }), className);
+
+    return (
+      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </RNText>
+    );
+  },
+);
+
+ChipLabel.displayName = 'Chip.Label';
+
+// =============================================================================
+// STYLED ICON COMPONENT
+// =============================================================================
+
+export interface ChipIconProps extends Omit<IconProps, 'children'> {}
+
+const ChipIcon = ({ className, style, as, ...props }: ChipIconProps) => {
+  const { color } = useChipStyleContext();
+
+  const computedClassName = cn(chipIconVariants({ color }), className);
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
+
+ChipIcon.displayName = 'Chip.Icon';
+
+// =============================================================================
+// COMPOUND COMPONENT EXPORT
+// =============================================================================
+
+type ChipCompoundComponent = typeof ChipRoot & {
+  Label: typeof ChipLabel;
+  Icon: typeof ChipIcon;
+};
+
+export const Chip = Object.assign(ChipRoot, {
+  Label: ChipLabel,
+  Icon: ChipIcon,
+}) as ChipCompoundComponent;
+
+export { type ChipVariants } from './styles';

package/src/components/Chip/styles.ts

@@ -0,0 +1,52 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const chipRootVariants = cva(
+  ['flex-row items-center justify-center rounded-full px-2 py-1 gap-1.5 self-start'],
+  {
+    variants: {
+      color: {
+        default: 'bg-surface-neutral-tint',
+        error: 'bg-surface-danger-tint',
+        info: 'bg-surface-info-tint',
+        success: 'bg-surface-success-tint',
+        warning: 'bg-surface-warning-tint',
+      },
+    },
+    defaultVariants: {
+      color: 'default',
+    },
+  },
+);
+
+// TODO: letter-spacing values (tracking-wider) are not working on web, but the font-mono-medium is.
+export const chipLabelVariants = cva(['label-sm font-mono-medium'], {
+  variants: {
+    color: {
+      default: 'text-content-primary',
+      error: 'text-content-primary',
+      info: 'text-content-primary',
+      success: 'text-content-primary',
+      warning: 'text-content-primary',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+});
+
+export const chipIconVariants = cva(['size-4'], {
+  variants: {
+    color: {
+      default: 'text-content-primary',
+      error: 'text-content-danger',
+      info: 'text-content-info',
+      success: 'text-content-success',
+      warning: 'text-content-warning',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+});
+
+export type ChipVariants = VariantProps<typeof chipRootVariants>;

package/src/components/Dialog/index.tsx

@@ -0,0 +1,304 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type PressableProps, type ViewProps } from 'react-native';
+import { Close as CloseIcon } from '@cdx-ui/icons';
+import {
+  createDialog,
+  type IDialogBodyProps,
+  type IDialogCloseProps,
+  type IDialogContentProps,
+  type IDialogDescriptionProps,
+  type IDialogFooterProps,
+  type IDialogHeaderProps,
+  type IDialogRootProps,
+  type IDialogTitleProps,
+  type IDialogTriggerProps,
+} from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon } from '../Icon';
+import {
+  type DialogVariantProps,
+  dialogBodyVariants,
+  dialogCloseIconVariants,
+  dialogCloseVariants,
+  dialogContentVariants,
+  dialogDescriptionVariants,
+  dialogFooterVariants,
+  dialogHeaderVariants,
+  dialogOverlayVariants,
+  dialogTitleVariants,
+} from './styles';
+
+export { useDialog } from '@cdx-ui/primitives';
+
+// =============================================================================
+// STYLE CONTEXT
+// =============================================================================
+
+const SCOPE = 'DIALOG';
+
+const Root = withStyleContext(View, SCOPE);
+
+const useDialogStyleContext = () => useStyleContext(SCOPE) as DialogVariantProps;
+
+// =============================================================================
+// STYLED OVERLAY (internal — not consumer-facing)
+// =============================================================================
+
+const StyledOverlay = forwardRef<View, PressableProps & { className?: string }>(
+  ({ className, ...props }, ref) => (
+    <Pressable ref={ref} className={cn(dialogOverlayVariants(), className)} {...props} />
+  ),
+);
+StyledOverlay.displayName = 'Dialog.Overlay';
+
+// =============================================================================
+// CREATE DIALOG PRIMITIVE
+// =============================================================================
+
+const DialogPrimitive = createDialog({
+  Root,
+  Trigger: Pressable,
+  Overlay: StyledOverlay,
+  Content: View,
+  Header: View,
+  Title: Text,
+  Description: Text,
+  Body: View,
+  Footer: View,
+  Close: Pressable,
+});
+
+// =============================================================================
+// STYLED ROOT
+// =============================================================================
+
+export interface DialogRootProps
+  extends Omit<ViewProps, 'children' | 'role'>, IDialogRootProps, DialogVariantProps {
+  className?: string;
+}
+
+const DialogRoot = forwardRef<View, DialogRootProps>(
+  ({ size = 'md', className, children, style, ...props }, ref) => (
+    <DialogPrimitive ref={ref} className={className} style={style} context={{ size }} {...props}>
+      {children}
+    </DialogPrimitive>
+  ),
+);
+
+DialogRoot.displayName = 'Dialog';
+
+// =============================================================================
+// STYLED TRIGGER
+// =============================================================================
+
+export interface DialogTriggerProps extends IDialogTriggerProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogTrigger = forwardRef<View, DialogTriggerProps>(
+  ({ className, children, style, ...props }, ref) => (
+    <DialogPrimitive.Trigger ref={ref} className={className} style={style} {...props}>
+      {children}
+    </DialogPrimitive.Trigger>
+  ),
+);
+
+DialogTrigger.displayName = 'Dialog.Trigger';
+
+// =============================================================================
+// STYLED CONTENT
+// =============================================================================
+
+export interface DialogContentProps extends IDialogContentProps, DialogVariantProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogContent = forwardRef<View, DialogContentProps>(
+  ({ size: sizeProp, className, children, style, ...props }, ref) => {
+    const { size: contextSize } = useDialogStyleContext();
+    const size = sizeProp ?? contextSize;
+    const computedClassName = cn(dialogContentVariants({ size }), className);
+
+    return (
+      <DialogPrimitive.Content ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Content>
+    );
+  },
+);
+
+DialogContent.displayName = 'Dialog.Content';
+
+// =============================================================================
+// STYLED HEADER
+// =============================================================================
+
+export interface DialogHeaderProps extends IDialogHeaderProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogHeader = forwardRef<View, DialogHeaderProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogHeaderVariants(), className);
+
+    return (
+      <DialogPrimitive.Header ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Header>
+    );
+  },
+);
+
+DialogHeader.displayName = 'Dialog.Header';
+
+// =============================================================================
+// STYLED TITLE
+// =============================================================================
+
+export interface DialogTitleProps extends IDialogTitleProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogTitle = forwardRef<Text, DialogTitleProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogTitleVariants(), className);
+
+    return (
+      <DialogPrimitive.Title ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Title>
+    );
+  },
+);
+
+DialogTitle.displayName = 'Dialog.Title';
+
+// =============================================================================
+// STYLED DESCRIPTION
+// =============================================================================
+
+export interface DialogDescriptionProps extends IDialogDescriptionProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogDescription = forwardRef<Text, DialogDescriptionProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogDescriptionVariants(), className);
+
+    return (
+      <DialogPrimitive.Description ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Description>
+    );
+  },
+);
+
+DialogDescription.displayName = 'Dialog.Description';
+
+// =============================================================================
+// STYLED BODY
+// =============================================================================
+
+export interface DialogBodyProps extends IDialogBodyProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogBody = forwardRef<View, DialogBodyProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogBodyVariants(), className);
+
+    return (
+      <DialogPrimitive.Body ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Body>
+    );
+  },
+);
+
+DialogBody.displayName = 'Dialog.Body';
+
+// =============================================================================
+// STYLED FOOTER
+// =============================================================================
+
+export interface DialogFooterProps extends IDialogFooterProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogFooter = forwardRef<View, DialogFooterProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogFooterVariants(), className);
+
+    return (
+      <DialogPrimitive.Footer ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Footer>
+    );
+  },
+);
+
+DialogFooter.displayName = 'Dialog.Footer';
+
+// =============================================================================
+// STYLED CLOSE
+// =============================================================================
+
+export interface DialogCloseProps extends IDialogCloseProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogClose = forwardRef<View, DialogCloseProps>(
+  ({ className, accessibilityLabel = 'Close', children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogCloseVariants(), className);
+
+    return (
+      <DialogPrimitive.Close
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        hitSlop={12}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        {...props}
+      >
+        {children ?? <Icon as={CloseIcon} className={dialogCloseIconVariants()} />}
+      </DialogPrimitive.Close>
+    );
+  },
+);
+
+DialogClose.displayName = 'Dialog.Close';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type DialogCompoundComponent = typeof DialogRoot & {
+  Trigger: typeof DialogTrigger;
+  Content: typeof DialogContent;
+  Header: typeof DialogHeader;
+  Title: typeof DialogTitle;
+  Description: typeof DialogDescription;
+  Body: typeof DialogBody;
+  Footer: typeof DialogFooter;
+  Close: typeof DialogClose;
+};
+
+export const Dialog = Object.assign(DialogRoot, {
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  Close: DialogClose,
+}) as DialogCompoundComponent;