@multiplatform.one/forms 7.67.0 → 7.69.0

package/dist/jsx/Button/IconButtonGroup.native.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var IconButtonGroup_exports = {};
+__export(IconButtonGroup_exports, {
+  ICON_BUTTON_GLASS_MERGE_PX: () => ICON_BUTTON_GLASS_MERGE_PX,
+  IconButtonGroup: () => IconButtonGroup
+});
+module.exports = __toCommonJS(IconButtonGroup_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_glass = require("./glass.native.js");
+var import_mediaPlate = require("./mediaPlate.native.js");
+var import_iconButtonGroupContext = require("./iconButtonGroupContext.native.js");
+var ICON_BUTTON_GLASS_MERGE_PX = 22;
+function IconButtonGroup(param) {
+  var {
+    plate,
+    children,
+    ...rest
+  } = param;
+  var bar = (0, import_theme.useBarSurface)();
+  var [capsuleHeight, setCapsuleHeight] = (0, import_react.useState)(0);
+  if (plate === "media") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_iconButtonGroupContext.IconButtonGroupContext.Provider, {
+      value: "media",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+        name: "dark",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          alignItems: "center",
+          alignSelf: "flex-start",
+          borderRadius: 1e5,
+          backgroundColor: "$shadow4",
+          overflow: "hidden",
+          "data-mp-icon-button-group": "media",
+          ...(0, import_theme.radiusClassProps)("R-IDENTITY", "icon button plate"),
+          ...(import_tamagui.isWeb ? {
+            style: import_mediaPlate.MEDIA_PLATE_WEB_STYLE
+          } : void 0),
+          ...rest,
+          children
+        })
+      })
+    });
+  }
+  var GlassView = bar ? (0, import_glass.loadGlassView)() : null;
+  var row = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    alignItems: "center",
+    "data-mp-icon-button-group": GlassView ? "glass" : bar ? "bar" : "row",
+    ...rest,
+    children
+  });
+  if (!GlassView) return row;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_iconButtonGroupContext.IconButtonGroupContext.Provider, {
+    value: "glass",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      position: "relative",
+      flexShrink: 1,
+      minWidth: 0,
+      onLayout: function onLayout(event) {
+        return setCapsuleHeight(event.nativeEvent.layout.height);
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(GlassView, {
+        glassEffectStyle: "regular",
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          borderRadius: capsuleHeight / 2
+        }
+      }), row]
+    })
+  });
+}
+//# sourceMappingURL=IconButtonGroup.native.js.map

package/dist/jsx/Button/IconButtonGroup.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","IconButtonGroup_exports","ICON_BUTTON_GLASS_MERGE_PX","IconButtonGroup","module","exports","import_jsx_runtime","require","import_theme","import_react","import_tamagui","import_glass","import_mediaPlate","import_iconButtonGroupContext","param","plate","children","rest","bar","useBarSurface","capsuleHeight","setCapsuleHeight","useState","jsx","IconButtonGroupContext","Provider","Theme","XStack","alignItems","alignSelf","borderRadius","backgroundColor","overflow","radiusClassProps","isWeb","style","MEDIA_PLATE_WEB_STYLE","GlassView","loadGlassView","row"],"sources":["../../../src/Button/IconButtonGroup.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/Button/glass.mjs

@@ -0,0 +1,8 @@
+function loadGlassView() {
+  return null;
+}
+function loadGlassContainer() {
+  return null;
+}
+export { loadGlassContainer, loadGlassView };
+//# sourceMappingURL=glass.mjs.map

package/dist/jsx/Button/glass.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["loadGlassView","loadGlassContainer"],"sources":["../../../src/Button/glass.ts"],"sourcesContent":[null],"mappings":"AAsBO,SAASA,cAAA,EAA2C;EACzD,OAAO;AACT;AAMO,SAASC,mBAAA,EAAqD;EACnE,OAAO;AACT","ignoreList":[]}

package/dist/jsx/Button/glass.native.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var glass_native_exports = {};
+__export(glass_native_exports, {
+  loadGlassContainer: () => loadGlassContainer,
+  loadGlassView: () => loadGlassView
+});
+module.exports = __toCommonJS(glass_native_exports);
+var cachedGlassView;
+var cachedGlassContainer;
+function loadGlassView() {
+  if (cachedGlassView !== void 0) return cachedGlassView;
+  cachedGlassView = null;
+  try {
+    var _core_requireOptionalNativeModule, _glass_isLiquidGlassAvailable, _glass_isGlassEffectAPIAvailable;
+    var core = require("expo-modules-core");
+    if (((_core_requireOptionalNativeModule = core.requireOptionalNativeModule) === null || _core_requireOptionalNativeModule === void 0 ? void 0 : _core_requireOptionalNativeModule.call(core, "ExpoGlassEffect")) == null) return cachedGlassView;
+    var glass = require("expo-glass-effect");
+    if (glass.GlassView && ((_glass_isLiquidGlassAvailable = glass.isLiquidGlassAvailable) === null || _glass_isLiquidGlassAvailable === void 0 ? void 0 : _glass_isLiquidGlassAvailable.call(glass)) && ((_glass_isGlassEffectAPIAvailable = glass.isGlassEffectAPIAvailable) === null || _glass_isGlassEffectAPIAvailable === void 0 ? void 0 : _glass_isGlassEffectAPIAvailable.call(glass))) {
+      var _glass_GlassContainer;
+      cachedGlassView = glass.GlassView;
+      cachedGlassContainer = (_glass_GlassContainer = glass.GlassContainer) !== null && _glass_GlassContainer !== void 0 ? _glass_GlassContainer : null;
+    }
+  } catch (unused) {
+    cachedGlassView = null;
+  }
+  return cachedGlassView;
+}
+function loadGlassContainer() {
+  if (cachedGlassView === void 0) loadGlassView();
+  return cachedGlassContainer !== null && cachedGlassContainer !== void 0 ? cachedGlassContainer : null;
+}
+//# sourceMappingURL=glass.native.js.map

package/dist/jsx/Button/glass.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["glass_native_exports","__export","loadGlassContainer","loadGlassView","module","exports","__toCommonJS","cachedGlassView","cachedGlassContainer","_core_requireOptionalNativeModule","_glass_isLiquidGlassAvailable","_glass_isGlassEffectAPIAvailable","core","require","requireOptionalNativeModule","call","glass","GlassView","isLiquidGlassAvailable","isGlassEffectAPIAvailable","_glass_GlassContainer","GlassContainer","unused"],"sources":["../../../src/Button/glass.native.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,kBAAA,EAAAA,CAAA,KAAAA,kBAAA;EAAAC,aAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAN,oBAAA;AAAA,IAAIO,eAAA;AACJ,IAAIC,oBAAA;AAOO,SAASL,cAAA,EAAgB;EAChC,IAAII,eAAA,KAAoB,QAAW,OAAOA,eAAA;EAC1CA,eAAA,GAAkB;EAClB,IAAI;IACA,IAAIE,iCAAA,EAAmCC,6BAAA,EAA+BC,gCAAA;IACtE,IAAIC,IAAA,GAAOC,OAAA,CAAQ,mBAAmB;IACtC,MAAMJ,iCAAA,GAAoCG,IAAA,CAAKE,2BAAA,MAAiC,QAAQL,iCAAA,KAAsC,SAAS,SAASA,iCAAA,CAAkCM,IAAA,CAAKH,IAAA,EAAM,iBAAiB,MAAM,MAAM,OAAOL,eAAA;IACjO,IAAIS,KAAA,GAAQH,OAAA,CAAQ,mBAAmB;IACvC,IAAIG,KAAA,CAAMC,SAAA,MAAeP,6BAAA,GAAgCM,KAAA,CAAME,sBAAA,MAA4B,QAAQR,6BAAA,KAAkC,SAAS,SAASA,6BAAA,CAA8BK,IAAA,CAAKC,KAAK,QAAQL,gCAAA,GAAmCK,KAAA,CAAMG,yBAAA,MAA+B,QAAQR,gCAAA,KAAqC,SAAS,SAASA,gCAAA,CAAiCI,IAAA,CAAKC,KAAK,IAAI;MACzX,IAAII,qBAAA;MACJb,eAAA,GAAkBS,KAAA,CAAMC,SAAA;MACxBT,oBAAA,IAAwBY,qBAAA,GAAwBJ,KAAA,CAAMK,cAAA,MAAoB,QAAQD,qBAAA,KAA0B,SAASA,qBAAA,GAAwB;IACjJ;EACJ,SAASE,MAAA,EAAQ;IACbf,eAAA,GAAkB;EACtB;EACA,OAAOA,eAAA;AACX;AAKW,SAASL,mBAAA,EAAqB;EACrC,IAAIK,eAAA,KAAoB,QAAWJ,aAAA,CAAc;EACjD,OAAOK,oBAAA,KAAyB,QAAQA,oBAAA,KAAyB,SAASA,oBAAA,GAAuB;AACrG","ignoreList":[]}

package/dist/jsx/Button/iconButtonGroupContext.mjs

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+const IconButtonGroupContext = createContext(null);
+function useIconButtonGroupGround() {
+  return useContext(IconButtonGroupContext);
+}
+export { IconButtonGroupContext, useIconButtonGroupGround };
+//# sourceMappingURL=iconButtonGroupContext.mjs.map

package/dist/jsx/Button/iconButtonGroupContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","IconButtonGroupContext","useIconButtonGroupGround"],"sources":["../../../src/Button/iconButtonGroupContext.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,aAAA,EAAeC,UAAA,QAAkB;AASnC,MAAMC,sBAAA,GAAyBF,aAAA,CAAqC,IAAI;AAExE,SAASG,yBAAA,EAAkD;EAChE,OAAOF,UAAA,CAAWC,sBAAsB;AAC1C","ignoreList":[]}

package/dist/jsx/Button/iconButtonGroupContext.native.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var iconButtonGroupContext_exports = {};
+__export(iconButtonGroupContext_exports, {
+  IconButtonGroupContext: () => IconButtonGroupContext,
+  useIconButtonGroupGround: () => useIconButtonGroupGround
+});
+module.exports = __toCommonJS(iconButtonGroupContext_exports);
+var import_react = require("react");
+var IconButtonGroupContext = (0, import_react.createContext)(null);
+function useIconButtonGroupGround() {
+  return (0, import_react.useContext)(IconButtonGroupContext);
+}
+//# sourceMappingURL=iconButtonGroupContext.native.js.map

package/dist/jsx/Button/iconButtonGroupContext.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty"],"sources":["../../../src/Button/iconButtonGroupContext.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AASF,IAAAA,SAAM,GAAAC,MAAA,CAAAC,cAAyB;AAE/B,IAAAC,gBAAS,GAAAF,MAAA,CAAAG,wBAAkD;AAChE,IAAAC,iBAAkB,GAAAJ,MAAA,CAAAK,mBAAsB;AAC1C,IAAAC,YAAA,GAAAN,MAAA,CAAAO,SAAA,CAAAC,cAAA","ignoreList":[]}

package/dist/jsx/Button/index.mjs

@@ -15,6 +15,10 @@ import { formatActionLabel } from "../actionLabel.mjs";
 import { formButtonColors, formCommonColors } from "../shared/colorRamps.mjs";
 import { warnBareDisabled, warnPositiveTabIndex, warnSizeRecipeEscape } from "../shared/devWarn.mjs";
 import { useControlGrouped } from "../shared/groupContext.mjs";
+import { loadGlassView } from "./glass.mjs";
+import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate.mjs";
+import { useIconButtonGroupGround } from "./iconButtonGroupContext.mjs";
+import { IconButtonGroup, ICON_BUTTON_GLASS_MERGE_PX } from "./IconButtonGroup.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 const buttonSizeRecipes = recipeFamilies.control.recipes;
 function resolveButtonSizeRecipe(size, family = "control", touch = false) {
@@ -179,6 +183,36 @@ const ButtonFrame = styled(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 (isValidElement(icon)) {
+    return 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 createElement(icon, {
+      size,
+      weight
+    });
+  }
+  return icon;
+}
 function Button({
   children,
   action,
@@ -199,10 +233,13 @@ function Button({
   iconAfter,
   selected,
   nested = false,
-  circular,
+  circular: circularProp,
   chromeless,
   edge,
   accentInk,
+  plate,
+  inline,
+  glyphWeight,
   verb,
   noun,
   actionRole,
@@ -261,7 +298,8 @@ function Button({
   } = 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,
@@ -278,8 +316,21 @@ function Button({
   const hostAccentInk = useAccentOnSurface();
   const hostIdentityInk = useIdentityInkOnSurface();
   const grouped = 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 = useIconButtonGroupGround();
+  const mediaPlate = iconOnly && plate === "media" && groupGround !== "media";
+  const confirmPlate = iconOnly && primaryPlate;
+  const iconButton = iconOnly && !mediaPlate && !confirmPlate && !grouped && chromeless !== false && outlined !== true && !circular;
   if (isWeb) ensureKeyboardModalityTracking();
   const barSurface = 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 = useElevatedSurface();
   const darkScheme = isDarkThemeName(useThemeName());
   const resolvedSize = typeof sizeProp === "number" ? sizeProp : knobProps.sizeToken;
@@ -325,19 +376,20 @@ function Button({
   const tierDisabled = tier && disabledState.style !== "dimWhole" ? 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 && 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 && 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;
@@ -358,10 +410,11 @@ function Button({
   }, []);
   const handlePressOut = useCallback(() => setPressing(false), []);
   const textColor = isLow ? pressing ? textAccentLow.press : hovering ? textAccentLow.hover : textAccentLow.default : isMedium ? formCommonColors.text : void 0;
-  const outlinedIntentInk = Boolean(outlined && activeThemeName && solidButtonIntents.has(activeThemeName));
-  const outlinedOnHost = Boolean(outlined && activeThemeName && solidPaletteThemes.has(activeThemeName));
+  const onPage = outlined || iconButton;
+  const outlinedIntentInk = Boolean(onPage && activeThemeName && solidButtonIntents.has(activeThemeName));
+  const outlinedOnHost = Boolean(onPage && activeThemeName && 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 ? formatActionLabel({
     verb,
     noun
@@ -369,11 +422,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 ? loadGlassView() : null;
+  const framedCircle = iconOnly && Boolean(circular) && !nested && !mediaPlate && !confirmPlate;
+  const framedCirclePx = touch && typeof sizeProp !== "number" ? Math.max(sizeTokenPx(resolvedSize), 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(maxFontScaleToFit(labelBoxPx, nested ? getFontSize(knobProps.label.fontSize) : recipe.fontSize, dynamicTypeFit.controlLabelFill), labelLine === void 0 ? Number.POSITIVE_INFINITY : maxFontScaleToFit(labelBoxPx, labelLine, 1));
   const renderLabelText = (label, key) => /* @__PURE__ */jsx(TamaguiSizableText, {
     userSelect: "none",
@@ -417,18 +481,19 @@ function Button({
       color: nativeIconColor,
       "aria-hidden": true
     })
-  }) : icon ? /* @__PURE__ */jsx(View, {
+  }) : glyph ? /* @__PURE__ */jsx(View, {
     flexShrink: 0,
-    children: isWeb ? normalizeButtonIcon(icon, iconSize) : /* @__PURE__ */jsx(NativeButtonIcon, {
-      icon,
+    children: isWeb ? normalizeButtonIcon(glyph, iconSize) : /* @__PURE__ */jsx(NativeButtonIcon, {
+      icon: glyph,
       size: iconSize,
       color: nativeIconColor
     })
   }) : null;
-  const iconAfterElement = iconAfter ? /* @__PURE__ */jsx(View, {
+  const glyphAfter = iconAfter && (barGlyph || inlineGlyph || framedCircle) ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight) : iconAfter;
+  const iconAfterElement = glyphAfter ? /* @__PURE__ */jsx(View, {
     flexShrink: 0,
-    children: isWeb ? normalizeButtonIcon(iconAfter, iconSize) : /* @__PURE__ */jsx(NativeButtonIcon, {
-      icon: iconAfter,
+    children: isWeb ? normalizeButtonIcon(glyphAfter, iconSize) : /* @__PURE__ */jsx(NativeButtonIcon, {
+      icon: glyphAfter,
       size: iconSize,
       color: nativeIconColor
     })
@@ -438,7 +503,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 < MIN_PRESS_TARGET ? {
     width: MIN_PRESS_TARGET,
     height: MIN_PRESS_TARGET,
@@ -470,6 +535,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 ? isWeb ? hostScoped({
+    backgroundColor: "$backgroundHover"
+  }) : {
+    backgroundColor: "transparent"
+  } : mediaPlate ? {
+    backgroundColor: "$shadow5"
+  } : void 0;
+  const iconPress = glyphState ? 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__ */jsxs(ButtonFrame, {
     disabled: explainedDisable ? false : isDisabled || false,
     "aria-busy": loading || void 0,
@@ -481,8 +563,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,
@@ -497,10 +579,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",
+      ...(isWeb ? {
+        style: 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
@@ -532,7 +635,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,
@@ -544,7 +648,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
@@ -584,6 +689,7 @@ function Button({
       }
     } : void 0),
     ...(isCircular && !grouped ? radiusClassProps("R-IDENTITY", "circular Button") : void 0),
+    ...(!isCircular && (GlassView || confirmPlate || mediaPlate) ? 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.
@@ -597,11 +703,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"
@@ -618,18 +724,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, 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__ */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__ */jsx(Theme, {
+  const intentButton = activeThemeName ? /* @__PURE__ */jsx(Theme, {
     name: activeThemeName,
     children: buttonElement
   }) : buttonElement;
+  const themedButton = mediaPlate ? /* @__PURE__ */jsx(Theme, {
+    name: "dark",
+    children: intentButton
+  }) : intentButton;
   const reasonText = explainedDisable ? /* @__PURE__ */jsx(SizableText, {
     id: reasonId,
     size: "$2",
@@ -654,5 +785,10 @@ function Button({
 }
 Button.Icon = TamaguiButton.Icon;
 Button.Text = TamaguiSizableText;
-export { Button, ButtonFrame, buttonSizeRecipes, labelLinePx, resolveButtonSizeRecipe };
+function IconButton(props) {
+  return /* @__PURE__ */jsx(Button, {
+    ...props
+  });
+}
+export { Button, ButtonFrame, ICON_BUTTON_CIRCLE_GLYPH_RATIO, ICON_BUTTON_GLASS_MERGE_PX, ICON_BUTTON_GLYPH_PX, ICON_BUTTON_NEUTRAL_GLYPH_PX, ICON_BUTTON_PRESS_OPACITY, IconButton, IconButtonGroup, buttonSizeRecipes, iconButtonGlyphPx, labelLinePx, resolveButtonSizeRecipe };
 //# sourceMappingURL=index.mjs.map