@oxyhq/bloom 0.35.8 → 0.37.0

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

@@ -0,0 +1,246 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { getByRole, fireEvent } from '@testing-library/dom';
+import { renderToStaticMarkup } from 'react-dom/server';
+import '@testing-library/jest-dom';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { FrostedIconButton } from '../frosted-icon-button/FrostedIconButton.web';
+import { parseRgb } from '../theme/color-utils';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+function mount(ui: React.ReactElement, mode: 'light' | 'dark' = 'dark'): HTMLElement {
+  act(() => {
+    root.render(
+      <BloomThemeProvider mode={mode} colorPreset="blue">
+        {ui}
+      </BloomThemeProvider>,
+    );
+  });
+  return container;
+}
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+// Mention's measured dark page background — the "invisible circle" bug composited
+// a near-black `card` fill onto this and vanished. The frosted chip must read.
+const PAGE_DARK = { r: 11, g: 11, b: 15 };
+
+/** Composite an `rgba(...)` surface over an opaque background (source-over). */
+function compositeOver(surface: string, bg: { r: number; g: number; b: number }) {
+  const base = parseRgb(surface);
+  const m = /rgba?\(([^)]+)\)/i.exec(surface);
+  const rawAlpha = m?.[1]?.split(',')[3];
+  const a = rawAlpha === undefined ? 1 : Number(rawAlpha);
+  if (!base) throw new Error(`not an rgba string: ${surface}`);
+  return {
+    r: Math.round(bg.r * (1 - a) + base.r * a),
+    g: Math.round(bg.g * (1 - a) + base.g * a),
+    b: Math.round(bg.b * (1 - a) + base.b * a),
+  };
+}
+
+describe('FrostedIconButton.web', () => {
+  it('renders a real <button> with the accessible label', () => {
+    const c = mount(<FrostedIconButton accessibilityLabel="Back" icon={<span>x</span>} />);
+    const btn = getByRole(c, 'button', { name: 'Back' });
+    expect(btn.tagName).toBe('BUTTON');
+    expect(btn).toHaveClass('bloom-frosted-icon-btn');
+  });
+
+  it('self-injects its interaction stylesheet once', () => {
+    mount(<FrostedIconButton accessibilityLabel="Back" icon={<span>x</span>} />);
+    mount(<FrostedIconButton accessibilityLabel="Fwd" icon={<span>y</span>} />);
+    expect(document.querySelectorAll('#bloom-frosted-icon-button-web-css')).toHaveLength(1);
+  });
+
+  // THE bug this component exists to prevent: on a dark SOLID page, a `card`-fill
+  // circle composited to near-black and vanished. Prove the frosted surface is a
+  // LIGHT tint that reads as a distinct, clearly-lighter circle on rgb(11,11,15).
+  describe('reads on a solid dark background (nothing behind it)', () => {
+    it('uses a low-opacity LIGHT tint distinguishable from the page', () => {
+      const c = mount(<FrostedIconButton accessibilityLabel="Back" icon={<span>x</span>} />);
+      const btn = getByRole(c, 'button');
+      const surface = btn.style.backgroundColor;
+
+      // Not the page color, and a genuine translucent (rgba) surface.
+      expect(surface).not.toBe('rgb(11, 11, 15)');
+      expect(surface).toMatch(/^rgba\(/);
+
+      // The tint's BASE color is light (each channel high) — a light frost, not a
+      // dark card fill.
+      const base = parseRgb(surface);
+      if (!base) throw new Error('unreachable');
+      expect(base.r).toBeGreaterThanOrEqual(200);
+      expect(base.g).toBeGreaterThanOrEqual(200);
+      expect(base.b).toBeGreaterThanOrEqual(200);
+
+      // Composited over the page it is clearly LIGHTER than rgb(11,11,15).
+      const composite = compositeOver(surface, PAGE_DARK);
+      expect(composite.r - PAGE_DARK.r).toBeGreaterThanOrEqual(15);
+      expect(composite.g - PAGE_DARK.g).toBeGreaterThanOrEqual(15);
+      expect(composite.b - PAGE_DARK.b).toBeGreaterThanOrEqual(15);
+    });
+
+    it('renders a hairline ring and a shadow that survive dark mode', () => {
+      const c = mount(<FrostedIconButton accessibilityLabel="Back" icon={<span>x</span>} />);
+      const btn = getByRole(c, 'button');
+      // Ring: a translucent border COLOR is present inline (per-instance token).
+      expect(btn.style.borderColor).toMatch(/^rgba\(/);
+      // The hairline border-style/width live in the self-injected stylesheet.
+      const css = document.getElementById('bloom-frosted-icon-button-web-css')?.textContent ?? '';
+      expect(css).toMatch(/border-style:\s*solid/);
+      expect(css).toMatch(/border-width:\s*1px/);
+      // Shadow is NOT killed in dark mode.
+      expect(btn.style.boxShadow).not.toBe('');
+      expect(btn.style.boxShadow).toMatch(/rgba?\(/);
+    });
+
+    // jsdom's CSS engine drops `backdrop-filter`, so assert it via SSR style
+    // serialization — which emits EVERY style key exactly as the browser receives
+    // it (react-dom writes the same inline style on a real DOM <button>).
+    it('emits a real CSS backdrop-filter blur when frosted (and drops it when active)', () => {
+      const frosted = renderToStaticMarkup(
+        <BloomThemeProvider mode="dark" colorPreset="blue">
+          <FrostedIconButton accessibilityLabel="Back" icon={<span>x</span>} />
+        </BloomThemeProvider>,
+      );
+      expect(frosted).toMatch(/backdrop-filter:\s*blur\(\d+px\)/);
+
+      const active = renderToStaticMarkup(
+        <BloomThemeProvider mode="dark" colorPreset="blue">
+          <FrostedIconButton accessibilityLabel="Back" active icon={<span>x</span>} />
+        </BloomThemeProvider>,
+      );
+      // Active is solid: no blur (either absent or explicitly "none").
+      expect(active).not.toMatch(/backdrop-filter:\s*blur\(/);
+    });
+  });
+
+  describe('active (solid "on") state', () => {
+    it('fills opaque (no rgba alpha), drops the blur, and sets aria-pressed', () => {
+      const c = mount(<FrostedIconButton accessibilityLabel="Mute" active icon={<span>x</span>} />);
+      const btn = getByRole(c, 'button');
+      // Opaque solid fill — an `rgb(...)` (not translucent `rgba`).
+      expect(btn.style.backgroundColor).toMatch(/^rgb\(/);
+      expect(btn.style.backgroundColor).not.toMatch(/^rgba\(/);
+      expect(btn).toHaveAttribute('aria-pressed', 'true');
+      expect(btn).toHaveAttribute('data-active', 'true');
+      const bf = btn.style.getPropertyValue('backdrop-filter');
+      expect(bf === '' || bf === 'none').toBe(true);
+    });
+
+    it('reports aria-pressed=false when not active', () => {
+      const c = mount(<FrostedIconButton accessibilityLabel="Mute" icon={<span>x</span>} />);
+      expect(getByRole(c, 'button')).toHaveAttribute('aria-pressed', 'false');
+    });
+  });
+
+  describe('icon color', () => {
+    it('injects the theme icon color as a fallback fill on a bare icon', () => {
+      const c = mount(
+        <FrostedIconButton accessibilityLabel="Back" icon={<svg data-testid="ic" />} />,
+      );
+      const icon = c.querySelector('[data-testid="ic"]');
+      expect(icon?.getAttribute('fill')).toMatch(/^rgb/);
+    });
+
+    it('never overrides an explicit fill on the icon', () => {
+      const c = mount(
+        <FrostedIconButton
+          accessibilityLabel="Back"
+          icon={<svg data-testid="ic" fill="rgb(1, 2, 3)" />}
+        />,
+      );
+      expect(c.querySelector('[data-testid="ic"]')?.getAttribute('fill')).toBe('rgb(1, 2, 3)');
+    });
+  });
+
+  describe('light theme', () => {
+    it('uses a subtle DARK tint (base near-black) distinguishable from a white page', () => {
+      const c = mount(
+        <FrostedIconButton accessibilityLabel="Back" icon={<span>x</span>} />,
+        'light',
+      );
+      const surface = getByRole(c, 'button').style.backgroundColor;
+      expect(surface).toMatch(/^rgba\(/);
+      const base = parseRgb(surface);
+      if (!base) throw new Error('unreachable');
+      expect(base.r).toBeLessThanOrEqual(60);
+      expect(base.g).toBeLessThanOrEqual(60);
+      expect(base.b).toBeLessThanOrEqual(60);
+    });
+  });
+
+  describe('behavior', () => {
+    it('fires both onClick and onPress on click', () => {
+      const onClick = jest.fn();
+      const onPress = jest.fn();
+      const c = mount(
+        <FrostedIconButton
+          accessibilityLabel="Back"
+          onClick={onClick}
+          onPress={onPress}
+          icon={<span>x</span>}
+        />,
+      );
+      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(
+        <FrostedIconButton accessibilityLabel="Back" disabled onPress={onPress} icon={<span>x</span>} />,
+      );
+      const btn = getByRole(c, 'button');
+      expect(btn).toBeDisabled();
+      act(() => {
+        fireEvent.click(btn);
+      });
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('applies preset sizes (md = 36px, sm = 32px)', () => {
+      const c = mount(<FrostedIconButton accessibilityLabel="Back" size="md" icon={<span>x</span>} />);
+      expect(getByRole(c, 'button').style.width).toBe('36px');
+      const c2 = mount(<FrostedIconButton accessibilityLabel="Back" size="sm" icon={<span>x</span>} />);
+      expect(getByRole(c2, 'button').style.width).toBe('32px');
+    });
+
+    it('does not crash on an array-form style prop (StyleProp flattening)', () => {
+      const showBorder = false;
+      const c = mount(
+        <FrostedIconButton
+          accessibilityLabel="Back"
+          icon={<span>x</span>}
+          style={[{ marginTop: 8 }, showBorder && { borderColor: 'rgb(9, 9, 9)' }]}
+        />,
+      );
+      const btn = getByRole(c, 'button');
+      expect(btn.style.marginTop).toBe('8px');
+      expect(btn.getAttribute('style') ?? '').not.toMatch(/(^|;)\s*0\s*:/);
+    });
+  });
+});

package/src/__tests__/native-root-vars.test.ts

@@ -53,12 +53,16 @@ describe('applyNativeRootVars (native variant)', () => {
     });
 
     // Keys are bare (no `--`), and the value is the single canonical sRGB
-    // `rgb(...)` color from `getResolvedTokens` (`205 87% 53%` → `rgb(31 153 239)`).
-    // sRGB is the space react-native-css's `color-mix` resolver registers, so
-    // alpha utilities (`bg-primary/10`) resolve on native.
+    // `rgb(...)` color from `getResolvedTokens` (now engine-derived from the blue
+    // seed). sRGB is the space react-native-css's `color-mix` resolver registers,
+    // so alpha utilities (`bg-primary/10`) resolve on native.
+    const { getResolvedTokens } = require('../theme/token-registry') as {
+      getResolvedTokens: (preset: string, mode: 'light' | 'dark') => Record<string, string>;
+    };
+    const expectedPrimary = getResolvedTokens('blue', 'light')['--primary'];
     expect(sets).toHaveProperty('primary');
     expect(sets).not.toHaveProperty('--primary');
-    expect(sets.primary).toEqual([['rgb(31 153 239)']]);
+    expect(sets.primary).toEqual([[expectedPrimary]]);
 
     // The legacy resolved-color companion universe is gone — the base token IS
     // rgb, so no `color-primary` companion is written.

package/src/__tests__/preset-vars.test.ts

@@ -1,4 +1,4 @@
-import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../theme/color-presets';
+import { APP_COLOR_NAMES } from '../theme/color-presets';
 import { getPresetVars } from '../theme/preset-vars';
 import { getResolvedTokens } from '../theme/token-registry';
 
@@ -20,70 +20,99 @@ const EXTENDED_KEYS = [
   '--sidebar-ring',
 ] as const;
 
-describe('getPresetVars', () => {
-  it('includes every base preset token plus extended tokens for all presets and modes', () => {
+const BASE_KEYS = [
+  '--background',
+  '--foreground',
+  '--surface',
+  '--surface-foreground',
+  '--popover',
+  '--popover-foreground',
+  '--primary',
+  '--primary-foreground',
+  '--secondary',
+  '--secondary-foreground',
+  '--muted',
+  '--muted-foreground',
+  '--accent',
+  '--accent-foreground',
+  '--destructive',
+  '--border',
+  '--input',
+  '--ring',
+  '--sidebar',
+] as const;
+
+describe('getPresetVars (engine-backed)', () => {
+  it('emits every base + extended token as a full rgb() color for all presets and modes', () => {
     for (const name of APP_COLOR_NAMES) {
       for (const mode of ['light', 'dark'] as const) {
         const vars = getPresetVars(name, mode);
-        const base = mode === 'light' ? APP_COLOR_PRESETS[name].light : APP_COLOR_PRESETS[name].dark;
-
-        for (const key of Object.keys(base)) {
-          expect(vars[key]).toBe(base[key]);
-        }
-        for (const key of EXTENDED_KEYS) {
+        for (const key of [...BASE_KEYS, ...EXTENDED_KEYS]) {
           expect(vars[key]).toBeDefined();
+          // The engine emits `rgb(r g b)` directly — never a bare HSL triple.
+          expect(vars[key]).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
         }
       }
     }
   });
 
-  it('derives chart/sidebar hue from the preset primary', () => {
+  it('drives sidebar-primary / ring from the engine primary role', () => {
     const vars = getPresetVars('blue', 'light');
-    const primary = APP_COLOR_PRESETS.blue.light['--primary'] ?? '';
-    const primaryHue = primary.split(' ')[0] ?? '';
-    const chart1 = vars['--chart-1'] ?? '';
-    expect(chart1.startsWith(`${primaryHue} `)).toBe(true);
-    expect(vars['--sidebar-primary']).toBe(primary);
+    expect(vars['--sidebar-primary']).toBe(vars['--primary']);
+    expect(vars['--ring']).toBe(vars['--primary']);
+    expect(vars['--chart-1']).toBe(vars['--primary']);
+  });
+
+  it('makes secondary a real contrast color, not a mirror of primary (the fix)', () => {
+    for (const name of APP_COLOR_NAMES) {
+      for (const mode of ['light', 'dark'] as const) {
+        const vars = getPresetVars(name, mode);
+        expect(vars['--secondary']).not.toBe(vars['--primary']);
+      }
+    }
   });
 
-  it('returns raw HSL triples (no resolved colors) — getResolvedTokens owns rgb', () => {
-    // `getPresetVars` is the raw triple source feeding the single canonical
-    // resolver. It must NOT pre-resolve to rgb/hsl, and the legacy resolved-color
-    // companion universe must be gone (no key carries the resolved-color prefix).
+  it('makes card the lightest surface in light mode, darkest in dark (the fix)', () => {
+    const channels = (rgb: string): number[] =>
+      (rgb.match(/\d+/g) ?? []).map(Number);
+    const sum = (rgb: string): number => channels(rgb).reduce((a, b) => a + b, 0);
+
+    for (const name of APP_COLOR_NAMES) {
+      const light = getPresetVars(name, 'light');
+      // card (surfaceContainerLowest) must be lighter than background in light.
+      expect(sum(light['--card'] ?? '')).toBeGreaterThan(sum(light['--background'] ?? ''));
+
+      const dark = getPresetVars(name, 'dark');
+      // card must be darker than (or equal to) background in dark — correct inversion.
+      expect(sum(dark['--card'] ?? '')).toBeLessThanOrEqual(sum(dark['--background'] ?? ''));
+    }
+  });
+
+  it('carries no legacy resolved-color companion universe', () => {
     const vars = getPresetVars('green', 'dark');
-    expect(vars['--primary']).toBe(APP_COLOR_PRESETS.green.dark['--primary']);
-    expect(/^-?\d[\d.]*\s+[\d.]+%/.test(vars['--primary'] ?? '')).toBe(true);
     const legacyPrefix = `--${'color'}-`;
     expect(Object.keys(vars).some((k) => k.startsWith(legacyPrefix))).toBe(false);
   });
 });
 
 describe('getResolvedTokens (single canonical rgb pipeline)', () => {
-  it('resolves every base + extended token to a space-separated rgb() string', () => {
+  it('passes the engine rgb() values through unchanged', () => {
     const resolved = getResolvedTokens('green', 'dark');
-    const primaryTriple = APP_COLOR_PRESETS.green.dark['--primary'] ?? '';
-    // No resolved-color companion universe anymore — the base token is rgb.
-    const legacyPrefix = `--${'color'}-`;
-    expect(Object.keys(resolved).some((k) => k.startsWith(legacyPrefix))).toBe(false);
+    const raw = getPresetVars('green', 'dark');
+    // The engine already emits rgb(); getResolvedTokens must not re-touch it.
+    expect(resolved['--primary']).toBe(raw['--primary']);
+    expect(resolved['--card']).toBe(raw['--card']);
     expect(resolved['--primary']).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
     expect(resolved['--card']).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
-    // primary triple resolves to the same rgb the registry produces.
-    expect(resolved['--primary']).toBe(getResolvedTokens('green', 'dark')['--primary']);
-    expect(primaryTriple).toMatch(/%/);
-  });
-
-  it('resolves --primary to rgb for the blue preset (matches web reference)', () => {
-    // `blue` preset light `--primary` is `205 87% 53%` → rgb(31 153 239).
-    const resolved = getResolvedTokens('blue', 'light');
-    expect(resolved['--primary']).toBe('rgb(31 153 239)');
+    const legacyPrefix = `--${'color'}-`;
+    expect(Object.keys(resolved).some((k) => k.startsWith(legacyPrefix))).toBe(false);
   });
 
   it('produces a full CSS color for every base preset token of every preset/mode', () => {
     for (const name of APP_COLOR_NAMES) {
       for (const mode of ['light', 'dark'] as const) {
-        const base = mode === 'light' ? APP_COLOR_PRESETS[name].light : APP_COLOR_PRESETS[name].dark;
         const resolved = getResolvedTokens(name, mode);
-        for (const key of Object.keys(base)) {
+        for (const key of BASE_KEYS) {
           const value = resolved[key] ?? '';
           // A bare triple (`185 50% 5%`) is INVALID CSS — the incident. Every
           // base token must come out as a complete color the browser parses.

package/src/__tests__/theme.test.ts

@@ -5,6 +5,7 @@ import {
   hexToAppColorName,
 } from '../theme/color-presets';
 import { buildTheme } from '../theme/build-theme';
+import { getPresetVars } from '../theme/preset-vars';
 import { THEME_GRADIENTS } from '../theme/gradients';
 import type { Theme, ThemeColors, ThemeMode } from '../theme/types';
 
@@ -18,7 +19,9 @@ describe('Theme system', () => {
       }
     });
 
-    it('each preset has both light and dark color variables', () => {
+    it('each preset generates both light and dark canonical tokens from its seed', () => {
+      // The palette is now engine-derived from the seed; every preset must
+      // produce a full canonical token set in both modes via `getPresetVars`.
       const requiredVars = [
         '--background',
         '--foreground',
@@ -32,31 +35,36 @@ describe('Theme system', () => {
       ];
 
       for (const name of APP_COLOR_NAMES) {
-        const preset = APP_COLOR_PRESETS[name]!;
+        const light = getPresetVars(name, 'light');
+        const dark = getPresetVars(name, 'dark');
         for (const v of requiredVars) {
-          expect(preset.light[v]).toBeDefined();
-          expect(preset.dark[v]).toBeDefined();
+          expect(light[v]).toBeDefined();
+          expect(dark[v]).toBeDefined();
         }
       }
     });
 
     it('light and dark variants have different values', () => {
       for (const name of APP_COLOR_NAMES) {
-        const preset = APP_COLOR_PRESETS[name]!;
         // Background should differ between light and dark
-        expect(preset.light['--background']).not.toBe(preset.dark['--background']);
+        expect(getPresetVars(name, 'light')['--background']).not.toBe(
+          getPresetVars(name, 'dark')['--background'],
+        );
       }
     });
   });
 
   describe('buildTheme primaryForeground', () => {
     it('resolves a readable foreground for the primary fill per preset', () => {
-      // blue's --primary-foreground is `0 0% 100%` → white (canonical sRGB rgb)
-      expect(buildTheme('blue', 'light').colors.primaryForeground).toBe('rgb(255 255 255)');
-      expect(buildTheme('blue', 'dark').colors.primaryForeground).toBe('rgb(255 255 255)');
-      // yellow's --primary-foreground is `0 0% 0%` → black (canonical sRGB rgb)
-      expect(buildTheme('yellow', 'light').colors.primaryForeground).toBe('rgb(0 0 0)');
-      expect(buildTheme('yellow', 'dark').colors.primaryForeground).toBe('rgb(0 0 0)');
+      // Every preset's primary foreground is the engine's `on-primary` role,
+      // surfaced as `--primary-foreground` — a legible on-primary contrast color.
+      for (const name of APP_COLOR_NAMES) {
+        for (const mode of ['light', 'dark'] as const) {
+          expect(buildTheme(name, mode).colors.primaryForeground).toBe(
+            getPresetVars(name, mode)['--primary-foreground'],
+          );
+        }
+      }
     });
 
     it('sets a primaryForeground for every preset in both modes', () => {

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, ImageBackground } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FrostedIconButton } from './FrostedIconButton';
+import * as Icons from '../icons';
+
+const meta: Meta<typeof FrostedIconButton> = {
+  title: 'Components/FrostedIconButton',
+  component: FrostedIconButton,
+  args: {
+    accessibilityLabel: 'Back',
+    icon: <Icons.ChevronLeft_Stroke2_Corner0_Rounded size="md" />,
+    onPress: () => {},
+  },
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md'] },
+    active: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FrostedIconButton>;
+
+/** The frosted chip on a SOLID dark background — must read as a distinct button. */
+export const OnSolidDark: Story = {
+  render: (args) => (
+    <View style={{ padding: 40, backgroundColor: 'rgb(11, 11, 15)' }}>
+      <FrostedIconButton {...args} />
+    </View>
+  ),
+};
+
+/** The solid "on" state for toggles (no blur, brand fill). */
+export const Active: Story = {
+  render: (args) => (
+    <View style={{ padding: 40, backgroundColor: 'rgb(11, 11, 15)' }}>
+      <FrostedIconButton {...args} active />
+    </View>
+  ),
+};
+
+/** Frosting over an image (the reason it exists) — blur shows the banner behind. */
+export const OverImage: Story = {
+  render: (args) => (
+    <ImageBackground
+      source={{ uri: 'https://picsum.photos/600/300' }}
+      style={{ width: 320, height: 180, padding: 16, justifyContent: 'flex-start' }}
+    >
+      <FrostedIconButton {...args} />
+    </ImageBackground>
+  ),
+};
+
+/** Both sizes side by side. */
+export const Sizes: Story = {
+  render: (args) => (
+    <View style={{ flexDirection: 'row', gap: 12, padding: 40, backgroundColor: 'rgb(11, 11, 15)' }}>
+      <FrostedIconButton {...args} size="sm" />
+      <FrostedIconButton {...args} size="md" />
+    </View>
+  ),
+};