chore(theme): use kebab case

cli/utils/templates.mjs

@@ -19,6 +19,7 @@ const playground = ({ name }) => {
 const component = ({ name }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const camelName = camelCase(name)
+  const kebabName = kebabCase(name)
 
   return {
     filename: `src/runtime/components/${upperName}.vue`,
@@ -28,7 +29,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/${camelName}'
+import theme from '#build/ui/${kebabName}'
 
 const appConfig = _appConfig as AppConfig & { ui: { ${camelName}: Partial<typeof theme> } }
 
@@ -68,10 +69,10 @@ const ui = computed(() => tv({ extend: ${camelName}, slots: props.ui })())
 }
 
 const theme = ({ name }) => {
-  const camelName = camelCase(name)
+  const kebabName = kebabCase(name)
 
   return {
-    filename: `src/theme/${camelName}.ts`,
+    filename: `src/theme/${kebabName}.ts`,
     contents: `
 export default (config: { colors: string[] }) => ({
   slots: {

package.json

@@ -49,6 +49,7 @@
     "nuxt-icon": "^0.6.10",
     "ohash": "^1.1.3",
     "radix-vue": "^1.6.1",
+    "scule": "^1.3.0",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "4.0.0-alpha.10"
   },

playground/pages/form-field.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import theme from '#build/ui/formField'
+import theme from '#build/ui/form-field'
 
 const sizes = Object.keys(theme.variants.size)
 const feedbacks = [

playground/pages/radio-group.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import theme from '#build/ui/checkbox'
+import theme from '#build/ui/radio-group'
 
 const sizes = Object.keys(theme.variants.size)
 
@@ -14,7 +14,6 @@ const options = [
   { value: '3', label: 'Option 3' }
 ]
 
-
 const optionsWithDescription = [
   { value: '1', label: 'Option 1', description: 'Description 1' },
   { value: '2', label: 'Option 2', description: 'Description 2' },

pnpm-lock.yaml

@@ -42,6 +42,9 @@ importers:
       radix-vue:
         specifier: ^1.6.1
         version: 1.6.1(vue@3.4.21)
+      scule:
+        specifier: ^1.3.0
+        version: 1.3.0
       tailwind-variants:
         specifier: ^0.2.1
         version: 0.2.1(tailwindcss@4.0.0-alpha.10)

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'