feat(ui): Add an lg size to the Mosaic Item

`lg` is a taller row with a wider gap and its own inline padding. The media
column narrows to match at `md` and `lg`.

Author: alexcarpenter

packages/swingset/src/stories/item.stories.tsx

@@ -76,7 +76,7 @@ export function Interactive() {
 export function Sizes() {
   return (
     <div className='w-full'>
-      {(['md', 'xs'] as const).map(size => (
+      {(['lg', 'md', 'xs'] as const).map(size => (
         <Item.Root
           key={size}
           size={size}
@@ -271,7 +271,10 @@ export function Group() {
 
 export function Outline() {
   return (
-    <Item.Root variant='outline'>
+    <Item.Root
+      variant='outline'
+      size='lg'
+    >
       <Item.Media>
         <Avatar.Root
           shape='square'
@@ -300,7 +303,7 @@ export function OutlineGroup() {
   return (
     <div className='w-full'>
       <Item.Group variant='outline'>
-        <Item.Root>
+        <Item.Root size='lg'>
           <Item.Media>
             <Avatar.Root
               size='fit'
@@ -327,6 +330,7 @@ export function OutlineGroup() {
           </Item.Actions>
         </Item.Root>
         <Item.Root
+          size='lg'
           render={({ children, ...props }) => (
             <a
               {...props}

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

@@ -71,6 +71,11 @@ export const item = stylex.create({
     gap: space['3'],
     height: space['13'],
   },
+  lg: {
+    gap: space['3'],
+    paddingInline: space['3'],
+    height: space['16'],
+  },
 });
 
 export const media = stylex.create({
@@ -83,7 +88,8 @@ export const media = stylex.create({
   },
 
   xs: { width: space['6'] },
-  md: { width: space['10'] },
+  md: { width: space['9.5'] },
+  lg: { width: space['9.5'] },
 });
 
 export const content = stylex.create({