chore(theme): use kebab case

src/runtime/components/DropdownMenu.vue

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/dropdownMenu'
+import theme from '#build/ui/dropdown-menu'
 import type { AvatarProps, IconProps, KbdProps, LinkProps, DropdownMenuContentSlots } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }

src/runtime/components/FormField.vue

@@ -2,7 +2,7 @@
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/formField'
+import theme from '#build/ui/form-field'
 
 const appConfig = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
 

src/runtime/components/NavigationMenu.vue

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'
 import type { NavigationMenuRootProps, NavigationMenuRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/navigationMenu'
+import theme from '#build/ui/navigation-menu'
 import type { AvatarProps, BadgeProps, IconProps, LinkProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }

src/runtime/components/RadioGroup.vue

@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { RadioGroupRootProps, RadioGroupRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/radioGroup'
+import theme from '#build/ui/radio-group'
 
 const appConfig = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
 

src/templates.ts

@@ -1,3 +1,4 @@
+import { kebabCase } from 'scule'
 import { addTemplate, addTypeTemplate } from '@nuxt/kit'
 import type { Nuxt } from '@nuxt/schema'
 import type { ModuleOptions } from './module'
@@ -41,7 +42,7 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
 
   for (const component in theme) {
     addTemplate({
-      filename: `ui/${component}.ts`,
+      filename: `ui/${kebabCase(component)}.ts`,
       write: true,
       getContents: async () => {
         const template = (theme as any)[component]
@@ -63,7 +64,7 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
   addTemplate({
     filename: 'ui/index.ts',
     write: true,
-    getContents: () => Object.keys(theme).map(component => `export { default as ${component} } from './${component}'`).join('\n')
+    getContents: () => Object.keys(theme).map(component => `export { default as ${component} } from './${kebabCase(component)}'`).join('\n')
   })
 
   // FIXME: `typeof colors[number]` should include all colors from the theme

src/theme/index.ts

@@ -7,16 +7,16 @@ export { default as checkbox } from './checkbox'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'
-export { default as dropdownMenu } from './dropdownMenu'
+export { default as dropdownMenu } from './dropdown-menu'
 export { default as form } from './form'
-export { default as formField } from './formField'
+export { default as formField } from './form-field'
 export { default as input } from './input'
 export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as modal } from './modal'
-export { default as navigationMenu } from './navigationMenu'
+export { default as navigationMenu } from './navigation-menu'
 export { default as popover } from './popover'
-export { default as radioGroup } from './radioGroup'
+export { default as radioGroup } from './radio-group'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
 export { default as switch } from './switch'