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

package/src/components/Accordion/index.tsx

@@ -0,0 +1,385 @@
+import { cloneElement, forwardRef, isValidElement, useMemo, type ReactNode } from 'react';
+import { Pressable, Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  AccordionContentRoot as AccordionContentRootPrimitive,
+  AccordionItemRoot as AccordionItemRootPrimitive,
+  AccordionRoot as AccordionRootPrimitive,
+  AccordionTriggerRoot as AccordionTriggerRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useAccordionItemContext,
+  type IAccordionContentProps,
+  type IAccordionItemProps,
+  type IAccordionProps,
+  type IAccordionTriggerProps,
+} from '@cdx-ui/primitives';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { Icon } from '../Icon';
+import {
+  accordionContentVariants,
+  accordionDescriptionVariants,
+  accordionIndicatorVariants,
+  accordionItemVariants,
+  accordionLabelVariants,
+  accordionLeadingSlotVariants,
+  accordionMetaVariants,
+  accordionRootVariants,
+  accordionTitleVariants,
+  accordionTriggerVariants,
+} from './styles';
+
+const ITEM_SCOPE = 'ACCORDION_ITEM';
+
+interface AccordionItemStyleContext {
+  fullBleed?: boolean;
+}
+
+const useAccordionItemStyleContext = (): Required<AccordionItemStyleContext> => {
+  const ctx = useStyleContext(ITEM_SCOPE) as AccordionItemStyleContext | undefined;
+  return {
+    fullBleed: ctx?.fullBleed ?? false,
+  };
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export type AccordionProps = IAccordionProps & {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+const AccordionRoot = forwardRef<View, AccordionProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <AccordionRootPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(accordionRootVariants(), className)}
+      style={style}
+      {...props}
+    >
+      {children}
+    </AccordionRootPrimitive>
+  ),
+);
+
+AccordionRoot.displayName = 'Accordion';
+
+// =============================================================================
+// ITEM
+// =============================================================================
+
+export interface AccordionItemProps extends IAccordionItemProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  /** Removes horizontal padding so trigger and content can render edge to edge. @default false */
+  fullBleed?: boolean;
+  /** Renders a separator below the item when true. @default true */
+  showSeparator?: boolean;
+}
+
+const AccordionItem = forwardRef<View, AccordionItemProps>(
+  (
+    { asChild, className, style, children, fullBleed = false, showSeparator = true, ...props },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [ITEM_SCOPE]: { fullBleed } }), [parent, fullBleed]);
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <AccordionItemRootPrimitive
+          ref={ref}
+          asChild={asChild}
+          className={cn(accordionItemVariants({ showSeparator }), className)}
+          style={style}
+          {...props}
+        >
+          {children}
+        </AccordionItemRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+AccordionItem.displayName = 'Accordion.Item';
+
+// =============================================================================
+// TRIGGER
+// =============================================================================
+
+export interface AccordionTriggerProps extends IAccordionTriggerProps {
+  /**
+   * Substitute the rendered trigger element with the single child. The child must
+   * be another Forge primitive (IconButton, Chip, Button) — anything whose
+   * underlying Pressable accepts Pressable-shaped handlers. When set, the
+   * auto-injected expand indicator is skipped and `accordionTriggerVariants` is not
+   * applied so the substituted component's own appearance wins.
+   */
+  asChild?: boolean;
+  /**
+   * Replaces the default open/closed chevron. Pass `null` to suppress the
+   * indicator. When `asChild` is set, only an explicitly provided indicator is
+   * appended to the substituted child.
+   */
+  indicator?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionTrigger = forwardRef<React.ComponentRef<typeof Pressable>, AccordionTriggerProps>(
+  ({ className, style, children, asChild, indicator, accessibilityLabel, ...props }, ref) => {
+    const { fullBleed } = useAccordionItemStyleContext();
+
+    const computedClassName = asChild
+      ? className
+      : cn(accordionTriggerVariants({ fullBleed }), className);
+    const triggerIndicator =
+      indicator === undefined ? asChild ? undefined : <AccordionIndicator /> : indicator;
+    const triggerChildren =
+      asChild &&
+      triggerIndicator !== undefined &&
+      isValidElement<{ children?: ReactNode }>(children)
+        ? cloneElement(children, undefined, children.props.children, triggerIndicator)
+        : children;
+
+    return (
+      <AccordionTriggerRootPrimitive
+        ref={ref}
+        asChild={asChild}
+        accessibilityLabel={accessibilityLabel}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {asChild ? (
+          triggerChildren
+        ) : (
+          <>
+            {children}
+            {triggerIndicator}
+          </>
+        )}
+      </AccordionTriggerRootPrimitive>
+    );
+  },
+);
+
+AccordionTrigger.displayName = 'Accordion.Trigger';
+
+// =============================================================================
+// INDICATOR
+// =============================================================================
+
+export interface AccordionIndicatorProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionIndicator = forwardRef<View, AccordionIndicatorProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { isOpen } = useAccordionItemContext();
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionIndicatorVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'accordion-indicator',
+            state: isOpen ? 'open' : 'closed',
+          }),
+        )}
+      >
+        {children ?? <Icon as={KeyboardArrowDown} size={24} />}
+      </Comp>
+    );
+  },
+);
+
+AccordionIndicator.displayName = 'Accordion.Indicator';
+
+// =============================================================================
+// SLOTS
+// =============================================================================
+
+export interface AccordionLeadingSlotProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  'aria-hidden'?: boolean;
+}
+
+const AccordionLeadingSlot = forwardRef<View, AccordionLeadingSlotProps>(
+  ({ asChild, className, style, 'aria-hidden': ariaHidden, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        accessibilityElementsHidden={ariaHidden !== false}
+        aria-hidden={ariaHidden ?? true}
+        className={cn(accordionLeadingSlotVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-leading' }))}
+      />
+    );
+  },
+);
+
+AccordionLeadingSlot.displayName = 'Accordion.LeadingSlot';
+
+export interface AccordionLabelProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const AccordionLabel = forwardRef<View, AccordionLabelProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionLabelVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-label' }))}
+      />
+    );
+  },
+);
+
+AccordionLabel.displayName = 'Accordion.Label';
+
+export interface AccordionTitleProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const AccordionTitle = forwardRef<Text, AccordionTitleProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionTitleVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-title' }))}
+      />
+    );
+  },
+);
+
+AccordionTitle.displayName = 'Accordion.Title';
+
+export interface AccordionDescriptionProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const AccordionDescription = forwardRef<Text, AccordionDescriptionProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionDescriptionVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-description' }))}
+      />
+    );
+  },
+);
+
+AccordionDescription.displayName = 'Accordion.Description';
+
+export interface AccordionMetaProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const AccordionMeta = forwardRef<Text, AccordionMetaProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionMetaVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-meta' }))}
+      />
+    );
+  },
+);
+
+AccordionMeta.displayName = 'Accordion.Meta';
+
+// =============================================================================
+// CONTENT
+// =============================================================================
+
+export interface AccordionContentProps extends IAccordionContentProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionContent = forwardRef<View, AccordionContentProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { fullBleed } = useAccordionItemStyleContext();
+
+    return (
+      <AccordionContentRootPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={cn(accordionContentVariants({ fullBleed }), className)}
+        style={style}
+        {...props}
+      >
+        {children}
+      </AccordionContentRootPrimitive>
+    );
+  },
+);
+
+AccordionContent.displayName = 'Accordion.Content';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type AccordionCompoundComponent = typeof AccordionRoot & {
+  Item: typeof AccordionItem;
+  Trigger: typeof AccordionTrigger;
+  LeadingSlot: typeof AccordionLeadingSlot;
+  Label: typeof AccordionLabel;
+  Title: typeof AccordionTitle;
+  Description: typeof AccordionDescription;
+  Meta: typeof AccordionMeta;
+  Indicator: typeof AccordionIndicator;
+  Content: typeof AccordionContent;
+};
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  LeadingSlot: AccordionLeadingSlot,
+  Label: AccordionLabel,
+  Title: AccordionTitle,
+  Description: AccordionDescription,
+  Meta: AccordionMeta,
+  Indicator: AccordionIndicator,
+  Content: AccordionContent,
+}) as AccordionCompoundComponent;

package/src/components/Accordion/styles.ts

@@ -0,0 +1,82 @@
+import { Platform } from 'react-native';
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR } from '../../styles/constants';
+
+export const accordionRootVariants = cva(['flex w-full flex-col']);
+
+export const accordionItemVariants = cva(
+  ['flex w-full flex-col', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]'],
+  {
+    variants: {
+      showSeparator: {
+        true: 'border-b border-solid border-stroke-secondary',
+        false: 'border-b-0',
+      },
+    },
+    defaultVariants: {
+      showSeparator: true,
+    },
+  },
+);
+
+export const accordionTriggerVariants = cva(
+  [
+    'relative flex w-full flex-row items-center gap-3 min-h-[52px] bg-[var(--color-transparent)] outline-none',
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+    DISABLED_CURSOR,
+    Platform.select({
+      web: [
+        'before:pointer-events-none before:absolute before:inset-0 before:z-0 before:bg-content-primary before:opacity-0 before:content-[""]',
+        'before:transition-opacity before:duration-150 before:ease-out',
+        'data-[hover=true]:data-[state="closed"]:before:opacity-[var(--opacity-hover)]',
+        'data-[active=true]:data-[hover=true]:data-[state="closed"]:before:opacity-[var(--opacity-hover-overlay)]',
+        'data-[focus-visible=true]:before:opacity-[var(--opacity-focus)]',
+        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-stroke-focus data-[focus-visible=true]:ring-offset-2',
+      ].join(' '),
+      default: 'data-[active=true]:bg-surface-primary-hover',
+    }),
+  ],
+  {
+    variants: {
+      fullBleed: {
+        true: 'px-0 py-4',
+        false: 'p-4',
+      },
+    },
+    defaultVariants: {
+      fullBleed: false,
+    },
+  },
+);
+
+export const accordionLeadingSlotVariants = cva([
+  'relative z-10 flex shrink-0 items-center justify-center',
+]);
+
+export const accordionLabelVariants = cva([
+  'relative z-10 flex min-w-0 flex-1 flex-col justify-center gap-0.5',
+]);
+
+export const accordionTitleVariants = cva(['body-md font-medium text-content-primary']);
+
+export const accordionDescriptionVariants = cva(['body-sm text-content-secondary']);
+
+export const accordionMetaVariants = cva(['body-xs text-content-secondary']);
+
+export const accordionIndicatorVariants = cva([
+  'relative z-10 flex shrink-0 items-center justify-center text-content-primary',
+  'data-[state=open]:rotate-180',
+  Platform.select({ web: 'transition-transform duration-150 ease-out', default: '' }),
+]);
+
+export const accordionContentVariants = cva(['flex w-full flex-col gap-2 pb-4'], {
+  variants: {
+    fullBleed: {
+      true: 'px-0',
+      false: 'px-4',
+    },
+  },
+  defaultVariants: {
+    fullBleed: false,
+  },
+});

package/src/components/Alert/styles.ts

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 // ── Severity type ────────────────────────────────────────────────────────────
 

package/src/components/AlertDialog/index.tsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { View } from 'react-native';
 import { Slot, useDialog } from '@cdx-ui/primitives';
 import { composeEventHandlers } from '@cdx-ui/utils';
 import { Button, type ButtonProps } from '../Button';
-import { Dialog, type DialogRootProps } from '../Dialog';
+import { Dialog, type DialogRootProps, type DialogPopupProps } from '../Dialog';
 
 // =============================================================================
 // ALERT DIALOG ROOT (Dialog with non-dismissible defaults + alertdialog role)
@@ -35,6 +35,19 @@ const AlertDialogRoot = forwardRef<View, AlertDialogRootProps>(
 );
 AlertDialogRoot.displayName = 'AlertDialog';
 
+// =============================================================================
+// ALERT DIALOG POPUP (swipe disabled by default)
+// =============================================================================
+
+export interface AlertDialogPopupProps extends DialogPopupProps {}
+
+const AlertDialogPopup = forwardRef<View, AlertDialogPopupProps>(
+  ({ isSwipeable = false, ...props }, ref) => (
+    <Dialog.Popup ref={ref} isSwipeable={isSwipeable} {...props} />
+  ),
+);
+AlertDialogPopup.displayName = 'AlertDialog.Popup';
+
 // =============================================================================
 // ALERT DIALOG ACTION
 // =============================================================================
@@ -98,7 +111,7 @@ AlertDialogCancel.displayName = 'AlertDialog.Cancel';
 
 type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
   Trigger: typeof Dialog.Trigger;
-  Popup: typeof Dialog.Popup;
+  Popup: typeof AlertDialogPopup;
   Header: typeof Dialog.Header;
   Title: typeof Dialog.Title;
   Description: typeof Dialog.Description;
@@ -112,7 +125,7 @@ type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
 
 export const AlertDialog = Object.assign(AlertDialogRoot, {
   Trigger: Dialog.Trigger,
-  Popup: Dialog.Popup,
+  Popup: AlertDialogPopup,
   Header: Dialog.Header,
   Title: Dialog.Title,
   Description: Dialog.Description,

package/src/components/Avatar/styles.ts

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 // ── Root ─────────────────────────────────────────────────
 

package/src/components/Badge/styles.ts

@@ -1,5 +1,5 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
 
 export const badgeRootVariants = cva(['relative self-start'], {
   variants: {

package/src/components/BottomSheet/index.tsx

@@ -9,6 +9,7 @@ import {
   BottomSheetView,
   BottomSheetBackdrop,
   BottomSheetFooter as GorhomBottomSheetFooter,
+  useBottomSheetScrollableCreator,
   type BottomSheetBackdropProps,
   type BottomSheetFooterProps as GorhomBottomSheetFooterProps,
   type BottomSheetModalProps as GorhomBottomSheetModalProps,
@@ -369,5 +370,34 @@ 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 };
+}
+
+/**
+ * Returns a scroll component for `VirtualizedList`'s `renderScrollComponent` when
+ * the list lives inside `BottomSheet.Modal`.
+ *
+ * A plain `VirtualizedList` uses React Native's `ScrollView`. On Android the sheet's
+ * pan gesture captures vertical movement, so the list does not scroll. Pass this
+ * result so the list shares the sheet-aware scrollable used by `BottomSheet.ScrollView`.
+ *
+ * @example
+ * ```tsx
+ * const renderScrollComponent = useBottomSheetScrollable();
+ *
+ * <VirtualizedList
+ *   data={accounts}
+ *   renderItem={renderItem}
+ *   renderScrollComponent={renderScrollComponent}
+ * />
+ * ```
+ */
+export function useBottomSheetScrollable() {
+  return useBottomSheetScrollableCreator({ enableFooterMarginAdjustment: true });
 }

package/src/components/BottomSheet/styles.ts

@@ -1,10 +1,10 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
-/** Shared top-radius + clip — used by background CVA and gorhom modal `style` (via useResolveClassNames). */
-export const bottomSheetModalContainerClassName = 'overflow-hidden rounded-t-4xl';
+/** Keep gorhom's animated container unclipped so web transforms can settle correctly. */
+export const bottomSheetModalContainerClassName = 'rounded-t-4xl';
 
-/** Gorhom backgroundComponent — surface fill + shared top-radius clip. */
-export const bottomSheetBackgroundClassName = `${bottomSheetModalContainerClassName} bg-surface-primary`;
+/** Clip the static background for rounded corners without clipping the animated sheet. */
+export const bottomSheetBackgroundClassName = `${bottomSheetModalContainerClassName} overflow-hidden bg-surface-primary`;
 
 export const bottomSheetHeaderVariants = cva(
   [

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>
     );
   },