@oxyhq/bloom 0.9.0 → 0.10.0

package/lib/typescript/module/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"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"}

package/lib/typescript/module/user-hover-card/types.d.ts

@@ -9,8 +9,10 @@ export interface UserHoverCardStat {
 }
 export interface UserHoverCardProps {
     /**
-     * Avatar image source — a URL string, or null/undefined to fall back to the
-     * deterministic name-based placeholder rendered by {@link Avatar}.
+     * Avatar image source. Accepts a full image URL OR a resolver-handled id
+     * (e.g. an Oxy file ID) — it is routed into {@link Avatar}'s `source` prop, so
+     * non-URL strings resolve through the consumer's ImageResolver. Null/undefined
+     * falls back to the deterministic name-based placeholder.
      */
     avatar?: string | null;
     /** Canonical, already-resolved display name (an API contract — render directly). */

package/lib/typescript/module/user-hover-card/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/user-hover-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,oFAAoF;AACpF,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,oFAAoF;IACpF,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/user-hover-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,oFAAoF;AACpF,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,oFAAoF;IACpF,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -95,6 +95,11 @@
     },
     "./button": {
       "react-native": "./src/button/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/button/index.web.d.ts",
+        "import": "./lib/module/button/index.web.js",
+        "require": "./lib/commonjs/button/index.web.js"
+      },
       "import": {
         "types": "./lib/typescript/module/button/index.d.ts",
         "default": "./lib/module/button/index.js"
@@ -802,6 +807,8 @@
   "devDependencies": {
     "@storybook/addon-docs": "^10",
     "@storybook/react-vite": "^10",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
     "@types/react": "~19.1.0",

package/src/__tests__/Button.web.test.tsx

@@ -0,0 +1,201 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { getByRole, getByText, getByLabelText, fireEvent } from '@testing-library/dom';
+import '@testing-library/jest-dom';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import {
+  Button,
+  OutlineButton,
+  LinkButton,
+  DestructiveButton,
+} from '../button/Button.web';
+
+// react-dom 19 logs a guard unless this flag is set in test environments.
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+function mount(ui: React.ReactElement): HTMLElement {
+  act(() => {
+    root.render(
+      <BloomThemeProvider mode="light" colorPreset="teal">
+        {ui}
+      </BloomThemeProvider>,
+    );
+  });
+  return container;
+}
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+describe('Button.web', () => {
+  it('renders a real <button> element', () => {
+    const c = mount(<Button>Click me</Button>);
+    const btn = getByRole(c, 'button', { name: 'Click me' });
+    expect(btn.tagName).toBe('BUTTON');
+  });
+
+  it('defaults to type="button"', () => {
+    const c = mount(<Button>Default</Button>);
+    expect(getByRole(c, 'button')).toHaveAttribute('type', 'button');
+  });
+
+  it('supports type="submit" for form participation', () => {
+    const onSubmit = jest.fn((e: Event) => e.preventDefault());
+    const c = mount(
+      <form onSubmit={onSubmit as unknown as React.FormEventHandler}>
+        <Button type="submit">Submit</Button>
+      </form>,
+    );
+    const btn = getByRole(c, 'button', { name: 'Submit' });
+    expect(btn).toHaveAttribute('type', 'submit');
+    act(() => {
+      fireEvent.click(btn);
+    });
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires both onClick and onPress on click', () => {
+    const onClick = jest.fn();
+    const onPress = jest.fn();
+    const c = mount(
+      <Button onClick={onClick} onPress={onPress}>
+        Go
+      </Button>,
+    );
+    act(() => {
+      fireEvent.click(getByRole(c, 'button'));
+    });
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fire handlers when disabled', () => {
+    const onPress = jest.fn();
+    const c = mount(
+      <Button disabled onPress={onPress}>
+        Nope
+      </Button>,
+    );
+    const btn = getByRole(c, 'button');
+    expect(btn).toBeDisabled();
+    act(() => {
+      fireEvent.click(btn);
+    });
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('does not fire onPress when loading and marks aria-busy', () => {
+    const onPress = jest.fn();
+    const c = mount(
+      <Button loading onPress={onPress}>
+        Saving
+      </Button>,
+    );
+    const btn = getByRole(c, 'button');
+    expect(btn).toHaveAttribute('aria-busy', 'true');
+    act(() => {
+      fireEvent.click(btn);
+    });
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('keeps children mounted while loading so width is preserved', () => {
+    const c = mount(<Button loading>Submit</Button>);
+    expect(getByText(c, 'Submit')).toBeTruthy();
+  });
+
+  it('passes className through so consumer layout classes win', () => {
+    const c = mount(<Button className="w-full custom">Wide</Button>);
+    const btn = getByRole(c, 'button');
+    expect(btn).toHaveClass('bloom-btn');
+    expect(btn).toHaveClass('w-full');
+    expect(btn).toHaveClass('custom');
+  });
+
+  it('applies aria-label from accessibilityLabel', () => {
+    const c = mount(<Button accessibilityLabel="Save changes">Save</Button>);
+    expect(getByLabelText(c, 'Save changes')).toBeTruthy();
+  });
+
+  it('exposes testID as data-testid', () => {
+    const c = mount(<Button testID="my-btn">Test</Button>);
+    expect(c.querySelector('[data-testid="my-btn"]')?.tagName).toBe('BUTTON');
+  });
+
+  describe('asChild', () => {
+    it('renders the child element (anchor) instead of a button', () => {
+      const c = mount(
+        <Button asChild>
+          <a href="/go">Go</a>
+        </Button>,
+      );
+      const link = getByRole(c, 'link', { name: 'Go' });
+      expect(link.tagName).toBe('A');
+      expect(link).toHaveAttribute('href', '/go');
+      expect(link).toHaveClass('bloom-btn');
+    });
+
+    it('merges onPress onto the child', () => {
+      const onPress = jest.fn();
+      const c = mount(
+        <Button asChild onPress={onPress}>
+          <a href="/go">Go</a>
+        </Button>,
+      );
+      act(() => {
+        fireEvent.click(getByRole(c, 'link'));
+      });
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('web variants', () => {
+    it('OutlineButton renders a button', () => {
+      const c = mount(<OutlineButton>Outline</OutlineButton>);
+      expect(getByRole(c, 'button', { name: 'Outline' }).tagName).toBe('BUTTON');
+    });
+
+    it('LinkButton renders with the link modifier class', () => {
+      const c = mount(<LinkButton>Link</LinkButton>);
+      expect(getByRole(c, 'button', { name: 'Link' })).toHaveClass('bloom-btn--link');
+    });
+
+    it('DestructiveButton renders a button', () => {
+      const c = mount(<DestructiveButton>Delete</DestructiveButton>);
+      expect(getByRole(c, 'button', { name: 'Delete' }).tagName).toBe('BUTTON');
+    });
+  });
+
+  describe('size aliases', () => {
+    it('accepts shadcn-style sm size', () => {
+      const c = mount(<Button size="sm">Small</Button>);
+      expect(getByRole(c, 'button', { name: 'Small' }).tagName).toBe('BUTTON');
+    });
+
+    it('size="icon" selects the icon variant', () => {
+      const c = mount(
+        <Button size="icon" accessibilityLabel="icon">
+          x
+        </Button>,
+      );
+      expect(getByRole(c, 'button', { name: 'icon' }).tagName).toBe('BUTTON');
+    });
+  });
+});

package/src/avatar-group/AvatarGroupBase.tsx

@@ -12,12 +12,12 @@ import { useTheme } from '../theme/use-theme';
 import { fontSize } from '../styles/tokens';
 import type { AvatarGroupItem, AvatarGroupProps } from './types';
 
-/** Ring thickness as a fraction of avatar size. */
-const RING_RATIO = 0.08;
-/** Minimum ring thickness so small avatars still separate cleanly. */
-const MIN_RING = 2;
-/** Default horizontal overlap as a fraction of avatar size. */
-const DEFAULT_OVERLAP_RATIO = 0.35;
+/** Ring (border) thickness around each avatar, in pixels. Matches the
+ * original Mention `AvatarStack` (a single hairline-ish 1px separator). */
+const RING_WIDTH = 1;
+/** Default horizontal overlap as a fraction of avatar size — the original
+ * stack pulled each avatar left by `size / 3`. */
+const DEFAULT_OVERLAP_RATIO = 1 / 3;
 
 function getItemName(item: AvatarGroupItem): string | undefined {
   return item.displayName ?? item.name ?? item.username;
@@ -53,13 +53,17 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
 }) => {
   const theme = useTheme();
 
-  const ring = ringColor ?? theme.colors.card;
-  const ringWidth = Math.max(MIN_RING, Math.round(size * RING_RATIO));
+  // The ring is the thin separator drawn between overlapping avatars. It
+  // defaults to the page background so avatars read as cleanly punched out of
+  // the surface behind them — matching the original Mention stack, which used
+  // `theme.colors.background`, not a large `card`-colored ring cell.
+  const ring = ringColor ?? theme.colors.background;
   const effectiveOverlap =
     overlap ?? Math.round(size * DEFAULT_OVERLAP_RATIO);
-  // Each avatar after the first is pulled left by `overlap`, but the ring adds
-  // visual width on both sides, so the negative margin accounts for the ring.
-  const negativeMargin = -(effectiveOverlap + ringWidth);
+  // Each avatar after the first is pulled left by `overlap`. The cell carries a
+  // 1px border on each side, so the negative margin absorbs both borders to
+  // keep the visual overlap equal to `effectiveOverlap`.
+  const negativeMargin = -(effectiveOverlap + RING_WIDTH * 2);
 
   const shown = useMemo(
     () => items.slice(0, Math.max(0, max)),
@@ -69,24 +73,30 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
   const realTotal = total ?? items.length;
   const overflow = Math.max(0, realTotal - shown.length);
 
+  // Each cell is a circular, clipped container with a 1px ring border. The inner
+  // Avatar is inset by the border on both sides so the image fills the circle
+  // exactly inside the ring.
+  const innerSize = size - RING_WIDTH * 2;
   const cellStyle = useMemo((): ViewStyle => {
     return {
-      width: size + ringWidth * 2,
-      height: size + ringWidth * 2,
-      borderRadius: (size + ringWidth * 2) / 2,
-      backgroundColor: ring,
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderWidth: RING_WIDTH,
+      borderColor: ring,
+      overflow: 'hidden',
       alignItems: 'center',
       justifyContent: 'center',
     };
-  }, [size, ringWidth, ring]);
+  }, [size, ring]);
 
   const overflowTextStyle = useMemo(
     () => ({
-      color: theme.colors.textSecondary,
-      fontSize: Math.max(fontSize._2xs, Math.round(size * 0.4)),
+      color: '#FFFFFF',
+      fontSize: Math.max(fontSize._2xs, Math.round(size * 0.36)),
       fontWeight: '600' as const,
     }),
-    [theme.colors.textSecondary, size],
+    [size],
   );
 
   const interactive = typeof onPressItem === 'function';
@@ -94,7 +104,7 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
     typeof hoverHandlers?.onHoverIn === 'function' ||
     typeof hoverHandlers?.onHoverOut === 'function';
 
-  // Pressing the "+N" chip surfaces the first hidden member (if any), so
+  // Pressing the "+N" circle surfaces the first hidden member (if any), so
   // consumers can route it to a full member list.
   const firstHidden = items[shown.length];
   const overflowOnPress =
@@ -128,7 +138,15 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
             collapsable={false}
             style={cellStyle}
           >
-            <Avatar uri={item.uri ?? undefined} name={name} size={size} />
+            {/*
+              Route the item's avatar value through Avatar's `source` prop (not
+              `uri`): full URLs pass through directly, while resolver-handled ids
+              (e.g. Oxy file IDs) are resolved by the consumer's ImageResolver —
+              exactly like the original Mention stack. No `name` is passed, so a
+              missing avatar shows Avatar's neutral default placeholder rather
+              than a colored deterministic initial.
+            */}
+            <Avatar source={item.uri ?? undefined} size={innerSize} />
           </View>
         );
 
@@ -166,7 +184,7 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
       })}
 
       {overflow > 0 && (
-        <OverflowChip
+        <OverflowCircle
           count={overflow}
           cellStyle={cellStyle}
           negativeMargin={shown.length > 0 ? negativeMargin : 0}
@@ -178,7 +196,7 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
   );
 };
 
-function OverflowChip({
+function OverflowCircle({
   count,
   cellStyle,
   negativeMargin,
@@ -192,26 +210,23 @@ function OverflowChip({
   onPress?: () => void;
 }) {
   const theme = useTheme();
-  // The chip is anchored at the lowest stacking order so it tucks behind the
-  // last avatar's ring. The margin lives on the outer element to keep layout
+  // The count circle is anchored at the lowest stacking order so it tucks behind
+  // the last avatar's ring. The margin lives on the outer element to keep layout
   // aligned with the overlap.
   const wrapperStyle: ViewStyle = {
     ...(negativeMargin !== 0 && { marginLeft: negativeMargin }),
     zIndex: 0,
   };
 
-  const chip = (
-    <View style={[cellStyle, { backgroundColor: theme.colors.card }]}>
-      <View
-        style={[
-          styles.chipInner,
-          { backgroundColor: theme.colors.backgroundTertiary },
-        ]}
-      >
-        <Text allowFontScaling={false} style={textStyle}>
-          +{count}
-        </Text>
-      </View>
+  // A solid "+N" count circle: secondary-text-colored fill with white text,
+  // matching the original Mention `ResponsiveAvatarStack` count circle.
+  const circle = (
+    <View
+      style={[cellStyle, { backgroundColor: theme.colors.textSecondary }]}
+    >
+      <Text allowFontScaling={false} style={textStyle}>
+        +{count}
+      </Text>
     </View>
   );
 
@@ -223,12 +238,12 @@ function OverflowChip({
         accessibilityLabel={`${count} more`}
         style={wrapperStyle}
       >
-        {chip}
+        {circle}
       </Pressable>
     );
   }
 
-  return <View style={wrapperStyle}>{chip}</View>;
+  return <View style={wrapperStyle}>{circle}</View>;
 }
 
 const styles = StyleSheet.create({
@@ -236,13 +251,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  chipInner: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 999,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
 });
 
 export const AvatarGroupBase = memo(AvatarGroupBaseComponent);

package/src/avatar-group/types.ts

@@ -3,16 +3,21 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 /**
  * A single member of an {@link AvatarGroup}. Mirrors the minimal shape needed to
- * render an {@link Avatar} plus drive the optional hover card. `uri` is the
- * avatar image URL; `name`/`displayName` feed Avatar's deterministic
- * name-based placeholder when no image resolves.
+ * render an {@link Avatar} plus drive the optional hover card. `uri` carries the
+ * avatar value (routed into Avatar's `source` prop); `name`/`displayName`/
+ * `username` are used for the hover card and accessibility only.
  */
 export interface AvatarGroupItem {
   /** Stable identity used as a React key and passed back to handlers. */
   id?: string;
-  /** Avatar image URL (null/undefined → name-based placeholder). */
+  /**
+   * Avatar value, routed into {@link Avatar}'s `source` prop. Accepts a full
+   * image URL OR a resolver-handled id (e.g. an Oxy file ID) — non-URL strings
+   * resolve through the consumer's ImageResolver. Null/undefined renders
+   * Avatar's neutral default placeholder.
+   */
   uri?: string | null;
-  /** Fallback name used for the avatar placeholder when `displayName` is absent. */
+  /** Name used for the hover card / accessibility when `displayName` is absent. */
   name?: string;
   /** Canonical, already-resolved display name (preferred over `name`). */
   displayName?: string;
@@ -34,13 +39,14 @@ export interface AvatarGroupProps {
    */
   total?: number;
   /**
-   * Horizontal overlap between adjacent avatars in pixels. Defaults to ~35% of
+   * Horizontal overlap between adjacent avatars in pixels. Defaults to ~1/3 of
    * `size`. Larger values pull avatars closer together.
    */
   overlap?: number;
   /**
-   * Color of the ring/border drawn around each avatar so they separate cleanly.
-   * Defaults to the theme `card` surface color.
+   * Color of the thin ring/border drawn around each avatar so overlapping
+   * avatars separate cleanly. Defaults to the theme `background` color so the
+   * avatars read as punched out of the surface behind them.
    */
   ringColor?: string;
   /**

package/src/button/Button.tsx

@@ -14,10 +14,30 @@ import {
 import { useTheme } from '../theme/use-theme';
 import { usePressAnimation } from '../hooks/usePressAnimation';
 import { useInteractionState } from '../hooks/useInteractionState';
-import type { ButtonProps } from './types';
+import type { ButtonProps, ButtonSize, ButtonVariant } from './types';
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
 
+/**
+ * The shared {@link ButtonVariant}/{@link ButtonSize} types include web-only
+ * additions (shadcn variants + size aliases) so a single call site type-checks
+ * on both platforms. Native normalizes them to its own primitives:
+ *   - `outline → secondary`, `link → text`, `destructive → primary` (tinted)
+ *   - `sm|md|lg|icon` size aliases → `small|medium|large`
+ */
+type NativeVariant = 'primary' | 'secondary' | 'inverse' | 'icon' | 'ghost' | 'text';
+type NativeSize = 'small' | 'medium' | 'large';
+
+const SIZE_ALIAS: Record<ButtonSize, NativeSize> = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  sm: 'small',
+  md: 'medium',
+  lg: 'large',
+  icon: 'medium',
+};
+
 const SIZE_CONFIG = {
   small: {
     paddingVertical: 6,
@@ -48,8 +68,8 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   onPress,
   children,
   disabled = false,
-  variant = 'primary',
-  size = 'medium',
+  variant: variantProp = 'primary',
+  size: sizeProp = 'medium',
   style,
   textStyle,
   icon,
@@ -64,6 +84,23 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   className,
 }) => {
   const theme = useTheme();
+  // The shadcn `size="icon"` shorthand also selects the icon variant unless an
+  // explicit variant was given by the caller.
+  const variant: NativeVariant = useMemo(() => {
+    if (sizeProp === 'icon' && variantProp === 'primary') return 'icon';
+    switch (variantProp) {
+      case 'outline':
+        return 'secondary';
+      case 'link':
+        return 'text';
+      case 'destructive':
+        return 'primary';
+      default:
+        return variantProp;
+    }
+  }, [variantProp, sizeProp]);
+  const isDestructive = variantProp === 'destructive';
+  const size: NativeSize = SIZE_ALIAS[sizeProp];
   const hasScaleFeedback = SCALE_VARIANTS.has(variant);
   const isInteractionBlocked = disabled || loading;
   const { scaleAnim, onPressIn: onScalePressIn, onPressOut: onScalePressOut } =
@@ -112,7 +149,9 @@ const ButtonComponent: React.FC<ButtonProps> = ({
 
     switch (variant) {
       case 'primary':
-        styles.backgroundColor = theme.colors.primary;
+        styles.backgroundColor = isDestructive
+          ? theme.colors.negative
+          : theme.colors.primary;
         styles.borderRadius = 20;
         break;
       case 'secondary':
@@ -143,12 +182,14 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     }
 
     return styles;
-  }, [variant, size, theme]);
+  }, [variant, size, theme, isDestructive]);
 
   const resolvedTextColor = useMemo((): string => {
     switch (variant) {
       case 'primary':
-        return theme.colors.primaryForeground;
+        return isDestructive
+          ? theme.colors.negativeForeground
+          : theme.colors.primaryForeground;
       case 'secondary':
         return theme.colors.text;
       case 'inverse':
@@ -160,7 +201,7 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       default:
         return theme.colors.text;
     }
-  }, [variant, theme]);
+  }, [variant, theme, isDestructive]);
 
   const computedTextStyle = useMemo((): TextStyle => {
     const sizeConfig = SIZE_CONFIG[size];
@@ -275,3 +316,21 @@ export const TextButton = memo((props: Omit<ButtonProps, 'variant'>) => (
   <Button {...props} variant="text" />
 ));
 TextButton.displayName = 'TextButton';
+
+// Web/shadcn-aligned variants. On native they normalize to existing primitives
+// (`outline → secondary`, `link → text`, `destructive → primary` tinted with the
+// negative token) inside `Button`, so these stay API-parallel with the web fork.
+export const OutlineButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="outline" />
+));
+OutlineButton.displayName = 'OutlineButton';
+
+export const LinkButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="link" />
+));
+LinkButton.displayName = 'LinkButton';
+
+export const DestructiveButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="destructive" />
+));
+DestructiveButton.displayName = 'DestructiveButton';