@cdx-ui/components 0.0.1-alpha.17 → 0.0.1-alpha.19

package/src/components/Avatar/index.tsx

@@ -0,0 +1,174 @@
+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;
+
+export type { AvatarVariantProps };

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>;

package/src/components/Card/index.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  cardContentVariants,
+  cardFooterVariants,
+  cardHeaderVariants,
+  cardRootVariants,
+} from './styles';
+
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
+export interface CardProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardRoot = forwardRef<View, CardProps>(({ className, children, style, ...props }, ref) => {
+  const computedClassName = cn(cardRootVariants(), className);
+
+  return (
+    <View ref={ref} className={computedClassName} style={style} {...props}>
+      {children}
+    </View>
+  );
+});
+
+CardRoot.displayName = 'Card';
+
+// =============================================================================
+// STYLED HEADER COMPONENT
+// =============================================================================
+
+export interface CardHeaderProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardHeader = forwardRef<View, CardHeaderProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(cardHeaderVariants(), className);
+
+    return (
+      <View ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+CardHeader.displayName = 'Card.Header';
+
+// =============================================================================
+// STYLED CONTENT COMPONENT
+// =============================================================================
+
+export interface CardContentProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardContent = forwardRef<View, CardContentProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(cardContentVariants(), className);
+
+    return (
+      <View ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+CardContent.displayName = 'Card.Content';
+
+// =============================================================================
+// STYLED FOOTER COMPONENT
+// =============================================================================
+
+export interface CardFooterProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardFooter = forwardRef<View, CardFooterProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(cardFooterVariants(), className);
+
+    return (
+      <View ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+CardFooter.displayName = 'Card.Footer';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type CardCompoundComponent = typeof CardRoot & {
+  Header: typeof CardHeader;
+  Content: typeof CardContent;
+  Footer: typeof CardFooter;
+};
+
+export const Card = CardRoot as CardCompoundComponent;
+
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Footer = CardFooter;

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/index.ts

@@ -1,5 +1,7 @@
+export * from './Avatar';
 export * from './Box';
 export * from './Button';
+export * from './Card';
 export * from './Checkbox';
 export * from './Input';
 export * from './Link';