@oxy.so/bloom 3.6.0 → 4.0.0

package/src/bottom-bar/BottomBar.web.tsx

@@ -0,0 +1,11 @@
+import { createTabBar, createTabBarButton } from '../tab-bar/TabBarBase';
+import { TabBarSurface } from '../tab-bar/surface.web';
+import { ProgressiveBlur } from '../progressive-blur/index.web';
+import { BottomBarGlyph } from './glyph';
+import { BottomBarBase } from './BottomBarBase';
+import type { BottomBarProps } from './types';
+const Navigation = createTabBar(TabBarSurface, ProgressiveBlur);
+const Item = createTabBarButton(BottomBarGlyph);
+export function BottomBar(props: BottomBarProps) {
+  return <BottomBarBase {...props} Navigation={Navigation} Item={Item} Blur={ProgressiveBlur} />;
+}

package/src/bottom-bar/BottomBarBase.tsx

@@ -0,0 +1,80 @@
+import { useRef, useState, type ComponentType } from 'react';
+import { View, ScrollView, Keyboard, Platform } from 'react-native';
+import { useEffect } from 'react';
+import Animated, { useAnimatedReaction, useAnimatedStyle, interpolate, runOnJS, useReducedMotion } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useClaimBottomEdge } from '../layout/bottom-edge';
+import { windowEdgeGap } from '../layout/edge';
+import { useMinimizeState } from '../tab-bar/context';
+import { EXPANDED_HEIGHT, MINIMIZED_HEIGHT, BLUR_BLEED, MAX_EXPANDED_ITEM_WIDTH, ROW_PAD_H } from '../tab-bar/shared';
+import type { TabBarProps, TabBarButtonProps } from '../tab-bar/types';
+import type { ProgressiveBlurProps } from '../progressive-blur/types';
+import type { BottomBarProps } from './types';
+
+interface Props extends BottomBarProps {
+  Navigation: ComponentType<TabBarProps>;
+  Item: ComponentType<TabBarButtonProps>;
+  Blur: ComponentType<ProgressiveBlurProps>;
+}
+export function BottomBarBase({ Navigation, Item, Blur, items, value, onValueChange, action,
+  actionBehavior = 'hide', material = 'translucent', minimizeProgress, blur = true, maxWidth = 560, style, testID }: Props) {
+  const insets = useSafeAreaInsets();
+  const minimize = useMinimizeState();
+  const progress = minimizeProgress ?? minimize.progress;
+  const reducedMotion = useReducedMotion();
+  const hideAction = actionBehavior === 'hide' && items.length > 0;
+  const [actionHidden, setActionHidden] = useState(() => hideAction && progress.value > 0.01);
+  const actionRef = useRef<View>(null);
+  const [actionWidth, setActionWidth] = useState<number | null>(null);
+  const [rowWidth, setRowWidth] = useState(0);
+  const actionSpace = action ? (actionWidth ?? 56) + 10 : 0;
+  const navigationWidth = Math.max(0, Math.min(rowWidth - 24 - actionSpace, items.length * MAX_EXPANDED_ITEM_WIDTH + ROW_PAD_H * 2));
+  // Only interaction eligibility crosses to JS; all motion stays on the shared UI signal.
+  useAnimatedReaction(() => hideAction && progress.value > 0.01, (hidden, previous) => {
+    if (hidden !== previous) runOnJS(setActionHidden)(hidden);
+  }, [hideAction, progress, setActionHidden]);
+  useEffect(() => {
+    if (Platform.OS !== 'web') return;
+    const node = actionRef.current as unknown as HTMLElement | null;
+    if (!node) return;
+    if (actionHidden && node.contains(document.activeElement)) (document.activeElement as HTMLElement | null)?.blur?.();
+    node.inert = actionHidden;
+  }, [actionHidden]);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const bottom = windowEdgeGap(insets.bottom);
+  useEffect(() => {
+    if (Platform.OS === 'web') return;
+    const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
+    const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
+    return () => { show.remove(); hide.remove(); };
+  }, []);
+  useClaimBottomEdge(keyboardVisible ? 0 : bottom + EXPANDED_HEIGHT);
+  const rowStyle = useAnimatedStyle(() => ({
+    height: interpolate(reducedMotion ? Number(progress.value > 0.01) : progress.value, [0, 1], [EXPANDED_HEIGHT, MINIMIZED_HEIGHT], 'clamp'),
+  }), [progress, reducedMotion]);
+  const actionStyle = useAnimatedStyle(() => {
+    const amount = hideAction ? Math.min(1, Math.max(0, reducedMotion ? Number(progress.value > 0.01) : progress.value)) : 0;
+    return {
+      ...(actionWidth == null ? {} : { width: actionWidth * (1 - amount) }),
+      marginLeft: items.length ? 10 * (1 - amount) : 0,
+      opacity: 1 - amount,
+      transform: [{ scale: 1 - amount * 0.15 }],
+    };
+  }, [progress, hideAction, reducedMotion, actionWidth, items.length]);
+  if (keyboardVisible || (!items.length && !action)) return null;
+  return <View testID={testID} pointerEvents="box-none" style={[{ height: bottom + EXPANDED_HEIGHT, justifyContent: 'flex-end' }, style]}>
+    {blur && material === 'translucent' && <Blur direction="bottom" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: bottom + EXPANDED_HEIGHT + BLUR_BLEED }} />}
+    <Animated.View onLayout={event => setRowWidth(event.nativeEvent.layout.width)} pointerEvents="box-none" style={[{ justifyContent: items.length ? 'center' : 'flex-end', alignSelf: 'center', width: '100%', maxWidth, paddingLeft: 12, paddingRight: 12, marginBottom: bottom, flexDirection: 'row', alignItems: 'flex-end' }, rowStyle]}>
+      {items.length > 0 && <View testID={testID ? `${testID}-navigation` : undefined} style={{ width: navigationWidth, minWidth: 0 }}><ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ minWidth: '100%' }}><View style={{ width: Math.max(navigationWidth, items.length * 44 + 8) }}><Navigation scrollable={navigationWidth > 0 && navigationWidth < items.length * 44 + 8} embedded blur={false} material={material} minimizeProgress={progress}
+        activeIndex={items.findIndex(item => item.name === value)} onIndexChange={index => { if (items[index]) onValueChange(items[index].name); }}>
+        {items.map((item, index) => <Item key={item.name} item={item} index={index} />)}
+      </Navigation></View></ScrollView></View>}
+      {action && <Animated.View ref={actionRef} pointerEvents={actionHidden ? 'none' : 'auto'}
+        accessibilityElementsHidden={actionHidden} importantForAccessibility={actionHidden ? 'no-hide-descendants' : 'auto'}
+        aria-hidden={actionHidden} testID={testID ? `${testID}-action` : undefined}
+        style={[{ flexShrink: 0, alignItems: 'flex-start', justifyContent: 'center' }, actionStyle]}>
+        <View onLayout={event => setActionWidth(event.nativeEvent.layout.width)} style={{ flexShrink: 0, ...(actionWidth == null ? {} : { width: actionWidth }) }}>{action}</View>
+      </Animated.View>}
+    </Animated.View>
+  </View>;
+}

package/src/bottom-bar/glyph.tsx

@@ -0,0 +1,7 @@
+import { View } from 'react-native';
+import { applyIconColor } from '../frosted-icon-button/shared';
+import type { TabBarGlyphProps } from '../tab-bar/shared';
+/** Deliberately neutral: the universal shell never links Apple-only peers. */
+export function BottomBarGlyph({ item, tint, size, active }: TabBarGlyphProps) {
+  return <View style={{ height: size, alignItems: 'center', justifyContent: 'center' }}>{applyIconColor(active ? item.activeIcon ?? item.icon : item.icon, tint)}</View>;
+}

package/src/bottom-bar/index.ts

@@ -0,0 +1,2 @@
+export { BottomBar } from './BottomBar';
+export type { BottomBarProps } from './types';

package/src/bottom-bar/index.web.ts

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/bottom-bar/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
+export { BottomBar } from './BottomBar.web';
+export type { BottomBarProps } from './types';

package/src/bottom-bar/types.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import type { TabBarItem } from '../tab-bar/types';
+
+export interface BottomBarProps {
+  items: TabBarItem[];
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Static action sibling; outside the navigation scrub detector. */
+  action?: ReactNode;
+  /** Hide the accessory while minimizing, returning on upward scroll. Default hide; standalone actions remain visible. */
+  actionBehavior?: 'hide' | 'visible';
+  material?: 'solid' | 'translucent';
+  minimizeProgress?: SharedValue<number>;
+  blur?: boolean;
+  maxWidth?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/breadcrumb/Breadcrumb.tsx

@@ -11,12 +11,11 @@ import Svg, { Path } from 'react-native-svg';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography/Typography';
-import { withAlpha } from '../theme/color-utils';
 import { borderRadius } from '../styles/tokens';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
-import { BUTTON_TRANSITION_MS, resolveButtonRamps } from '../button/shared';
+import { BUTTON_TRANSITION_MS } from '../button/shared';
 import type { Theme } from '../theme/types';
 import type { BreadcrumbItemProps, BreadcrumbProps } from './types';
 
@@ -47,10 +46,8 @@ interface BreadcrumbPalette {
 }
 
 function resolveBreadcrumbPalette(theme: Theme): BreadcrumbPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  return theme.isDark
-    ? { tertiary: n[600], secondary: n[500], hover: withAlpha(n[700], 0.6), ring: accent[500] }
-    : { tertiary: n[400], secondary: n[500], hover: n[100], ring: accent[500] };
+  const c = theme.colors;
+  return { tertiary: c.textSecondary, secondary: c.text, hover: c.backgroundSecondary, ring: c.primary };
 }
 
 const STYLE_ID = 'bloom-breadcrumb-web-css';

package/src/button/Button.tsx

@@ -1,3 +1,4 @@
+import type { LinkButtonProps } from './types';
 import React, { useMemo, memo, type ComponentType } from 'react';
 import {
   ActivityIndicator,
@@ -13,6 +14,7 @@ import {
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 import { styled } from 'react-native-css';
 
+import { useBloomAppearance } from '../appearance/context';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography/Typography';
 import { useInteractionState } from '../hooks/use-interaction-state';
@@ -20,25 +22,23 @@ import {
   BUTTON_GEOMETRY,
   BUTTON_RADIUS,
   BUTTON_SHADOW,
-  BUTTON_SIZE_ALIAS,
   ICON_BUTTON_ICON_SIZE,
   LINK_BUTTON_GAP,
-  iconOnlyWidth,
   isIconComponent,
+  resolveButtonRecipe,
+  BUTTON_SIZE_ALIAS,
+  resolveButtonGeometry,
   resolveButtonPalette,
   resolveButtonUnderline,
   type ButtonGradient,
   type ButtonResolvedSize,
 } from './shared';
-import type { ButtonProps, ButtonVariant, LinkButtonProps } from './types';
+import type { ButtonProps } from './types';
 
 export type {
-  ButtonProps,
-  ButtonVariant,
+  ButtonProps, LinkButtonProps,
   ButtonSize,
   ButtonIconComponent,
-  ButtonLinkTone,
-  LinkButtonProps,
 } from './types';
 
 /**
@@ -64,9 +64,9 @@ export type {
  */
 const SIZE_HIT_SLOP = {
   xs: { top: 10, bottom: 10, left: 0, right: 0 },
-  small: { top: 6, bottom: 6, left: 0, right: 0 },
-  medium: { top: 4, bottom: 4, left: 0, right: 0 },
-  large: { top: 0, bottom: 0, left: 0, right: 0 },
+  sm: { top: 6, bottom: 6, left: 0, right: 0 },
+  md: { top: 4, bottom: 4, left: 0, right: 0 },
+  lg: { top: 0, bottom: 0, left: 0, right: 0 },
 } as const satisfies Record<ButtonResolvedSize, NonNullable<ButtonProps['hitSlop']>>;
 
 /** A link hugs its 16–20px line box, so it needs the most vertical slack. */
@@ -74,9 +74,9 @@ const LINK_HIT_SLOP = { top: 12, bottom: 12, left: 0, right: 0 } as const;
 
 const SQUARE_HIT_SLOP = {
   xs: { top: 10, bottom: 10, left: 10, right: 10 },
-  small: { top: 6, bottom: 6, left: 6, right: 6 },
-  medium: { top: 4, bottom: 4, left: 4, right: 4 },
-  large: { top: 0, bottom: 0, left: 0, right: 0 },
+  sm: { top: 6, bottom: 6, left: 6, right: 6 },
+  md: { top: 4, bottom: 4, left: 4, right: 4 },
+  lg: { top: 0, bottom: 0, left: 0, right: 0 },
 } as const satisfies Record<ButtonResolvedSize, NonNullable<ButtonProps['hitSlop']>>;
 
 // ---------------------------------------------------------------------------
@@ -161,12 +161,15 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   onPress,
   children,
   disabled = false,
-  variant: variantProp = 'primary',
-  size: sizeProp = 'medium',
+  appearance: appearanceProp,
+  variant: variantProp,
+  tone: toneProp,
+  size: sizeProp,
   style,
   textStyle,
   icon,
-  iconPosition = 'left',
+  leading,
+  trailing,
   leadingIcon: LeadingIcon,
   trailingIcon: TrailingIcon,
   iconOnly = false,
@@ -187,23 +190,20 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   'aria-haspopup': ariaHasPopup,
 }) => {
   const theme = useTheme();
-  // The shadcn `size="icon"` shorthand also selects the icon variant unless an
-  // explicit variant was given by the caller.
-  const variant: ButtonVariant =
-    sizeProp === 'icon' && variantProp === 'primary' ? 'icon' : variantProp;
-  const size: ButtonResolvedSize = BUTTON_SIZE_ALIAS[sizeProp];
-  const geometry = BUTTON_GEOMETRY[size];
-  const isIconVariant = variant === 'icon';
-  const isSquare = iconOnly || isIconVariant;
-  const isText = variant === 'text';
-  const isLink = variant === 'link';
+  const recipe = resolveButtonRecipe(variantProp);
+  const appearance = appearanceProp ?? recipe.appearance;
+  const { size, tone } = useBloomAppearance({ size: sizeProp ? BUTTON_SIZE_ALIAS[sizeProp] : undefined, tone: toneProp ?? (variantProp ? recipe.tone : undefined) }, { size: 'md', tone: 'accent' });
+  const geometry = resolveButtonGeometry(size, textVariant);
+  const isSquare = iconOnly || variantProp === 'icon' || sizeProp === 'icon' || (icon != null && children == null);
+  const isIconVariant = isSquare;
+  const isLink = appearance === 'plain' && (href != null || variantProp === 'link');
   const isInteractionBlocked = disabled || loading;
   const iconSize = isIconVariant ? ICON_BUTTON_ICON_SIZE[size] : geometry.iconSize;
   const palette = useMemo(
-    () => resolveButtonPalette(variant, theme, linkTone),
-    [variant, theme, linkTone],
+    () => variantProp === 'link' && appearanceProp == null && toneProp == null ? resolveButtonPalette('link', theme, linkTone) : variantProp === 'inverse' && appearanceProp == null && toneProp == null ? resolveButtonPalette('inverse', theme) : resolveButtonPalette(appearance, theme, tone),
+    [appearance, theme, tone, variantProp, appearanceProp, toneProp, linkTone],
   );
-  const underlineMode = resolveButtonUnderline(variant, underline);
+  const underlineMode = resolveButtonUnderline(isLink ? 'link' : 'primary', underline);
 
   // Pressed state drives the ACTIVE palette. Tracked through state rather than
   // Pressable's function-form `style`, which NativeWind's css-interop swallows
@@ -253,13 +253,9 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       styles.opacity = palette.disabledOpacity;
     }
     if (isSquare) {
-      styles.width = isIconVariant ? geometry.height : iconOnlyWidth(geometry, palette.borderWidth);
+      styles.width = geometry.height;
       styles.paddingHorizontal = 0;
     }
-    if (isText) {
-      styles.paddingVertical = 4;
-      styles.paddingHorizontal = 8;
-    }
     if (isLink && !isSquare) {
       // LinkButton: no container — the label's own line box and a 4px
       // gap. The touch target comes back through `hitSlop`.
@@ -269,7 +265,7 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       styles.borderRadius = 4;
     }
     return styles;
-  }, [geometry, palette, paint, theme.isDark, disabled, isSquare, isIconVariant, isText, isLink]);
+  }, [geometry, palette, paint, theme.isDark, disabled, isSquare, isIconVariant, isLink]);
 
   // The type ramp step (size, line height, tracking, weight) comes from the
   // typography `Text` through `variant`; only the padding and colour are ours.
@@ -302,7 +298,8 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       {LeadingIcon ? (
         <LeadingIcon width={iconSize} height={iconSize} fill={paint.foreground} />
       ) : null}
-      {iconPosition === 'left' && iconNode}
+      {leading}
+      {iconNode}
       {!isSquare && children != null && (
         <Text
           variant={textVariant ?? geometry.type}
@@ -312,7 +309,7 @@ const ButtonComponent: React.FC<ButtonProps> = ({
           {children}
         </Text>
       )}
-      {iconPosition === 'right' && iconNode}
+      {trailing}
       {!isSquare && TrailingIcon ? (
         <TrailingIcon width={iconSize} height={iconSize} fill={paint.foreground} />
       ) : null}
@@ -355,13 +352,14 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       {loading ? (
         <>
           <View
+            pointerEvents="none"
             style={styles.loadingHiddenContent}
             importantForAccessibility="no-hide-descendants"
             accessibilityElementsHidden
           >
             {content}
           </View>
-          <View style={styles.loadingOverlay}>
+          <View pointerEvents="none" style={styles.loadingOverlay}>
             <ActivityIndicator size="small" color={loadingColor ?? paint.foreground} />
           </View>
         </>
@@ -378,13 +376,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     opacity: 0,
-    pointerEvents: 'none',
   },
   loadingOverlay: {
     ...StyleSheet.absoluteFill,
     alignItems: 'center',
     justifyContent: 'center',
-    pointerEvents: 'none',
   },
 });
 

package/src/button/Button.web.tsx

@@ -1,3 +1,4 @@
+import type { LinkButtonProps } from './types';
 import React, {
   memo,
   useCallback,
@@ -8,6 +9,7 @@ import React, {
   type ReactElement,
 } from 'react';
 
+import { useBloomAppearance } from '../appearance/context';
 import { useTheme } from '../theme/use-theme';
 import { SpinnerIcon } from '../loading/SpinnerIcon.web';
 import { flattenWebStyle } from '../styles/flatten-web-style';
@@ -19,28 +21,25 @@ import {
 import {
   BUTTON_RADIUS,
   BUTTON_SHADOW,
-  BUTTON_SIZE_ALIAS,
   BUTTON_TRANSITION_MS,
   ICON_BUTTON_ICON_SIZE,
   LINK_BUTTON_GAP,
   LINK_BUTTON_UNDERLINE_OFFSET,
-  iconOnlyWidth,
   isIconComponent,
   paintToCssImage,
   resolveButtonGeometry,
+  resolveButtonRecipe,
+  BUTTON_SIZE_ALIAS,
   resolveButtonPalette,
   resolveButtonUnderline,
   type ButtonResolvedSize,
 } from './shared';
-import type { ButtonIconComponent, ButtonProps, ButtonVariant, LinkButtonProps } from './types';
+import type { ButtonIconComponent, ButtonProps } from './types';
 
 export type {
-  ButtonProps,
-  ButtonVariant,
+  ButtonProps, LinkButtonProps,
   ButtonSize,
   ButtonIconComponent,
-  ButtonLinkTone,
-  LinkButtonProps,
 } from './types';
 
 // ---------------------------------------------------------------------------
@@ -167,15 +166,17 @@ export const BLOOM_BUTTON_CSS = interactiveWebCss({
 
 const ButtonWebComponent: React.FC<ButtonProps> = ({
   onPress,
-  onClick,
   children,
   disabled = false,
-  variant = 'primary',
-  size: sizeProp = 'medium',
+  appearance: appearanceProp,
+  variant: variantProp,
+  tone: toneProp,
+  size: sizeProp,
   style,
   textStyle,
   icon,
-  iconPosition = 'left',
+  leading,
+  trailing,
   leadingIcon: LeadingIcon,
   trailingIcon: TrailingIcon,
   iconOnly = false,
@@ -189,7 +190,6 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   loading = false,
   loadingColor,
   accessibilityLabel,
-  'aria-label': ariaLabelProp,
   'aria-expanded': ariaExpanded,
   'aria-haspopup': ariaHasPopup,
   accessibilityHint,
@@ -204,32 +204,28 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   title,
   autoFocus,
   tabIndex,
-  fullWidth = false,
 }) => {
   useInteractiveWebCss(STYLE_ID, BLOOM_BUTTON_CSS);
   const theme = useTheme();
   const reactId = useId();
   const resolvedId = id ?? `bloom-btn-${reactId}`;
 
-  // `size="icon"` shorthand also selects the icon variant unless the caller
-  // explicitly picked one — mirrors native + shadcn behavior.
-  const resolvedVariant: ButtonVariant =
-    sizeProp === 'icon' && variant === 'primary' ? 'icon' : variant;
-  const size: ButtonResolvedSize = BUTTON_SIZE_ALIAS[sizeProp];
+  const recipe = resolveButtonRecipe(variantProp);
+  const appearance = appearanceProp ?? recipe.appearance;
+  const { size, tone } = useBloomAppearance({ size: sizeProp ? BUTTON_SIZE_ALIAS[sizeProp] : undefined, tone: toneProp ?? (variantProp ? recipe.tone : undefined) }, { size: 'md', tone: 'accent' });
   const geometry = resolveButtonGeometry(size, textVariant);
-  const isIconVariant = resolvedVariant === 'icon';
-  const isSquare = iconOnly || isIconVariant;
-  const isLink = resolvedVariant === 'link';
-  const isText = resolvedVariant === 'text';
+  const isSquare = iconOnly || variantProp === 'icon' || sizeProp === 'icon' || (icon != null && children == null);
+  const isIconVariant = isSquare;
+  const isLink = appearance === 'plain' && (href != null || variantProp === 'link');
   const isInteractionBlocked = disabled || loading;
   const iconSize = isIconVariant ? ICON_BUTTON_ICON_SIZE[size] : geometry.iconSize;
 
   const palette = useMemo(
-    () => resolveButtonPalette(resolvedVariant, theme, linkTone),
-    [resolvedVariant, theme, linkTone],
+    () => variantProp === 'link' && appearanceProp == null && toneProp == null ? resolveButtonPalette('link', theme, linkTone) : variantProp === 'inverse' && appearanceProp == null && toneProp == null ? resolveButtonPalette('inverse', theme) : resolveButtonPalette(appearance, theme, tone),
+    [appearance, theme, tone, variantProp, appearanceProp, toneProp, linkTone],
   );
   const isGradient = palette.rest.gradient !== null;
-  const underlineMode = resolveButtonUnderline(resolvedVariant, underline);
+  const underlineMode = resolveButtonUnderline(isLink ? 'link' : 'primary', underline);
 
   const containerStyle = useMemo((): CSSProperties => {
     const shadow = palette.shadow ? BUTTON_SHADOW[theme.isDark ? 'dark' : 'light'] : 'none';
@@ -242,7 +238,6 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
       lineHeight: `${geometry.lineHeight}px`,
       fontWeight: Number(geometry.fontWeight),
       letterSpacing: geometry.letterSpacing || undefined,
-      width: fullWidth ? '100%' : undefined,
       // CSS custom props consumed by the static stylesheet — see its header.
       ['--bloom-btn-gap' as string]: `${geometry.gap}px`,
       ['--bloom-btn-ring' as string]: palette.ring,
@@ -277,19 +272,10 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
       });
     }
     if (isSquare) {
-      base.width = isIconVariant ? geometry.height : iconOnlyWidth(geometry, palette.borderWidth);
+      base.width = geometry.height;
       base.paddingLeft = 0;
       base.paddingRight = 0;
     }
-    if (isText) {
-      // The compact inline affordance: hugs its label so an `asChild` anchor
-      // sits in running text. Same 4/8 padding as the native fork.
-      base.height = undefined;
-      base.paddingTop = 4;
-      base.paddingBottom = 4;
-      base.paddingLeft = 8;
-      base.paddingRight = 8;
-    }
     if (isLink && !isSquare) {
       // LinkButton: no container at all — the label's own line box,
       // a 4px gap, and a 4px corner that only the focus ring shows.
@@ -300,7 +286,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
       (base as Record<string, unknown>)['--bloom-btn-gap'] = `${LINK_BUTTON_GAP}px`;
     }
     return base;
-  }, [geometry, palette, theme.isDark, fullWidth, isSquare, isIconVariant, isText, isLink, isGradient]);
+  }, [geometry, palette, theme.isDark, isSquare, isIconVariant, isLink, isGradient]);
 
   const handleClick = useCallback(
     (event: MouseEvent<HTMLElement>) => {
@@ -308,13 +294,12 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
         event.preventDefault();
         return;
       }
-      onClick?.(event as MouseEvent<HTMLButtonElement>);
       onPress?.();
     },
-    [isInteractionBlocked, onClick, onPress],
+    [isInteractionBlocked, onPress],
   );
 
-  const ariaLabel = ariaLabelProp ?? accessibilityLabel;
+  const ariaLabel = accessibilityLabel;
   const composedClassName = ['bloom-btn']
     .concat(isLink ? ['bloom-btn--link'] : [])
     .concat(underlineMode === 'none' ? [] : [`bloom-btn--underline-${underlineMode}`])
@@ -355,7 +340,8 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   const content = (
     <>
       {LeadingIcon ? renderIcon(LeadingIcon) : null}
-      {iconPosition === 'left' && iconNode}
+      {leading}
+      {iconNode}
       {hasLabel &&
         (typeof children === 'string' || typeof children === 'number' ? (
           <span
@@ -378,7 +364,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
           children
         ))}
       {isSquare && !LeadingIcon && !iconNode && children != null ? children : null}
-      {iconPosition === 'right' && iconNode}
+      {trailing}
       {!isSquare && TrailingIcon ? renderIcon(TrailingIcon) : null}
     </>
   );
@@ -441,8 +427,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
           return;
         }
         childProps.onClick?.(event);
-        onClick?.(event as MouseEvent<HTMLButtonElement>);
-        onPress?.();
+          onPress?.();
       },
       'aria-disabled': isInteractionBlocked || undefined,
       'aria-busy': loading || undefined,

package/src/button/index.web.ts

@@ -1,16 +1,8 @@
-// Web variant of the `./button` barrel.
-//
-// The default barrel (`./index.ts`) re-exports the React Native (`Pressable`)
-// implementation. Via react-native-web that renders `<button type="button">`,
-// which breaks form submits, HTML5 validation, Enter-to-submit, `className`
-// layout passthrough, `asChild`/links, and lacks the `outline`/`link`/
-// `destructive` variants web apps use. This fork (`./Button.web`) renders a real
-// HTML `<button>` with full web semantics while keeping the SAME Bloom design
-// tokens, variants, and sizes so it is visually identical to the native button.
-//
-// Web bundlers select this file via the `"browser"` export condition in
-// `package.json`'s `exports['./button']`; native bundlers fall through to the
-// React Native build. Types are platform-agnostic, so they come from `./types`.
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/button/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export {
   Button,
   PrimaryButton,