@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/cjs/Accordion/index.cjs

@@ -31,18 +31,47 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
 var import_react3 = require("react");
+var import_AnimateHeight = require("../AnimateHeight/index.cjs");
 var import_componentColors = require("../componentColors.cjs");
 var import_themed = require("../icons/themed.cjs");
+var import_textRidesText = require("../shared/textRidesText.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const AccordionCtx = (0, import_react2.createContext)({
   variant: "plain",
-  openValues: []
+  openValues: [],
+  compact: false,
+  nestLevel: 0,
+  headingLevel: 3
 });
 const AccordionItemCtx = (0, import_react2.createContext)({
   open: false,
   triggerId: "",
-  contentId: ""
+  contentId: "",
+  position: "only"
 });
+function useAccordionKnobs() {
+  const {
+    compact,
+    size
+  } = (0, import_react2.useContext)(AccordionCtx);
+  return (0, import_theme.useResolvedKnobs)({
+    component: "Accordion",
+    compact,
+    size
+  });
+}
+function tokenPx(token, fallback, scale) {
+  if (typeof token === "number" && Number.isFinite(token)) return token;
+  if (token == null) return fallback;
+  try {
+    const tokens = (0, import_tamagui.getTokens)();
+    const raw = (0, import_tamagui.getVariableValue)(tokens[scale]?.[token] ?? token);
+    const n = typeof raw === "number" ? raw : Number.parseFloat(String(raw));
+    return Number.isFinite(n) && n > 0 ? n : fallback;
+  } catch {
+    return fallback;
+  }
+}
 const cardElevationShadow = {
   $1: {
     shadowColor: "#000",
@@ -96,24 +125,38 @@ function getCardElevationProps(token) {
 }
 const ThemedCaretDown = (0, import_themed.themed)(import_react.CaretDownIcon);
 function Chevron({
-  open
+  open,
+  size,
+  color,
+  transition
 }) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     alignItems: "center",
     justifyContent: "center",
+    flexShrink: 0,
     rotate: open ? "180deg" : "0deg",
-    ...(knobProps.transition ? {
-      transition: knobProps.transition
+    "aria-hidden": true,
+    pointerEvents: "none",
+    ...(transition ? {
+      transition
     } : {}),
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ThemedCaretDown, {
-      color: import_componentColors.componentColors.text.secondary,
-      size: 16
+      color: color ?? import_componentColors.componentColors.text.secondary,
+      size
     })
   });
 }
+function flattenStackChildren(children) {
+  const out = [];
+  for (const child of import_react2.Children.toArray(children)) {
+    if ((0, import_react2.isValidElement)(child) && child.type === import_react2.Fragment) {
+      out.push(...flattenStackChildren(child.props.children));
+    } else {
+      out.push(child);
+    }
+  }
+  return out;
+}
 const AccordionRoot = (0, import_react3.forwardRef)(function Accordion(props, ref) {
   const {
     type = "single",
@@ -122,13 +165,23 @@ const AccordionRoot = (0, import_react3.forwardRef)(function Accordion(props, re
     onValueChange,
     variant = "plain",
     disabled,
+    compact: compactProp,
+    size,
     children,
     ...stackProps
   } = props;
   const collapsible = type === "single" ? props.collapsible ?? true : true;
+  const parent = (0, import_react2.useContext)(AccordionCtx);
+  const nestLevel = parent.nestLevel + 1;
+  const compact = nestLevel > 1 ? true : Boolean(compactProp);
+  const headingLevel = Math.min(6, 2 + nestLevel);
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Accordion",
+    compact,
+    size
+  });
   const isControlled = valueProp !== void 0;
   const [internalValue, setInternalValue] = (0, import_react2.useState)(defaultValue ?? (type === "multiple" ? [] : ""));
   const current = isControlled ? valueProp : internalValue;
@@ -140,11 +193,12 @@ const AccordionRoot = (0, import_react3.forwardRef)(function Accordion(props, re
   const ctx = (0, import_react2.useMemo)(() => ({
     variant,
     openValues,
-    disabled
-  }), [variant, openValues, disabled]);
-  const cardProps = variant === "card" ? {
-    gap: knobProps.gap.gap
-  } : {};
+    disabled,
+    compact,
+    size,
+    nestLevel,
+    headingLevel
+  }), [variant, openValues, disabled, compact, size, nestLevel, headingLevel]);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionCtx.Provider, {
     value: ctx,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Accordion, {
@@ -159,9 +213,27 @@ const AccordionRoot = (0, import_react3.forwardRef)(function Accordion(props, re
       },
       disabled,
       width: "100%",
-      ...cardProps,
+      ...(variant === "card" ? knobProps.gap : {}),
+      "data-accordion-level": nestLevel,
+      "data-density": knobProps.density,
       ...stackProps,
-      children
+      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 ((0, import_react2.isValidElement)(child) && child.type !== AccordionItem) {
+          (0, import_theme.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 /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.GroupPositionContext.Provider, {
+          value: (0, import_theme.getGroupPosition)(index, arr.length),
+          children: child
+        }, child.key ?? index);
+      }) : children
     })
   });
 });
@@ -173,12 +245,13 @@ const AccordionItem = (0, import_react3.forwardRef)(function AccordionItem2({
 }, ref) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = useAccordionKnobs();
   const {
     variant,
     openValues,
     disabled: rootDisabled
   } = (0, import_react2.useContext)(AccordionCtx);
+  const position = (0, import_theme.useGroupPosition)() ?? "only";
   const open = openValues.includes(value);
   const disabled = rootDisabled || disabledProp;
   const uid = (0, import_react2.useId)();
@@ -186,8 +259,9 @@ const AccordionItem = (0, import_react3.forwardRef)(function AccordionItem2({
     open,
     disabled,
     triggerId: `mp1-accordion-trigger-${uid}`,
-    contentId: `mp1-accordion-content-${uid}`
-  }), [open, disabled, uid]);
+    contentId: `mp1-accordion-content-${uid}`,
+    position
+  }), [open, disabled, uid, position]);
   const {
     elevation: elevationToken,
     ...elevatedSurfaceRest
@@ -195,10 +269,13 @@ const AccordionItem = (0, import_react3.forwardRef)(function AccordionItem2({
   const variantProps = variant === "card" ? {
     // card surface honoring radius/elevation/border knobs
     ...elevatedSurfaceRest,
-    ...getCardElevationProps(elevationToken)
+    ...getCardElevationProps(elevationToken),
+    overflow: "hidden"
   } : {
-    // 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: import_componentColors.componentColors.surface.border
   };
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionItemCtx.Provider, {
@@ -217,16 +294,43 @@ const AccordionTrigger = (0, import_react3.forwardRef)(function AccordionTrigger
   children,
   description,
   icon,
+  onFocus,
+  onBlur,
   ...props
 }, ref) {
   const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+    knobProps,
+    control,
+    disabledState
+  } = useAccordionKnobs();
   const {
-    variant
+    headingLevel
   } = (0, import_react2.useContext)(AccordionCtx);
   const item = (0, import_react2.useContext)(AccordionItemCtx);
-  const paddingToken = knobProps.panelPadding.padding;
+  const [kbFocus, setKbFocus] = (0, import_react2.useState)(false);
+  if (import_platform.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const cornerProps = (0, import_theme.stackEdgeRadius)(knobProps.borderRadius.borderRadius, {
+    start: item.position === "first" || item.position === "only",
+    end: (item.position === "last" || item.position === "only") && !item.open
+  });
+  const selectedTint = (0, import_theme.useAccentTintedSurface)();
+  const onSelectedTint = (0, import_theme.useReadableTextOn)(selectedTint);
+  const selectedFill = {
+    backgroundColor: selectedTint ?? import_componentColors.componentColors.interactive.background
+  };
+  const restFill = item.open ? selectedFill : {
+    backgroundColor: "transparent"
+  };
+  const hoverFill = item.open ? selectedFill : control.hoverKnobProps ?? {
+    backgroundColor: import_componentColors.componentColors.interactive.background
+  };
+  const pressFill = item.open ? selectedFill : control.pressKnobProps ?? {
+    backgroundColor: import_componentColors.componentColors.interactive.hover
+  };
+  const titleColor = item.disabled ? disabledState.textKnobProps.color : item.open && onSelectedTint ? onSelectedTint : import_componentColors.componentColors.text.primary;
+  const descriptionColor = item.disabled ? disabledState.textKnobProps.color : import_componentColors.componentColors.text.secondary;
+  const visualPx = tokenPx(knobProps.sizeToken, import_theme.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
     // Accordion.Header — that renders a styled H1 whose 64px font/line
@@ -236,7 +340,7 @@ const AccordionTrigger = (0, import_react3.forwardRef)(function AccordionTrigger
     /* @__PURE__ */
     (0, import_jsx_runtime.jsx)(import_tamagui.View, {
       role: "heading",
-      "aria-level": 3,
+      "aria-level": headingLevel,
       margin: 0,
       width: "100%",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Trigger, {
@@ -246,59 +350,88 @@ const AccordionTrigger = (0, import_react3.forwardRef)(function AccordionTrigger
         "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,
+        hitSlop: (0, import_theme.pressTargetHitSlop)(visualPx),
+        ...knobProps.panelPadding,
         borderWidth: 0,
-        cursor: item.disabled ? "auto" : "pointer",
-        opacity: item.disabled ? 0.5 : 1,
-        outlineStyle: "none",
-        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"
+        } : {}),
+        ...cornerProps,
+        ...restFill,
         ...(!item.disabled && {
           hoverStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.background
+            ...hoverFill,
+            ...cornerProps
           },
           pressStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.hover
+            ...pressFill,
+            ...cornerProps
           }
         }),
+        focusStyle: {
+          outlineWidth: 0,
+          ...restFill,
+          ...cornerProps
+        },
         focusVisibleStyle: {
-          outlineColor: "$outlineColor",
-          outlineWidth: 2,
-          outlineStyle: "solid",
-          outlineOffset: -2
+          outlineWidth: 0
         },
+        ...(kbFocus ? import_theme.keyboardFocusRingProps : void 0),
+        ...(import_platform.isWeb ? {
+          onFocus: event => {
+            if ((0, import_theme.wasKeyboardFocus)()) setKbFocus(true);
+            onFocus?.(event);
+          },
+          onBlur: event => {
+            setKbFocus(false);
+            onBlur?.(event);
+          }
+        } : {
+          onFocus,
+          onBlur
+        }),
         ...(knobProps.transition ? {
           transition: knobProps.transition
         } : {}),
         ...props,
-        children: [icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Chevron, {
+          open: item.open,
+          size: chevronPx,
+          color: item.disabled ? disabledState.textKnobProps.color : import_componentColors.componentColors.text.secondary,
+          transition: knobProps.transition
+        }), icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           alignItems: "center",
           justifyContent: "center",
+          flexShrink: 0,
           children: icon
         }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
           flex: 1,
-          gap: "$1",
-          children: [typeof children === "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            ...knobProps.body,
+          minWidth: 0,
+          alignItems: "flex-start",
+          children: [(0, import_textRidesText.wrapBareTextChildren)(children, (label, key) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
             fontWeight: "600",
-            fontSize: knobProps.sizeToken,
-            lineHeight: knobProps.sizeToken,
-            color: import_componentColors.componentColors.text.primary,
-            children
-          }) : children, description != null && (typeof description === "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            textAlign: "left",
+            color: titleColor,
+            children: label
+          }, key)), description != null && (0, import_textRidesText.wrapBareTextChildren)(description, (label, key) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
             ...knobProps.body,
-            fontSize: "$2",
-            lineHeight: "$2",
-            color: import_componentColors.componentColors.text.secondary,
-            children: description
-          }) : description)]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Chevron, {
-          open: item.open
+            ...knobProps.label,
+            fontWeight: knobProps.body.fontWeight,
+            textAlign: "left",
+            color: descriptionColor,
+            children: label
+          }, key))]
         })]
       })
     })
@@ -310,19 +443,29 @@ const AccordionContent = (0, import_react3.forwardRef)(function AccordionContent
 }, ref) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = useAccordionKnobs();
   const item = (0, import_react2.useContext)(AccordionItemCtx);
-  const paddingToken = knobProps.panelPadding.padding;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Content, {
+  const cornerProps = (0, import_theme.stackEdgeRadius)(knobProps.borderRadius.borderRadius, {
+    start: false,
+    end: item.position === "last" || item.position === "only"
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AnimateHeight.AnimateHeight, {
     ref,
-    unstyled: true,
+    open: item.open,
+    role: "region",
     id: item.contentId,
     "aria-labelledby": item.triggerId,
-    paddingHorizontal: paddingToken,
-    paddingBottom: paddingToken,
-    paddingTop: "$1",
-    ...props,
-    children
+    ...cornerProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      paddingTop: knobProps.gap.gap,
+      ...props,
+      children: (0, import_textRidesText.wrapBareTextChildren)(children, (label, key) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.body,
+        color: import_componentColors.componentColors.text.primary,
+        children: label
+      }, key))
+    })
   });
 });
 const Accordion2 = (0, import_tamagui.withStaticProperties)(AccordionRoot, {