@cdx-ui/components 0.0.1-beta.171 → 0.0.1-beta.173

package/src/components/Accordion/index.tsx

@@ -0,0 +1,388 @@
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { Pressable, Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  AccordionItemRoot as AccordionItemRootPrimitive,
+  AccordionPanelRoot as AccordionPanelRootPrimitive,
+  AccordionRoot as AccordionRootPrimitive,
+  AccordionTriggerRoot as AccordionTriggerRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useAccordionItemContext,
+  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 { Divider } from '../Divider';
+import { Icon } from '../Icon';
+import {
+  accordionBodyVariants,
+  accordionDescriptionVariants,
+  accordionHeadingVariants,
+  accordionIndicatorVariants,
+  accordionItemVariants,
+  accordionLabelVariants,
+  accordionLeadingSlotVariants,
+  accordionMetaVariants,
+  accordionRootVariants,
+  accordionTitleVariants,
+  accordionTriggerVariants,
+  type AccordionItemVariantProps,
+} from './styles';
+
+const ITEM_SCOPE = 'ACCORDION_ITEM';
+
+type AccordionItemStyleContext = Pick<AccordionItemVariantProps, 'disableGutters'> & {
+  showSeparator?: boolean;
+};
+
+const useAccordionItemStyleContext = (): AccordionItemStyleContext => {
+  const ctx = useStyleContext(ITEM_SCOPE) as AccordionItemStyleContext | undefined;
+  return {
+    disableGutters: ctx?.disableGutters ?? false,
+    showSeparator: ctx?.showSeparator ?? true,
+  };
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export interface AccordionProps extends IAccordionProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionRoot = forwardRef<View, AccordionProps>(
+  ({ className, style, children, ...props }, ref) => (
+    <AccordionRootPrimitive
+      ref={ref}
+      className={cn(accordionRootVariants(), className)}
+      style={style}
+      {...props}
+    >
+      {children}
+    </AccordionRootPrimitive>
+  ),
+);
+
+AccordionRoot.displayName = 'Accordion';
+
+// =============================================================================
+// ITEM
+// =============================================================================
+
+export interface AccordionItemProps extends IAccordionItemProps {
+  className?: string;
+  children?: ReactNode;
+  /** Removes horizontal padding on trigger and body. */
+  disableGutters?: boolean;
+  /** Renders a Divider below the item when true. @default true */
+  showSeparator?: boolean;
+}
+
+const AccordionItem = forwardRef<View, AccordionItemProps>(
+  ({ className, style, children, disableGutters = false, showSeparator = true, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [ITEM_SCOPE]: { disableGutters, showSeparator } }),
+      [parent, disableGutters, showSeparator],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <AccordionItemRootPrimitive
+          ref={ref}
+          className={cn(accordionItemVariants(), className)}
+          style={style}
+          {...props}
+        >
+          {children}
+          {showSeparator ? <Divider /> : null}
+        </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;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionTrigger = forwardRef<React.ComponentRef<typeof Pressable>, AccordionTriggerProps>(
+  ({ className, style, children, asChild, accessibilityLabel, ...props }, ref) => {
+    const { disableGutters } = useAccordionItemStyleContext();
+
+    const computedClassName = asChild
+      ? className
+      : cn(accordionTriggerVariants({ disableGutters }), className);
+
+    return (
+      <View className={cn(accordionHeadingVariants())}>
+        <AccordionTriggerRootPrimitive
+          ref={ref}
+          asChild={asChild}
+          accessibilityLabel={accessibilityLabel}
+          className={computedClassName}
+          style={style}
+          {...props}
+        >
+          {asChild ? (
+            children
+          ) : (
+            <>
+              {children}
+              <AccordionIndicator />
+            </>
+          )}
+        </AccordionTriggerRootPrimitive>
+      </View>
+    );
+  },
+);
+
+AccordionTrigger.displayName = 'Accordion.Trigger';
+
+// =============================================================================
+// INDICATOR
+// =============================================================================
+
+export interface AccordionIndicatorProps extends ViewProps {
+  className?: string;
+}
+
+const AccordionIndicator = forwardRef<View, AccordionIndicatorProps>(
+  ({ className, style, ...props }, ref) => {
+    const { isExpanded } = useAccordionItemContext();
+
+    return (
+      <View
+        ref={ref}
+        className={cn(accordionIndicatorVariants(), className)}
+        style={style}
+        {...props}
+        {...dataAttributes({
+          slot: 'accordion-indicator',
+          state: isExpanded ? 'open' : 'closed',
+        })}
+      >
+        <Icon as={KeyboardArrowDown} size={24} />
+      </View>
+    );
+  },
+);
+
+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';
+
+// =============================================================================
+// PANEL / BODY
+// =============================================================================
+
+export interface AccordionPanelProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionPanel = forwardRef<View, AccordionPanelProps>(
+  ({ className, style, children, ...props }, ref) => (
+    <AccordionPanelRootPrimitive
+      ref={ref}
+      className={cn('w-full', className)}
+      style={style}
+      {...props}
+    >
+      {children}
+    </AccordionPanelRootPrimitive>
+  ),
+);
+
+AccordionPanel.displayName = 'Accordion.Panel';
+
+export interface AccordionBodyProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionBody = forwardRef<View, AccordionBodyProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { disableGutters } = useAccordionItemStyleContext();
+
+    return (
+      <View
+        ref={ref}
+        className={cn(accordionBodyVariants({ disableGutters }), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-body' }))}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+AccordionBody.displayName = 'Accordion.Body';
+
+// =============================================================================
+// 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;
+  Panel: typeof AccordionPanel;
+  Body: typeof AccordionBody;
+};
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  LeadingSlot: AccordionLeadingSlot,
+  Label: AccordionLabel,
+  Title: AccordionTitle,
+  Description: AccordionDescription,
+  Meta: AccordionMeta,
+  Indicator: AccordionIndicator,
+  Panel: AccordionPanel,
+  Body: AccordionBody,
+}) as AccordionCompoundComponent;

package/src/components/Accordion/styles.ts

@@ -0,0 +1,82 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const accordionRootVariants = cva(['flex w-full flex-col']);
+
+export const accordionItemVariants = cva([
+  'flex w-full flex-col overflow-clip',
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+]);
+
+export const accordionHeadingVariants = cva([
+  'relative w-full bg-[var(--color-transparent,rgba(255,255,255,0))]',
+  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',
+      // Overlay tracks trigger interaction data-* (Figma Accordion.Heading > [background-color]).
+      'has-[[data-hover=true]]:before:opacity-[var(--opacity-hover)]',
+      'has-[[data-active=true][data-hover=true]]:before:opacity-[var(--opacity-hover-overlay)]',
+      'has-[[data-focus-visible=true]]:before:opacity-[var(--opacity-focus)]',
+    ].join(' '),
+    default: '',
+  }),
+]);
+
+export const accordionTriggerVariants = cva(
+  [
+    'relative z-10 flex w-full flex-row items-center gap-3 min-h-[52px] bg-transparent outline-none',
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+    DISABLED_CURSOR,
+    Platform.select({
+      web: '',
+      default: 'data-[active=true]:bg-surface-primary-hover',
+    }),
+  ],
+  {
+    variants: {
+      disableGutters: {
+        true: 'px-0 py-4',
+        false: 'p-4',
+      },
+    },
+    defaultVariants: {
+      disableGutters: 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',
+  TRANSITION_COLORS,
+]);
+
+export const accordionBodyVariants = cva(['flex w-full flex-col gap-2 pb-4'], {
+  variants: {
+    disableGutters: {
+      true: 'px-0',
+      false: 'px-4',
+    },
+  },
+  defaultVariants: {
+    disableGutters: false,
+  },
+});
+
+export type AccordionItemVariantProps = VariantProps<typeof accordionTriggerVariants>;

package/src/components/Menu/index.tsx

@@ -184,6 +184,10 @@ const MenuContent = forwardRef<View, MenuContentProps>(
           };
 
     const computedClassName = cn(menuRootVariants({ scrollable: shouldScroll }), className);
+    // Embedded surfaces inherit the parent collection's slot identity.
+    const contentDataAttributes = asSurface
+      ? mergeDataAttributes(dataAttributes({ slot: 'menu-content' }), props)
+      : mergeDataAttributes(props, dataAttributes({ slot: 'menu-content' }));
 
     const content = shouldScroll ? (
       <ScrollView
@@ -207,7 +211,7 @@ const MenuContent = forwardRef<View, MenuContentProps>(
           className={computedClassName}
           style={[style, constrainedStyle]}
           {...props}
-          {...mergeDataAttributes(props, dataAttributes({ slot: 'menu-content' }))}
+          {...contentDataAttributes}
         >
           {content}
         </MenuRootPrimitive>

package/src/components/Select/index.tsx

@@ -89,18 +89,38 @@ export interface SelectTriggerProps extends ISelectTriggerProps {
    * trigger instead of relying on `data-slot`.
    */
   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 SelectTrigger = forwardRef<View, SelectTriggerProps>(
-  ({ asChild, className, children, style, ...props }, ref) => {
+  ({ asChild, indicator, className, children, style, ...props }, ref) => {
     const { open } = useSelectContext();
     const { variant, size } = useSelectStyleContext();
 
     const computedClassName = asChild
       ? className
       : cn(selectTriggerVariants({ variant, size }), className);
+    const triggerIndicator =
+      indicator === undefined ? (
+        asChild ? undefined : (
+          <SelectIcon as={open ? KeyboardArrowUp : KeyboardArrowDown} />
+        )
+      ) : (
+        indicator
+      );
+    const triggerChildren =
+      asChild &&
+      triggerIndicator !== undefined &&
+      isValidElement<{ children?: ReactNode }>(children)
+        ? cloneElement(children, undefined, children.props.children, triggerIndicator)
+        : children;
 
     return (
       <SelectTriggerPrimitive
@@ -112,11 +132,11 @@ const SelectTrigger = forwardRef<View, SelectTriggerProps>(
         {...mergeDataAttributes(props, dataAttributes({ slot: 'select-trigger' }))}
       >
         {asChild ? (
-          children
+          triggerChildren
         ) : (
           <>
             {children}
-            <SelectIcon as={open ? KeyboardArrowUp : KeyboardArrowDown} />
+            {triggerIndicator}
           </>
         )}
       </SelectTriggerPrimitive>
@@ -243,6 +263,7 @@ const SelectContent = forwardRef<View, SelectContentProps>(
     return (
       <SelectContentPrimitive
         ref={ref}
+        asChild
         style={style}
         {...props}
         {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
@@ -263,29 +284,39 @@ SelectContent.displayName = 'Select.Content';
 
 export interface SelectItemProps extends ISelectItemProps {
   asChild?: boolean;
+  /**
+   * Replaces the default selected-item checkmark. The replacement is rendered
+   * only while the item is selected. Pass `null` to suppress the indicator.
+   */
+  indicator?: ReactNode;
   className?: string;
   children?: ReactNode;
 }
 
 const SelectItem = forwardRef<View, SelectItemProps>(
-  ({ asChild, className, children, style, value: itemValue, ...props }, ref) => {
+  ({ asChild, indicator, className, children, style, value: itemValue, ...props }, ref) => {
     const { size } = useSelectStyleContext();
     const { value: selectedValue } = useSelectContext();
     const menuSize = toMenuItemSize(size);
     const checked = selectedValue === itemValue;
 
     const computedClassName = cn(menuItemVariants({ size: menuSize }), className);
-    const selectedIcon = <Menu.ItemIndicator isChecked={checked} />;
+    const selectedIndicator =
+      indicator === undefined ? (
+        <Menu.ItemIndicator isChecked={checked} />
+      ) : checked ? (
+        indicator
+      ) : null;
     const itemChildren = asChild ? (
-      selectedIcon && isValidElement<{ children?: ReactNode }>(children) ? (
-        cloneElement(children, undefined, children.props.children, selectedIcon)
+      isValidElement<{ children?: ReactNode }>(children) ? (
+        cloneElement(children, undefined, children.props.children, selectedIndicator)
       ) : (
         children
       )
     ) : (
       <>
         {children}
-        {selectedIcon}
+        {selectedIndicator}
       </>
     );
 

package/src/components/index.ts

@@ -31,6 +31,7 @@ export * from './Input';
 export * from './OtpInput';
 export * from './Link';
 export * from './ListItem';
+export * from './Accordion';
 export * from './Menu';
 export * from './ProgressBar';
 export * from './ProgressCircle';

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

@@ -13,6 +13,15 @@ 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
  *
@@ -41,17 +50,17 @@ const ForgeDesignProvider: React.FC<ForgeDesignProviderProps> = ({ children, con
     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);
-        setOverlayInsets(insets);
-      }}
-    >
+    <SafeAreaListener onChange={handleSafeAreaChange}>
       <PortalProvider>
         <OverlayStackProvider>
           <OverlayInsetsProvider value={overlayInsets}>