@cdx-ui/components 0.0.1-alpha.4 → 0.0.1-alpha.40

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

package/src/components/BottomSheet/index.tsx

@@ -0,0 +1,316 @@
+import React, { forwardRef, useCallback, useRef, type ReactNode } from 'react';
+import { Dimensions, Pressable, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  BottomSheetModal,
+  BottomSheetModalProvider,
+  BottomSheetScrollView,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  BottomSheetFooter as GorhomBottomSheetFooter,
+  type BottomSheetBackdropProps,
+  type BottomSheetFooterProps as GorhomBottomSheetFooterProps,
+} from '@gorhom/bottom-sheet';
+import { cn } from '@cdx-ui/utils';
+import { ArrowBackIosNew, Close } from '@cdx-ui/icons';
+import { Heading } from '../Heading';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import {
+  bottomSheetBackButtonVariants,
+  bottomSheetBackIconVariants,
+  bottomSheetCloseButtonVariants,
+  bottomSheetCloseIconVariants,
+  bottomSheetContainerVariants,
+  bottomSheetContentVariants,
+  bottomSheetFooterVariants,
+  bottomSheetHeaderVariants,
+  bottomSheetSubtitleVariants,
+  handleIndicatorStyle,
+} from './styles';
+
+/** Ref type for BottomSheet; forwards the @gorhom modal ref (present, dismiss, snapToIndex, minimize, restore, etc.). */
+export type BottomSheetModalRef = React.ComponentRef<typeof BottomSheetModal>;
+
+export interface BottomSheetHeaderProps {
+  title?: string;
+  subtitle?: string;
+  children?: ReactNode;
+  className?: string;
+  onClose?: () => void;
+  closeAccessibilityLabel?: string;
+  onBack?: () => void;
+  backAccessibilityLabel?: string;
+}
+
+function BottomSheetHeaderComponent(
+  {
+    title,
+    subtitle,
+    children,
+    className,
+    onClose,
+    closeAccessibilityLabel,
+    onBack,
+    backAccessibilityLabel = 'Go back',
+  }: BottomSheetHeaderProps,
+  ref: React.Ref<View>,
+) {
+  const hasTitle = title !== undefined && title !== '';
+  const hasContent = hasTitle || !!children || !!onBack;
+  const computedClassName = cn(bottomSheetHeaderVariants({ hasTitle: hasContent }), className);
+  return (
+    <View ref={ref} className={computedClassName}>
+      {onBack && (
+        <Pressable
+          onPress={onBack}
+          hitSlop={12}
+          accessibilityRole="button"
+          accessibilityLabel={backAccessibilityLabel}
+          className={cn(bottomSheetBackButtonVariants())}
+        >
+          <Icon as={ArrowBackIosNew} className={bottomSheetBackIconVariants()} />
+        </Pressable>
+      )}
+      <View className="flex-1">
+        {children ??
+          (hasTitle ? (
+            <View>
+              <Heading size="xs" className="text-lg">
+                {title}
+              </Heading>
+              {subtitle ? <Text className={bottomSheetSubtitleVariants()}>{subtitle}</Text> : null}
+            </View>
+          ) : null)}
+      </View>
+      {onClose && (
+        <BottomSheetCloseButton
+          onPress={onClose}
+          {...(closeAccessibilityLabel !== undefined && {
+            accessibilityLabel: closeAccessibilityLabel,
+          })}
+        />
+      )}
+    </View>
+  );
+}
+
+BottomSheetHeaderComponent.displayName = 'BottomSheet.Header';
+
+const BottomSheetHeader = forwardRef<View, BottomSheetHeaderProps>(BottomSheetHeaderComponent);
+BottomSheetHeader.displayName = 'BottomSheet.Header';
+
+// =============================================================================
+// CLOSEBUTTON
+// =============================================================================
+interface BottomSheetCloseButtonProps {
+  onPress: () => void;
+  className?: string;
+  accessibilityLabel?: string;
+}
+
+function BottomSheetCloseButton({
+  onPress,
+  className,
+  accessibilityLabel = 'Close',
+}: BottomSheetCloseButtonProps) {
+  return (
+    <Pressable
+      onPress={onPress}
+      hitSlop={12}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      className={cn(bottomSheetCloseButtonVariants(), className)}
+    >
+      <Icon as={Close} className={bottomSheetCloseIconVariants()} />
+    </Pressable>
+  );
+}
+
+BottomSheetCloseButton.displayName = 'BottomSheet.CloseButton';
+
+// =============================================================================
+// CONTENT
+// =============================================================================
+
+export interface BottomSheetContentProps {
+  children?: ReactNode;
+  className?: string;
+  hasSafeAreaInset?: boolean;
+  style?: ViewStyle;
+}
+
+const BottomSheetContent = forwardRef<View, BottomSheetContentProps>(
+  ({ children, className, hasSafeAreaInset, style }, ref) => {
+    const insets = useSafeAreaInsets();
+    const computedClassName = cn(bottomSheetContentVariants(), className);
+    return (
+      <View
+        ref={ref}
+        className={computedClassName}
+        style={hasSafeAreaInset ? { paddingBottom: insets.bottom, ...style } : style}
+        pointerEvents="box-none"
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+BottomSheetContent.displayName = 'BottomSheet.Content';
+
+// =============================================================================
+// FOOTER
+// =============================================================================
+export interface BottomSheetFooterProps {
+  children?: ReactNode;
+  className?: string;
+  style?: ViewStyle;
+}
+
+const BottomSheetFooter = forwardRef<View, BottomSheetFooterProps>(
+  ({ children, className, style }, ref) => {
+    const insets = useSafeAreaInsets();
+    const computedClassName = cn(bottomSheetFooterVariants(), className);
+    return (
+      <View
+        ref={ref}
+        className={computedClassName}
+        style={{ paddingBottom: Math.max(insets.bottom, 24), ...style }}
+        pointerEvents="box-none"
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+BottomSheetFooter.displayName = 'BottomSheet.Footer';
+
+// =============================================================================
+// MODAL WRAPPER (WITH STYLES)
+// =============================================================================
+
+export interface BottomSheetModalProps extends React.ComponentPropsWithoutRef<
+  typeof BottomSheetModal
+> {
+  /** Show the drag handle indicator. When false, `handleComponent` is set to null. @default true */
+  handleVisible?: boolean;
+  /** Footer content rendered via gorhom's BottomSheetFooter for proper animated positioning and safe-area handling. */
+  footer?: ReactNode;
+}
+
+const MAX_DYNAMIC_CONTENT_SIZE = Dimensions.get('window').height * 0.9;
+
+const CustomBackdrop = (props: BottomSheetBackdropProps) => {
+  return (
+    <BottomSheetBackdrop
+      {...props}
+      disappearsOnIndex={-1}
+      appearsOnIndex={0}
+      opacity={0.5}
+      pressBehavior="close"
+    />
+  );
+};
+
+const BottomSheetModalStyled = forwardRef<
+  React.ComponentRef<typeof BottomSheetModal>,
+  BottomSheetModalProps
+>(({ handleVisible = true, footer, ...rest }, ref) => {
+  const renderFooter = useCallback(
+    (props: GorhomBottomSheetFooterProps) => (
+      <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
+    ),
+    [footer],
+  );
+
+  return (
+    <BottomSheetModal
+      ref={ref}
+      enableDynamicSizing
+      maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
+      handleComponent={handleVisible ? undefined : null}
+      handleIndicatorStyle={handleVisible ? handleIndicatorStyle : undefined}
+      backdropComponent={CustomBackdrop}
+      backgroundComponent={(backgroundProps) => (
+        <View {...backgroundProps} className={cn(bottomSheetContainerVariants())} />
+      )}
+      {...rest}
+      {...(footer != null && { footerComponent: renderFooter })}
+    />
+  );
+});
+
+BottomSheetModalStyled.displayName = 'BottomSheet.Modal';
+
+// =============================================================================
+// SCROLLVIEW WRAPPER (with footer margin adjustment enabled by default)
+// =============================================================================
+
+function BottomSheetScrollViewStyled({
+  enableFooterMarginAdjustment = true,
+  children,
+  ...rest
+}: React.ComponentPropsWithoutRef<typeof BottomSheetScrollView>) {
+  return (
+    <BottomSheetScrollView enableFooterMarginAdjustment={enableFooterMarginAdjustment} {...rest}>
+      {children}
+    </BottomSheetScrollView>
+  );
+}
+
+BottomSheetScrollViewStyled.displayName = 'BottomSheet.ScrollView';
+
+// =============================================================================
+// VIEW WRAPPER (with footer margin adjustment enabled by default)
+// =============================================================================
+
+function BottomSheetViewStyled({
+  enableFooterMarginAdjustment = true,
+  children,
+  ...rest
+}: React.ComponentPropsWithoutRef<typeof BottomSheetView>) {
+  return (
+    <BottomSheetView enableFooterMarginAdjustment={enableFooterMarginAdjustment} {...rest}>
+      {children}
+    </BottomSheetView>
+  );
+}
+
+BottomSheetViewStyled.displayName = 'BottomSheet.View';
+
+// Display names for gorhom components exposed as BottomSheet.*
+interface WithDisplayName {
+  displayName?: string;
+}
+(BottomSheetModalProvider as WithDisplayName).displayName = 'BottomSheet.Provider';
+
+// ── Public exports ────────────────────────────────────────
+
+interface BottomSheetCompound {
+  Modal: typeof BottomSheetModalStyled;
+  Header: typeof BottomSheetHeader;
+  Content: typeof BottomSheetContent;
+  Footer: typeof BottomSheetFooter;
+  Provider: typeof BottomSheetModalProvider;
+  ScrollView: typeof BottomSheetScrollViewStyled;
+  View: typeof BottomSheetViewStyled;
+}
+
+export const BottomSheet = {
+  Modal: BottomSheetModalStyled,
+  Header: BottomSheetHeader,
+  Content: BottomSheetContent,
+  Footer: BottomSheetFooter,
+  Provider: BottomSheetModalProvider,
+  ScrollView: BottomSheetScrollViewStyled,
+  View: BottomSheetViewStyled,
+} as BottomSheetCompound;
+
+// ── Hooks ────────────────────────────────────────────────
+
+export function useBottomSheet() {
+  const ref = useRef<BottomSheetModalRef>(null);
+  return { ref, present: () => ref.current?.present(), dismiss: () => ref.current?.dismiss() };
+}

package/src/components/BottomSheet/styles.ts

@@ -0,0 +1,79 @@
+import { type ViewStyle } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+  COLOR_TEXT_PRIMARY,
+  COLOR_TEXT_SECONDARY,
+} from '../../styles/primitives';
+
+// ── Container ──────────────────────────────────────────────
+
+export const bottomSheetContainerVariants = cva([
+  'rounded-t-3xl border-t border-x overflow-hidden',
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+]);
+
+// ── Header ─────────────────────────────────────────────────
+
+export const bottomSheetHeaderVariants = cva(
+  [
+    'flex-row items-center justify-between min-h-12 px-4 pt-3 pb-2',
+    COLOR_BG_PRIMARY,
+    COLOR_TEXT_PRIMARY,
+  ],
+  {
+    variants: {
+      hasTitle: {
+        true: '',
+        false: 'justify-end',
+      },
+    },
+    defaultVariants: {
+      hasTitle: true,
+    },
+  },
+);
+
+// ── Content ────────────────────────────────────────────────
+
+export const bottomSheetContentVariants = cva([COLOR_BG_PRIMARY, 'px-4 pb-6']);
+
+// ── Footer ─────────────────────────────────────────────────
+
+export const bottomSheetFooterVariants = cva([
+  'px-4 pt-3 pb-4 border-t',
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+]);
+
+// ── Subtitle ────────────────────────────────────────────────
+
+export const bottomSheetSubtitleVariants = cva(['text-sm', COLOR_TEXT_SECONDARY]);
+
+// ── Back Button ─────────────────────────────────────────────
+
+export const bottomSheetBackButtonVariants = cva(['p-1 -m-1 mr-2 rounded-full active:opacity-70']);
+
+export const bottomSheetBackIconVariants = cva(['size-5 text-slate-500']);
+
+// ── Close Button ───────────────────────────────────────────
+
+export const bottomSheetCloseButtonVariants = cva(['p-1 -m-1 rounded-full active:opacity-70']);
+
+// ── Close Icon ─────────────────────────────────────────────
+
+export const bottomSheetCloseIconVariants = cva(['size-5 text-slate-500']);
+
+// ── Handle indicator ────────────────────────────────────────
+// Plain ViewStyle — gorhom's handleIndicatorStyle doesn't accept classNames.
+// slate-300 (#cbd5e1) maps to COLOR_BORDER_STRONG; update when raw token palette is available (TODO).
+export const handleIndicatorStyle: ViewStyle = {
+  backgroundColor: '#cbd5e1',
+  width: 36,
+  height: 4,
+  borderRadius: 2,
+};
+
+export type BottomSheetHeaderVariants = VariantProps<typeof bottomSheetHeaderVariants>;

package/src/components/Box/Box.tsx

@@ -8,6 +8,7 @@ export interface BoxProps extends ViewProps {
   textProps?: TextProps;
 }
 
+/** @deprecated Use View instead */
 export const Box = forwardRef<View, BoxProps>(
   ({ style, className, children, textProps, ...restProps }, ref: ForwardedRef<View>) => {
     return (