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

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 (

package/src/components/Button/index.tsx

@@ -11,10 +11,12 @@ import {
 } from 'react-native';
 import { createButton, type IButtonProps } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, IconProps } from '../Icon';
 import {
   type ButtonGroupVariantProps,
   type ButtonVariantProps,
   buttonGroupVariants,
+  buttonIconVariants,
   buttonRootVariants,
   buttonSpinnerVariants,
   buttonTextVariants,
@@ -46,9 +48,9 @@ export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariant
 const ButtonRoot = forwardRef<View, ButtonProps>(
   (
     {
-      variant = 'solid',
-      color = 'primary',
-      size = 'md',
+      variant = 'strong',
+      color = 'action',
+      size = 'default',
       fullWidth = false,
       className,
       children,
@@ -103,6 +105,7 @@ const ButtonLabel = forwardRef<Text, ButtonTextProps>(
 
 ButtonLabel.displayName = 'Button.Label';
 
+// TODO: Use ButtonGroupVariantProps
 export interface ButtonGroupProps extends Omit<ViewProps, 'children'> {
   className?: string;
   children: ReactElement | ReactElement[];
@@ -135,13 +138,15 @@ const ButtonGroup = forwardRef<View, ButtonGroupProps>(
 
 ButtonGroup.displayName = 'Button.Group';
 
-export interface ButtonIconProps extends ViewProps {
-  className?: string;
-}
+export interface ButtonIconProps extends Omit<IconProps, 'children'> {}
 
-const ButtonIcon = forwardRef<View, ButtonIconProps>(({ className, style, ...props }, ref) => {
-  return <ButtonPrimitive.Icon ref={ref} className={className} style={style} {...props} />;
-});
+const ButtonIcon = ({ className, style, as, ...props }: ButtonIconProps) => {
+  const { size } = useButtonStyleContext();
+
+  const computedClassName = cn(buttonIconVariants({ size }), className);
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
 
 ButtonIcon.displayName = 'Button.Icon';