@cdx-ui/components 0.0.1-beta.15 → 0.0.1-beta.150

package/src/components/Badge/index.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import type { ForgeIcon } from '@cdx-ui/icons';
+import { Icon } from '../Icon';
+import {
+  badgeIconVariants,
+  badgeIndicatorVariants,
+  badgeLabelVariants,
+  badgeRootVariants,
+  type BadgeVariantProps,
+} from './styles';
+
+const INDICATOR_STYLE = { pointerEvents: 'none' as const };
+
+export interface BadgeProps extends ViewProps, BadgeVariantProps {
+  children?: ReactNode;
+  label?: ReactNode;
+  icon?: ForgeIcon;
+  className?: string;
+}
+
+const Badge = forwardRef<View, BadgeProps>(
+  (
+    {
+      children,
+      variant = 'default',
+      color = 'action',
+      placement = 'top-end',
+      overlap = 'rectangular',
+      label,
+      icon: IconComponent,
+      accessibilityLabel,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const isDecorative = variant === 'dot' || !accessibilityLabel;
+
+    const renderContent = () => {
+      if (variant === 'dot') return null;
+      if (IconComponent) {
+        return <Icon as={IconComponent} className={badgeIconVariants({ color })} />;
+      }
+      if (typeof label === 'string' || typeof label === 'number') {
+        return (
+          <Text
+            className={badgeLabelVariants({ color })}
+            {...dataAttributes({ slot: 'badge-label' })}
+          >
+            {label}
+          </Text>
+        );
+      }
+      return label ?? null;
+    };
+
+    const hasChildren = children != null;
+
+    return (
+      <View
+        ref={ref}
+        className={cn(badgeRootVariants({ standalone: !hasChildren }), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'badge' }))}
+      >
+        {children}
+        <View
+          className={cn(badgeIndicatorVariants({ variant, color, placement, overlap }))}
+          style={INDICATOR_STYLE}
+          accessible={!isDecorative}
+          accessibilityLabel={accessibilityLabel}
+          aria-hidden={isDecorative}
+          accessibilityElementsHidden={isDecorative}
+          importantForAccessibility={isDecorative ? 'no-hide-descendants' : 'auto'}
+          {...dataAttributes({ slot: 'badge-indicator' })}
+        >
+          {renderContent()}
+        </View>
+      </View>
+    );
+  },
+);
+Badge.displayName = 'Badge';
+
+export { Badge };
+export type { BadgeVariantProps } from './styles';

package/src/components/Badge/styles.ts

@@ -0,0 +1,136 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
+
+export const badgeRootVariants = cva(['relative self-start'], {
+  variants: {
+    standalone: {
+      true: 'inline-flex',
+      false: '',
+    },
+  },
+  defaultVariants: { standalone: false },
+});
+
+export const badgeIndicatorVariants = cva(
+  [
+    'absolute items-center justify-center overflow-hidden',
+    'rounded-[var(--border-radius-round)]',
+    'border border-surface-primary',
+    TRANSITION_COLORS,
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'h-5 min-w-5 px-1',
+        dot: 'h-2 w-2 min-w-0 px-0',
+      },
+      color: {
+        action: 'bg-surface-action-strong',
+        danger: 'bg-surface-danger-strong',
+        warning: 'bg-surface-warning-strong',
+        success: 'bg-surface-success-strong',
+        info: 'bg-surface-info-strong',
+      },
+      placement: {
+        'top-start': 'top-0 ltr:left-0 rtl:right-0',
+        'top-end': 'top-0 ltr:right-0 rtl:left-0',
+        'bottom-start': 'bottom-0 ltr:left-0 rtl:right-0',
+        'bottom-end': 'bottom-0 ltr:right-0 rtl:left-0',
+      },
+      overlap: { circular: '', rectangular: '' },
+    },
+    compoundVariants: [
+      // Positioning model (mirrors MUI Badge): the indicator is always centered on an
+      // anchor point via a 50% self-translate, so it straddles that point regardless of
+      // its own size (dot vs default). `overlap` only moves the anchor point.
+      //
+      // Translate uses arbitrary `[50%]` (not the `1/2` fraction utility) because the
+      // fraction sugar is web-only in Uniwind — Avatar's badge uses `[N%]` translate on
+      // native, Toast gates `-translate-x-1/2` behind `web:`.
+      //
+      // rectangular: anchor at the host's true bounding-box corner.
+      {
+        placement: 'top-end',
+        overlap: 'rectangular',
+        className: 'ltr:translate-x-[50%] rtl:-translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'top-start',
+        overlap: 'rectangular',
+        className: 'ltr:-translate-x-[50%] rtl:translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-end',
+        overlap: 'rectangular',
+        className: 'ltr:translate-x-[50%] rtl:-translate-x-[50%] translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-start',
+        overlap: 'rectangular',
+        className: 'ltr:-translate-x-[50%] rtl:translate-x-[50%] translate-y-[50%]',
+      },
+      // circular: anchor inset 14% from each edge — the ~45° point of the inscribed
+      // circle ((1 - √2/2)/2 ≈ 14.6%, rounded to 14% per MUI) — so the indicator sits
+      // on the host's visible arc. The inset is host-relative (percent of the wrapper,
+      // which hugs the host), keeping it independent of the indicator's own size.
+      {
+        placement: 'top-end',
+        overlap: 'circular',
+        className:
+          'top-[14%] ltr:right-[14%] rtl:left-[14%] ltr:translate-x-[50%] rtl:-translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'top-start',
+        overlap: 'circular',
+        className:
+          'top-[14%] ltr:left-[14%] rtl:right-[14%] ltr:-translate-x-[50%] rtl:translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-end',
+        overlap: 'circular',
+        className:
+          'bottom-[14%] ltr:right-[14%] rtl:left-[14%] ltr:translate-x-[50%] rtl:-translate-x-[50%] translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-start',
+        overlap: 'circular',
+        className:
+          'bottom-[14%] ltr:left-[14%] rtl:right-[14%] ltr:-translate-x-[50%] rtl:translate-x-[50%] translate-y-[50%]',
+      },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      color: 'action',
+      placement: 'top-end',
+      overlap: 'rectangular',
+    },
+  },
+);
+
+export const badgeLabelVariants = cva(['body-sm font-medium text-center'], {
+  variants: {
+    color: {
+      action: 'text-content-action-on-strong',
+      danger: 'text-content-danger-on-strong',
+      warning: 'text-content-warning-on-strong',
+      success: 'text-content-success-on-strong',
+      info: 'text-content-info-on-strong',
+    },
+  },
+  defaultVariants: { color: 'action' },
+});
+
+export const badgeIconVariants = cva(['size-3'], {
+  variants: {
+    color: {
+      action: 'text-content-action-on-strong',
+      danger: 'text-content-danger-on-strong',
+      warning: 'text-content-warning-on-strong',
+      success: 'text-content-success-on-strong',
+      info: 'text-content-info-on-strong',
+    },
+  },
+  defaultVariants: { color: 'action' },
+});
+
+export type BadgeVariantProps = VariantProps<typeof badgeIndicatorVariants>;

package/src/components/BottomSheet/index.tsx

@@ -1,6 +1,7 @@
-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 React, { forwardRef, useCallback, useContext, useRef, type ReactNode } from 'react';
+import { Dimensions, View, ViewStyle } from 'react-native';
+import { SafeAreaInsetsContext, type EdgeInsets } from 'react-native-safe-area-context';
+import { useResolveClassNames } from 'uniwind';
 import {
   BottomSheetModal,
   BottomSheetModalProvider,
@@ -10,25 +11,27 @@ import {
   BottomSheetFooter as GorhomBottomSheetFooter,
   type BottomSheetBackdropProps,
   type BottomSheetFooterProps as GorhomBottomSheetFooterProps,
+  type BottomSheetModalProps as GorhomBottomSheetModalProps,
 } from '@gorhom/bottom-sheet';
 import { cn } from '@cdx-ui/utils';
-import { ArrowBackIosNew, Close } from '@cdx-ui/icons';
+import { ArrowBack, Close } from '@cdx-ui/icons';
 import { Heading } from '../Heading';
-import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
 import { Text } from '../Text';
 import {
-  bottomSheetBackButtonVariants,
-  bottomSheetBackIconVariants,
-  bottomSheetCloseButtonVariants,
-  bottomSheetCloseIconVariants,
-  bottomSheetContainerVariants,
+  bottomSheetBackgroundClassName,
   bottomSheetContentVariants,
   bottomSheetFooterVariants,
   bottomSheetHeaderVariants,
-  bottomSheetSubtitleVariants,
-  handleIndicatorStyle,
+  bottomSheetModalContainerClassName,
 } from './styles';
 
+const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
+
+function useSafeInsets(): EdgeInsets {
+  return useContext(SafeAreaInsetsContext) ?? ZERO_INSETS;
+}
+
 /** Ref type for BottomSheet; forwards the @gorhom modal ref (present, dismiss, snapToIndex, minimize, restore, etc.). */
 export type BottomSheetModalRef = React.ComponentRef<typeof BottomSheetModal>;
 
@@ -61,36 +64,35 @@ function BottomSheetHeaderComponent(
   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>
-      )}
+      <BottomSheetBackButton
+        className={cn(!onBack && 'opacity-0')}
+        onPress={onBack}
+        {...(backAccessibilityLabel !== undefined && {
+          accessibilityLabel: backAccessibilityLabel,
+        })}
+      />
       <View className="flex-1">
         {children ??
           (hasTitle ? (
             <View>
-              <Heading size="xs" className="text-lg">
+              <Heading size="sm" className="text-center">
                 {title}
               </Heading>
-              {subtitle ? <Text className={bottomSheetSubtitleVariants()}>{subtitle}</Text> : null}
+              {subtitle ? (
+                <Text size="sm" className="text-center text-content-secondary">
+                  {subtitle}
+                </Text>
+              ) : null}
             </View>
           ) : null)}
       </View>
-      {onClose && (
-        <BottomSheetCloseButton
-          onPress={onClose}
-          {...(closeAccessibilityLabel !== undefined && {
-            accessibilityLabel: closeAccessibilityLabel,
-          })}
-        />
-      )}
+      <BottomSheetCloseButton
+        className={cn(!onClose && 'opacity-0')}
+        onPress={onClose}
+        {...(closeAccessibilityLabel !== undefined && {
+          accessibilityLabel: closeAccessibilityLabel,
+        })}
+      />
     </View>
   );
 }
@@ -100,11 +102,41 @@ BottomSheetHeaderComponent.displayName = 'BottomSheet.Header';
 const BottomSheetHeader = forwardRef<View, BottomSheetHeaderProps>(BottomSheetHeaderComponent);
 BottomSheetHeader.displayName = 'BottomSheet.Header';
 
+// =============================================================================
+// BACKBUTTON
+// =============================================================================
+interface BottomSheetBackButtonProps {
+  onPress?: () => void;
+  className?: string;
+  accessibilityLabel?: string;
+}
+
+function BottomSheetBackButton({
+  onPress,
+  className,
+  accessibilityLabel = 'Go back',
+}: Readonly<BottomSheetBackButtonProps>) {
+  return (
+    <IconButton
+      as={ArrowBack}
+      variant="solid"
+      color="neutral"
+      size="default"
+      onPress={onPress}
+      hitSlop={12}
+      accessibilityLabel={accessibilityLabel}
+      className={className}
+    />
+  );
+}
+
+BottomSheetBackButton.displayName = 'BottomSheet.BackButton';
+
 // =============================================================================
 // CLOSEBUTTON
 // =============================================================================
 interface BottomSheetCloseButtonProps {
-  onPress: () => void;
+  onPress?: () => void;
   className?: string;
   accessibilityLabel?: string;
 }
@@ -113,17 +145,18 @@ function BottomSheetCloseButton({
   onPress,
   className,
   accessibilityLabel = 'Close',
-}: BottomSheetCloseButtonProps) {
+}: Readonly<BottomSheetCloseButtonProps>) {
   return (
-    <Pressable
+    <IconButton
+      as={Close}
+      variant="solid"
+      color="neutral"
+      size="default"
       onPress={onPress}
       hitSlop={12}
-      accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
-      className={cn(bottomSheetCloseButtonVariants(), className)}
-    >
-      <Icon as={Close} className={bottomSheetCloseIconVariants()} />
-    </Pressable>
+      className={className}
+    />
   );
 }
 
@@ -142,7 +175,7 @@ export interface BottomSheetContentProps {
 
 const BottomSheetContent = forwardRef<View, BottomSheetContentProps>(
   ({ children, className, hasSafeAreaInset, style }, ref) => {
-    const insets = useSafeAreaInsets();
+    const insets = useSafeInsets();
     const computedClassName = cn(bottomSheetContentVariants(), className);
     return (
       <View
@@ -170,7 +203,7 @@ export interface BottomSheetFooterProps {
 
 const BottomSheetFooter = forwardRef<View, BottomSheetFooterProps>(
   ({ children, className, style }, ref) => {
-    const insets = useSafeAreaInsets();
+    const insets = useSafeInsets();
     const computedClassName = cn(bottomSheetFooterVariants(), className);
     return (
       <View
@@ -191,9 +224,7 @@ BottomSheetFooter.displayName = 'BottomSheet.Footer';
 // MODAL WRAPPER (WITH STYLES)
 // =============================================================================
 
-export interface BottomSheetModalProps extends React.ComponentPropsWithoutRef<
-  typeof BottomSheetModal
-> {
+export interface BottomSheetModalProps extends GorhomBottomSheetModalProps {
   /** 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. */
@@ -214,10 +245,14 @@ const CustomBackdrop = (props: BottomSheetBackdropProps) => {
   );
 };
 
+const CustomBackground = (props: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View {...props} className={bottomSheetBackgroundClassName} />
+);
+
 const BottomSheetModalStyled = forwardRef<
   React.ComponentRef<typeof BottomSheetModal>,
   BottomSheetModalProps
->(({ handleVisible = true, footer, ...rest }, ref) => {
+>(({ handleVisible = true, footer, onDismiss, onChange, ...rest }, ref) => {
   const renderFooter = useCallback(
     (props: GorhomBottomSheetFooterProps) => (
       <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
@@ -225,18 +260,40 @@ const BottomSheetModalStyled = forwardRef<
     [footer],
   );
 
+  const dismissedRef = useRef(false);
+
+  const handleDismiss = useCallback(() => {
+    if (dismissedRef.current) return;
+    dismissedRef.current = true;
+    onDismiss?.();
+  }, [onDismiss]);
+
+  const handleChange = useCallback(
+    (...args: Parameters<NonNullable<BottomSheetModalProps['onChange']>>) => {
+      dismissedRef.current = false;
+      onChange?.(...args);
+    },
+    [onChange],
+  );
+
+  const sheetContainerStyle = useResolveClassNames(bottomSheetModalContainerClassName);
+  const handleIndicatorStyle = useResolveClassNames(
+    'bg-surface-neutral-subtle w-9 h-[5px] rounded-full',
+  );
+
   return (
     <BottomSheetModal
       ref={ref}
       enableDynamicSizing
       maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
+      style={sheetContainerStyle}
       handleComponent={handleVisible ? undefined : null}
       handleIndicatorStyle={handleVisible ? handleIndicatorStyle : undefined}
       backdropComponent={CustomBackdrop}
-      backgroundComponent={(backgroundProps) => (
-        <View {...backgroundProps} className={cn(bottomSheetContainerVariants())} />
-      )}
+      backgroundComponent={CustomBackground}
       {...rest}
+      onDismiss={handleDismiss}
+      onChange={handleChange}
       {...(footer != null && { footerComponent: renderFooter })}
     />
   );
@@ -312,5 +369,11 @@ export const BottomSheet = {
 
 export function useBottomSheet() {
   const ref = useRef<BottomSheetModalRef>(null);
-  return { ref, present: () => ref.current?.present(), dismiss: () => ref.current?.dismiss() };
+  const present = useCallback(() => {
+    ref.current?.present();
+  }, []);
+  const dismiss = useCallback(() => {
+    ref.current?.dismiss();
+  }, []);
+  return { ref, present, dismiss };
 }

package/src/components/BottomSheet/styles.ts

@@ -1,27 +1,16 @@
-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';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
-// ── Container ──────────────────────────────────────────────
+/** Shared top-radius + clip — used by background CVA and gorhom modal `style` (via useResolveClassNames). */
+export const bottomSheetModalContainerClassName = 'overflow-hidden rounded-t-4xl';
 
-export const bottomSheetContainerVariants = cva([
-  'rounded-t-3xl border-t border-x overflow-hidden',
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-]);
-
-// ── Header ─────────────────────────────────────────────────
+/** Gorhom backgroundComponent — surface fill + shared top-radius clip. */
+export const bottomSheetBackgroundClassName = `${bottomSheetModalContainerClassName} bg-surface-primary`;
 
 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,
+    'flex-row items-center justify-between min-h-11 px-4 pt-3 pb-2.5',
+    'bg-surface-primary',
+    'text-content-primary',
   ],
   {
     variants: {
@@ -36,44 +25,8 @@ export const bottomSheetHeaderVariants = cva(
   },
 );
 
-// ── 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']);
+export const bottomSheetContentVariants = cva(['bg-surface-primary', 'px-5 pb-5 gap-3']);
 
-// ── 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 const bottomSheetFooterVariants = cva(['px-5 pb-5 gap-2', 'bg-surface-primary']);
 
 export type BottomSheetHeaderVariants = VariantProps<typeof bottomSheetHeaderVariants>;

package/src/components/Box/Box.tsx

@@ -1,19 +1,15 @@
 import { type ForwardedRef, forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { WrapStringChild } from '../../utils/WrapStringChild';
-import type { TextProps } from '../Text';
 
 export interface BoxProps extends ViewProps {
   className?: string;
-  textProps?: TextProps;
 }
 
-/** @deprecated Use View instead */
 export const Box = forwardRef<View, BoxProps>(
-  ({ style, className, children, textProps, ...restProps }, ref: ForwardedRef<View>) => {
+  ({ children, ...restProps }, ref: ForwardedRef<View>) => {
     return (
-      <View ref={ref} style={style} className={className} {...restProps}>
-        <WrapStringChild textProps={textProps}>{children}</WrapStringChild>
+      <View ref={ref} {...restProps}>
+        {children}
       </View>
     );
   },