fix(components): replace as const with correct type in config (#2652)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

Author: gioboa

docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue

@@ -45,7 +45,7 @@ const ui = {
         inactive: 'text-gray-400 dark:text-gray-500'
       },
       avatar: {
-        size: '2xs' as const
+        size: '2xs'
       }
     }
   }

src/runtime/types/checkbox.d.ts

@@ -0,0 +1,3 @@
+import type colors from '#ui-colors'
+
+export type CheckboxColor = typeof colors[number]

src/runtime/types/divider.d.ts

@@ -1,3 +1,3 @@
-import type { divider } from '#ui/ui.config'
+import type { divider } from '../ui.config'
 
 export type DividerSize = keyof typeof divider.border.size.horizontal | keyof typeof divider.border.size.vertical

src/runtime/types/index.ts

@@ -4,6 +4,7 @@ export * from './avatar'
 export * from './badge'
 export * from './breadcrumb'
 export * from './button'
+export * from './checkbox'
 export * from './chip'
 export * from './clipboard'
 export * from './command-palette'

src/runtime/ui.config/data/table.ts

@@ -1,3 +1,5 @@
+import type { ButtonColor, ButtonSize, ButtonVariant, CheckboxColor, ProgressAnimation, ProgressColor } from '../../types'
+
 export default {
   wrapper: 'relative overflow-x-auto',
   base: 'min-w-full table-fixed',
@@ -51,23 +53,23 @@ export default {
       icon: 'i-heroicons-arrows-up-down-20-solid',
       trailing: true,
       square: true,
-      color: 'gray' as const,
-      variant: 'ghost' as const,
+      color: 'gray' as ButtonColor,
+      variant: 'ghost' as ButtonVariant,
       class: '-m-1.5'
     },
     expandButton: {
       icon: 'i-heroicons-chevron-down',
-      color: 'gray' as const,
-      variant: 'ghost' as const,
-      size: 'xs' as const,
+      color: 'gray' as ButtonColor,
+      variant: 'ghost' as ButtonVariant,
+      size: 'xs' as ButtonSize,
       class: '-my-1.5 align-middle'
     },
     checkbox: {
-      color: 'primary' as const
+      color: 'primary' as CheckboxColor
     },
     progress: {
-      color: 'primary' as const,
-      animation: 'carousel' as const
+      color: 'primary' as ProgressColor,
+      animation: 'carousel' as ProgressAnimation
     },
     loadingState: {
       icon: 'i-heroicons-arrow-path-20-solid',

src/runtime/ui.config/elements/accordion.ts

@@ -16,7 +16,7 @@ export default {
     openIcon: 'i-heroicons-chevron-down-20-solid',
     closeIcon: '',
     class: 'mb-1.5 w-full',
-    variant: 'soft' as const,
+    variant: 'soft',
     truncate: true
   }
 }

src/runtime/ui.config/elements/alert.ts

@@ -1,3 +1,5 @@
+import type { AvatarSize, ButtonColor, ButtonSize, ButtonVariant } from '../../types'
+
 export default {
   wrapper: 'w-full relative overflow-hidden',
   inner: 'w-0 flex-1',
@@ -13,7 +15,7 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0 self-center',
-    size: 'md' as const
+    size: 'md' as AvatarSize
   },
   color: {
     white: {
@@ -32,9 +34,9 @@ export default {
     icon: null,
     closeButton: null,
     actionButton: {
-      size: 'xs' as const,
-      color: 'primary' as const,
-      variant: 'link' as const
+      size: 'xs' as ButtonSize,
+      color: 'primary' as ButtonColor,
+      variant: 'link' as ButtonVariant
     }
   }
 }

src/runtime/ui.config/elements/carousel.ts

@@ -1,3 +1,5 @@
+import type { ButtonColor } from '../../types'
+
 export default {
   wrapper: 'relative',
   container: 'relative w-full flex overflow-x-auto snap-x snap-mandatory scroll-smooth',
@@ -13,12 +15,12 @@ export default {
   },
   default: {
     prevButton: {
-      color: 'black' as const,
+      color: 'black' as ButtonColor,
       class: 'rtl:[&_span:first-child]:rotate-180 absolute start-4 top-1/2 transform -translate-y-1/2 rounded-full',
       icon: 'i-heroicons-chevron-left-20-solid'
     },
     nextButton: {
-      color: 'black' as const,
+      color: 'black' as ButtonColor,
       class: 'rtl:[&_span:last-child]:rotate-180 absolute end-4 top-1/2 transform -translate-y-1/2 rounded-full',
       icon: 'i-heroicons-chevron-right-20-solid'
     }

src/runtime/ui.config/elements/dropdown.ts

@@ -1,3 +1,4 @@
+import type { AvatarSize } from '../../types'
 import { arrow } from '../popper'
 
 export default {
@@ -28,7 +29,7 @@ export default {
     },
     avatar: {
       base: 'flex-shrink-0',
-      size: '2xs' as const
+      size: '2xs' as AvatarSize
     },
     label: 'truncate',
     shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'

src/runtime/ui.config/forms/inputMenu.ts

@@ -1,3 +1,4 @@
+import type { AvatarSize } from '../../types'
 import { arrow } from '../popper'
 
 export default {
@@ -36,7 +37,7 @@ export default {
     },
     avatar: {
       base: 'flex-shrink-0',
-      size: '2xs' as const
+      size: '2xs' as AvatarSize
     },
     chip: {
       base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'

src/runtime/ui.config/layout/divider.ts

@@ -1,3 +1,5 @@
+import type { AvatarSize } from '../../types'
+
 export default {
   wrapper: {
     base: 'flex items-center align-center text-center',
@@ -42,11 +44,11 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0',
-    size: '2xs' as const
+    size: '2xs' as AvatarSize
   },
   label: 'text-sm',
   default: {
-    size: '2xs' as const,
-    type: 'solid' as const
+    size: '2xs',
+    type: 'solid'
   }
 }

src/runtime/ui.config/navigation/commandPalette.ts

@@ -1,3 +1,5 @@
+import type { AvatarSize } from '../../types'
+
 export default {
   wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800',
   container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
@@ -46,7 +48,7 @@ export default {
       },
       avatar: {
         base: 'flex-shrink-0',
-        size: '2xs' as const
+        size: '2xs' as AvatarSize
       },
       chip: {
         base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'

src/runtime/ui.config/navigation/horizontalNavigation.ts

@@ -1,3 +1,5 @@
+import type { AvatarSize, BadgeColor, BadgeSize, BadgeVariant } from '../../types'
+
 export default {
   wrapper: 'relative w-full flex items-center justify-between',
   container: 'flex items-center min-w-0',
@@ -15,12 +17,12 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0',
-    size: '2xs' as const
+    size: '2xs' as AvatarSize
   },
   badge: {
     base: 'flex-shrink-0 ms-auto relative rounded',
-    color: 'gray' as const,
-    variant: 'solid' as const,
-    size: 'xs' as const
+    color: 'gray' as BadgeColor,
+    variant: 'solid' as BadgeVariant,
+    size: 'xs' as BadgeSize
   }
 }

src/runtime/ui.config/navigation/pagination.ts

@@ -1,32 +1,34 @@
+import type { ButtonColor } from '../../types'
+
 export default {
   wrapper: 'flex items-center -space-x-px',
   base: '',
   rounded: 'first:rounded-s-md last:rounded-e-md',
   default: {
     size: 'sm',
     activeButton: {
-      color: 'primary' as const
+      color: 'primary' as ButtonColor
     },
     inactiveButton: {
-      color: 'white' as const
+      color: 'white' as ButtonColor
     },
     firstButton: {
-      color: 'white' as const,
+      color: 'white' as ButtonColor,
       class: 'rtl:[&_span:first-child]:rotate-180',
       icon: 'i-heroicons-chevron-double-left-20-solid'
     },
     lastButton: {
-      color: 'white' as const,
+      color: 'white' as ButtonColor,
       class: 'rtl:[&_span:last-child]:rotate-180',
       icon: 'i-heroicons-chevron-double-right-20-solid'
     },
     prevButton: {
-      color: 'white' as const,
+      color: 'white' as ButtonColor,
       class: 'rtl:[&_span:first-child]:rotate-180',
       icon: 'i-heroicons-chevron-left-20-solid'
     },
     nextButton: {
-      color: 'white' as const,
+      color: 'white' as ButtonColor,
       class: 'rtl:[&_span:last-child]:rotate-180',
       icon: 'i-heroicons-chevron-right-20-solid'
     }

src/runtime/ui.config/navigation/verticalNavigation.ts

@@ -1,3 +1,5 @@
+import type { AvatarSize, BadgeColor, BadgeSize, BadgeVariant } from '../../types'
+
 export default {
   wrapper: 'relative',
   base: 'group relative flex items-center gap-1.5 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
@@ -17,13 +19,13 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0',
-    size: '2xs' as const
+    size: '2xs' as AvatarSize
   },
   badge: {
     base: 'flex-shrink-0 ms-auto relative rounded',
-    color: 'gray' as const,
-    variant: 'solid' as const,
-    size: 'xs' as const
+    color: 'gray' as BadgeColor,
+    variant: 'solid' as BadgeVariant,
+    size: 'xs' as BadgeSize
   },
   divider: {
     wrapper: {

src/runtime/ui.config/overlays/notification.ts

@@ -1,3 +1,5 @@
+import type { AvatarSize, ButtonColor, ButtonSize, ButtonVariant } from '../../types'
+
 export default {
   wrapper: 'w-full pointer-events-auto',
   container: 'relative overflow-hidden',
@@ -17,7 +19,7 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0 self-center',
-    size: 'md' as const
+    size: 'md' as AvatarSize
   },
   progress: {
     base: 'absolute bottom-0 end-0 start-0 h-1',
@@ -38,13 +40,13 @@ export default {
     timeout: 5000,
     closeButton: {
       icon: 'i-heroicons-x-mark-20-solid',
-      color: 'gray' as const,
-      variant: 'link' as const,
+      color: 'gray' as ButtonColor,
+      variant: 'link' as ButtonVariant,
       padded: false
     },
     actionButton: {
-      size: 'xs' as const,
-      color: 'white' as const
+      size: 'xs' as ButtonSize,
+      color: 'white' as ButtonColor
     }
   }
 }