@multiplatform.one/forms 7.67.0 → 7.69.0

package/dist/cjs/Button/index.cjs

@@ -24,7 +24,15 @@ var Button_exports = {};
 __export(Button_exports, {
   Button: () => Button,
   ButtonFrame: () => ButtonFrame,
+  ICON_BUTTON_CIRCLE_GLYPH_RATIO: () => ICON_BUTTON_CIRCLE_GLYPH_RATIO,
+  ICON_BUTTON_GLASS_MERGE_PX: () => import_IconButtonGroup.ICON_BUTTON_GLASS_MERGE_PX,
+  ICON_BUTTON_GLYPH_PX: () => ICON_BUTTON_GLYPH_PX,
+  ICON_BUTTON_NEUTRAL_GLYPH_PX: () => ICON_BUTTON_NEUTRAL_GLYPH_PX,
+  ICON_BUTTON_PRESS_OPACITY: () => ICON_BUTTON_PRESS_OPACITY,
+  IconButton: () => IconButton,
+  IconButtonGroup: () => import_IconButtonGroup.IconButtonGroup,
   buttonSizeRecipes: () => buttonSizeRecipes,
+  iconButtonGlyphPx: () => iconButtonGlyphPx,
   labelLinePx: () => labelLinePx,
   resolveButtonSizeRecipe: () => resolveButtonSizeRecipe
 });
@@ -46,6 +54,10 @@ var import_actionLabel = require("../actionLabel.cjs");
 var import_colorRamps = require("../shared/colorRamps.cjs");
 var import_devWarn = require("../shared/devWarn.cjs");
 var import_groupContext = require("../shared/groupContext.cjs");
+var import_glass = require("./glass.cjs");
+var import_mediaPlate = require("./mediaPlate.cjs");
+var import_iconButtonGroupContext = require("./iconButtonGroupContext.cjs");
+var import_IconButtonGroup = require("./IconButtonGroup.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const buttonSizeRecipes = import_theme3.recipeFamilies.control.recipes;
 function resolveButtonSizeRecipe(size, family = "control", touch = false) {
@@ -210,6 +222,36 @@ const ButtonFrame = (0, import_tamagui.styled)(import_tamagui.View, {
     size: "$true"
   }
 });
+const ICON_BUTTON_PRESS_OPACITY = 0.35;
+const ICON_BUTTON_GLYPH_PX = 24;
+const ICON_BUTTON_NEUTRAL_GLYPH_PX = 24;
+const PHOSPHOR_INK_RATIO = 208 / 256;
+function iconButtonGlyphPx(rowLinePx) {
+  if (rowLinePx === void 0) return ICON_BUTTON_GLYPH_PX;
+  return Math.max(ICON_BUTTON_GLYPH_PX, Math.round(rowLinePx / PHOSPHOR_INK_RATIO));
+}
+const ICON_BUTTON_CIRCLE_GLYPH_RATIO = 0.58;
+const INLINE_GLYPH_RATIO = 1.2;
+function withGlyphWeight(icon, size, weight) {
+  if (icon == null || icon === false) return icon;
+  if ((0, import_react.isValidElement)(icon)) {
+    return (0, import_react.cloneElement)(icon, {
+      ...(icon.props.size == null ? {
+        size
+      } : void 0),
+      ...(icon.props.weight == null ? {
+        weight
+      } : void 0)
+    });
+  }
+  if (typeof icon === "function" || typeof icon === "object" && "$$typeof" in icon) {
+    return (0, import_react.createElement)(icon, {
+      size,
+      weight
+    });
+  }
+  return icon;
+}
 function Button({
   children,
   action,
@@ -230,10 +272,13 @@ function Button({
   iconAfter,
   selected,
   nested = false,
-  circular,
+  circular: circularProp,
   chromeless,
   edge,
   accentInk,
+  plate,
+  inline,
+  glyphWeight,
   verb,
   noun,
   actionRole,
@@ -292,7 +337,8 @@ function Button({
   } = (0, import_react_store.useStore)(resolvedForm?.store ?? dummyStore, s => ({
     isValid: s.isValid ?? true
   }));
-  const intent = accent && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
+  const primaryPlate = plate === "primary";
+  const intent = (accent || primaryPlate) && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
   const sizeProp = props.size;
   const {
     knobProps,
@@ -309,8 +355,21 @@ function Button({
   const hostAccentInk = (0, import_theme3.useAccentOnSurface)();
   const hostIdentityInk = (0, import_theme3.useIdentityInkOnSurface)();
   const grouped = (0, import_groupContext.useControlGrouped)();
+  const labelled = verb != null || children != null && children !== false && children !== "";
+  const iconOnly = !labelled && Boolean(icon || iconAfter);
+  const circular = circularProp && !(iconOnly && chromeless === true && plate == null);
+  const groupGround = (0, import_iconButtonGroupContext.useIconButtonGroupGround)();
+  const mediaPlate = iconOnly && plate === "media" && groupGround !== "media";
+  const confirmPlate = iconOnly && primaryPlate;
+  const iconButton = iconOnly && !mediaPlate && !confirmPlate && !grouped && chromeless !== false && outlined !== true && !circular;
   if (import_tamagui.isWeb) (0, import_theme3.ensureKeyboardModalityTracking)();
   const barSurface = (0, import_theme3.useBarSurface)();
+  const neutralGlyph = iconButton && !(theme ?? intent) && !barSurface && accentInk == null && inline !== true;
+  if (iconButton) {
+    chromeless = true;
+    accentInk = accentInk ?? (!(theme ?? intent) && (barSurface || inline === true));
+  }
+  const resolvedGlyphWeight = glyphWeight ?? (iconOnly ? "bold" : "regular");
   const elevatedGround = (0, import_theme3.useElevatedSurface)();
   const darkScheme = (0, import_theme3.isDarkThemeName)((0, import_tamagui.useThemeName)());
   const resolvedSize = typeof sizeProp === "number" ? sizeProp : knobProps.sizeToken;
@@ -356,19 +415,20 @@ function Button({
   const tierDisabled = tier && disabledState.style !== "dimWhole" ? (0, import_theme3.controlTierDisabled)(tier) : void 0;
   const hostScoped = fragment => Object.fromEntries(Object.entries(fragment).map(([key, value]) => [key, typeof value === "string" && value.startsWith("$") ? parentScopeTheme[value.slice(1)]?.val ?? value : value]));
   const washOnHost = Boolean(unavailable && activeThemeName && import_theme3.solidPaletteThemes.has(activeThemeName));
-  const disabledSurface = tierDisabled ? {
+  const frameless = Boolean(chromeless);
+  const disabledSurface = frameless ? disabledState.glyphKnobProps : tierDisabled ? {
     ...disabledState.surfaceKnobProps,
     backgroundColor: tierDisabled.backgroundColor,
     borderColor: tierDisabled.borderColor
   } : washOnHost ? hostScoped(disabledState.surfaceKnobProps) : disabledState.surfaceKnobProps;
-  const disabledText = tierDisabled ? {
+  const disabledText = frameless ? {} : tierDisabled ? {
     ...disabledState.textKnobProps,
     color: tierDisabled.color
   } : washOnHost ? hostScoped(disabledState.textKnobProps) : activeThemeName && import_theme3.solidButtonIntents.has(activeThemeName) && disabledState.textKnobProps.color ? {
     ...disabledState.textKnobProps,
     color: "$color12"
   } : disabledState.textKnobProps;
-  outlined = tier ? false : outlined ?? knobProps.outlined;
+  outlined = tier || iconButton || mediaPlate || confirmPlate ? false : outlined ?? knobProps.outlined;
   const isLow = knobProps.textAccent === "low";
   const isMedium = knobProps.textAccent === "medium";
   const resolvedBorderWidth = knobProps.borderRadius.borderWidth;
@@ -389,10 +449,11 @@ function Button({
   }, []);
   const handlePressOut = (0, import_react.useCallback)(() => setPressing(false), []);
   const textColor = isLow ? pressing ? textAccentLow.press : hovering ? textAccentLow.hover : textAccentLow.default : isMedium ? import_colorRamps.formCommonColors.text : void 0;
-  const outlinedIntentInk = Boolean(outlined && activeThemeName && import_theme3.solidButtonIntents.has(activeThemeName));
-  const outlinedOnHost = Boolean(outlined && activeThemeName && import_theme3.solidPaletteThemes.has(activeThemeName));
+  const onPage = outlined || iconButton;
+  const outlinedIntentInk = Boolean(onPage && activeThemeName && import_theme3.solidButtonIntents.has(activeThemeName));
+  const outlinedOnHost = Boolean(onPage && activeThemeName && import_theme3.solidPaletteThemes.has(activeThemeName));
   const outlinedInk = outlinedOnHost ? hostAccentInk : outlinedIntentInk ? "$color11" : void 0;
-  const resolvedRole = actionRole ?? (accent ? "primary" : void 0);
+  const resolvedRole = actionRole ?? (accent || confirmPlate ? "primary" : void 0);
   const labelFromParts = children == null && verb != null ? (0, import_actionLabel.formatActionLabel)({
     verb,
     noun
@@ -400,11 +461,22 @@ function Button({
   const resolvedChildren = children ?? labelFromParts;
   const ariaPressedProp = props["aria-pressed"];
   const isSelected = selected ?? (ariaPressedProp === true || ariaPressedProp === "true" ? true : void 0);
-  const selectedFill = Boolean(isSelected) && !unavailable;
+  const selectedFill = Boolean(isSelected) && !unavailable && !mediaPlate;
   const barInk = accentInk && chromeless && !selectedFill && !unavailable ? hostIdentityInk : null;
-  const iconSize = nested ? Math.min(recipe.iconSize, Math.max(12, Math.round(knobProps.nestedControl.px * 0.45))) : recipe.iconSize;
-  const labelBoxPx = nested ? knobProps.nestedControl.px : recipe.height;
+  const inlineGlyph = iconButton && inline === true && !nested;
+  const barGlyph = (iconButton || mediaPlate || confirmPlate) && !nested || labelled && chromeless && accentInk === true && edge === "start";
   const labelLine = labelLinePx(knobProps.body.fontFamily);
+  const glyphFloor = iconButtonGlyphPx(labelLine);
+  const glassGroup = groupGround === "glass";
+  const GlassView = iconButton && !inlineGlyph && !nested && accentInk && barSurface && !selectedFill && !glassGroup ? (0, import_glass.loadGlassView)() : null;
+  const framedCircle = iconOnly && Boolean(circular) && !nested && !mediaPlate && !confirmPlate;
+  const framedCirclePx = touch && typeof sizeProp !== "number" ? Math.max(sizeTokenPx(resolvedSize), import_theme3.MIN_PRESS_TARGET) : sizeTokenPx(resolvedSize);
+  const iconSize = nested ? Math.min(recipe.iconSize, Math.max(12, Math.round(knobProps.nestedControl.px * 0.45))) : framedCircle ? Math.round(framedCirclePx * ICON_BUTTON_CIRCLE_GLYPH_RATIO) : inlineGlyph ? Math.round(recipe.fontSize * INLINE_GLYPH_RATIO) : barGlyph ? touch ? Math.max(glyphFloor, resolveButtonSizeRecipe("$6", recipeFamily, touch).iconSize) :
+  // A pointer toolbar keeps its token box (LC-54); the glyph fills it
+  // up to the same floor.
+  Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8)) : recipe.iconSize;
+  const glyph = barGlyph || inlineGlyph || framedCircle ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight) : icon;
+  const labelBoxPx = nested ? knobProps.nestedControl.px : recipe.height;
   const labelMaxFontScale = Math.min((0, import_theme3.maxFontScaleToFit)(labelBoxPx, nested ? (0, import_tamagui.getFontSize)(knobProps.label.fontSize) : recipe.fontSize, import_theme3.dynamicTypeFit.controlLabelFill), labelLine === void 0 ? Number.POSITIVE_INFINITY : (0, import_theme3.maxFontScaleToFit)(labelBoxPx, labelLine, 1));
   const renderLabelText = (label, key) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
     userSelect: "none",
@@ -448,18 +520,19 @@ function Button({
       color: nativeIconColor,
       "aria-hidden": true
     })
-  }) : icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+  }) : glyph ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
-    children: import_tamagui.isWeb ? normalizeButtonIcon(icon, iconSize) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
-      icon,
+    children: import_tamagui.isWeb ? normalizeButtonIcon(glyph, iconSize) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
+      icon: glyph,
       size: iconSize,
       color: nativeIconColor
     })
   }) : null;
-  const iconAfterElement = iconAfter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+  const glyphAfter = iconAfter && (barGlyph || inlineGlyph || framedCircle) ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight) : iconAfter;
+  const iconAfterElement = glyphAfter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
-    children: import_tamagui.isWeb ? normalizeButtonIcon(iconAfter, iconSize) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
-      icon: iconAfter,
+    children: import_tamagui.isWeb ? normalizeButtonIcon(glyphAfter, iconSize) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
+      icon: glyphAfter,
       size: iconSize,
       color: nativeIconColor
     })
@@ -469,7 +542,7 @@ function Button({
   const reasonId = explainedDisable ? `${props.id ?? generatedId}-disabled-reason` : void 0;
   const isCircular = Boolean(circular);
   const circularTokenPx = sizeTokenPx(resolvedSize);
-  const visualPx = nested ? knobProps.nestedControl.px : recipe.height;
+  const visualPx = nested ? knobProps.nestedControl.px : inlineGlyph ? iconSize : iconButton ? Math.max(recipe.height, iconSize) : recipe.height;
   const circularPressFloor = isCircular && touch && typeof sizeProp !== "number" && circularTokenPx < import_theme3.MIN_PRESS_TARGET ? {
     width: import_theme3.MIN_PRESS_TARGET,
     height: import_theme3.MIN_PRESS_TARGET,
@@ -501,6 +574,23 @@ function Button({
   const selectedPressFill = selectedFill ? "$backgroundPress" : tierPaint ? tierPaint.press : outlined ? "transparent" : "$backgroundPress";
   const restFill = selectedFill ? outlined ? "$background" : "$backgroundPress" : tierPaint?.rest;
   const plainTier = tier === "plain";
+  const glyphState = iconButton && !selectedFill;
+  const iconHover = glyphState ? import_tamagui.isWeb ? hostScoped({
+    backgroundColor: "$backgroundHover"
+  }) : {
+    backgroundColor: "transparent"
+  } : mediaPlate ? {
+    backgroundColor: "$shadow5"
+  } : void 0;
+  const iconPress = glyphState ? import_tamagui.isWeb ? hostScoped({
+    backgroundColor: "$backgroundPress"
+  }) : {
+    backgroundColor: "transparent",
+    opacity: ICON_BUTTON_PRESS_OPACITY
+  } : mediaPlate ? {
+    backgroundColor: "$shadow5"
+  } : void 0;
+  const glyphEdgePull = GlassView || glassGroup ? 0 : iconButton ? -Math.max(0, (visualPx - iconSize) / 2) : edgePull;
   const buttonElement = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ButtonFrame, {
     disabled: explainedDisable ? false : isDisabled || false,
     "aria-busy": loading || void 0,
@@ -512,8 +602,8 @@ function Button({
     } : void 0),
     borderWidth: resolvedBorderWidth,
     size: resolvedSize,
-    ...(chromeless || plainTier ? void 0 : knobProps.elevationChrome),
-    elevation: plainTier ? void 0 : knobProps.elevation,
+    ...(chromeless || plainTier || mediaPlate || confirmPlate ? void 0 : knobProps.elevationChrome),
+    elevation: plainTier || confirmPlate ? void 0 : knobProps.elevation,
     outlined: outlined || void 0,
     borderColor: outlined ? knobBorderColor : "transparent",
     circular: !nested && isCircular ? true : void 0,
@@ -528,10 +618,31 @@ function Button({
       height: visualPx,
       minHeight: visualPx
     } : void 0),
-    ...(edge && chromeless && !selectedFill && !isCircular ? edge === "start" ? {
-      marginInlineStart: edgePull
+    ...(iconButton || mediaPlate || confirmPlate ? {
+      width: visualPx,
+      minWidth: visualPx,
+      paddingHorizontal: 0
+    } : void 0),
+    ...(inlineGlyph ? {
+      marginInlineStart: "$2"
+    } : void 0),
+    ...(GlassView ? {
+      borderRadius: 1e5
+    } : void 0),
+    ...(confirmPlate ? {
+      borderRadius: 1e5
+    } : void 0),
+    ...(mediaPlate ? {
+      borderRadius: 1e5,
+      backgroundColor: "$shadow4",
+      ...(import_tamagui.isWeb ? {
+        style: import_mediaPlate.MEDIA_PLATE_WEB_STYLE
+      } : void 0)
+    } : void 0),
+    ...(edge && !inlineGlyph && chromeless && !selectedFill && !isCircular ? edge === "start" ? {
+      marginInlineStart: glyphEdgePull
     } : {
-      marginInlineEnd: edgePull
+      marginInlineEnd: glyphEdgePull
     } : void 0),
     ...(restFill ? {
       backgroundColor: restFill
@@ -563,7 +674,8 @@ function Button({
       // A selected fill, or the LC-153 tier's wash, beats the knob state fill.
       ...(selectedFill || tierPaint ? {
         backgroundColor: selectedHoverFill
-      } : void 0)
+      } : void 0),
+      ...iconHover
     },
     pressStyle: {
       backgroundColor: selectedPressFill,
@@ -575,7 +687,8 @@ function Button({
       // A selected fill, or the LC-153 tier's wash, beats the knob state fill.
       ...(selectedFill || tierPaint ? {
         backgroundColor: selectedPressFill
-      } : void 0)
+      } : void 0),
+      ...iconPress
     },
     focusStyle: {
       outlineWidth: 0
@@ -615,6 +728,7 @@ function Button({
       }
     } : void 0),
     ...(isCircular && !grouped ? (0, import_theme3.radiusClassProps)("R-IDENTITY", "circular Button") : void 0),
+    ...(!isCircular && (GlassView || confirmPlate || mediaPlate) ? (0, import_theme3.radiusClassProps)("R-IDENTITY", "icon button plate") : void 0),
     ...(explainedDisable ? {
       // No `title`: hover-only reveals are banned on disabled controls
       // (DG-OVL-05) — the reason renders as visible adjacent text.
@@ -628,11 +742,11 @@ function Button({
       // Hover/press keep the LC-40 washed chrome — an aria-disabled
       // control must not light up like a pressable one.
       hoverStyle: {
-        backgroundColor: outlined ? "transparent" : "$background",
+        backgroundColor: outlined || frameless ? "transparent" : "$background",
         ...disabledSurface
       },
       pressStyle: {
-        backgroundColor: outlined ? "transparent" : "$background",
+        backgroundColor: outlined || frameless ? "transparent" : "$background",
         ...disabledSurface
       },
       "data-mp-disabled-explained": "true"
@@ -649,18 +763,43 @@ function Button({
     ...(tier ? {
       "data-mp-tier": tier
     } : void 0),
+    ...(iconButton ? {
+      "data-mp-icon-button": GlassView ? "glass" : inlineGlyph ? "inline" : neutralGlyph ? "neutral" : "glyph"
+    } : void 0),
+    ...(mediaPlate ? {
+      "data-mp-icon-button": "media"
+    } : void 0),
+    ...(confirmPlate ? {
+      "data-mp-icon-button": "primary"
+    } : void 0),
     "data-mp-button-height": String(nested ? visualPx : isCircular ? touch && typeof sizeProp !== "number" ? Math.max(circularTokenPx, import_theme3.MIN_PRESS_TARGET) : circularTokenPx : visualPx),
     "data-size-token": knobProps.sizeToken,
     ...(selectedFill ? {
       "aria-pressed": true,
       "data-mp-selected": "true"
     } : void 0),
-    children: [iconElement, labelContent, iconAfterElement]
+    children: [GlassView ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GlassView, {
+      glassEffectStyle: "regular",
+      isInteractive: true,
+      pointerEvents: "none",
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderRadius: visualPx / 2
+      }
+    }) : null, iconElement, labelContent, iconAfterElement]
   });
-  const themedButton = activeThemeName ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+  const intentButton = activeThemeName ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
     name: activeThemeName,
     children: buttonElement
   }) : buttonElement;
+  const themedButton = mediaPlate ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+    name: "dark",
+    children: intentButton
+  }) : intentButton;
   const reasonText = explainedDisable ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme2.SizableText, {
     id: reasonId,
     size: "$2",
@@ -684,4 +823,9 @@ function Button({
   });
 }
 Button.Icon = import_tamagui.Button.Icon;
-Button.Text = import_tamagui.SizableText;
+Button.Text = import_tamagui.SizableText;
+function IconButton(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Button, {
+    ...props
+  });
+}