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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-alpha.9",
+  "version": "0.0.1-beta.2",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -24,7 +24,8 @@
   },
   "files": [
     "lib",
-    "src"
+    "src",
+    "!src/**/*.figma.ts"
   ],
   "react-native-builder-bob": {
     "source": "src",
@@ -41,12 +42,17 @@
     ]
   },
   "peerDependencies": {
+    "@shopify/flash-list": ">=2.0.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-native": ">=0.76.0",
     "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
     "react-native-web": ">=0.19.0"
   },
   "peerDependenciesMeta": {
+    "@shopify/flash-list": {
+      "optional": true
+    },
     "react-native": {
       "optional": true
     },
@@ -58,10 +64,12 @@
     }
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
-    "uniwind": "1.4.1",
-    "@cdx-ui/primitives": "0.0.1-alpha.9",
-    "@cdx-ui/utils": "0.0.1-alpha.9"
+    "uniwind": "1.6.1",
+    "@cdx-ui/primitives": "0.0.1-beta.2",
+    "@cdx-ui/utils": "0.0.1-beta.2",
+    "@cdx-ui/icons": "0.0.1-beta.2"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -87,6 +95,7 @@
   },
   "scripts": {
     "build": "bob build",
-    "lint": "eslint src/"
+    "lint": "eslint src/",
+    "test": "jest --config ../../jest.config.js"
   }
 }

package/src/components/AlertDialog/index.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { useDialog } from '@cdx-ui/primitives';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Button, type ButtonProps } from '../Button';
+import { Dialog, type DialogRootProps } from '../Dialog';
+
+// =============================================================================
+// ALERT DIALOG ROOT (Dialog with non-dismissible defaults + alertdialog role)
+// =============================================================================
+
+export interface AlertDialogRootProps extends DialogRootProps {}
+
+const AlertDialogRoot = forwardRef<View, AlertDialogRootProps>(
+  (
+    {
+      closeOnBackdropPress = false,
+      closeOnEscKey = false,
+      role = 'alertdialog',
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <Dialog
+      ref={ref}
+      closeOnBackdropPress={closeOnBackdropPress}
+      closeOnEscKey={closeOnEscKey}
+      role={role}
+      {...props}
+    >
+      {children}
+    </Dialog>
+  ),
+);
+AlertDialogRoot.displayName = 'AlertDialog';
+
+// =============================================================================
+// ALERT DIALOG ACTION
+// =============================================================================
+
+export interface AlertDialogActionProps extends Omit<ButtonProps, 'variant'> {
+  readonly asChild?: boolean;
+}
+
+const AlertDialogAction = forwardRef<View, AlertDialogActionProps>(
+  ({ asChild = false, children, color = 'action', className, ...props }, ref) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children as React.ReactElement<any>, {
+        ref,
+        className,
+        ...props,
+      });
+    }
+
+    return (
+      <Button ref={ref} variant="strong" color={color} className={className} {...props}>
+        <Button.Label>{children}</Button.Label>
+      </Button>
+    );
+  },
+);
+AlertDialogAction.displayName = 'AlertDialog.Action';
+
+// =============================================================================
+// ALERT DIALOG CANCEL
+// =============================================================================
+
+export interface AlertDialogCancelProps extends Omit<ButtonProps, 'variant'> {
+  readonly asChild?: boolean;
+}
+
+const AlertDialogCancel = forwardRef<View, AlertDialogCancelProps>(
+  ({ asChild = false, children, onPress, className, ...props }, ref) => {
+    const { onOpenChange } = useDialog();
+    const handlePress = composeEventHandlers(onPress, () => onOpenChange(false));
+
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children as React.ReactElement<any>, {
+        ref,
+        onPress: handlePress,
+        className,
+        ...props,
+      });
+    }
+
+    return (
+      <Button ref={ref} variant="outline" onPress={handlePress} className={className} {...props}>
+        <Button.Label>{children}</Button.Label>
+      </Button>
+    );
+  },
+);
+AlertDialogCancel.displayName = 'AlertDialog.Cancel';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
+  Trigger: typeof Dialog.Trigger;
+  Content: typeof Dialog.Content;
+  Header: typeof Dialog.Header;
+  Title: typeof Dialog.Title;
+  Description: typeof Dialog.Description;
+  Body: typeof Dialog.Body;
+  Footer: typeof Dialog.Footer;
+  Close: typeof Dialog.Close;
+  Action: typeof AlertDialogAction;
+  Cancel: typeof AlertDialogCancel;
+};
+
+export const AlertDialog = Object.assign(AlertDialogRoot, {
+  Trigger: Dialog.Trigger,
+  Content: Dialog.Content,
+  Header: Dialog.Header,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+  Body: Dialog.Body,
+  Footer: Dialog.Footer,
+  Close: Dialog.Close,
+  Action: AlertDialogAction,
+  Cancel: AlertDialogCancel,
+}) as AlertDialogCompoundComponent;

package/src/components/Avatar/index.tsx

@@ -0,0 +1,172 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Image, Text, View, type ImageProps, type TextProps, type ViewProps } from 'react-native';
+import { createAvatar, type IAvatarImageProps, type IAvatarProps } from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon as IconComponent, type IconProps } from '../Icon';
+import {
+  type AvatarVariantProps,
+  avatarBadgeVariants,
+  avatarIconVariants,
+  avatarTextVariants,
+  avatarImageVariants,
+  avatarRootVariants,
+} from './styles';
+
+const SCOPE = 'AVATAR';
+
+const Root = withStyleContext(View, SCOPE);
+
+const useAvatarStyleContext = () => useStyleContext(SCOPE) as AvatarVariantProps;
+
+const AvatarPrimitive = createAvatar({
+  Root,
+  Image,
+  Text,
+  Icon: IconComponent,
+  Badge: View,
+});
+
+// =============================================================================
+// AVATAR ROOT
+// =============================================================================
+
+export interface AvatarProps extends ViewProps, IAvatarProps, AvatarVariantProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const AvatarRoot = forwardRef<View, AvatarProps>(
+  ({ size = 'lg', className, children, style, ...props }, ref) => {
+    const computedClassName = cn(avatarRootVariants({ size }), className);
+
+    return (
+      <AvatarPrimitive
+        ref={ref as never}
+        className={computedClassName}
+        style={style}
+        context={{ size }}
+        {...props}
+      >
+        {children}
+      </AvatarPrimitive>
+    );
+  },
+);
+
+AvatarRoot.displayName = 'Avatar';
+
+// =============================================================================
+// AVATAR IMAGE
+// =============================================================================
+
+export interface AvatarImageProps extends Omit<ImageProps, 'source'>, IAvatarImageProps {
+  className?: string;
+}
+
+const AvatarImage = forwardRef<Image, AvatarImageProps>(({ className, style, ...props }, ref) => {
+  const computedClassName = cn(avatarImageVariants(), className);
+
+  return (
+    <AvatarPrimitive.Image
+      ref={ref as never}
+      className={computedClassName}
+      style={style}
+      {...props}
+    />
+  );
+});
+
+AvatarImage.displayName = 'Avatar.Image';
+
+// =============================================================================
+// AVATAR TEXT
+// =============================================================================
+
+export interface AvatarTextProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const AvatarText = forwardRef<Text, AvatarTextProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useAvatarStyleContext();
+    const computedClassName = cn(avatarTextVariants({ size }), className);
+
+    return (
+      <AvatarPrimitive.Text
+        ref={ref as never}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {children}
+      </AvatarPrimitive.Text>
+    );
+  },
+);
+
+AvatarText.displayName = 'Avatar.Text';
+
+// =============================================================================
+// AVATAR ICON
+// =============================================================================
+
+export interface AvatarIconProps extends Omit<IconProps, 'children'> {
+  className?: string;
+}
+
+const AvatarIcon = ({ className, style, ...props }: AvatarIconProps) => {
+  const { size } = useAvatarStyleContext();
+  const computedClassName = cn(avatarIconVariants({ size }), className);
+
+  return <AvatarPrimitive.Icon className={computedClassName} style={style} {...props} />;
+};
+
+AvatarIcon.displayName = 'Avatar.Icon';
+
+// =============================================================================
+// AVATAR BADGE
+// =============================================================================
+
+export interface AvatarBadgeProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const AvatarBadge = forwardRef<View, AvatarBadgeProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useAvatarStyleContext();
+    const computedClassName = cn(avatarBadgeVariants({ size }), className);
+
+    return (
+      <AvatarPrimitive.Badge
+        ref={ref as never}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {children}
+      </AvatarPrimitive.Badge>
+    );
+  },
+);
+
+AvatarBadge.displayName = 'Avatar.Badge';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type AvatarCompoundComponent = typeof AvatarRoot & {
+  Image: typeof AvatarImage;
+  Text: typeof AvatarText;
+  Icon: typeof AvatarIcon;
+  Badge: typeof AvatarBadge;
+};
+
+export const Avatar = Object.assign(AvatarRoot, {
+  Image: AvatarImage,
+  Text: AvatarText,
+  Icon: AvatarIcon,
+  Badge: AvatarBadge,
+}) as AvatarCompoundComponent;

package/src/components/Avatar/styles.ts

@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { COLOR_BG_MUTED, COLOR_TEXT_SECONDARY, RADIUS_FULL } from '../../styles/primitives';
+
+// ── Root ─────────────────────────────────────────────────
+
+export const avatarRootVariants = cva(
+  [RADIUS_FULL, 'relative items-center justify-center', COLOR_BG_MUTED],
+  {
+    variants: {
+      size: {
+        sm: 'w-8 h-8',
+        md: 'w-10 h-10',
+        lg: 'w-12 h-12',
+        xl: 'w-16 h-16',
+        '2xl': 'w-20 h-20',
+      },
+    },
+    defaultVariants: {
+      size: 'lg',
+    },
+  },
+);
+
+// ── Image ────────────────────────────────────────────────
+
+export const avatarImageVariants = cva([
+  'absolute top-0 left-0 w-full h-full',
+  RADIUS_FULL,
+  'overflow-hidden',
+]);
+
+// ── Text ─────────────────────────────────────────────────
+
+export const avatarTextVariants = cva([COLOR_TEXT_SECONDARY, 'font-semibold'], {
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+      xl: 'text-xl',
+      '2xl': 'text-2xl',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});
+
+// ── Icon ─────────────────────────────────────────────────
+
+export const avatarIconVariants = cva([COLOR_TEXT_SECONDARY], {
+  variants: {
+    size: {
+      sm: 'size-4',
+      md: 'size-5',
+      lg: 'size-6',
+      xl: 'size-8',
+      '2xl': 'size-10',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});
+
+// ── Badge ────────────────────────────────────────────────
+
+export const avatarBadgeVariants = cva(['absolute border-2 border-white', RADIUS_FULL], {
+  variants: {
+    size: {
+      sm: 'w-2.5 h-2.5 bottom-0 right-0',
+      md: 'w-3 h-3 bottom-0 right-0',
+      lg: 'w-3.5 h-3.5 bottom-0 right-0',
+      xl: 'w-4 h-4 bottom-0.5 right-0.5',
+      '2xl': 'w-5 h-5 bottom-0.5 right-0.5',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});
+
+export type AvatarVariantProps = VariantProps<typeof avatarRootVariants>;