@multiplatform.one/forms 7.66.0 → 7.68.0

package/dist/cjs/Button/index.native.js

@@ -26,6 +26,10 @@ var Button_exports = {};
 __export(Button_exports, {
   Button: () => Button,
   ButtonFrame: () => ButtonFrame,
+  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,
   buttonSizeRecipes: () => buttonSizeRecipes,
   labelLinePx: () => labelLinePx,
   resolveButtonSizeRecipe: () => resolveButtonSizeRecipe
@@ -49,6 +53,7 @@ var import_actionLabel = require("../actionLabel.native.js");
 var import_colorRamps = require("../shared/colorRamps.native.js");
 var import_devWarn = require("../shared/devWarn.native.js");
 var import_groupContext = require("../shared/groupContext.native.js");
+var import_glass = require("./glass.native.js");
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
@@ -245,6 +250,30 @@ var ButtonFrame = (0, import_tamagui.styled)(import_tamagui.View, {
     size: "$true"
   }
 });
+var ICON_BUTTON_PRESS_OPACITY = 0.35;
+var ICON_BUTTON_GLYPH_PX = 22;
+var ICON_BUTTON_NEUTRAL_GLYPH_PX = 24;
+var INLINE_GLYPH_RATIO = 1.2;
+function withGlyphWeight(icon, size, weight) {
+  if (icon == null || icon === false) return icon;
+  if (/* @__PURE__ */(0, import_react.isValidElement)(icon)) {
+    return /* @__PURE__ */(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 === "undefined" ? "undefined" : _type_of(icon)) === "object" && "$$typeof" in icon) {
+    return /* @__PURE__ */(0, import_react.createElement)(icon, {
+      size,
+      weight
+    });
+  }
+  return icon;
+}
 function Button(param) {
   var {
     children,
@@ -270,6 +299,9 @@ function Button(param) {
     chromeless,
     edge,
     accentInk,
+    plate,
+    inline,
+    glyphWeight,
     verb,
     noun,
     actionRole,
@@ -333,7 +365,8 @@ function Button(param) {
       isValid: (_s_isValid = s.isValid) !== null && _s_isValid !== void 0 ? _s_isValid : true
     };
   });
-  var intent = accent && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
+  var primaryPlate = plate === "primary";
+  var intent = (accent || primaryPlate) && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
   var sizeProp = props.size;
   var {
     knobProps,
@@ -350,8 +383,19 @@ function Button(param) {
   var hostAccentInk = (0, import_theme3.useAccentOnSurface)();
   var hostIdentityInk = (0, import_theme3.useIdentityInkOnSurface)();
   var grouped = (0, import_groupContext.useControlGrouped)();
+  var labelled = verb != null || children != null && children !== false && children !== "";
+  var iconOnly = !labelled && Boolean(icon || iconAfter);
+  var mediaPlate = iconOnly && plate === "media";
+  var confirmPlate = iconOnly && primaryPlate;
+  var iconButton = iconOnly && !mediaPlate && !confirmPlate && !grouped && chromeless !== false && outlined !== true && !circular;
   if (import_tamagui.isWeb) (0, import_theme3.ensureKeyboardModalityTracking)();
   var barSurface = (0, import_theme3.useBarSurface)();
+  var neutralGlyph = iconButton && !(theme !== null && theme !== void 0 ? theme : intent) && !barSurface && accentInk == null;
+  if (iconButton) {
+    chromeless = true;
+    accentInk = accentInk !== null && accentInk !== void 0 ? accentInk : !(theme !== null && theme !== void 0 ? theme : intent) && barSurface;
+  }
+  var resolvedGlyphWeight = glyphWeight !== null && glyphWeight !== void 0 ? glyphWeight : neutralGlyph ? "bold" : "regular";
   var elevatedGround = (0, import_theme3.useElevatedSurface)();
   var darkScheme = (0, import_theme3.isDarkThemeName)((0, import_tamagui.useThemeName)());
   var resolvedSize = typeof sizeProp === "number" ? sizeProp : knobProps.sizeToken;
@@ -405,19 +449,20 @@ function Button(param) {
     }));
   };
   var washOnHost = Boolean(unavailable && activeThemeName && import_theme3.solidPaletteThemes.has(activeThemeName));
-  var disabledSurface = tierDisabled ? {
+  var frameless = Boolean(chromeless);
+  var disabledSurface = frameless ? disabledState.glyphKnobProps : tierDisabled ? {
     ...disabledState.surfaceKnobProps,
     backgroundColor: tierDisabled.backgroundColor,
     borderColor: tierDisabled.borderColor
   } : washOnHost ? hostScoped(disabledState.surfaceKnobProps) : disabledState.surfaceKnobProps;
-  var disabledText = tierDisabled ? {
+  var 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 !== null && outlined !== void 0 ? outlined : knobProps.outlined;
+  outlined = tier || iconButton || mediaPlate || confirmPlate ? false : outlined !== null && outlined !== void 0 ? outlined : knobProps.outlined;
   var isLow = knobProps.textAccent === "low";
   var isMedium = knobProps.textAccent === "medium";
   var resolvedBorderWidth = knobProps.borderRadius.borderWidth;
@@ -442,10 +487,11 @@ function Button(param) {
     return setPressing(false);
   }, []);
   var textColor = isLow ? pressing ? textAccentLow.press : hovering ? textAccentLow.hover : textAccentLow.default : isMedium ? import_colorRamps.formCommonColors.text : void 0;
-  var outlinedIntentInk = Boolean(outlined && activeThemeName && import_theme3.solidButtonIntents.has(activeThemeName));
-  var outlinedOnHost = Boolean(outlined && activeThemeName && import_theme3.solidPaletteThemes.has(activeThemeName));
+  var onPage = outlined || iconButton;
+  var outlinedIntentInk = Boolean(onPage && activeThemeName && import_theme3.solidButtonIntents.has(activeThemeName));
+  var outlinedOnHost = Boolean(onPage && activeThemeName && import_theme3.solidPaletteThemes.has(activeThemeName));
   var outlinedInk = outlinedOnHost ? hostAccentInk : outlinedIntentInk ? "$color11" : void 0;
-  var resolvedRole = actionRole !== null && actionRole !== void 0 ? actionRole : accent ? "primary" : void 0;
+  var resolvedRole = actionRole !== null && actionRole !== void 0 ? actionRole : accent || confirmPlate ? "primary" : void 0;
   var labelFromParts = children == null && verb != null ? (0, import_actionLabel.formatActionLabel)({
     verb,
     noun
@@ -453,9 +499,17 @@ function Button(param) {
   var resolvedChildren = children !== null && children !== void 0 ? children : labelFromParts;
   var ariaPressedProp = props["aria-pressed"];
   var isSelected = selected !== null && selected !== void 0 ? selected : ariaPressedProp === true || ariaPressedProp === "true" ? true : void 0;
-  var selectedFill = Boolean(isSelected) && !unavailable;
+  var selectedFill = Boolean(isSelected) && !unavailable && !mediaPlate;
   var barInk = accentInk && chromeless && !selectedFill && !unavailable ? hostIdentityInk : null;
-  var iconSize = nested ? Math.min(recipe.iconSize, Math.max(12, Math.round(knobProps.nestedControl.px * 0.45))) : recipe.iconSize;
+  var inlineGlyph = iconButton && inline === true && !nested;
+  var barGlyph = (iconButton || mediaPlate || confirmPlate) && !nested || labelled && chromeless && accentInk === true && edge === "start";
+  var glyphFloor = neutralGlyph && !inlineGlyph ? ICON_BUTTON_NEUTRAL_GLYPH_PX : ICON_BUTTON_GLYPH_PX;
+  var GlassView = iconButton && !inlineGlyph && !nested && accentInk && barSurface && !selectedFill ? (0, import_glass.loadGlassView)() : null;
+  var iconSize = nested ? Math.min(recipe.iconSize, Math.max(12, Math.round(knobProps.nestedControl.px * 0.45))) : 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;
+  var glyph = barGlyph || inlineGlyph ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight) : icon;
   var labelBoxPx = nested ? knobProps.nestedControl.px : recipe.height;
   var labelLine = labelLinePx(knobProps.body.fontFamily);
   var 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));
@@ -509,18 +563,19 @@ function Button(param) {
       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;
-  var iconAfterElement = iconAfter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+  var glyphAfter = iconAfter && (barGlyph || inlineGlyph) ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight) : iconAfter;
+  var 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
     })
@@ -530,7 +585,7 @@ function Button(param) {
   var reasonId = explainedDisable ? `${(_props_id = props.id) !== null && _props_id !== void 0 ? _props_id : generatedId}-disabled-reason` : void 0;
   var isCircular = Boolean(circular);
   var circularTokenPx = sizeTokenPx(resolvedSize);
-  var visualPx = nested ? knobProps.nestedControl.px : recipe.height;
+  var visualPx = nested ? knobProps.nestedControl.px : inlineGlyph ? iconSize : iconButton ? Math.max(recipe.height, iconSize) : recipe.height;
   var circularPressFloor = isCircular && touch && typeof sizeProp !== "number" && circularTokenPx < import_theme3.MIN_PRESS_TARGET ? {
     width: import_theme3.MIN_PRESS_TARGET,
     height: import_theme3.MIN_PRESS_TARGET,
@@ -562,6 +617,23 @@ function Button(param) {
   var selectedPressFill = selectedFill ? "$backgroundPress" : tierPaint ? tierPaint.press : outlined ? "transparent" : "$backgroundPress";
   var restFill = selectedFill ? outlined ? "$background" : "$backgroundPress" : tierPaint === null || tierPaint === void 0 ? void 0 : tierPaint.rest;
   var plainTier = tier === "plain";
+  var glyphState = iconButton && !selectedFill;
+  var iconHover = glyphState ? import_tamagui.isWeb ? hostScoped({
+    backgroundColor: "$backgroundHover"
+  }) : {
+    backgroundColor: "transparent"
+  } : mediaPlate ? {
+    backgroundColor: "$shadow5"
+  } : void 0;
+  var iconPress = glyphState ? import_tamagui.isWeb ? hostScoped({
+    backgroundColor: "$backgroundPress"
+  }) : {
+    backgroundColor: "transparent",
+    opacity: ICON_BUTTON_PRESS_OPACITY
+  } : mediaPlate ? {
+    backgroundColor: "$shadow5"
+  } : void 0;
+  var glyphEdgePull = GlassView ? 0 : iconButton ? -Math.max(0, (visualPx - iconSize) / 2) : edgePull;
   var buttonElement = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ButtonFrame, {
     // DG-ST-03: an explained disable is aria-disabled (focusable, press
     // swallowed in handlePress) instead of a natively disabled dead end.
@@ -575,8 +647,8 @@ function Button(param) {
     } : 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,
     // The frame's `outlined` variant declares only a `true` branch, so a
     // literal `false` is not consumed and React receives it as a DOM
     // attribute ("Received `false` for a non-boolean attribute"). Every
@@ -600,10 +672,35 @@ function Button(param) {
       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,
+      overflow: "hidden"
+    } : void 0),
+    ...(confirmPlate ? {
+      borderRadius: 1e5
+    } : void 0),
+    ...(mediaPlate ? {
+      borderRadius: 1e5,
+      backgroundColor: "$shadow4",
+      ...(import_tamagui.isWeb ? {
+        style: {
+          backdropFilter: "blur(16px) saturate(180%)",
+          WebkitBackdropFilter: "blur(16px) saturate(180%)"
+        }
+      } : void 0)
+    } : void 0),
+    ...(edge && !inlineGlyph && chromeless && !selectedFill && !isCircular ? edge === "start" ? {
+      marginInlineStart: glyphEdgePull
     } : {
-      marginInlineEnd: edgePull
+      marginInlineEnd: glyphEdgePull
     } : void 0),
     ...(restFill ? {
       backgroundColor: restFill
@@ -647,7 +744,8 @@ function Button(param) {
       // 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,
@@ -659,7 +757,8 @@ function Button(param) {
       // 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
@@ -716,6 +815,7 @@ function Button(param) {
       }
     } : 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.
@@ -729,11 +829,11 @@ function Button(param) {
       // 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"
@@ -750,18 +850,42 @@ function Button(param) {
     ...(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
+      }
+    }) : null, iconElement, labelContent, iconAfterElement]
   });
-  var themedButton = activeThemeName ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+  var intentButton = activeThemeName ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
     name: activeThemeName,
     children: buttonElement
   }) : buttonElement;
+  var themedButton = mediaPlate ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+    name: "dark",
+    children: intentButton
+  }) : intentButton;
   var reasonText = explainedDisable ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme2.SizableText, {
     id: reasonId,
     size: "$2",
@@ -786,4 +910,9 @@ function Button(param) {
 }
 Button.Icon = import_tamagui.Button.Icon;
 Button.Text = import_tamagui.SizableText;
+function IconButton(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Button, {
+    ...props
+  });
+}
 //# sourceMappingURL=index.native.js.map