@cdx-ui/components 0.0.1-alpha.3 → 0.0.1-alpha.30

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

@@ -0,0 +1,281 @@
+/**
+ * Neutral compound-variant **slices** shared by Button and IconButton (no consumer `variant` keys).
+ *
+ * Each consumer maps these into its own CVA, e.g. filled surface → Button `strong` or IconButton `solid`;
+ * ghost surface / outline+ghost foreground → attach the appropriate `variant` / tuple for that component.
+ *
+ * Button-only outline **surface** (borders) stays in `Button/styles.ts`.
+ */
+import { Platform } from 'react-native';
+import { SEMANTIC_COLORS } from '../../styles/primitives';
+
+export type SharedButtonSemanticColor = 'action' | 'danger' | 'warning' | 'success' | 'info';
+
+/** Root surface: filled semantic background (maps to Button `strong`, IconButton `solid`). */
+export const sharedFilledSurfaceCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  {
+    color: 'action',
+    className: [
+      SEMANTIC_COLORS.action.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-slate-700',
+        web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    className: [
+      SEMANTIC_COLORS.danger.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-red-800',
+        web: 'data-[hover=true]:bg-red-700 data-[active=true]:data-[hover=true]:bg-red-800',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    className: [
+      SEMANTIC_COLORS.warning.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-amber-700',
+        web: 'data-[hover=true]:bg-amber-600 data-[active=true]:data-[hover=true]:bg-amber-700',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    className: [
+      SEMANTIC_COLORS.success.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-green-800',
+        web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    className: [
+      SEMANTIC_COLORS.info.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-sky-700',
+        web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700',
+      }),
+    ],
+  },
+  {
+    color: 'action',
+    mode: 'dark',
+    className: [
+      'bg-slate-200',
+      Platform.select({
+        default: 'data-[active=true]:bg-slate-400',
+        web: 'data-[hover=true]:bg-slate-300 data-[active=true]:data-[hover=true]:bg-slate-400',
+      }),
+    ],
+  },
+];
+
+/** Root surface: ghost hover/active fills (maps to `variant: 'ghost'` on Button and IconButton). */
+export const sharedGhostSurfaceCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  {
+    color: 'danger',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-red-100',
+        web: 'data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:bg-red-100',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-amber-100',
+        web: 'data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:bg-amber-100',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-green-100',
+        web: 'data-[hover=true]:bg-green-50 data-[active=true]:data-[hover=true]:bg-green-100',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-sky-100',
+        web: 'data-[hover=true]:bg-sky-50 data-[active=true]:data-[hover=true]:bg-sky-100',
+      }),
+    ],
+  },
+  {
+    color: 'action',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-slate-700',
+        web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-red-950',
+        web: 'data-[hover=true]:bg-red-950/50 data-[active=true]:data-[hover=true]:bg-red-950',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-amber-950',
+        web: 'data-[hover=true]:bg-amber-950/50 data-[active=true]:data-[hover=true]:bg-amber-950',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-green-950',
+        web: 'data-[hover=true]:bg-green-950/50 data-[active=true]:data-[hover=true]:bg-green-950',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-sky-950',
+        web: 'data-[hover=true]:bg-sky-950/50 data-[active=true]:data-[hover=true]:bg-sky-950',
+      }),
+    ],
+  },
+];
+
+/** Foreground on filled controls (maps to Button `strong`, IconButton `solid`). */
+export const sharedFilledForegroundTextCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  { color: 'action', className: 'text-white' },
+  { color: 'danger', className: 'text-white' },
+  { color: 'warning', className: 'text-white' },
+  { color: 'success', className: 'text-white' },
+  { color: 'info', className: 'text-white' },
+  { color: 'action', mode: 'dark', className: 'text-slate-900' },
+];
+
+/**
+ * Foreground for transparent controls: same class names for Button `outline` and `ghost`, and for IconButton `ghost`.
+ * Consumers attach their own `variant` key(s).
+ */
+export const sharedOutlineGhostForegroundTextCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  {
+    color: 'action',
+    className: [
+      'text-slate-900',
+      Platform.select({
+        default: 'data-[active=true]:text-slate-700',
+        web: 'data-[hover=true]:text-slate-800 data-[active=true]:data-[hover=true]:text-slate-700',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    className: [
+      'text-red-600',
+      Platform.select({
+        default: 'data-[active=true]:text-red-800',
+        web: 'data-[hover=true]:text-red-700 data-[active=true]:data-[hover=true]:text-red-800',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    className: [
+      'text-amber-600',
+      Platform.select({
+        default: 'data-[active=true]:text-amber-800',
+        web: 'data-[hover=true]:text-amber-700 data-[active=true]:data-[hover=true]:text-amber-800',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    className: [
+      'text-green-600',
+      Platform.select({
+        default: 'data-[active=true]:text-green-800',
+        web: 'data-[hover=true]:text-green-700 data-[active=true]:data-[hover=true]:text-green-800',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    className: [
+      'text-sky-600',
+      Platform.select({
+        default: 'data-[active=true]:text-sky-800',
+        web: 'data-[hover=true]:text-sky-700 data-[active=true]:data-[hover=true]:text-sky-800',
+      }),
+    ],
+  },
+  {
+    color: 'action',
+    mode: 'dark',
+    className: [
+      'text-white',
+      Platform.select({
+        default: 'data-[active=true]:text-white',
+        web: 'data-[hover=true]:text-white data-[active=true]:data-[hover=true]:text-white',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    mode: 'dark',
+    className: 'text-red-400',
+  },
+  {
+    color: 'warning',
+    mode: 'dark',
+    className: 'text-amber-400',
+  },
+  {
+    color: 'success',
+    mode: 'dark',
+    className: 'text-green-400',
+  },
+  {
+    color: 'info',
+    mode: 'dark',
+    className: 'text-sky-400',
+  },
+];