@cdx-ui/components 0.0.1-beta.16 → 0.0.1-beta.161

package/src/components/Toast/styles.ts

@@ -0,0 +1,186 @@
+import { StyleSheet } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+/**
+ * Toast root styles
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following properties are animated and cannot be overridden using Tailwind classes:
+ * - `opacity` - Animated for visibility transitions when toasts are pushed beyond visible stack limits
+ * - `transform` (translateY) - Animated for vertical position transitions when toasts are stacked, and for swipe-to-dismiss gestures
+ * - `transform` (scale) - Animated for size scaling transitions when toasts are stacked (toasts behind active one are scaled down)
+ * - `height` - Animated for height transitions when toast content changes
+ *
+ * To customize these properties, use the `animation` prop on `Toast.Root`:
+ * ```tsx
+ * <Toast.Root
+ *   animation={{
+ *     opacity: {
+ *       value: [1, 0],
+ *       timingConfig: { duration: 300 }
+ *     },
+ *     translateY: {
+ *       value: [0, 10],
+ *       timingConfig: { duration: 300 }
+ *     },
+ *     scale: {
+ *       value: [1, 0.97],
+ *       timingConfig: { duration: 300 }
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Toast.Root`.
+ */
+export const toastRootVariants = cva(
+  [
+    // `overflow-hidden` was intentionally removed: on web it clips the drop
+    // shadow and clips the child's transform mid-transition, producing a
+    // visual "cut off" during enter/exit. Consumers that need clipping for
+    // custom child content (e.g. a background image) can add it themselves.
+    'flex-row items-center gap-2 rounded-[var(--border-radius-default)] min-h-12 px-4 py-2 shadow-lg bg-surface-primary border border-stroke-secondary',
+    'native:overflow-hidden',
+  ],
+  {
+    variants: {
+      color: {
+        neutral: '',
+        info: '',
+        success: '',
+        warning: '',
+        danger: '',
+      },
+    },
+    defaultVariants: {
+      color: 'neutral',
+    },
+  },
+);
+
+/**
+ * Toast wrapper variants
+ *
+ * Applied to the outer `Animated.View` that carries `data-state="entering|open|closed"`.
+ * On web the CSS engine drives the enter/exit animation via `data-state` transitions —
+ * fade + short translate — replacing the Reanimated layout animations that ran on
+ * the same element on native. Native ignores these classes (no `web:` prefix hits).
+ *
+ * `placement` picks the slide direction so top-placed toasts translate up on close and
+ * bottom-placed toasts translate down. The unprefixed `-translate-y-2` / `translate-y-2`
+ * on the `top-*` / `bottom-*` variants also seeds the entering-state offset synchronously
+ * — CSS transitions to `translate-y-0` when `data-state` flips to `open`.
+ *
+ * `motion-reduce:transition-none` collapses the transition for users with
+ * `prefers-reduced-motion: reduce`. In that case `transitionend` may never fire, so
+ * the Toast component's safety timeout handles removal.
+ */
+export const toastWrapperVariants = cva(
+  [
+    'absolute',
+    'web:transition-[opacity,transform] web:duration-200 web:ease-out',
+    'web:data-[state=entering]:opacity-0',
+    'web:data-[state=open]:opacity-100',
+    'web:data-[state=closed]:opacity-0 web:data-[state=closed]:duration-150',
+    'web:motion-reduce:transition-none web:motion-reduce:duration-0',
+  ],
+  {
+    variants: {
+      placement: {
+        'top-start': [
+          'top-0 native:left-0 native:right-0',
+          'web:left-0 web:max-w-[460px]',
+          'web:data-[state=entering]:-translate-y-2',
+          'web:data-[state=closed]:-translate-y-2',
+        ],
+        top: [
+          'top-0 native:left-0 native:right-0',
+          'web:left-1/2 web:-translate-x-1/2 web:max-w-[460px]',
+          'web:data-[state=entering]:-translate-y-2',
+          'web:data-[state=closed]:-translate-y-2',
+        ],
+        'top-end': [
+          'top-0 native:left-0 native:right-0',
+          'web:right-0 web:max-w-[460px]',
+          'web:data-[state=entering]:-translate-y-2',
+          'web:data-[state=closed]:-translate-y-2',
+        ],
+        'bottom-start': [
+          'bottom-0 native:left-0 native:right-0',
+          'web:left-0 web:max-w-[460px]',
+          'web:data-[state=entering]:translate-y-2',
+          'web:data-[state=closed]:translate-y-2',
+        ],
+        bottom: [
+          'bottom-0 native:left-0 native:right-0',
+          'web:left-1/2 web:-translate-x-1/2 web:max-w-[460px]',
+          'web:data-[state=entering]:translate-y-2',
+          'web:data-[state=closed]:translate-y-2',
+        ],
+        'bottom-end': [
+          'bottom-0 native:left-0 native:right-0',
+          'web:right-0 web:max-w-[460px]',
+          'web:data-[state=entering]:translate-y-2',
+          'web:data-[state=closed]:translate-y-2',
+        ],
+      },
+    },
+    defaultVariants: {
+      placement: 'bottom',
+    },
+  },
+);
+
+export const toastLabelVariants = cva(['text-base font-sans-medium'], {
+  variants: {
+    color: {
+      neutral: 'text-content-primary',
+      info: 'text-content-info',
+      success: 'text-content-success',
+      warning: 'text-content-warning',
+      danger: 'text-content-danger',
+    },
+  },
+  defaultVariants: {
+    color: 'neutral',
+  },
+});
+
+export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
+  variants: {
+    color: {
+      neutral: 'text-content-primary',
+      info: 'text-content-info',
+      success: 'text-content-success',
+      warning: 'text-content-warning',
+      danger: 'text-content-danger',
+    },
+  },
+  defaultVariants: {
+    color: 'neutral',
+  },
+});
+
+export const toastIconVariants = cva(['size-5'], {
+  variants: {
+    color: {
+      neutral: 'text-content-primary',
+      info: 'text-content-info',
+      success: 'text-content-success',
+      warning: 'text-content-warning',
+      danger: 'text-content-danger',
+    },
+  },
+  defaultVariants: {
+    color: 'neutral',
+  },
+});
+
+export const toastStyleSheet = StyleSheet.create({
+  root: {
+    borderCurve: 'continuous',
+  },
+});
+
+export type ToastColorProps = VariantProps<typeof toastRootVariants>;

package/src/components/Toast/types.ts

@@ -0,0 +1,338 @@
+import { View } from 'react-native';
+import type { EntryOrExitLayoutType, WithTimingConfig } from 'react-native-reanimated';
+import type { ToastRootProps } from '@cdx-ui/primitives';
+import { ForgeIcon } from '@cdx-ui/icons';
+import type { AnimationRoot, AnimationValue } from '../../animation';
+import type { ToastComponentProps, ToastShowOptions } from '../../providers/toast';
+import type { ButtonProps } from '../Button';
+import type { IconButtonProps } from '../IconButton';
+import type { IconProps } from '../Icon';
+import { ToastColorProps } from './styles';
+
+/**
+ * Internal (normalized) toast color values used by CVA and context.
+ */
+export type ToastColorInternal = ToastColorProps['color'];
+
+/**
+ * Toast color types accepted by consumers.
+ * @remarks `'default'` is deprecated — use `'neutral'` instead.
+ */
+export type ToastColor = ToastColorInternal | 'default';
+
+/**
+ * Toast placement types.
+ *
+ * On web, `-start` and `-end` variants position the toast at the
+ * corresponding horizontal edge with a `max-width` of 460 px.
+ * The plain `top` / `bottom` values centre the toast horizontally.
+ *
+ * On native (iOS / Android), `-start` and `-end` degrade gracefully
+ * to edge-to-edge layout identical to their base `top` / `bottom`
+ * counterpart — the toast still spans the full width.
+ */
+export type ToastPlacement =
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'bottom-end';
+
+/**
+ * Animation configuration for toast root component
+ */
+export type ToastRootAnimation = AnimationRoot<{
+  opacity?: AnimationValue<{
+    /**
+     * Opacity interpolation values [start, end]
+     * Controls how fast toast items fade out as they move beyond the visible stack limits.
+     * When toasts are pushed out of view (beyond the last few visible items), their opacity
+     * gradually decreases to create a smooth disappearing effect.
+     * - First value: fully visible opacity (1) for items within visible stack
+     * - Second value: hidden opacity (0) for items pushed out of view
+     * @default [1, 0]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  translateY?: AnimationValue<{
+    /**
+     * Translate Y interpolation values [start, end]
+     * Controls how much of a toast item is visible when it's positioned behind the last visible toast.
+     * This creates a "peek" effect where stacked toasts are slightly offset vertically,
+     * allowing users to see a portion of the toast behind the current one.
+     * - First value: no offset (0) for the last/active toast
+     * - Second value: vertical offset in pixels (10) for toasts behind the last one
+     * Note: The offset direction is automatically adjusted based on placement (top/bottom)
+     * @default [0, 10] (multiplied by placement sign)
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  scale?: AnimationValue<{
+    /**
+     * Scale interpolation values [start, end]
+     * Controls the size scaling of toast items in the stack.
+     * Toasts behind the active one are slightly scaled down to create depth and visual hierarchy.
+     * - First value: normal scale (1) for the active/last toast
+     * - Second value: scaled down value (0.97) for toasts positioned behind
+     * @default [1, 0.97]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  entering?: AnimationValue<{
+    /**
+     * Custom entering animation for top placement
+     * @default FadeInUp.springify().withInitialValues({ opacity: 1, transform: [{ translateY: -100 }] }).mass(3)
+     */
+    top?: EntryOrExitLayoutType;
+    /**
+     * Custom entering animation for bottom placement
+     * @default FadeInDown.springify().withInitialValues({ opacity: 1, transform: [{ translateY: 100 }] }).mass(3)
+     */
+    bottom?: EntryOrExitLayoutType;
+  }>;
+  exiting?: AnimationValue<{
+    /**
+     * Custom exiting animation for top placement
+     * @default Keyframe animation with translateY: -100, scale: 0.97, opacity: 0.5
+     */
+    top?: EntryOrExitLayoutType;
+    /**
+     * Custom exiting animation for bottom placement
+     * @default Keyframe animation with translateY: 100, scale: 0.97, opacity: 0.5
+     */
+    bottom?: EntryOrExitLayoutType;
+  }>;
+}>;
+
+/**
+ * Props for the Toast.Root component
+ */
+export interface ToastProps extends ToastRootProps, Omit<ToastComponentProps, 'id' | 'placement'> {
+  /**
+   * Color of the toast
+   * @default 'neutral'
+   */
+  color?: ToastColor;
+  /**
+   * Placement of the toast
+   * @default 'bottom'
+   */
+  placement?: ToastPlacement;
+  /**
+   * Additional CSS class for the toast container
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `opacity` - Animated for visibility transitions when toasts are pushed beyond visible stack limits
+   * - `transform` (translateY) - Animated for vertical position transitions when toasts are stacked, and for swipe-to-dismiss gestures
+   * - `transform` (scale) - Animated for size scaling transitions when toasts are stacked (toasts behind active one are scaled down)
+   * - `height` - Animated for height transitions when toast content changes
+   *
+   * To customize these properties, use the `animation` prop:
+   * ```tsx
+   * <Toast.Root
+   *   animation={{
+   *     opacity: {
+   *       value: [1, 0],
+   *       timingConfig: { duration: 300 }
+   *     },
+   *     translateY: {
+   *       value: [0, 10],
+   *       timingConfig: { duration: 300 }
+   *     },
+   *     scale: {
+   *       value: [1, 0.97],
+   *       timingConfig: { duration: 300 }
+   *     }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+  /**
+   * Animation configuration for toast
+   * - `false` or `"disabled"`: Disable only root animations
+   * - `"disable-all"`: Disable all animations including children
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: ToastRootAnimation;
+  /**
+   * Whether the toast can be swiped to dismiss and dragged with rubber effect
+   * @default true
+   */
+  isSwipeable?: boolean;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}
+
+/**
+ * Props for the Toast.Title component
+ */
+export interface ToastTitleProps {
+  /**
+   * Content to be rendered as title
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS class for the title
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Toast.Description component
+ */
+export interface ToastDescriptionProps {
+  /**
+   * Content to be rendered as description
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS class for the description
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Toast.Icon component
+ */
+export interface ToastIconProps extends Omit<IconProps, 'children' | 'as'> {
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set.
+   */
+  as?: IconProps['as'];
+  /**
+   * Child element to render when `asChild` is set.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Props for the Toast.Action component
+ */
+export type ToastActionProps = ButtonProps;
+
+/**
+ * Props for the Toast.Close component
+ */
+export type ToastCloseProps = Omit<IconButtonProps, 'as'> & {
+  /**
+   * Forge icon component to render (icon-only control).
+   * @default CloseIcon
+   */
+  as?: ForgeIcon;
+};
+
+/**
+ * Context values shared between Toast components
+ */
+export interface ToastContextValue {
+  /**
+   * Color of the toast (normalized — always uses the current value names)
+   */
+  color?: ToastColorInternal;
+  /**
+   * Function to hide the toast
+   */
+  hide?: (ids?: (string & {}) | string[] | 'all') => void;
+  /**
+   * ID of the toast
+   */
+  id?: string;
+}
+
+/**
+ * Ref type for the Toast.Root component
+ */
+export type ToastRootRef = React.ComponentRef<typeof View>;
+
+/**
+ * Props for useToastRootAnimation hook
+ * Picks required properties from ToastRootProps and adds id from ToastComponentProps
+ */
+export type UseToastRootAnimationOptions = Pick<
+  ToastProps,
+  | 'animation'
+  | 'index'
+  | 'total'
+  | 'heights'
+  | 'placement'
+  | 'hide'
+  | 'isSwipeable'
+  | 'maxVisibleToasts'
+> &
+  Pick<ToastComponentProps, 'id'>;
+
+/**
+ * Props for the DefaultToast component
+ * Used internally when showing toasts with string or config object (without component)
+ */
+export interface DefaultToastProps extends Omit<ToastComponentProps, 'placement'> {
+  /**
+   * Color of the toast
+   * @default 'neutral'
+   */
+  color?: ToastProps['color'];
+  /**
+   * Placement of the toast
+   * @default 'bottom'
+   */
+  placement?: ToastProps['placement'];
+  /**
+   * Animation configuration for toast
+   */
+  animation?: ToastProps['animation'];
+  /**
+   * Whether the toast can be swiped to dismiss and dragged with rubber effect
+   */
+  isSwipeable?: ToastProps['isSwipeable'];
+  /**
+   * Label text for the toast
+   */
+  label?: string;
+  /**
+   * Description text for the toast
+   */
+  description?: string;
+  /**
+   * Action button label text
+   */
+  actionLabel?: string;
+  /**
+   * Callback function called when the action button is pressed
+   * Receives show and hide functions for programmatic toast control
+   */
+  onActionPress?: (helpers: {
+    show: (options: string | ToastShowOptions) => string;
+    hide: (ids?: (string & {}) | string[] | 'all') => void;
+  }) => void;
+  /**
+   * Forge icon component to display in the toast.
+   * Rendered via `Toast.Icon` internally — inherits color-aware coloring automatically.
+   */
+  icon?: ForgeIcon;
+}

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

@@ -1,9 +1,19 @@
 import type { ForwardedRef, ReactElement } from 'react';
 import { forwardRef } from 'react';
-import { FlashList, type FlashListProps, type FlashListRef } from '@shopify/flash-list';
+import {
+  FlashList,
+  type FlashListProps,
+  type FlashListRef,
+  type ListRenderItem,
+  type ListRenderItemInfo,
+  type RenderTarget,
+  type RenderTargetOptions,
+  type ViewToken,
+} from '@shopify/flash-list';
 
 export type VirtualizedListRef = FlashListRef<unknown>;
 export type VirtualizedListProps<T = unknown> = FlashListProps<T>;
+export type { ListRenderItem, ListRenderItemInfo, RenderTarget, RenderTargetOptions, ViewToken };
 
 function VirtualizedListInner<T>(
   props: VirtualizedListProps<T>,