@cdx-ui/components 0.0.1-alpha.20 → 0.0.1-alpha.21

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/Link/index.tsx

@@ -1,8 +1,9 @@
-import { forwardRef } from 'react';
-import { Pressable, type View } from 'react-native';
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text as RNText, type TextProps, type View } from 'react-native';
 import { createLink, type ILinkProps } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
-import { linkRootVariants } from './styles';
+import { Icon, type IconProps } from '../Icon';
+import { linkRootVariants, linkLabelVariants, linkIconVariants } from './styles';
 
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 
@@ -10,11 +11,15 @@ const LinkPrimitive = createLink({
   Root: Pressable,
 });
 
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
 export interface LinkProps extends ILinkProps {
   className?: string;
 }
 
-export const Link = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
+const LinkRoot = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
   const rootClassName = cn(linkRootVariants(), className);
 
   return (
@@ -24,4 +29,55 @@ export const Link = forwardRef<View, LinkProps>(({ className, children, style, .
   );
 });
 
-Link.displayName = 'Link';
+LinkRoot.displayName = 'Link';
+
+// =============================================================================
+// STYLED LABEL COMPONENT
+// =============================================================================
+
+export interface LinkLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const LinkLabel = forwardRef<RNText, LinkLabelProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(linkLabelVariants(), className);
+
+    return (
+      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </RNText>
+    );
+  },
+);
+
+LinkLabel.displayName = 'Link.Label';
+
+// =============================================================================
+// STYLED ICON COMPONENT
+// =============================================================================
+
+export interface LinkIconProps extends Omit<IconProps, 'children'> {}
+
+const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
+  const computedClassName = cn(linkIconVariants(), className);
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
+
+LinkIcon.displayName = 'Link.Icon';
+
+// =============================================================================
+// COMPOUND COMPONENT EXPORT
+// =============================================================================
+
+type LinkCompoundComponent = typeof LinkRoot & {
+  Label: typeof LinkLabel;
+  Icon: typeof LinkIcon;
+};
+
+export const Link = Object.assign(LinkRoot, {
+  Label: LinkLabel,
+  Icon: LinkIcon,
+}) as LinkCompoundComponent;

package/src/components/Link/styles.ts

@@ -1,11 +1,11 @@
 import { Platform } from 'react-native';
 import { cva } from 'class-variance-authority';
-import { COLOR_TEXT_PRIMARY, TRANSITION_COLORS } from '../../styles/primitives';
+import { TRANSITION_COLORS } from '../../styles/primitives';
 
 export const linkRootVariants = cva([
-  'flex-row items-center',
+  'flex-row items-center gap-1',
   'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
-  COLOR_TEXT_PRIMARY,
+  'text-blue-600',
   'underline decoration-slate-300 underline-offset-4',
   TRANSITION_COLORS,
   Platform.select({
@@ -14,3 +14,7 @@ export const linkRootVariants = cva([
   }),
   'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-slate-400/50 web:data-[focus-visible=true]:ring-offset-2',
 ]);
+
+export const linkLabelVariants = cva(['text-sm font-medium', 'text-blue-600']);
+
+export const linkIconVariants = cva(['size-4', 'text-blue-600']);

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './Avatar';
+export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
 export * from './Chip';