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

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/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';