@cdx-ui/components 0.0.1-beta.174 → 0.0.1-beta.176

package/src/components/Accordion/index.tsx

@@ -1,26 +1,25 @@
-import { forwardRef, useMemo, type ReactNode } from 'react';
+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,
-  AccordionPanelRoot as AccordionPanelRootPrimitive,
   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 { Divider } from '../Divider';
 import { Icon } from '../Icon';
 import {
-  accordionBodyVariants,
+  accordionContentVariants,
   accordionDescriptionVariants,
-  accordionHeadingVariants,
   accordionIndicatorVariants,
   accordionItemVariants,
   accordionLabelVariants,
@@ -29,20 +28,18 @@ import {
   accordionRootVariants,
   accordionTitleVariants,
   accordionTriggerVariants,
-  type AccordionItemVariantProps,
 } from './styles';
 
 const ITEM_SCOPE = 'ACCORDION_ITEM';
 
-type AccordionItemStyleContext = Pick<AccordionItemVariantProps, 'disableGutters'> & {
-  showSeparator?: boolean;
-};
+interface AccordionItemStyleContext {
+  fullBleed?: boolean;
+}
 
-const useAccordionItemStyleContext = (): AccordionItemStyleContext => {
+const useAccordionItemStyleContext = (): Required<AccordionItemStyleContext> => {
   const ctx = useStyleContext(ITEM_SCOPE) as AccordionItemStyleContext | undefined;
   return {
-    disableGutters: ctx?.disableGutters ?? false,
-    showSeparator: ctx?.showSeparator ?? true,
+    fullBleed: ctx?.fullBleed ?? false,
   };
 };
 
@@ -50,15 +47,17 @@ const useAccordionItemStyleContext = (): AccordionItemStyleContext => {
 // ROOT
 // =============================================================================
 
-export interface AccordionProps extends IAccordionProps {
+export type AccordionProps = IAccordionProps & {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
-}
+};
 
 const AccordionRoot = forwardRef<View, AccordionProps>(
-  ({ className, style, children, ...props }, ref) => (
+  ({ asChild, className, style, children, ...props }, ref) => (
     <AccordionRootPrimitive
       ref={ref}
+      asChild={asChild}
       className={cn(accordionRootVariants(), className)}
       style={style}
       {...props}
@@ -75,32 +74,33 @@ AccordionRoot.displayName = 'Accordion';
 // =============================================================================
 
 export interface AccordionItemProps extends IAccordionItemProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
-  /** Removes horizontal padding on trigger and body. */
-  disableGutters?: boolean;
-  /** Renders a Divider below the item when true. @default true */
+  /** 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>(
-  ({ className, style, children, disableGutters = false, showSeparator = true, ...props }, ref) => {
+  (
+    { asChild, className, style, children, fullBleed = false, showSeparator = true, ...props },
+    ref,
+  ) => {
     const parent = useParentContext();
-    const ctx = useMemo(
-      () => ({ ...parent, [ITEM_SCOPE]: { disableGutters, showSeparator } }),
-      [parent, disableGutters, showSeparator],
-    );
+    const ctx = useMemo(() => ({ ...parent, [ITEM_SCOPE]: { fullBleed } }), [parent, fullBleed]);
 
     return (
       <ParentContext.Provider value={ctx}>
         <AccordionItemRootPrimitive
           ref={ref}
-          className={cn(accordionItemVariants(), className)}
+          asChild={asChild}
+          className={cn(accordionItemVariants({ showSeparator }), className)}
           style={style}
           {...props}
         >
           {children}
-          {showSeparator ? <Divider /> : null}
         </AccordionItemRootPrimitive>
       </ParentContext.Provider>
     );
@@ -122,38 +122,50 @@ export interface AccordionTriggerProps extends IAccordionTriggerProps {
    * 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, accessibilityLabel, ...props }, ref) => {
-    const { disableGutters } = useAccordionItemStyleContext();
+  ({ className, style, children, asChild, indicator, accessibilityLabel, ...props }, ref) => {
+    const { fullBleed } = useAccordionItemStyleContext();
 
     const computedClassName = asChild
       ? className
-      : cn(accordionTriggerVariants({ disableGutters }), 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 (
-      <View className={cn(accordionHeadingVariants())}>
-        <AccordionTriggerRootPrimitive
-          ref={ref}
-          asChild={asChild}
-          accessibilityLabel={accessibilityLabel}
-          className={computedClassName}
-          style={style}
-          {...props}
-        >
-          {asChild ? (
-            children
-          ) : (
-            <>
-              {children}
-              <AccordionIndicator />
-            </>
-          )}
-        </AccordionTriggerRootPrimitive>
-      </View>
+      <AccordionTriggerRootPrimitive
+        ref={ref}
+        asChild={asChild}
+        accessibilityLabel={accessibilityLabel}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {asChild ? (
+          triggerChildren
+        ) : (
+          <>
+            {children}
+            {triggerIndicator}
+          </>
+        )}
+      </AccordionTriggerRootPrimitive>
     );
   },
 );
@@ -165,26 +177,32 @@ AccordionTrigger.displayName = 'Accordion.Trigger';
 // =============================================================================
 
 export interface AccordionIndicatorProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
+  children?: ReactNode;
 }
 
 const AccordionIndicator = forwardRef<View, AccordionIndicatorProps>(
-  ({ className, style, ...props }, ref) => {
-    const { isExpanded } = useAccordionItemContext();
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { isOpen } = useAccordionItemContext();
+    const Comp = asChild ? Slot : View;
 
     return (
-      <View
+      <Comp
         ref={ref}
         className={cn(accordionIndicatorVariants(), className)}
         style={style}
         {...props}
-        {...dataAttributes({
-          slot: 'accordion-indicator',
-          state: isExpanded ? 'open' : 'closed',
-        })}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'accordion-indicator',
+            state: isOpen ? 'open' : 'closed',
+          }),
+        )}
       >
-        <Icon as={KeyboardArrowDown} size={24} />
-      </View>
+        {children ?? <Icon as={KeyboardArrowDown} size={24} />}
+      </Comp>
     );
   },
 );
@@ -309,53 +327,34 @@ const AccordionMeta = forwardRef<Text, AccordionMetaProps>(
 AccordionMeta.displayName = 'Accordion.Meta';
 
 // =============================================================================
-// PANEL / BODY
+// CONTENT
 // =============================================================================
 
-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 {
+export interface AccordionContentProps extends IAccordionContentProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const AccordionBody = forwardRef<View, AccordionBodyProps>(
-  ({ className, style, children, ...props }, ref) => {
-    const { disableGutters } = useAccordionItemStyleContext();
+const AccordionContent = forwardRef<View, AccordionContentProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { fullBleed } = useAccordionItemStyleContext();
 
     return (
-      <View
+      <AccordionContentRootPrimitive
         ref={ref}
-        className={cn(accordionBodyVariants({ disableGutters }), className)}
+        asChild={asChild}
+        className={cn(accordionContentVariants({ fullBleed }), className)}
         style={style}
         {...props}
-        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-body' }))}
       >
         {children}
-      </View>
+      </AccordionContentRootPrimitive>
     );
   },
 );
 
-AccordionBody.displayName = 'Accordion.Body';
+AccordionContent.displayName = 'Accordion.Content';
 
 // =============================================================================
 // COMPOUND EXPORT
@@ -370,8 +369,7 @@ type AccordionCompoundComponent = typeof AccordionRoot & {
   Description: typeof AccordionDescription;
   Meta: typeof AccordionMeta;
   Indicator: typeof AccordionIndicator;
-  Panel: typeof AccordionPanel;
-  Body: typeof AccordionBody;
+  Content: typeof AccordionContent;
 };
 
 export const Accordion = Object.assign(AccordionRoot, {
@@ -383,6 +381,5 @@ export const Accordion = Object.assign(AccordionRoot, {
   Description: AccordionDescription,
   Meta: AccordionMeta,
   Indicator: AccordionIndicator,
-  Panel: AccordionPanel,
-  Body: AccordionBody,
+  Content: AccordionContent,
 }) as AccordionCompoundComponent;

package/src/components/Accordion/styles.ts

@@ -1,48 +1,50 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from '@cdx-ui/utils';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+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 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 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 z-10 flex w-full flex-row items-center gap-3 min-h-[52px] bg-transparent outline-none',
+    '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: '',
+      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: {
-      disableGutters: {
+      fullBleed: {
         true: 'px-0 py-4',
         false: 'p-4',
       },
     },
     defaultVariants: {
-      disableGutters: false,
+      fullBleed: false,
     },
   },
 );
@@ -64,19 +66,17 @@ 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,
+  Platform.select({ web: 'transition-transform duration-150 ease-out', default: '' }),
 ]);
 
-export const accordionBodyVariants = cva(['flex w-full flex-col gap-2 pb-4'], {
+export const accordionContentVariants = cva(['flex w-full flex-col gap-2 pb-4'], {
   variants: {
-    disableGutters: {
+    fullBleed: {
       true: 'px-0',
       false: 'px-4',
     },
   },
   defaultVariants: {
-    disableGutters: false,
+    fullBleed: false,
   },
 });
-
-export type AccordionItemVariantProps = VariantProps<typeof accordionTriggerVariants>;