feat(ui): migrate Mosaic Icon to StyleX

.changeset/mosaic-icon-stylex.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/stories/icon.mdx

@@ -2,7 +2,9 @@ import * as IconStories from './icon.stories';
 
 # Icon
 
-Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` variant and inherits color from `currentColor`. Any glyph can be swapped per name through `appearance.icons` on `MosaicProvider`. Mosaic's styling applies to an override just like the built-in glyph — so swapped icons stay visually consistent — and the override also receives `data-cl-slot="icon"` for targeting.
+Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` variant and inherits color from `currentColor`. Any glyph can be swapped per name through `appearance.icons` on `MosaicProvider`. Mosaic's styling applies to an override just like the built-in glyph — so swapped icons stay visually consistent — and the override also carries the `.cl-icon` class and `data-size` attribute for targeting.
+
+Set `placement` when the icon sits beside text inside a container. It adds no styling of its own; it reflects `data-icon="inline-start"` or `data-icon="inline-end"` so the container can react — a `Button`, for example, tightens its padding on the side the icon sits with `:has([data-icon='inline-end'])`. The values are the CSS logical directions, so they follow the writing mode rather than naming a physical edge. Leave it unset for a standalone icon.
 
 ## Playground
 
@@ -15,7 +17,10 @@ Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` v
 
 <PropTable
   meta={IconStories.meta}
-  extra={[{ name: 'name', type: 'IconName' }]}
+  extra={[
+    { name: 'name', type: 'IconName' },
+    { name: 'placement', type: "'inline-start' | 'inline-end'" },
+  ]}
 />
 
 ## Usage
@@ -46,7 +51,7 @@ Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` v
 
 ### Overriding a glyph
 
-Pass `appearance.icons` to `MosaicProvider` to replace a glyph by name. The override is a function receiving the resolved props — Mosaic's sizing/color `className` and `data-cl-slot` — which you spread onto your own element. Because Mosaic's styling applies to the override too, the replacement only supplies its `viewBox` and paths.
+Pass `appearance.icons` to `MosaicProvider` to replace a glyph by name. The override is a plain element; Mosaic clones it with the resolved sizing `className` and `data-size`, keeping any class the element already had. The replacement only supplies its `viewBox` and paths.
 
 <Story
   name='Override'

packages/swingset/src/stories/icon.stories.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import type { IconProps } from '@clerk/ui/mosaic/components/icon';
-import { Icon, iconRecipe } from '@clerk/ui/mosaic/components/icon';
+import { Icon } from '@clerk/ui/mosaic/components/icon';
 import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
 
@@ -13,8 +13,16 @@ export { default as __source } from './icon.stories?raw';
 export const meta: StoryMeta = {
   group: 'Components',
   title: 'Icon',
-  source: 'packages/ui/src/mosaic/components/icon.tsx',
-  styles: iconRecipe,
+  source: 'packages/ui/src/mosaic/components/icon/icon.tsx',
+  styleEngine: 'stylex',
+  styles: {
+    _variants: {
+      size: { sm: {}, md: {}, lg: {} },
+    },
+    _defaultVariants: {
+      size: 'md',
+    },
+  },
 };
 
 // Story functions accept Record<string,unknown> (knob values) and cast to IconProps.
@@ -78,8 +86,8 @@ export function Override() {
   return (
     <MosaicProvider
       appearance={{
-        // Overrides are elements now, not render functions: Mosaic injects its sizing className and
-        // `data-cl-slot` into the element via cloneElement, so the replacement only needs its viewBox
+        // Overrides are elements, not render functions: Mosaic injects its sizing className and
+        // `data-size` into the element via cloneElement, so the replacement only needs its viewBox
         // + paths. Passing an element (vs a function) also lets overrides be supplied from a Server
         // Component, since elements serialize across the RSC boundary.
         icons: {

packages/ui/src/mosaic/components/icon/icon.styles.ts

@@ -0,0 +1,13 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { space } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  base: { display: 'inline-block', flexShrink: 0 },
+});
+
+export const sizes = stylex.create({
+  sm: { height: space['3.5'], width: space['3.5'] },
+  md: { height: space['4'], width: space['4'] },
+  lg: { height: space['5'], width: space['5'] },
+});