@oxyhq/bloom 0.35.7 → 0.36.0

package/lib/module/content-panel/index.web.js

@@ -28,18 +28,22 @@
  * Framing is tri-state via the `framed` prop:
  *
  *  - `undefined` (DEFAULT) → RESPONSIVE, driven purely by NativeWind: full-bleed
- *    below `md`, framed at `md`+. The rounding is `md:`-gated and both overlays
- *    are always rendered but carry `max-md:hidden` (`display:none` below `md`),
- *    so the breakpoint is decided in CSS — no consumer JS breakpoint hook.
+ *    below the `framedFrom` breakpoint, framed at/above it. The breakpoint is
+ *    configurable per consumer (`framedFrom`, default `768` / Tailwind `md`); the
+ *    rounding is gated by that breakpoint's `min-*:` variant and both overlays
+ *    are always rendered but carry the matching `max-*:hidden` literal
+ *    (`display:none` below the breakpoint), so the breakpoint is decided entirely
+ *    in CSS — no consumer JS breakpoint hook.
  *  - `false` → NEVER framed (full-bleed at every size): a single flat surface,
  *    no rounding, no overlays.
  *  - `true` → ALWAYS framed (rounded + overlays at every size).
  *
- * The overlays are gated by VISIBILITY (a `max-md:hidden` literal) rather than
- * by conditional mounting for the responsive case, so crossing the breakpoint
- * never remounts them. The content wrapper likewise keeps a stable `key` so
- * `{children}` reconciles in place across the breakpoint instead of remounting
- * (which would reset feed scroll / the virtualizer + refetch).
+ * The overlays are gated by VISIBILITY (a `max-*:hidden` literal for the chosen
+ * breakpoint) rather than by conditional mounting for the responsive case, so
+ * crossing the breakpoint never remounts them. The content wrapper likewise
+ * keeps a stable `key` so `{children}` reconciles in place across the breakpoint
+ * instead of remounting (which would reset feed scroll / the virtualizer +
+ * refetch).
  *
  * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
  * select this file via the `"browser"` export condition in `package.json`.
@@ -61,9 +65,58 @@ export const GUTTER_MASK_SPREAD = 40;
 export const PANEL_TOP_INSET = 8;
 /** Bottom sticky inset (px) of the framed panel chrome. */
 export const PANEL_BOTTOM_INSET = 8;
+
+/**
+ * Viewport width (px) at which a RESPONSIVE `ContentPanel` (`framed` undefined)
+ * switches from full-bleed to framed. Each value maps to a PRE-SHIPPED literal
+ * Tailwind class bundle — `768` (default) uses the named `md:`/`max-md:` screens
+ * (byte-identical to prior behavior), `640` uses `sm:`/`max-sm:`, `1024` uses
+ * `lg:`/`max-lg:`, and `500` uses the arbitrary `min-[500px]:`/`max-[500px]:`
+ * variants (there is no named screen at 500px). The breakpoint tokens are never
+ * built at runtime, so a consumer's Tailwind content-scan over `lib/**` resolves
+ * them verbatim.
+ */
+
+/**
+ * Per-breakpoint literal Tailwind variant tokens for the WEB responsive mode.
+ * Each field is a WHOLE literal class string (never assembled from parts at
+ * runtime) so the consumer's content-scan over `lib/**` picks up every
+ * arbitrary/`min-*`/`max-*`/`web:` token verbatim. Selecting a bundle by
+ * `framedFrom` value is the only runtime decision:
+ * - `surface`       → framing rounding on the surface at/above the breakpoint.
+ * - `content`       → the same rounding + a web-only horizontal clip on the
+ *   inner content wrapper (`web:<bp>:overflow-x-clip`, platform-first-then-
+ *   breakpoint — matching the consumer convention `web:sm:flex` in `@mercaria/ui`).
+ * - `overlayHidden` → `display:none` for the sticky overlays BELOW the breakpoint.
+ *   `min-[500px]:` (≥500) and `max-[500px]:` (<500) are exactly complementary
+ *   (meet at 500, no overlap/gap), mirroring the named `md:`/`max-md:` pair.
+ */
+const RESPONSIVE_WEB = {
+  500: {
+    surface: 'min-[500px]:rounded-radius-28',
+    content: 'min-[500px]:rounded-radius-28 web:min-[500px]:overflow-x-clip',
+    overlayHidden: 'max-[500px]:hidden'
+  },
+  640: {
+    surface: 'sm:rounded-radius-28',
+    content: 'sm:rounded-radius-28 web:sm:overflow-x-clip',
+    overlayHidden: 'max-sm:hidden'
+  },
+  768: {
+    surface: 'md:rounded-radius-28',
+    content: 'md:rounded-radius-28 web:md:overflow-x-clip',
+    overlayHidden: 'max-md:hidden'
+  },
+  1024: {
+    surface: 'lg:rounded-radius-28',
+    content: 'lg:rounded-radius-28 web:lg:overflow-x-clip',
+    overlayHidden: 'max-lg:hidden'
+  }
+};
 const ContentPanelComponent = ({
   children,
   framed,
+  framedFrom = 768,
   surfaceClassName,
   surfaceStyle,
   contentClassName,
@@ -82,13 +135,16 @@ const ContentPanelComponent = ({
   // `false` → never framed (full-bleed).
   const responsive = framed === undefined;
   const showOverlays = framed !== false;
+  // Responsive mode selects a pre-shipped literal breakpoint bundle by value;
+  // `framed === true`/`false` ignore `framedFrom` (fixed always/never framing).
+  const bp = RESPONSIVE_WEB[framedFrom];
 
   // Whole literal class strings selected per mode (the Tailwind content-scan
-  // over `lib/**` requires each arbitrary/`md:`/`web:` token stay literal).
-  // `web:md:overflow-x-clip` is platform-first-then-breakpoint, matching the
-  // consumer convention (`web:sm:flex` in `@mercaria/ui`).
-  const surfaceBase = responsive ? 'flex-1 md:rounded-radius-28' : framed ? 'flex-1 rounded-radius-28' : 'flex-1';
-  const contentBase = responsive ? 'flex-1 md:rounded-radius-28 web:md:overflow-x-clip' : framed ? 'flex-1 rounded-radius-28 web:overflow-x-clip' : 'flex-1';
+  // over `lib/**` requires each arbitrary/`min-*`/`max-*`/`web:` token stay
+  // literal — the breakpoint tokens live whole in `RESPONSIVE_WEB` above and are
+  // only spliced in, never assembled from parts).
+  const surfaceBase = responsive ? `flex-1 ${bp.surface}` : framed ? 'flex-1 rounded-radius-28' : 'flex-1';
+  const contentBase = responsive ? `flex-1 ${bp.content}` : framed ? 'flex-1 rounded-radius-28 web:overflow-x-clip' : 'flex-1';
   const surfaceClass = [surfaceBase, surfaceClassName ?? 'bg-card'].join(' ');
   const contentClass = [contentBase, contentClassName].filter(Boolean).join(' ');
   return /*#__PURE__*/_jsx(ContentPanelNestingContext.Provider, {
@@ -98,13 +154,13 @@ const ContentPanelComponent = ({
       style: surfaceStyle,
       children: [showOverlays && /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
-        className: responsive ? 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 max-md:hidden web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]' : 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]',
+        className: responsive ? `web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]` : 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]',
         style: {
           boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}`
         }
       }, "bleed-mask"), showOverlays && showStickyFrame !== false && /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
-        className: responsive ? 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border max-md:hidden web:[margin-bottom:calc(-100dvh+16px)]' : 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border web:[margin-bottom:calc(-100dvh+16px)]'
+        className: responsive ? `web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]` : 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border web:[margin-bottom:calc(-100dvh+16px)]'
       }, "border-frame"), /*#__PURE__*/_jsx(View, {
         className: contentClass,
         style: contentStyle,

package/lib/module/content-panel/index.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","View","useTheme","ContentPanelNestingContext","useContentPanelNestingGuard","jsx","_jsx","jsxs","_jsxs","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","framed","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","maskColor","colors","responsive","undefined","showOverlays","surfaceBase","contentBase","surfaceClass","join","contentClass","filter","Boolean","Provider","value","className","style","pointerEvents","boxShadow","background","ContentPanel","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.web.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,IAAI,QAAwC,cAAc;AAEnE,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SACEC,0BAA0B,EAC1BC,2BAA2B,QACtB,sBAAmB;;AAE1B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC;AACA,OAAO,MAAMC,eAAe,GAAG,CAAC;AAChC;AACA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;AAgCnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,eAAe;EACfC;AACF,CAAC,KAAK;EACJ;EACA;EACAhB,2BAA2B,CAAC,CAAC;EAC7B,MAAM;IAAEiB;EAAO,CAAC,GAAGnB,QAAQ,CAAC,CAAC;;EAE7B;EACA;EACA,MAAMoB,UAAU,GAAGR,MAAM,KAAKS,SAAS;EACvC,MAAMC,YAAY,GAAGV,MAAM,KAAK,KAAK;;EAErC;EACA;EACA;EACA;EACA,MAAMW,WAAW,GAAGH,UAAU,GAC1B,6BAA6B,GAC7BR,MAAM,GACJ,0BAA0B,GAC1B,QAAQ;EACd,MAAMY,WAAW,GAAGJ,UAAU,GAC1B,oDAAoD,GACpDR,MAAM,GACJ,8CAA8C,GAC9C,QAAQ;EACd,MAAMa,YAAY,GAAG,CAACF,WAAW,EAAEV,gBAAgB,IAAI,SAAS,CAAC,CAACa,IAAI,CAAC,GAAG,CAAC;EAC3E,MAAMC,YAAY,GAAG,CAACH,WAAW,EAAET,gBAAgB,CAAC,CAACa,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE9E,oBACEtB,IAAA,CAACH,0BAA0B,CAAC6B,QAAQ;IAACC,KAAK,EAAE,IAAK;IAAApB,QAAA,eAC/CL,KAAA,CAACP,IAAI;MACIiC,SAAS,EAAEP,YAAY;MAC9BQ,KAAK,EAAEnB,YAAa;MAAAH,QAAA,GAKnBW,YAAY,iBACXlB,IAAA,CAACL,IAAI;QAEHmC,aAAa,EAAC,MAAM;QAElBF,SAAS,EAAEZ,UAAU,GACjB,4JAA4J,GAC5J,8IAA8I;QAEpJa,KAAK,EAAE;UAAEE,SAAS,EAAE,SAAS5B,kBAAkB,MAAMW,SAAS,IAAIC,MAAM,CAACiB,UAAU;QAAG;MAAE,GAPpF,YAQL,CACF,EAGAd,YAAY,IAAIL,eAAe,KAAK,KAAK,iBACxCb,IAAA,CAACL,IAAI;QAEHmC,aAAa,EAAC,MAAM;QAElBF,SAAS,EAAEZ,UAAU,GACjB,uJAAuJ,GACvJ;MAAyI,GAL3I,cAOL,CACF,eAKDhB,IAAA,CAACL,IAAI;QAEIiC,SAAS,EAAEL,YAAY;QAC9BM,KAAK,EAAEjB,YAAa;QAAAL,QAAA,EAEnBA;MAAQ,GAJL,SAKA,CAAC;IAAA,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAED,OAAO,MAAM0B,YAAY,gBAAGvC,IAAI,CAACY,qBAAqB,CAAC;AACvD2B,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}
+{"version":3,"names":["React","memo","View","useTheme","ContentPanelNestingContext","useContentPanelNestingGuard","jsx","_jsx","jsxs","_jsxs","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","RESPONSIVE_WEB","surface","content","overlayHidden","ContentPanelComponent","children","framed","framedFrom","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","maskColor","colors","responsive","undefined","showOverlays","bp","surfaceBase","contentBase","surfaceClass","join","contentClass","filter","Boolean","Provider","value","className","style","pointerEvents","boxShadow","background","ContentPanel","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/frosted-icon-button/FrostedIconButton.js

@@ -0,0 +1,143 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { Animated, Pressable, StyleSheet, View } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { useTheme } from "../theme/use-theme.js";
+import { usePressAnimation } from "../hooks/usePressAnimation.js";
+import { useInteractionState } from "../hooks/useInteractionState.js";
+import { applyIconColor, resolveFrostedPalette, resolveFrostedSize } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RADIUS = 999;
+const PRESS_SCALE = 0.94;
+const DEFAULT_HIT_SLOP = {
+  top: 8,
+  bottom: 8,
+  left: 8,
+  right: 8
+};
+
+// BlurView intensity (0–100). A gentle frost so the chip reads over an image
+// without smearing the content behind it. The `active` (solid) state has none.
+const BLUR_INTENSITY = 24;
+const FrostedIconButtonComponent = ({
+  onPress,
+  icon,
+  children,
+  active = false,
+  disabled = false,
+  size = 'md',
+  accessibilityLabel,
+  accessibilityHint,
+  style,
+  className,
+  testID,
+  hitSlop
+}) => {
+  const theme = useTheme();
+  const geo = useMemo(() => resolveFrostedSize(size), [size]);
+  const palette = useMemo(() => resolveFrostedPalette(theme.colors, theme.isDark), [theme.colors, theme.isDark]);
+  const {
+    scaleAnim,
+    onPressIn: onScalePressIn,
+    onPressOut: onScalePressOut
+  } = usePressAnimation(disabled ? undefined : PRESS_SCALE);
+  const {
+    state: pressed,
+    onIn: onPressedIn,
+    onOut: onPressedOut
+  } = useInteractionState();
+  const handlePressIn = disabled ? undefined : () => {
+    onScalePressIn();
+    onPressedIn();
+  };
+  const handlePressOut = disabled ? undefined : () => {
+    onScalePressOut();
+    onPressedOut();
+  };
+  const highlighted = pressed && !disabled;
+  const surface = active ? palette.activeSurface : highlighted ? palette.surfaceHover : palette.surface;
+  const ring = highlighted ? palette.ringHover : palette.ring;
+  const iconColor = active ? palette.activeIcon : palette.icon;
+  const containerStyle = useMemo(() => {
+    return {
+      width: geo.diameter,
+      height: geo.diameter,
+      borderRadius: RADIUS,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: StyleSheet.hairlineWidth * 2,
+      borderColor: ring,
+      // Soft shadow lives on the (non-clipping) Pressable so it renders on iOS —
+      // the blur/tint are clipped by an inner overflow:hidden layer instead.
+      shadowColor: palette.shadow,
+      shadowOffset: {
+        width: 0,
+        height: 2
+      },
+      shadowOpacity: 1,
+      shadowRadius: 8,
+      elevation: 4
+    };
+  }, [geo.diameter, ring, palette.shadow]);
+  const content = icon ?? children;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      transform: [{
+        scale: scaleAnim
+      }]
+    }, style],
+    children: /*#__PURE__*/_jsxs(Pressable, {
+      ...(className ? {
+        className
+      } : {}),
+      style: [containerStyle, disabled && styles.disabled],
+      onPress: disabled ? undefined : onPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: disabled,
+      hitSlop: hitSlop ?? DEFAULT_HIT_SLOP,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: {
+        disabled,
+        selected: active
+      },
+      testID: testID,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [StyleSheet.absoluteFill, styles.clip],
+        children: [!active && /*#__PURE__*/_jsx(BlurView, {
+          intensity: BLUR_INTENSITY,
+          tint: theme.isDark ? 'dark' : 'light',
+          experimentalBlurMethod: "dimezisBlurView",
+          style: StyleSheet.absoluteFill
+        }), /*#__PURE__*/_jsx(View, {
+          style: [StyleSheet.absoluteFill, {
+            backgroundColor: surface
+          }]
+        })]
+      }), content != null && /*#__PURE__*/_jsx(View, {
+        style: {
+          width: geo.iconBox,
+          height: geo.iconBox,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: applyIconColor(content, iconColor)
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  clip: {
+    borderRadius: RADIUS,
+    overflow: 'hidden'
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+export const FrostedIconButton = /*#__PURE__*/memo(FrostedIconButtonComponent);
+FrostedIconButton.displayName = 'FrostedIconButton';
+//# sourceMappingURL=FrostedIconButton.js.map

package/lib/module/frosted-icon-button/FrostedIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","Animated","Pressable","StyleSheet","View","BlurView","useTheme","usePressAnimation","useInteractionState","applyIconColor","resolveFrostedPalette","resolveFrostedSize","jsx","_jsx","jsxs","_jsxs","RADIUS","PRESS_SCALE","DEFAULT_HIT_SLOP","top","bottom","left","right","BLUR_INTENSITY","FrostedIconButtonComponent","onPress","icon","children","active","disabled","size","accessibilityLabel","accessibilityHint","style","className","testID","hitSlop","theme","geo","palette","colors","isDark","scaleAnim","onPressIn","onScalePressIn","onPressOut","onScalePressOut","undefined","state","pressed","onIn","onPressedIn","onOut","onPressedOut","handlePressIn","handlePressOut","highlighted","surface","activeSurface","surfaceHover","ring","ringHover","iconColor","activeIcon","containerStyle","width","diameter","height","borderRadius","alignItems","justifyContent","borderWidth","hairlineWidth","borderColor","shadowColor","shadow","shadowOffset","shadowOpacity","shadowRadius","elevation","content","transform","scale","styles","accessibilityRole","accessibilityState","selected","absoluteFill","clip","intensity","tint","experimentalBlurMethod","backgroundColor","iconBox","create","overflow","opacity","FrostedIconButton","displayName"],"sourceRoot":"../../../src","sources":["frosted-icon-button/FrostedIconButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/frosted-icon-button/FrostedIconButton.web.js

@@ -0,0 +1,161 @@
+"use strict";
+
+import React, { memo, useCallback, useEffect, useId, useMemo } from 'react';
+import { useTheme } from "../theme/use-theme.js";
+import { flattenWebStyle } from "../styles/flatten-web-style.js";
+import { applyIconColor, resolveFrostedPalette, resolveFrostedSize } from "./shared.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RADIUS = 999;
+const PRESS_SCALE = 0.94;
+
+// ---------------------------------------------------------------------------
+//  Per-state CSS injection
+//
+//  Inline styles cannot express `:hover` / `:focus-visible` / `:active`. We
+//  inject one static stylesheet (keyed by id, once) defining the interaction
+//  behavior for the base `bloom-frosted-icon-btn` class; per-instance resolved
+//  colors are passed in as inline CSS custom properties. Self-injecting the CSS
+//  (rather than exporting a string for consumers to paste) is the Bloom web-fork
+//  convention — an unresolvable rule would fail silently otherwise.
+// ---------------------------------------------------------------------------
+
+const STYLE_ID = 'bloom-frosted-icon-button-web-css';
+const BLOOM_FROSTED_ICON_BUTTON_CSS = `
+.bloom-frosted-icon-btn {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border-style: solid;
+  border-width: 1px;
+  font-family: inherit;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color 140ms ease, border-color 140ms ease,
+    box-shadow 160ms ease, transform 120ms ease;
+}
+.bloom-frosted-icon-btn:disabled,
+.bloom-frosted-icon-btn[aria-disabled="true"] {
+  cursor: default;
+  opacity: 0.5;
+}
+.bloom-frosted-icon-btn:not(:disabled):not([aria-disabled="true"]):not([data-active="true"]):hover {
+  background-color: var(--bloom-frosted-hover-bg);
+  border-color: var(--bloom-frosted-hover-ring);
+}
+.bloom-frosted-icon-btn:not(:disabled):not([aria-disabled="true"]):active {
+  transform: scale(var(--bloom-frosted-press-scale, 1));
+}
+.bloom-frosted-icon-btn:focus-visible {
+  outline: 2px solid var(--bloom-frosted-ring-focus, currentColor);
+  outline-offset: 2px;
+}
+`;
+function useFrostedIconButtonCss() {
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = BLOOM_FROSTED_ICON_BUTTON_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+const FrostedIconButtonWebComponent = ({
+  onPress,
+  onClick,
+  icon,
+  children,
+  active = false,
+  disabled = false,
+  size = 'md',
+  accessibilityLabel,
+  'aria-label': ariaLabelProp,
+  accessibilityHint,
+  style,
+  className,
+  testID,
+  id,
+  title,
+  type = 'button'
+}) => {
+  useFrostedIconButtonCss();
+  const theme = useTheme();
+  const reactId = useId();
+  const resolvedId = id ?? `bloom-frosted-icon-btn-${reactId}`;
+  const geo = useMemo(() => resolveFrostedSize(size), [size]);
+  const palette = useMemo(() => resolveFrostedPalette(theme.colors, theme.isDark), [theme.colors, theme.isDark]);
+  const iconColor = active ? palette.activeIcon : palette.icon;
+  const blur = `blur(${geo.blur}px)`;
+  const containerStyle = useMemo(() => {
+    return {
+      width: geo.diameter,
+      height: geo.diameter,
+      borderRadius: RADIUS,
+      backgroundColor: active ? palette.activeSurface : palette.surface,
+      borderColor: palette.ring,
+      color: iconColor,
+      // Real CSS backdrop blur so the chip frosts over content behind it. The
+      // solid `active` state drops the blur. Both prefixed forms for Safari.
+      backdropFilter: active ? 'none' : blur,
+      WebkitBackdropFilter: active ? 'none' : blur,
+      // Soft shadow kept in BOTH modes so the chip has an edge on a solid bg.
+      boxShadow: `0 2px 8px ${palette.shadow}`,
+      ['--bloom-frosted-hover-bg']: palette.surfaceHover,
+      ['--bloom-frosted-hover-ring']: palette.ringHover,
+      ['--bloom-frosted-ring-focus']: palette.focusRing,
+      ['--bloom-frosted-press-scale']: PRESS_SCALE
+    };
+  }, [geo.diameter, active, palette.activeSurface, palette.surface, palette.ring, palette.surfaceHover, palette.ringHover, palette.focusRing, palette.shadow, iconColor, blur]);
+  const handleClick = useCallback(event => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    onPress?.();
+  }, [disabled, onClick, onPress]);
+  const ariaLabel = ariaLabelProp ?? accessibilityLabel;
+  const composedClassName = ['bloom-frosted-icon-btn'].concat(className ? [className] : []).join(' ');
+
+  // `style` is an RN `StyleProp` (array-capable). Flatten before spreading into
+  // the raw DOM `style` object so an array form never leaks numeric keys onto
+  // the element's CSSStyleDeclaration. See `flattenWebStyle` for the rationale.
+  const resolvedStyle = flattenWebStyle(style);
+  const content = icon ?? children;
+  return /*#__PURE__*/_jsx("button", {
+    id: resolvedId,
+    type: type,
+    className: composedClassName,
+    style: {
+      ...containerStyle,
+      ...resolvedStyle
+    },
+    onClick: handleClick,
+    disabled: disabled,
+    "aria-disabled": disabled || undefined,
+    "aria-label": ariaLabel,
+    "aria-pressed": active,
+    "data-active": active || undefined,
+    title: title ?? accessibilityHint,
+    "data-testid": testID,
+    children: content != null && /*#__PURE__*/_jsx("span", {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: geo.iconBox,
+        height: geo.iconBox
+      },
+      children: applyIconColor(content, iconColor)
+    })
+  });
+};
+export const FrostedIconButton = /*#__PURE__*/memo(FrostedIconButtonWebComponent);
+FrostedIconButton.displayName = 'FrostedIconButton';
+//# sourceMappingURL=FrostedIconButton.web.js.map

package/lib/module/frosted-icon-button/FrostedIconButton.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useCallback","useEffect","useId","useMemo","useTheme","flattenWebStyle","applyIconColor","resolveFrostedPalette","resolveFrostedSize","jsx","_jsx","RADIUS","PRESS_SCALE","STYLE_ID","BLOOM_FROSTED_ICON_BUTTON_CSS","useFrostedIconButtonCss","document","getElementById","style","createElement","id","textContent","head","appendChild","FrostedIconButtonWebComponent","onPress","onClick","icon","children","active","disabled","size","accessibilityLabel","ariaLabelProp","accessibilityHint","className","testID","title","type","theme","reactId","resolvedId","geo","palette","colors","isDark","iconColor","activeIcon","blur","containerStyle","width","diameter","height","borderRadius","backgroundColor","activeSurface","surface","borderColor","ring","color","backdropFilter","WebkitBackdropFilter","boxShadow","shadow","surfaceHover","ringHover","focusRing","handleClick","event","preventDefault","ariaLabel","composedClassName","concat","join","resolvedStyle","content","undefined","display","alignItems","justifyContent","iconBox","FrostedIconButton","displayName"],"sourceRoot":"../../../src","sources":["frosted-icon-button/FrostedIconButton.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/frosted-icon-button/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { FrostedIconButton } from './FrostedIconButton';
+//# sourceMappingURL=index.js.map

package/lib/module/frosted-icon-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FrostedIconButton"],"sourceRoot":"../../../src","sources":["frosted-icon-button/index.ts"],"mappings":";;AAAA,SAASA,iBAAiB,QAAQ,qBAAqB","ignoreList":[]}

package/lib/module/frosted-icon-button/index.web.js

@@ -0,0 +1,11 @@
+"use strict";
+
+// Web variant of the `./frosted-icon-button` barrel.
+//
+// The default barrel (`./index.ts`) re-exports the React Native implementation,
+// which frosts via `expo-blur`'s `BlurView`. The web fork (`./FrostedIconButton.web`)
+// renders a real HTML `<button>` and frosts via a real CSS `backdrop-filter` —
+// no `expo-blur` import ever reaches a web bundler. Web bundlers select this
+// file via the `"browser"` export condition in `package.json`.
+export { FrostedIconButton } from "./FrostedIconButton.web.js";
+//# sourceMappingURL=index.web.js.map

package/lib/module/frosted-icon-button/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FrostedIconButton"],"sourceRoot":"../../../src","sources":["frosted-icon-button/index.web.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,iBAAiB,QAAQ,4BAAyB","ignoreList":[]}

package/lib/module/frosted-icon-button/shared.js

@@ -0,0 +1,107 @@
+"use strict";
+
+import { cloneElement, isValidElement } from 'react';
+import { withAlpha } from "../theme/color-utils.js";
+
+/** Resolved pixel geometry for a given size prop. */
+
+const SIZE_CONFIG = {
+  // 32px (`h-8`) — dense.
+  sm: {
+    diameter: 32,
+    iconBox: 18,
+    blur: 10
+  },
+  // 36px (`h-9`) — the default comfortable header/overlay action.
+  md: {
+    diameter: 36,
+    iconBox: 20,
+    blur: 12
+  }
+};
+
+/**
+ * Resolve a `size` prop (preset name or raw pixel diameter) to concrete pixel
+ * geometry. A numeric size sets the diameter directly, derives the icon box as
+ * `round(size * 0.56)` (min 16px) and scales the blur radius with the diameter.
+ * Mirrored byte-for-byte between the native and web forks via this one module.
+ */
+export function resolveFrostedSize(size) {
+  if (typeof size === 'number') {
+    return {
+      diameter: size,
+      iconBox: Math.max(16, Math.round(size * 0.56)),
+      blur: Math.max(8, Math.round(size * 0.34))
+    };
+  }
+  return SIZE_CONFIG[size];
+}
+
+/**
+ * Per-mode alpha weights for the translucent surface + hairline ring.
+ *
+ * These are calibrated so the chip READS on a SOLID background independently of
+ * any content behind it: on a dark theme the surface is a LOW-OPACITY LIGHT tint
+ * of the foreground token (lighter than the near-black page — NOT a dark `card`
+ * fill that sinks into the background), and on a light theme it is a subtle dark
+ * tint. E.g. on a `rgb(11 11 15)` page a `rgba(237,237,237,0.14)` surface
+ * composites to ≈`rgb(43 43 47)` — a clearly visible frosted circle.
+ */
+const SURFACE_ALPHA = {
+  light: 0.06,
+  dark: 0.14
+};
+const SURFACE_ALPHA_HOVER = {
+  light: 0.1,
+  dark: 0.22
+};
+const RING_ALPHA = {
+  light: 0.12,
+  dark: 0.22
+};
+const RING_ALPHA_HOVER = {
+  light: 0.18,
+  dark: 0.3
+};
+
+/** Theme-aware colors for every frosted-button surface state. */
+
+/**
+ * Build the frosted palette from the resolved theme colors. Everything is
+ * derived from Bloom tokens (`text`/foreground, `primary`, `shadow`) so it is
+ * fully theme-aware and Oxy-agnostic — no hardcoded colors.
+ */
+export function resolveFrostedPalette(colors, isDark) {
+  const k = isDark ? 'dark' : 'light';
+  return {
+    surface: withAlpha(colors.text, SURFACE_ALPHA[k]),
+    surfaceHover: withAlpha(colors.text, SURFACE_ALPHA_HOVER[k]),
+    ring: withAlpha(colors.text, RING_ALPHA[k]),
+    ringHover: withAlpha(colors.text, RING_ALPHA_HOVER[k]),
+    icon: colors.text,
+    activeSurface: colors.primary,
+    activeIcon: colors.primaryForeground,
+    focusRing: colors.primary,
+    shadow: colors.shadow
+  };
+}
+
+/** A React element that accepts a `fill` prop (Bloom icons, raw SVG). */
+
+/**
+ * Inject `color` as the icon's `fill` — but only as a FALLBACK: if the caller
+ * already set an explicit `fill` on the icon element, it wins and the node is
+ * returned untouched. Bloom icons resolve their paint as `fill ?? style.color`,
+ * so a bare `<Icons.X />` gets the theme-aware color for free while an
+ * explicitly-colored icon is never overridden. Non-element children (plain
+ * text/strings) pass through unchanged.
+ */
+export function applyIconColor(node, color) {
+  if (! /*#__PURE__*/isValidElement(node)) return node;
+  const el = node;
+  if (el.props.fill != null) return node;
+  return /*#__PURE__*/cloneElement(el, {
+    fill: color
+  });
+}
+//# sourceMappingURL=shared.js.map

package/lib/module/frosted-icon-button/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cloneElement","isValidElement","withAlpha","SIZE_CONFIG","sm","diameter","iconBox","blur","md","resolveFrostedSize","size","Math","max","round","SURFACE_ALPHA","light","dark","SURFACE_ALPHA_HOVER","RING_ALPHA","RING_ALPHA_HOVER","resolveFrostedPalette","colors","isDark","k","surface","text","surfaceHover","ring","ringHover","icon","activeSurface","primary","activeIcon","primaryForeground","focusRing","shadow","applyIconColor","node","color","el","props","fill"],"sourceRoot":"../../../src","sources":["frosted-icon-button/shared.ts"],"mappings":";;AAAA,SAASA,YAAY,EAAEC,cAAc,QAA2C,OAAO;AAEvF,SAASC,SAAS,QAAQ,yBAAsB;;AAIhD;;AAUA,MAAMC,WAA2D,GAAG;EAClE;EACAC,EAAE,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,EAAE;IAAEC,IAAI,EAAE;EAAG,CAAC;EAC3C;EACAC,EAAE,EAAE;IAAEH,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,EAAE;IAAEC,IAAI,EAAE;EAAG;AAC5C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,kBAAkBA,CAACC,IAAoC,EAAmB;EACxF,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IAC5B,OAAO;MACLL,QAAQ,EAAEK,IAAI;MACdJ,OAAO,EAAEK,IAAI,CAACC,GAAG,CAAC,EAAE,EAAED,IAAI,CAACE,KAAK,CAACH,IAAI,GAAG,IAAI,CAAC,CAAC;MAC9CH,IAAI,EAAEI,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,KAAK,CAACH,IAAI,GAAG,IAAI,CAAC;IAC3C,CAAC;EACH;EACA,OAAOP,WAAW,CAACO,IAAI,CAAC;AAC1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,aAAa,GAAG;EAAEC,KAAK,EAAE,IAAI;EAAEC,IAAI,EAAE;AAAK,CAAU;AAC1D,MAAMC,mBAAmB,GAAG;EAAEF,KAAK,EAAE,GAAG;EAAEC,IAAI,EAAE;AAAK,CAAU;AAC/D,MAAME,UAAU,GAAG;EAAEH,KAAK,EAAE,IAAI;EAAEC,IAAI,EAAE;AAAK,CAAU;AACvD,MAAMG,gBAAgB,GAAG;EAAEJ,KAAK,EAAE,IAAI;EAAEC,IAAI,EAAE;AAAI,CAAU;;AAE5D;;AA0BA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,qBAAqBA,CAACC,MAAmB,EAAEC,MAAe,EAAkB;EAC1F,MAAMC,CAAC,GAAGD,MAAM,GAAG,MAAM,GAAG,OAAO;EACnC,OAAO;IACLE,OAAO,EAAEtB,SAAS,CAACmB,MAAM,CAACI,IAAI,EAAEX,aAAa,CAACS,CAAC,CAAC,CAAC;IACjDG,YAAY,EAAExB,SAAS,CAACmB,MAAM,CAACI,IAAI,EAAER,mBAAmB,CAACM,CAAC,CAAC,CAAC;IAC5DI,IAAI,EAAEzB,SAAS,CAACmB,MAAM,CAACI,IAAI,EAAEP,UAAU,CAACK,CAAC,CAAC,CAAC;IAC3CK,SAAS,EAAE1B,SAAS,CAACmB,MAAM,CAACI,IAAI,EAAEN,gBAAgB,CAACI,CAAC,CAAC,CAAC;IACtDM,IAAI,EAAER,MAAM,CAACI,IAAI;IACjBK,aAAa,EAAET,MAAM,CAACU,OAAO;IAC7BC,UAAU,EAAEX,MAAM,CAACY,iBAAiB;IACpCC,SAAS,EAAEb,MAAM,CAACU,OAAO;IACzBI,MAAM,EAAEd,MAAM,CAACc;EACjB,CAAC;AACH;;AAEA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAACC,IAAe,EAAEC,KAAa,EAAa;EACxE,IAAI,eAACrC,cAAc,CAACoC,IAAI,CAAC,EAAE,OAAOA,IAAI;EACtC,MAAME,EAAE,GAAGF,IAAuB;EAClC,IAAIE,EAAE,CAACC,KAAK,CAACC,IAAI,IAAI,IAAI,EAAE,OAAOJ,IAAI;EACtC,oBAAOrC,YAAY,CAACuC,EAAE,EAAE;IAAEE,IAAI,EAAEH;EAAM,CAAC,CAAC;AAC1C","ignoreList":[]}

package/lib/module/frosted-icon-button/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/frosted-icon-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["frosted-icon-button/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/index.js

@@ -29,6 +29,7 @@ export * from './portal';
 export { Dialog, DIALOG_SHEET_BACKDROP_TESTID, BloomDialogProvider, alert, useDialogContext, useDialogControl } from './dialog';
 export * from './button';
 export { Fab } from './fab';
+export { FrostedIconButton } from './frosted-icon-button';
 export * from "./grouped-buttons/index.js";
 export * from "./divider/index.js";
 export * from "./radio-indicator/index.js";