fix(InputMenu/SelectMenu): dynamic empty size

Resolves #4377

Author: benjamincanac

src/theme/input-menu.ts

@@ -11,7 +11,7 @@ export default (options: Required<ModuleOptions>) => {
       content: 'max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col',
       viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1',
       group: 'p-1 isolate',
-      empty: 'py-2 text-center text-sm text-muted',
+      empty: 'text-center text-muted',
       label: 'font-semibold text-highlighted',
       separator: '-mx-1 my-1 h-px bg-border',
       item: ['group relative w-full flex items-center gap-1.5 p-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-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50', options.theme.transitions && 'transition-colors before:transition-colors'],
@@ -48,7 +48,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'sm',
           itemTrailingIcon: 'size-4',
           tagsItem: 'text-[10px]/3',
-          tagsItemDeleteIcon: 'size-3'
+          tagsItemDeleteIcon: 'size-3',
+          empty: 'p-1 text-xs'
         },
         sm: {
           label: 'p-1.5 text-[10px]/3 gap-1.5',
@@ -59,7 +60,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'sm',
           itemTrailingIcon: 'size-4',
           tagsItem: 'text-[10px]/3',
-          tagsItemDeleteIcon: 'size-3'
+          tagsItemDeleteIcon: 'size-3',
+          empty: 'p-1.5 text-xs'
         },
         md: {
           label: 'p-1.5 text-xs gap-1.5',
@@ -70,7 +72,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'md',
           itemTrailingIcon: 'size-5',
           tagsItem: 'text-xs',
-          tagsItemDeleteIcon: 'size-3.5'
+          tagsItemDeleteIcon: 'size-3.5',
+          empty: 'p-1.5 text-sm'
         },
         lg: {
           label: 'p-2 text-xs gap-2',
@@ -81,7 +84,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'md',
           itemTrailingIcon: 'size-5',
           tagsItem: 'text-xs',
-          tagsItemDeleteIcon: 'size-3.5'
+          tagsItemDeleteIcon: 'size-3.5',
+          empty: 'p-2 text-sm'
         },
         xl: {
           label: 'p-2 text-sm gap-2',
@@ -92,7 +96,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingChipSize: 'lg',
           itemTrailingIcon: 'size-6',
           tagsItem: 'text-sm',
-          tagsItemDeleteIcon: 'size-4'
+          tagsItemDeleteIcon: 'size-4',
+          empty: 'p-2 text-base'
         }
       }
     },

src/theme/select.ts

@@ -14,7 +14,7 @@ export default (options: Required<ModuleOptions>) => {
       content: 'max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col',
       viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1',
       group: 'p-1 isolate',
-      empty: 'py-2 text-center text-sm text-muted',
+      empty: 'text-center text-muted',
       label: 'font-semibold text-highlighted',
       separator: '-mx-1 my-1 h-px bg-border',
       item: ['group relative w-full flex items-center 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-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50', options.theme.transitions && 'transition-colors before:transition-colors'],
@@ -37,7 +37,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: '3xs',
           itemLeadingChip: 'size-4',
           itemLeadingChipSize: 'sm',
-          itemTrailingIcon: 'size-4'
+          itemTrailingIcon: 'size-4',
+          empty: 'p-1 text-xs'
         },
         sm: {
           label: 'p-1.5 text-[10px]/3 gap-1.5',
@@ -46,7 +47,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: '3xs',
           itemLeadingChip: 'size-4',
           itemLeadingChipSize: 'sm',
-          itemTrailingIcon: 'size-4'
+          itemTrailingIcon: 'size-4',
+          empty: 'p-1.5 text-xs'
         },
         md: {
           label: 'p-1.5 text-xs gap-1.5',
@@ -55,7 +57,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: '2xs',
           itemLeadingChip: 'size-5',
           itemLeadingChipSize: 'md',
-          itemTrailingIcon: 'size-5'
+          itemTrailingIcon: 'size-5',
+          empty: 'p-1.5 text-sm'
         },
         lg: {
           label: 'p-2 text-xs gap-2',
@@ -64,7 +67,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: '2xs',
           itemLeadingChip: 'size-5',
           itemLeadingChipSize: 'md',
-          itemTrailingIcon: 'size-5'
+          itemTrailingIcon: 'size-5',
+          empty: 'p-2 text-sm'
         },
         xl: {
           label: 'p-2 text-sm gap-2',
@@ -73,7 +77,8 @@ export default (options: Required<ModuleOptions>) => {
           itemLeadingAvatarSize: 'xs',
           itemLeadingChip: 'size-6',
           itemLeadingChipSize: 'lg',
-          itemTrailingIcon: 'size-6'
+          itemTrailingIcon: 'size-6',
+          empty: 'p-2 text-base'
         }
       }
     }