@multiplatform.one/components 6.6.0 → 7.0.0

package/src/Accordion/index.tsx

@@ -1,25 +1,68 @@
 import { CaretDownIcon } from "@phosphor-icons/react";
 import { isWeb } from "@multiplatform.one/platform";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  GroupPositionContext,
+  MIN_PRESS_TARGET,
+  devWarn,
+  ensureKeyboardModalityTracking,
+  getGroupPosition,
+  keyboardFocusRingProps,
+  pressTargetHitSlop,
+  stackEdgeRadius,
+  useAccentTintedSurface,
+  useGroupPosition,
+  useReadableTextOn,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+  type GroupPosition,
+} from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
-import { createContext, useCallback, useContext, useId, useMemo, useState } from "react";
+import {
+  Children,
+  Fragment,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from "react";
 // tamagui 2.0.0-rc dropped the StackProps alias; YStackProps is the same shape.
-import type { YStackProps as StackProps, TamaguiElement } from "tamagui";
-import { Accordion as TamaguiAccordion, Text, View, YStack, withStaticProperties } from "tamagui";
+import type { SizeTokens, YStackProps as StackProps, TamaguiElement } from "tamagui";
+import {
+  Accordion as TamaguiAccordion,
+  Text,
+  View,
+  YStack,
+  getTokens,
+  getVariableValue,
+  withStaticProperties,
+} from "tamagui";
 import { forwardRef } from "react";
+import { AnimateHeight } from "../AnimateHeight";
 import { componentColors } from "../componentColors";
 import { themed } from "../icons/themed";
+import { wrapBareTextChildren } from "../shared/textRidesText";
 
 // ── Types ─────────────────────────────────────────────────────
 
 export type AccordionVariant = "plain" | "card";
 export type AccordionType = "single" | "multiple";
 
-interface AccordionCommonProps extends Omit<StackProps, "onChange"> {
+interface AccordionCommonProps extends Omit<StackProps, "onChange" | "size"> {
   /** Visual variant: "plain" = edge-to-edge divider rows, "card" = each item on its own surface */
   variant?: AccordionVariant;
   /** Disable every item */
   disabled?: boolean;
+  /**
+   * Compact density. Steps space (and the paired size step the density
+   * recipe owns) down one level. Distinct from `size` — density is tightness,
+   * size is the control scale. Nested accordions always compact.
+   */
+  compact?: boolean;
+  /** Size-knob override (control height + label type). Not a density switch. */
+  size?: SizeTokens;
   children?: ReactNode;
 }
 
@@ -89,6 +132,10 @@ interface AccordionCtxValue {
   variant: AccordionVariant;
   openValues: string[];
   disabled?: boolean;
+  compact: boolean;
+  size?: SizeTokens;
+  nestLevel: number;
+  headingLevel: number;
 }
 
 interface AccordionItemCtxValue {
@@ -96,19 +143,47 @@ interface AccordionItemCtxValue {
   disabled?: boolean;
   triggerId: string;
   contentId: string;
+  /** The item's position in the stacked group (card items are "only"). */
+  position: GroupPosition;
 }
 
 const AccordionCtx = createContext<AccordionCtxValue>({
   variant: "plain",
   openValues: [],
+  compact: false,
+  nestLevel: 0,
+  headingLevel: 3,
 });
 
 const AccordionItemCtx = createContext<AccordionItemCtxValue>({
   open: false,
   triggerId: "",
   contentId: "",
+  position: "only",
 });
 
+function useAccordionKnobs() {
+  const { compact, size } = useContext(AccordionCtx);
+  return useResolvedKnobs({ component: "Accordion", compact, size });
+}
+
+function tokenPx(
+  token: string | number | undefined,
+  fallback: number,
+  scale: "size" | "fontSize",
+): number {
+  if (typeof token === "number" && Number.isFinite(token)) return token;
+  if (token == null) return fallback;
+  try {
+    const tokens = getTokens();
+    const raw = getVariableValue((tokens as any)[scale]?.[token] ?? token);
+    const n = typeof raw === "number" ? raw : Number.parseFloat(String(raw));
+    return Number.isFinite(n) && n > 0 ? n : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
 // ── Elevation ─────────────────────────────────────────────────
 // The card item frame is a plain (Collapsible) View — tamagui's `elevation`
 // token shorthand only resolves to a box-shadow on Card/Stack-family frames,
@@ -158,20 +233,53 @@ function getCardElevationProps(token: string | number | undefined): Record<strin
 
 const ThemedCaretDown = themed(CaretDownIcon as any);
 
-function Chevron({ open }: { open: boolean }) {
-  const { knobProps } = useResolvedKnobs();
+function Chevron({
+  open,
+  size,
+  color,
+  transition,
+}: {
+  open: boolean;
+  size: number;
+  color?: string;
+  transition: ReturnType<typeof useResolvedKnobs>["knobProps"]["transition"];
+}) {
   return (
     <View
       alignItems="center"
       justifyContent="center"
+      flexShrink={0}
       rotate={open ? "180deg" : "0deg"}
-      {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+      aria-hidden
+      pointerEvents="none"
+      {...(transition ? { transition } : {})}
     >
-      <ThemedCaretDown color={componentColors.text.secondary} size={16} />
+      <ThemedCaretDown color={color ?? componentColors.text.secondary} size={size} />
     </View>
   );
 }
 
+// ── Stacked-group children ────────────────────────────────────
+
+/**
+ * Resolve the root's children to the item list for position counting.
+ * Arrays and fragments (any nesting) are transparent; a custom component
+ * wrapping items is opaque — its items resolve as "only" (uniformly
+ * rounded) and a DEV warn fires, because that silent fallback is exactly
+ * the geometry defect the stacked-group rule bans.
+ */
+function flattenStackChildren(children: ReactNode): ReturnType<typeof Children.toArray> {
+  const out: ReturnType<typeof Children.toArray> = [];
+  for (const child of Children.toArray(children)) {
+    if (isValidElement(child) && child.type === Fragment) {
+      out.push(...flattenStackChildren((child.props as { children?: ReactNode }).children));
+    } else {
+      out.push(child);
+    }
+  }
+  return out;
+}
+
 // ── Root ──────────────────────────────────────────────────────
 
 const AccordionRoot = forwardRef<TamaguiElement, AccordionProps>(function Accordion(props, ref) {
@@ -182,12 +290,20 @@ const AccordionRoot = forwardRef<TamaguiElement, AccordionProps>(function Accord
     onValueChange,
     variant = "plain",
     disabled,
+    compact: compactProp,
+    size,
     children,
     ...stackProps
   } = props as AccordionAnyModeProps;
   const collapsible =
     type === "single" ? ((props as AccordionSingleModeProps).collapsible ?? true) : true;
-  const { knobProps } = useResolvedKnobs();
+  const parent = useContext(AccordionCtx);
+  // Nested accordions only step DOWN (compact density). A nested root cannot
+  // opt into a larger scale than the surface it sits in.
+  const nestLevel = parent.nestLevel + 1;
+  const compact = nestLevel > 1 ? true : Boolean(compactProp);
+  const headingLevel = Math.min(6, 2 + nestLevel);
+  const { knobProps } = useResolvedKnobs({ component: "Accordion", compact, size });
 
   // Controlled-or-uncontrolled shim: MP1 always drives the tamagui primitive
   // as controlled so items can render open state (chevron, card styling).
@@ -211,12 +327,10 @@ const AccordionRoot = forwardRef<TamaguiElement, AccordionProps>(function Accord
   );
 
   const ctx = useMemo<AccordionCtxValue>(
-    () => ({ variant, openValues, disabled }),
-    [variant, openValues, disabled],
+    () => ({ variant, openValues, disabled, compact, size, nestLevel, headingLevel }),
+    [variant, openValues, disabled, compact, size, nestLevel, headingLevel],
   );
 
-  const cardProps = variant === "card" ? { gap: knobProps.gap.gap } : {};
-
   return (
     <AccordionCtx.Provider value={ctx}>
       <TamaguiAccordion
@@ -232,10 +346,35 @@ const AccordionRoot = forwardRef<TamaguiElement, AccordionProps>(function Accord
         } as any)}
         disabled={disabled}
         width="100%"
-        {...cardProps}
+        {...(variant === "card" ? knobProps.gap : {})}
+        data-accordion-level={nestLevel}
+        data-density={knobProps.density}
         {...stackProps}
       >
-        {children}
+        {variant === "plain"
+          ? // Flush plain items form ONE stacked group: tell each item its
+            // position so triggers round only the group's outer corners
+            // (Axiom 1 R-OUTER via theme groupGeometry). Card items are
+            // discrete gapped surfaces — each is its own group of one.
+            flattenStackChildren(children).map((child, index, arr) => {
+              if (isValidElement(child) && child.type !== AccordionItem) {
+                devWarn("opaque-stack-group", {
+                  component: "Accordion",
+                  suggest:
+                    "render Accordion.Item as direct children (arrays/fragments are fine) so first/middle/last corner geometry can resolve",
+                });
+              }
+              return (
+                <GroupPositionContext.Provider
+                  // toArray assigns every child a stable key
+                  key={(child as { key?: string | null }).key ?? index}
+                  value={getGroupPosition(index, arr.length)}
+                >
+                  {child}
+                </GroupPositionContext.Provider>
+              );
+            })
+          : children}
       </TamaguiAccordion>
     </AccordionCtx.Provider>
   );
@@ -247,8 +386,11 @@ const AccordionItem = forwardRef<TamaguiElement, AccordionItemProps>(function Ac
   { value, disabled: disabledProp, children, ...props },
   ref,
 ) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useAccordionKnobs();
   const { variant, openValues, disabled: rootDisabled } = useContext(AccordionCtx);
+  // Plain items get their stacked-group position from the root; card items
+  // are discrete surfaces, each its own group of one.
+  const position = useGroupPosition() ?? "only";
   const open = openValues.includes(value);
   const disabled = rootDisabled || disabledProp;
 
@@ -261,8 +403,9 @@ const AccordionItem = forwardRef<TamaguiElement, AccordionItemProps>(function Ac
       disabled,
       triggerId: `mp1-accordion-trigger-${uid}`,
       contentId: `mp1-accordion-content-${uid}`,
+      position,
     }),
-    [open, disabled, uid],
+    [open, disabled, uid, position],
   );
 
   const { elevation: elevationToken, ...elevatedSurfaceRest } = knobProps.elevatedSurface as any;
@@ -272,10 +415,13 @@ const AccordionItem = forwardRef<TamaguiElement, AccordionItemProps>(function Ac
           // card surface honoring radius/elevation/border knobs
           ...elevatedSurfaceRest,
           ...getCardElevationProps(elevationToken),
+          overflow: "hidden" as const,
         }
       : {
-          // plain: edge-to-edge divider rows (SP-EDGE)
-          borderBottomWidth: 1,
+          // plain: edge-to-edge divider rows (SP-EDGE); the divider sits
+          // BETWEEN items only — a rule under the last item would put a
+          // straight edge against the group's rounded bottom highlight.
+          borderBottomWidth: position === "last" || position === "only" ? 0 : 1,
           borderColor: componentColors.surface.border,
         };
 
@@ -297,11 +443,52 @@ const AccordionItem = forwardRef<TamaguiElement, AccordionItemProps>(function Ac
 // ── Trigger (header row) ──────────────────────────────────────
 
 const AccordionTrigger = forwardRef<TamaguiElement, AccordionTriggerProps>(
-  function AccordionTrigger({ children, description, icon, ...props }, ref) {
-    const { knobProps } = useResolvedKnobs();
-    const { variant } = useContext(AccordionCtx);
+  function AccordionTrigger({ children, description, icon, onFocus, onBlur, ...props }, ref) {
+    const { knobProps, control, disabledState } = useAccordionKnobs();
+    const { headingLevel } = useContext(AccordionCtx);
     const item = useContext(AccordionItemCtx);
-    const paddingToken = knobProps.panelPadding.padding;
+    const [kbFocus, setKbFocus] = useState(false);
+    if (isWeb) ensureKeyboardModalityTracking();
+    // Stacked-group geometry (theme groupGeometry): the hover/press
+    // highlight rounds a corner only where it coincides with the GROUP's
+    // outer corner — first item top, last item bottom, middles square. An
+    // OPEN item's trigger abuts its own content below, so its bottom
+    // corners go square regardless of position.
+    const cornerProps = stackEdgeRadius(knobProps.borderRadius.borderRadius, {
+      start: item.position === "first" || item.position === "only",
+      end: (item.position === "last" || item.position === "only") && !item.open,
+    });
+    // LC-71 selected = fill on the trigger (the one control). Accent tint
+    // is the catalog selected language; hover/press stay on the control
+    // recipe so they inherit the same corner fragment (LC-72). Disabled
+    // rows stay transparent (list-row family) and mute via textKnobProps —
+    // a surface wash here collides with the selected fill.
+    const selectedTint = useAccentTintedSurface();
+    const onSelectedTint = useReadableTextOn(selectedTint);
+    const selectedFill = {
+      backgroundColor: selectedTint ?? componentColors.interactive.background,
+    };
+    const restFill = item.open ? selectedFill : { backgroundColor: "transparent" as const };
+    const hoverFill = item.open
+      ? selectedFill
+      : (control.hoverKnobProps ?? { backgroundColor: componentColors.interactive.background });
+    const pressFill = item.open
+      ? selectedFill
+      : (control.pressKnobProps ?? { backgroundColor: componentColors.interactive.hover });
+    const titleColor = item.disabled
+      ? disabledState.textKnobProps.color
+      : item.open && onSelectedTint
+        ? onSelectedTint
+        : componentColors.text.primary;
+    const descriptionColor = item.disabled
+      ? disabledState.textKnobProps.color
+      : componentColors.text.secondary;
+    const visualPx = tokenPx(knobProps.sizeToken, MIN_PRESS_TARGET, "size");
+    const chevronPx = tokenPx(
+      knobProps.label.fontSize,
+      Math.round(knobProps.nestedControl.px / 2),
+      "fontSize",
+    );
 
     return (
       // Heading wrapper for the ARIA accordion pattern. NOT tamagui's
@@ -309,7 +496,7 @@ const AccordionTrigger = forwardRef<TamaguiElement, AccordionTriggerProps>(
       // height cascades into the row texts (and an h1 per section is wrong
       // outline semantics anyway). View ignores `tag`, so use explicit
       // role="heading" + aria-level for AT parity with an h3.
-      <View role="heading" aria-level={3} margin={0} width="100%">
+      <View role="heading" aria-level={headingLevel} margin={0} width="100%">
         <TamaguiAccordion.Trigger
           ref={ref}
           unstyled
@@ -317,68 +504,86 @@ const AccordionTrigger = forwardRef<TamaguiElement, AccordionTriggerProps>(
           aria-controls={item.contentId}
           flexDirection="row"
           alignItems="center"
-          justifyContent="space-between"
+          justifyContent="flex-start"
           width="100%"
-          gap="$3"
-          minHeight={44}
-          paddingHorizontal={paddingToken}
-          paddingVertical="$3"
-          backgroundColor="transparent"
+          {...knobProps.gap}
+          minHeight={knobProps.sizeToken as any}
+          hitSlop={pressTargetHitSlop(visualPx)}
+          {...knobProps.panelPadding}
           borderWidth={0}
-          cursor={item.disabled ? "auto" : "pointer"}
-          opacity={item.disabled ? 0.5 : 1}
-          outlineStyle="none"
-          // Interaction rows are R-SCALE (List-row class): the hover/press
-          // surface rounds with the radius knob in both variants (LC-18).
-          borderRadius={knobProps.borderRadius.borderRadius}
+          cursor={item.disabled ? "not-allowed" : "pointer"}
+          outlineWidth={0}
+          data-group-position={item.position}
+          {...(item.open ? { "data-selected": "true" } : {})}
+          {...(kbFocus ? { "data-keyboard-focus": "true" } : {})}
+          // Interaction rows follow the radius knob (LC-18) through the
+          // stacked-group corner fragment above — never a uniform radius,
+          // which would seat a rounded highlight against a straight seam.
+          {...cornerProps}
+          {...restFill}
           {...(!item.disabled && {
-            hoverStyle: { backgroundColor: componentColors.interactive.background },
-            pressStyle: { backgroundColor: componentColors.interactive.hover },
+            hoverStyle: { ...hoverFill, ...cornerProps },
+            pressStyle: { ...pressFill, ...cornerProps },
           })}
-          focusVisibleStyle={{
-            outlineColor: "$outlineColor",
-            outlineWidth: 2,
-            outlineStyle: "solid",
-            outlineOffset: -2,
-          }}
+          focusStyle={{ outlineWidth: 0, ...restFill, ...cornerProps }}
+          focusVisibleStyle={{ outlineWidth: 0 }}
+          {...(kbFocus ? keyboardFocusRingProps : undefined)}
+          {...(isWeb
+            ? {
+                onFocus: (event: any) => {
+                  if (wasKeyboardFocus()) setKbFocus(true);
+                  onFocus?.(event);
+                },
+                onBlur: (event: any) => {
+                  setKbFocus(false);
+                  onBlur?.(event);
+                },
+              }
+            : { onFocus, onBlur })}
           {...(knobProps.transition ? { transition: knobProps.transition } : {})}
           {...props}
         >
+          <Chevron
+            open={item.open}
+            size={chevronPx}
+            color={
+              item.disabled ? disabledState.textKnobProps.color : componentColors.text.secondary
+            }
+            transition={knobProps.transition}
+          />
           {icon ? (
-            <View alignItems="center" justifyContent="center">
+            <View alignItems="center" justifyContent="center" flexShrink={0}>
               {icon}
             </View>
           ) : null}
-          <YStack flex={1} gap="$1">
-            {typeof children === "string" ? (
+          <YStack flex={1} minWidth={0} alignItems="flex-start">
+            {/* LC-82 TEXT-RIDES-TEXT: wrap ALL bare string/number children
+                (coalesced runs), not just the singleton case. */}
+            {wrapBareTextChildren(children, (label, key) => (
               <Text
-                {...knobProps.body}
+                key={key}
+                {...knobProps.label}
                 fontWeight="600"
-                // Row title type scale follows the size knob (LC-18).
-                fontSize={knobProps.sizeToken as any}
-                lineHeight={knobProps.sizeToken as any}
-                color={componentColors.text.primary}
+                textAlign="left"
+                color={titleColor}
               >
-                {children}
+                {label}
               </Text>
-            ) : (
-              children
-            )}
+            ))}
             {description != null &&
-              (typeof description === "string" ? (
+              wrapBareTextChildren(description, (label, key) => (
                 <Text
+                  key={key}
                   {...knobProps.body}
-                  fontSize="$2"
-                  lineHeight="$2"
-                  color={componentColors.text.secondary}
+                  {...knobProps.label}
+                  fontWeight={knobProps.body.fontWeight}
+                  textAlign="left"
+                  color={descriptionColor}
                 >
-                  {description}
+                  {label}
                 </Text>
-              ) : (
-                description
               ))}
           </YStack>
-          <Chevron open={item.open} />
         </TamaguiAccordion.Trigger>
       </View>
     );
@@ -387,25 +592,41 @@ const AccordionTrigger = forwardRef<TamaguiElement, AccordionTriggerProps>(
 
 // ── Content ───────────────────────────────────────────────────
 
+// The panel is an AnimateHeight collapsible instead of TamaguiAccordion.Content:
+// the tamagui primitive unmounts/remounts at intrinsic (auto) height, which no
+// driver can tween — the AnimationLab auto-height defect. AnimateHeight keeps
+// the a11y contract (region + labelledby ids) and tweens measured px heights.
+// Padding lives on the inner YStack so it is part of the measured height.
 const AccordionContent = forwardRef<TamaguiElement, AccordionContentProps>(
   function AccordionContent({ children, ...props }, ref) {
-    const { knobProps } = useResolvedKnobs();
+    const { knobProps } = useAccordionKnobs();
     const item = useContext(AccordionItemCtx);
-    const paddingToken = knobProps.panelPadding.padding;
+    // Open last/only content owns the group's trailing corners (the trigger
+    // above is square where it abuts this region).
+    const cornerProps = stackEdgeRadius(knobProps.borderRadius.borderRadius, {
+      start: false,
+      end: item.position === "last" || item.position === "only",
+    });
 
     return (
-      <TamaguiAccordion.Content
+      <AnimateHeight
         ref={ref}
-        unstyled
+        open={item.open}
+        role="region"
         id={item.contentId}
         aria-labelledby={item.triggerId}
-        paddingHorizontal={paddingToken}
-        paddingBottom={paddingToken}
-        paddingTop="$1"
-        {...props}
+        {...cornerProps}
       >
-        {children}
-      </TamaguiAccordion.Content>
+        <YStack {...knobProps.panelPadding} paddingTop={knobProps.gap.gap} {...props}>
+          {/* LC-82 TEXT-RIDES-TEXT: content is a View slot — bare/array string
+              children ride a body Text instead of crashing native. */}
+          {wrapBareTextChildren(children, (label, key) => (
+            <Text key={key} {...knobProps.body} color={componentColors.text.primary}>
+              {label}
+            </Text>
+          ))}
+        </YStack>
+      </AnimateHeight>
     );
   },
 );