chore(components): add more sizes to theme config

src/theme/alert.ts

@@ -8,6 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
     description: 'text-sm',
     icon: 'shrink-0 size-5',
     avatar: 'shrink-0',
+    avatarSize: '2xl',
     actions: 'flex gap-1.5 shrink-0',
     close: 'p-0'
   },

src/theme/breadcrumb.ts

@@ -8,6 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
     link: 'group relative flex items-center gap-1.5 text-sm min-w-0',
     linkLeadingIcon: 'shrink-0 size-5',
     linkLeadingAvatar: 'shrink-0',
+    linkLeadingAvatarSize: '2xs',
     linkLabel: 'truncate',
     separator: 'flex',
     separatorIcon: 'shrink-0 size-5 text-gray-500 dark:text-gray-400'

src/theme/command-palette.ts

@@ -13,11 +13,14 @@ export default (options: Required<ModuleOptions>) => ({
     item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
     itemLeadingIcon: ['shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.transitions && 'transition-colors'],
     itemLeadingAvatar: 'shrink-0',
+    itemLeadingAvatarSize: '2xs',
     itemLeadingChip: 'shrink-0 mx-1.5',
+    itemLeadingChipSize: 'md',
     itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
     itemTrailingIcon: 'shrink-0 size-5',
     itemTrailingHighlightedIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 hidden group-data-highlighted:inline-flex',
     itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
+    itemTrailingKbdsSize: 'md',
     itemLabel: 'truncate space-x-1',
     itemLabelBase: 'text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900',
     itemLabelPrefix: 'text-gray-700 dark:text-gray-200',

src/theme/navigation-menu.ts

@@ -8,8 +8,10 @@ export default (options: Required<ModuleOptions>) => ({
     link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400',
     linkLeadingIcon: 'shrink-0 size-5',
     linkLeadingAvatar: 'shrink-0',
+    linkLeadingAvatarSize: '2xs',
     linkTrailing: 'ms-auto inline-flex',
     linkTrailingBadge: 'shrink-0 rounded',
+    linkTrailingBadgeSize: 'sm',
     linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
     linkLabel: 'truncate',
     linkLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500',

src/theme/separator.ts

@@ -7,6 +7,7 @@ export default (options: Required<ModuleOptions>) => ({
     container: 'font-medium text-gray-700 dark:text-gray-200 flex',
     icon: 'shrink-0 size-5',
     avatar: 'shrink-0',
+    avatarSize: '2xs',
     label: 'text-sm'
   },
   variants: {

src/theme/toast.ts

@@ -8,6 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
     description: 'text-sm text-gray-500 dark:text-gray-400',
     icon: 'shrink-0 size-5',
     avatar: 'shrink-0',
+    avatarSize: '2xl',
     actions: 'flex gap-1.5 shrink-0',
     progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
     close: 'p-0'

src/theme/tooltip.ts

@@ -3,6 +3,7 @@ export default {
     content: 'flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
     arrow: 'fill-gray-200 dark:fill-gray-800',
     text: 'truncate',
-    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`
+    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`,
+    kbdsSize: 'sm'
   }
 }