@cdx-ui/components 0.0.1-beta.99 → 0.1.0

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,149 @@
+import { Children, forwardRef, type ComponentRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import {
+  Slot,
+  TooltipContent as TooltipContentPrimitive,
+  TooltipRoot as TooltipRootPrimitive,
+  TooltipTrigger as TooltipTriggerPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  useTooltipContext,
+  type ITooltipProps,
+  type ITooltipContentProps,
+  type ITooltipTriggerProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { tooltipArrowVariants, tooltipContentVariants } from './styles';
+
+export type { TooltipPlacement, TooltipTriggerMode } from '@cdx-ui/primitives';
+
+export interface TooltipProps extends ITooltipProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TooltipTriggerProps extends ITooltipTriggerProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TooltipContentProps extends ITooltipContentProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TooltipArrowProps extends ViewProps {
+  /** Optional directional arrow that points toward the trigger. Compose inside `Tooltip.Content`. */
+  asChild?: boolean;
+  className?: string;
+}
+
+function isTextOnlyChild(children: ReactNode): children is string | number {
+  return typeof children === 'string' || typeof children === 'number';
+}
+
+const TooltipRoot = forwardRef<ComponentRef<typeof View>, TooltipProps>(
+  ({ className, style, children, ...props }, ref) => {
+    return (
+      <TooltipRootPrimitive
+        ref={ref}
+        className={className}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tooltip' }))}
+      >
+        {children}
+      </TooltipRootPrimitive>
+    );
+  },
+);
+
+TooltipRoot.displayName = 'Tooltip';
+
+const TooltipTrigger = forwardRef<ComponentRef<typeof View>, TooltipTriggerProps>(
+  ({ className, style, children, ...props }, ref) => {
+    return (
+      <TooltipTriggerPrimitive
+        ref={ref}
+        className={cn('self-start select-none', className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tooltip-trigger' }))}
+      >
+        {children}
+      </TooltipTriggerPrimitive>
+    );
+  },
+);
+
+TooltipTrigger.displayName = 'Tooltip.Trigger';
+
+const TooltipArrow = forwardRef<ComponentRef<typeof View>, TooltipArrowProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const { resolvedPlacement } = useTooltipContext();
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(tooltipArrowVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'tooltip-arrow',
+            side: resolvedPlacement?.side,
+          }),
+        )}
+      />
+    );
+  },
+);
+
+TooltipArrow.displayName = 'Tooltip.Arrow';
+
+const TooltipContent = forwardRef<ComponentRef<typeof View>, TooltipContentProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const childList = Children.toArray(children);
+
+    return (
+      <TooltipContentPrimitive
+        ref={ref}
+        className={cn(tooltipContentVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tooltip-content' }))}
+      >
+        {childList.map((child, index) => {
+          if (isTextOnlyChild(child)) {
+            return (
+              <Text
+                key={`tooltip-text-${String(index)}`}
+                className="body-sm text-content-neutral-on-strong"
+              >
+                {child}
+              </Text>
+            );
+          }
+
+          return child;
+        })}
+      </TooltipContentPrimitive>
+    );
+  },
+);
+
+TooltipContent.displayName = 'Tooltip.Content';
+
+type TooltipCompoundComponent = typeof TooltipRoot & {
+  Trigger: typeof TooltipTrigger;
+  Content: typeof TooltipContent;
+  Arrow: typeof TooltipArrow;
+};
+
+export const Tooltip = Object.assign(TooltipRoot, {
+  Trigger: TooltipTrigger,
+  Content: TooltipContent,
+  Arrow: TooltipArrow,
+}) as TooltipCompoundComponent;

package/src/components/Tooltip/styles.ts

@@ -0,0 +1,16 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export const tooltipContentVariants = cva([
+  'relative max-w-xs rounded-md bg-surface-neutral-strong px-3 py-2',
+  'body-sm text-content-neutral-on-strong shadow-lg',
+]);
+
+export const tooltipArrowVariants = cva([
+  'absolute size-2 rotate-45 bg-surface-neutral-strong',
+  'data-[side=top]:-bottom-1 data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2',
+  'data-[side=bottom]:-top-1 data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2',
+  'data-[side=left]:-right-1 data-[side=left]:top-1/2 data-[side=left]:-translate-y-1/2',
+  'data-[side=right]:-left-1 data-[side=right]:top-1/2 data-[side=right]:-translate-y-1/2',
+]);
+
+export type TooltipVariantProps = VariantProps<typeof tooltipContentVariants>;

package/src/components/index.ts

@@ -4,31 +4,53 @@ export * from './Avatar';
 export * from './Badge';
 export * from './BottomSheet';
 export * from './Box';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Checkbox';
 export * from './Chip';
 export * from './CurrencyInput';
+export * from './DateField';
+export * from './Calendar';
+export * from './RangeCalendar';
+export * from './MonthCalendar';
+export * from './DatePicker';
+export * from './DateRangePicker';
+export * from './MonthPicker';
+export * from './DateTimeField';
+export * from './DateTimeList';
+export * from './DateTimePicker';
 export * from './Dialog';
 export * from './Divider';
 export * from './Field';
 export * from './Form';
 export * from './Image';
+export * from './InsuranceDisclosure';
 export * from './Input';
 export * from './OtpInput';
+export * from './TablePagination';
 export * from './Link';
 export * from './ListItem';
+export * from './Accordion';
+export * from './Menu';
 export * from './ProgressBar';
+export * from './ProgressCircle';
 export * from './Skeleton';
 export * from './ProgressSegmented';
 export * from './Radio';
 export * from './ScopedTheme';
+export * from './ScrollShadow';
 export * from './Select';
+export * from './Slider';
 export * from './VirtualizedList';
 export * from './Switch';
+export * from './Tabs';
+export * from './Table';
 export * from './Textarea';
 export * from './Tile';
 export * from './Toast';
+export * from './Tooltip';
 export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';

package/src/components/picker/PickerTrigger.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, type ReactNode, type RefObject } from 'react';
+import { Pressable, type PressableProps, type View } from 'react-native';
+import { Slot } from '@cdx-ui/primitives';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+
+export interface PickerTriggerProps extends PressableProps {
+  /**
+   * Merge press / a11y props onto the single child instead of rendering a `Pressable`.
+   * Use when the trigger should be another interactive host (e.g. `IconButton`).
+   * For a larger field hit target, prefer wrapping `DateField.Group` as children
+   * without `asChild` so the outer `Pressable` covers the whole input chrome.
+   */
+  asChild?: boolean;
+  children?: ReactNode;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  disabled?: boolean;
+  triggerRef: RefObject<View | null>;
+  accessibilityLabel: string;
+}
+
+/**
+ * Shared open/close press host for date / month / date-time picker compounds.
+ * Compose two ways:
+ * - **Icon-only** (editable segmented fields): wrap `TriggerIndicator` inside `DateField.Suffix`
+ * - **Full-field** (range or overlay-primary selection): wrap the entire `DateField.Group`
+ */
+export const PickerTrigger = forwardRef<View, PickerTriggerProps>(
+  (
+    {
+      asChild = false,
+      children,
+      className,
+      style,
+      onPress,
+      open,
+      setOpen,
+      disabled,
+      triggerRef,
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp
+        ref={mergeRefs(ref, triggerRef)}
+        className={className}
+        style={style}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: !!disabled, expanded: open }}
+        disabled={disabled}
+        onPress={composeEventHandlers(onPress, () => setOpen(!open))}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PickerTrigger.displayName = 'PickerTrigger';

package/src/components/picker/styles.ts

@@ -0,0 +1,17 @@
+import { Platform } from 'react-native';
+import { cva } from '@cdx-ui/utils';
+
+/** Keeps the picker popover above app chrome and other absolutely-positioned surfaces. */
+export const PICKER_POPOVER_Z_INDEX = 9999;
+
+export const pickerPopoverContentVariants = cva([
+  'bg-surface-primary',
+  'border border-stroke-secondary',
+  'overflow-hidden',
+  'rounded-[var(--border-radius-default)]',
+  Platform.select({
+    web: 'shadow-sm',
+    default: '',
+  }),
+  'p-3',
+]);

package/src/components/picker/surfaces.tsx

@@ -0,0 +1,178 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode, type RefObject } from 'react';
+import { ScrollView, View } from 'react-native';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import {
+  OverlayContainer,
+  useAnchoredOverlay,
+  useDismissOverlay,
+  useEscapeKey,
+} from '@cdx-ui/primitives';
+import { cn, mergeRefs } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { BottomSheet, useBottomSheet, type BottomSheetModalProps } from '../BottomSheet';
+import { PICKER_POPOVER_Z_INDEX, pickerPopoverContentVariants } from './styles';
+
+// Shared surface wiring for picker compound components.
+
+export function PickerDialogSurface({
+  open,
+  setOpen,
+  registerSurface,
+  children,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  registerSurface: (type: 'dialog') => void;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    registerSurface('dialog');
+  }, [registerSurface]);
+
+  return (
+    <Dialog isOpen={open} onOpenChange={setOpen}>
+      {children}
+    </Dialog>
+  );
+}
+
+type PickerBottomSheetSurfaceProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  registerSurface: (type: 'bottomSheet') => void;
+  children: ReactNode;
+} & Pick<BottomSheetModalProps, 'snapPoints' | 'enableDynamicSizing'>;
+
+export function PickerBottomSheetSurface({
+  open,
+  setOpen,
+  registerSurface,
+  children,
+  snapPoints = ['70%', '90%'],
+  enableDynamicSizing = false,
+}: PickerBottomSheetSurfaceProps) {
+  const { ref, dismiss } = useBottomSheet();
+  const isPresentedRef = useRef(false);
+
+  useEffect(() => {
+    registerSurface('bottomSheet');
+  }, [registerSurface]);
+
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false;
+    setOpen(false);
+  }, [setOpen]);
+
+  const tryPresent = useCallback(() => {
+    if (!open || isPresentedRef.current) {
+      return;
+    }
+    ref.current?.present();
+    isPresentedRef.current = true;
+  }, [open, ref]);
+
+  useEffect(() => {
+    if (!open) {
+      if (isPresentedRef.current) {
+        dismiss();
+        isPresentedRef.current = false;
+      }
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      tryPresent();
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [dismiss, open, tryPresent]);
+
+  return (
+    <BottomSheet.Modal
+      ref={ref}
+      onDismiss={handleDismiss}
+      snapPoints={snapPoints}
+      enableDynamicSizing={enableDynamicSizing}
+    >
+      <BottomSheet.View onLayout={tryPresent}>{children}</BottomSheet.View>
+    </BottomSheet.Modal>
+  );
+}
+
+interface PickerPopoverSurfaceProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  registerSurface: (type: 'popover') => void;
+  anchorRef: RefObject<View | null>;
+  triggerRef?: RefObject<View | null>;
+  children: ReactNode;
+  className?: string;
+}
+
+export function PickerPopoverSurface({
+  open,
+  setOpen,
+  registerSurface,
+  anchorRef,
+  triggerRef,
+  children,
+  className,
+}: PickerPopoverSurfaceProps) {
+  const contentRef = useRef<View>(null);
+  const [dismissEnabled, setDismissEnabled] = useState(false);
+
+  useEffect(() => {
+    registerSurface('popover');
+  }, [registerSurface]);
+
+  useEffect(() => {
+    if (!open) {
+      setDismissEnabled(false);
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      setDismissEnabled(true);
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+
+  const dismiss = useCallback(() => setOpen(false), [setOpen]);
+
+  const { floatingRef, onFloatingLayout, style } = useAnchoredOverlay(anchorRef, open, {
+    placement: 'bottom-start',
+    offset: 4,
+    collisionBehavior: 'flip-shift',
+    width: 'anchor',
+  });
+
+  const excludeRefs = triggerRef ? [anchorRef, triggerRef] : [anchorRef];
+  useDismissOverlay(dismissEnabled, contentRef, excludeRefs, dismiss);
+  useEscapeKey(open, dismiss);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <OverlayContainer
+      onDismiss={dismiss}
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut.duration(100)}
+      style={{ zIndex: PICKER_POPOVER_Z_INDEX }}
+    >
+      <View
+        ref={mergeRefs(contentRef, floatingRef)}
+        onLayout={onFloatingLayout}
+        className={cn(pickerPopoverContentVariants(), className)}
+        style={style}
+        accessibilityViewIsModal
+      >
+        <ScrollView scrollEventThrottle={16} showsVerticalScrollIndicator={false}>
+          {children}
+        </ScrollView>
+      </View>
+    </OverlayContainer>
+  );
+}

package/src/index.ts

@@ -4,5 +4,7 @@ export * from './hooks';
 export * from './navigation';
 export { ToastProvider, useToast } from './providers/toast';
 export type * from './providers/toast';
+export { ForgeDesignProvider } from './providers/forge-design';
+export type { ForgeDesignConfig, ForgeDesignProviderProps } from './providers/forge-design';
 export { View, ScrollView, KeyboardAvoidingView } from 'react-native';
 export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

package/src/providers/forge-design/provider.tsx

@@ -1,12 +1,27 @@
 import React from 'react';
 import { SafeAreaListener } from 'react-native-safe-area-context';
 import { Uniwind } from 'uniwind';
-import { PortalHost } from '@cdx-ui/primitives';
+import {
+  OverlayInsetsProvider,
+  OverlayStackProvider,
+  PortalHost,
+  PortalProvider,
+  type EdgeInsets,
+} from '@cdx-ui/primitives';
 import { GlobalAnimationSettingsProvider } from '../animation-settings';
 import { TextComponentProvider } from '../text-component/provider';
 import { ToastProvider } from '../toast/provider';
 import type { ForgeDesignProviderProps } from './types';
 
+function areInsetsEqual(current: EdgeInsets, next: EdgeInsets): boolean {
+  return (
+    current.top === next.top &&
+    current.right === next.right &&
+    current.bottom === next.bottom &&
+    current.left === next.left
+  );
+}
+
 /**
  * ForgeDesignProvider Component
  *
@@ -28,32 +43,45 @@ import type { ForgeDesignProviderProps } from './types';
  */
 const ForgeDesignProvider: React.FC<ForgeDesignProviderProps> = ({ children, config = {} }) => {
   const { textProps, toast, animation } = config;
+  const [overlayInsets, setOverlayInsets] = React.useState<EdgeInsets>({
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  });
+
+  const handleSafeAreaChange = React.useCallback(({ insets }: { insets: EdgeInsets }) => {
+    Uniwind.updateInsets(insets);
+    setOverlayInsets((current) => (areInsetsEqual(current, insets) ? current : insets));
+  }, []);
 
   // Determine if toast should be enabled and get props
   const isToastEnabled = toast !== false && toast !== 'disabled';
   const toastProps = typeof toast === 'object' ? toast : {};
 
   return (
-    <SafeAreaListener
-      onChange={({ insets }) => {
-        Uniwind.updateInsets(insets);
-      }}
-    >
-      <GlobalAnimationSettingsProvider animation={animation}>
-        <TextComponentProvider value={{ textProps }}>
-          {isToastEnabled ? (
-            <ToastProvider {...toastProps}>
-              {children}
-              <PortalHost />
-            </ToastProvider>
-          ) : (
-            <>
-              {children}
-              <PortalHost />
-            </>
-          )}
-        </TextComponentProvider>
-      </GlobalAnimationSettingsProvider>
+    <SafeAreaListener onChange={handleSafeAreaChange}>
+      <PortalProvider>
+        <OverlayStackProvider>
+          <OverlayInsetsProvider value={overlayInsets}>
+            <GlobalAnimationSettingsProvider animation={animation}>
+              <TextComponentProvider value={{ textProps }}>
+                {isToastEnabled ? (
+                  <ToastProvider {...toastProps}>
+                    {children}
+                    <PortalHost />
+                  </ToastProvider>
+                ) : (
+                  <>
+                    {children}
+                    <PortalHost />
+                  </>
+                )}
+              </TextComponentProvider>
+            </GlobalAnimationSettingsProvider>
+          </OverlayInsetsProvider>
+        </OverlayStackProvider>
+      </PortalProvider>
     </SafeAreaListener>
   );
 };

package/src/providers/toast/insets-container.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { Platform, View } from 'react-native';
 import { SafeAreaInsetsContext, type EdgeInsets } from 'react-native-safe-area-context';
-import { FullWindowOverlay } from '@cdx-ui/primitives';
+import { FullWindowOverlay, NOTIFICATION_OVERLAY_Z_INDEX } from '@cdx-ui/primitives';
 import type { ToastInsets } from './types';
 
 const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
@@ -199,7 +199,7 @@ export function InsetsContainer({
   const content = (
     <View
       ref={containerRef}
-      className="absolute inset-0 pointer-events-box-none"
+      className="absolute web:fixed inset-0 pointer-events-box-none"
       role="region"
       aria-label={announceLabel}
       {...(Platform.OS === 'web' && {
@@ -207,6 +207,7 @@ export function InsetsContainer({
         'aria-atomic': false,
       })}
       style={{
+        ...(Platform.OS === 'web' ? { zIndex: NOTIFICATION_OVERLAY_Z_INDEX } : {}),
         paddingTop: finalInsets.top,
         paddingBottom: finalInsets.bottom,
         paddingLeft: finalInsets.left,

package/src/providers/toast/lifecycle.context.tsx

@@ -18,8 +18,8 @@ export interface ToastLifecycleContextValue {
   remove: (id: string) => void;
   /** IDs of toasts that have been marked closed but are still mounted. */
   pendingRemovalIds: ReadonlySet<string>;
-  /** ID of the front-most (last non-pending) toast, or null if none. */
-  frontmostId: string | null;
+  /** IDs of the front-most non-pending toast in each placement stack. */
+  frontmostIds: ReadonlySet<string>;
 }
 
 export const ToastLifecycleContext = createContext<ToastLifecycleContextValue | null>(null);