@oxyhq/bloom 0.35.8 → 0.36.0

package/src/frosted-icon-button/FrostedIconButton.tsx

@@ -0,0 +1,156 @@
+import React, { memo, useMemo } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { BlurView } from 'expo-blur';
+
+import { useTheme } from '../theme/use-theme';
+import { usePressAnimation } from '../hooks/usePressAnimation';
+import { useInteractionState } from '../hooks/useInteractionState';
+import {
+  applyIconColor,
+  resolveFrostedPalette,
+  resolveFrostedSize,
+} from './shared';
+import type { FrostedIconButtonProps } from './types';
+
+export type { FrostedIconButtonProps, FrostedIconButtonSize } from './types';
+
+const RADIUS = 999;
+const PRESS_SCALE = 0.94;
+const DEFAULT_HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
+
+// 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: React.FC<FrostedIconButtonProps> = ({
+  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((): ViewStyle => {
+    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 (
+    <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, style]}>
+      <Pressable
+        {...(className ? ({ className } as Record<string, string>) : {})}
+        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}
+      >
+        {/* Clip layer: blur (frosted only) + translucent/solid tint, rounded. */}
+        <View style={[StyleSheet.absoluteFill, styles.clip]}>
+          {!active && (
+            <BlurView
+              intensity={BLUR_INTENSITY}
+              tint={theme.isDark ? 'dark' : 'light'}
+              experimentalBlurMethod="dimezisBlurView"
+              style={StyleSheet.absoluteFill}
+            />
+          )}
+          <View style={[StyleSheet.absoluteFill, { backgroundColor: surface }]} />
+        </View>
+        {content != null && (
+          <View
+            style={{
+              width: geo.iconBox,
+              height: geo.iconBox,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {applyIconColor(content, iconColor)}
+          </View>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  clip: {
+    borderRadius: RADIUS,
+    overflow: 'hidden',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
+export const FrostedIconButton = memo(FrostedIconButtonComponent);
+FrostedIconButton.displayName = 'FrostedIconButton';

package/src/frosted-icon-button/FrostedIconButton.web.tsx

@@ -0,0 +1,207 @@
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  type CSSProperties,
+  type MouseEvent,
+} from 'react';
+
+import { useTheme } from '../theme/use-theme';
+import { flattenWebStyle } from '../styles/flatten-web-style';
+import {
+  applyIconColor,
+  resolveFrostedPalette,
+  resolveFrostedSize,
+} from './shared';
+import type { FrostedIconButtonProps } from './types';
+
+export type { FrostedIconButtonProps, FrostedIconButtonSize } from './types';
+
+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(): void {
+  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: React.FC<FrostedIconButtonProps> = ({
+  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((): CSSProperties => {
+    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' as string]: palette.surfaceHover,
+      ['--bloom-frosted-hover-ring' as string]: palette.ringHover,
+      ['--bloom-frosted-ring-focus' as string]: palette.focusRing,
+      ['--bloom-frosted-press-scale' as string]: 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: MouseEvent<HTMLButtonElement>) => {
+      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 (
+    <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}
+    >
+      {content != null && (
+        <span
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: geo.iconBox,
+            height: geo.iconBox,
+          }}
+        >
+          {applyIconColor(content, iconColor)}
+        </span>
+      )}
+    </button>
+  );
+};
+
+export const FrostedIconButton = memo(FrostedIconButtonWebComponent);
+FrostedIconButton.displayName = 'FrostedIconButton';

package/src/frosted-icon-button/index.ts

@@ -0,0 +1,2 @@
+export { FrostedIconButton } from './FrostedIconButton';
+export type { FrostedIconButtonProps, FrostedIconButtonSize } from './types';

package/src/frosted-icon-button/index.web.ts

@@ -0,0 +1,9 @@
+// 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';
+export type { FrostedIconButtonProps, FrostedIconButtonSize } from './types';

package/src/frosted-icon-button/shared.ts

@@ -0,0 +1,118 @@
+import { cloneElement, isValidElement, type ReactNode, type ReactElement } from 'react';
+
+import { withAlpha } from '../theme/color-utils';
+import type { ThemeColors } from '../theme/types';
+import type { FrostedIconButtonSize } from './types';
+
+/** Resolved pixel geometry for a given size prop. */
+export interface FrostedGeometry {
+  /** Circle diameter (width === height). */
+  diameter: number;
+  /** Centered box the icon renders inside. */
+  iconBox: number;
+  /** Backdrop-blur radius in px (web) — scaled for BlurView intensity on native. */
+  blur: number;
+}
+
+const SIZE_CONFIG: Record<FrostedIconButtonSize, FrostedGeometry> = {
+  // 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: FrostedIconButtonSize | number): FrostedGeometry {
+  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 } as const;
+const SURFACE_ALPHA_HOVER = { light: 0.1, dark: 0.22 } as const;
+const RING_ALPHA = { light: 0.12, dark: 0.22 } as const;
+const RING_ALPHA_HOVER = { light: 0.18, dark: 0.3 } as const;
+
+/** Theme-aware colors for every frosted-button surface state. */
+export interface FrostedPalette {
+  /** Translucent surface at rest. */
+  surface: string;
+  /** Translucent surface on hover / press (slightly lighter). */
+  surfaceHover: string;
+  /** Hairline ring/border at rest. */
+  ring: string;
+  /** Hairline ring/border on hover / press. */
+  ringHover: string;
+  /** Icon color when frosted (rest). */
+  icon: string;
+  /** Opaque surface for the solid `active` state. */
+  activeSurface: string;
+  /** Icon color when `active`. */
+  activeIcon: string;
+  /** Focus-ring color (web `:focus-visible` outline). */
+  focusRing: string;
+  /**
+   * Soft drop shadow color. Intentionally kept in BOTH modes (never
+   * `dark:shadow-none`) so the chip has an edge over an image and reads as a
+   * distinct button. The token already carries its own alpha.
+   */
+  shadow: string;
+}
+
+/**
+ * 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: ThemeColors, isDark: boolean): FrostedPalette {
+  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). */
+type FillableElement = ReactElement<{ fill?: unknown }>;
+
+/**
+ * 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: ReactNode, color: string): ReactNode {
+  if (!isValidElement(node)) return node;
+  const el = node as FillableElement;
+  if (el.props.fill != null) return node;
+  return cloneElement(el, { fill: color });
+}

package/src/frosted-icon-button/types.ts

@@ -0,0 +1,81 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * Size of the {@link FrostedIconButton}.
+ *
+ *   - `sm` — 32px circle (`h-8`), 18px icon box. Dense toolbars / stacked chips.
+ *   - `md` — 36px circle (`h-9`), 20px icon box. The default; a comfortable
+ *     header/overlay action.
+ *
+ * A raw pixel `number` is also accepted for an exact diameter; the icon box is
+ * derived as `round(size * 0.56)` (min 16px) and the blur radius scales with it.
+ */
+export type FrostedIconButtonSize = 'sm' | 'md';
+
+export interface FrostedIconButtonProps {
+  /** Press handler. */
+  onPress?: () => void;
+
+  /**
+   * The icon to render, centered inside the circle. Typically a Bloom icon
+   * element (`<Icons.ArrowLeft… />`). If the icon does not set its own `fill`,
+   * the button injects the theme-aware icon color (foreground when frosted,
+   * `primaryForeground` when `active`) as a fallback so a bare icon is colored
+   * correctly out of the box; an explicit `fill` on the icon always wins.
+   *
+   * `children` is accepted as an alias — if both are given, `icon` wins.
+   */
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+
+  /**
+   * Solid "on" state for toggles. When true the button drops its translucency
+   * and backdrop blur and fills with the brand `primary` token (icon tinted
+   * `primaryForeground`), so an enabled toggle reads unmistakably as active.
+   * Exposed to assistive tech as `aria-pressed` (web) / the selected a11y state.
+   */
+  active?: boolean;
+
+  disabled?: boolean;
+
+  /**
+   * A preset (`'sm' | 'md'`) or a raw pixel diameter (`number`). Defaults to
+   * `'md'` (36px). See {@link FrostedIconButtonSize}.
+   */
+  size?: FrostedIconButtonSize | number;
+
+  /** Required for icon-only buttons so screen readers announce the action. */
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+
+  /** Container style override (merged last). */
+  style?: StyleProp<ViewStyle>;
+  /** NativeWind / DOM className passthrough. */
+  className?: string;
+  testID?: string;
+
+  /**
+   * Native press hit target padding. Defaults to a generous slop so the compact
+   * circle is comfortable to tap. No-op on web.
+   */
+  hitSlop?: { top: number; bottom: number; left: number; right: number };
+
+  // -------------------------------------------------------------------------
+  //  Web-only props
+  //
+  //  No-ops in the native (`Pressable`) implementation — present on the shared
+  //  type so a single `<FrostedIconButton>` call site type-checks on both
+  //  platforms. The web fork renders a real DOM `<button>` and consumes them.
+  // -------------------------------------------------------------------------
+
+  /** Web click handler. Fires together with `onPress`. */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** `aria-label` (web only). Falls back to `accessibilityLabel`. */
+  'aria-label'?: string;
+  /** `title` tooltip attribute (web only). */
+  title?: string;
+  /** Inline DOM `id` (web only). */
+  id?: string;
+  /** HTML button `type` (web only). Defaults to `'button'`. */
+  type?: 'button' | 'submit' | 'reset';
+}

package/src/index.ts

@@ -75,6 +75,8 @@ export type {
 export * from './button';
 export { Fab } from './fab';
 export type { FabProps, FabVariant, FabSize, FabPlacement } from './fab';
+export { FrostedIconButton } from './frosted-icon-button';
+export type { FrostedIconButtonProps, FrostedIconButtonSize } from './frosted-icon-button';
 export * from './grouped-buttons';
 export * from './divider';
 export * from './radio-indicator';

package/src/index.web.ts

@@ -80,6 +80,8 @@ export type {
 export * from './button/index.web';
 export { Fab } from './fab/index.web';
 export type { FabProps, FabVariant, FabSize, FabPlacement } from './fab/index.web';
+export { FrostedIconButton } from './frosted-icon-button/index.web';
+export type { FrostedIconButtonProps, FrostedIconButtonSize } from './frosted-icon-button/index.web';
 export * from './grouped-buttons';
 export * from './divider';
 export * from './radio-indicator';