@nuxt/ui 3.0.0-alpha.10 → 3.0.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (172) hide show
  1. package/.nuxt/ui/alert.ts +75 -58
  2. package/.nuxt/ui/avatar-group.ts +13 -1
  3. package/.nuxt/ui/avatar.ts +13 -1
  4. package/.nuxt/ui/badge.ts +102 -65
  5. package/.nuxt/ui/button-group.ts +13 -0
  6. package/.nuxt/ui/button.ts +124 -92
  7. package/.nuxt/ui/calendar.ts +20 -2
  8. package/.nuxt/ui/carousel.ts +5 -3
  9. package/.nuxt/ui/checkbox.ts +27 -9
  10. package/.nuxt/ui/chip.ts +36 -7
  11. package/.nuxt/ui/color-picker.ts +9 -1
  12. package/.nuxt/ui/context-menu.ts +32 -14
  13. package/.nuxt/ui/drawer.ts +11 -4
  14. package/.nuxt/ui/dropdown-menu.ts +32 -14
  15. package/.nuxt/ui/form-field.ts +9 -1
  16. package/.nuxt/ui/input-menu.ts +110 -75
  17. package/.nuxt/ui/input-number.ts +82 -51
  18. package/.nuxt/ui/input.ts +88 -53
  19. package/.nuxt/ui/kbd.ts +14 -2
  20. package/.nuxt/ui/navigation-menu.ts +114 -68
  21. package/.nuxt/ui/pin-input.ts +57 -31
  22. package/.nuxt/ui/popover.ts +1 -1
  23. package/.nuxt/ui/progress.ts +93 -54
  24. package/.nuxt/ui/radio-group.ts +25 -2
  25. package/.nuxt/ui/select-menu.ts +89 -54
  26. package/.nuxt/ui/select.ts +89 -54
  27. package/.nuxt/ui/separator.ts +52 -23
  28. package/.nuxt/ui/slideover.ts +11 -4
  29. package/.nuxt/ui/slider.ts +45 -22
  30. package/.nuxt/ui/stepper.ts +45 -23
  31. package/.nuxt/ui/switch.ts +20 -2
  32. package/.nuxt/ui/table.ts +30 -13
  33. package/.nuxt/ui/tabs.ts +67 -39
  34. package/.nuxt/ui/textarea.ts +88 -53
  35. package/.nuxt/ui/toast.ts +11 -1
  36. package/.nuxt/ui/toaster.ts +27 -11
  37. package/.nuxt/ui/tooltip.ts +1 -1
  38. package/README.md +8 -1
  39. package/cli/commands/make/component.mjs +12 -0
  40. package/cli/package.json +2 -2
  41. package/cli/templates.mjs +17 -12
  42. package/dist/client/devtools/200.html +1 -1
  43. package/dist/client/devtools/404.html +1 -1
  44. package/dist/client/devtools/_nuxt/CQ-XZFu7.js +54 -0
  45. package/dist/client/devtools/_nuxt/DNZFyo26.js +1 -0
  46. package/dist/client/devtools/_nuxt/Dtz-o9GB.js +1 -0
  47. package/dist/client/devtools/_nuxt/builds/latest.json +1 -1
  48. package/dist/client/devtools/_nuxt/builds/meta/1f5fbd7b-9d97-480e-9ae4-e02b4ff7018b.json +1 -0
  49. package/dist/client/devtools/_nuxt/entry.qOdop8tq.css +1 -0
  50. package/dist/client/devtools/_nuxt/error-404.D-rS9BDk.css +1 -0
  51. package/dist/client/devtools/_nuxt/error-500.CfcCHs91.css +1 -0
  52. package/dist/client/devtools/index.html +1 -1
  53. package/dist/module.cjs +1 -1
  54. package/dist/module.json +1 -1
  55. package/dist/module.mjs +1 -1
  56. package/dist/runtime/components/Accordion.vue +2 -1
  57. package/dist/runtime/components/Alert.vue +3 -2
  58. package/dist/runtime/components/Avatar.vue +5 -4
  59. package/dist/runtime/components/AvatarGroup.vue +2 -1
  60. package/dist/runtime/components/Badge.vue +2 -1
  61. package/dist/runtime/components/Breadcrumb.vue +1 -1
  62. package/dist/runtime/components/Button.vue +2 -1
  63. package/dist/runtime/components/ButtonGroup.vue +2 -1
  64. package/dist/runtime/components/Calendar.vue +2 -1
  65. package/dist/runtime/components/Card.vue +1 -1
  66. package/dist/runtime/components/Carousel.vue +2 -1
  67. package/dist/runtime/components/Checkbox.vue +2 -1
  68. package/dist/runtime/components/Chip.vue +3 -2
  69. package/dist/runtime/components/Collapsible.vue +4 -2
  70. package/dist/runtime/components/ColorPicker.vue +2 -1
  71. package/dist/runtime/components/CommandPalette.vue +12 -5
  72. package/dist/runtime/components/Container.vue +1 -1
  73. package/dist/runtime/components/ContextMenu.vue +2 -1
  74. package/dist/runtime/components/ContextMenuContent.vue +3 -3
  75. package/dist/runtime/components/Drawer.vue +7 -2
  76. package/dist/runtime/components/DropdownMenu.vue +2 -1
  77. package/dist/runtime/components/DropdownMenuContent.vue +3 -3
  78. package/dist/runtime/components/Form.vue +15 -14
  79. package/dist/runtime/components/FormField.vue +2 -1
  80. package/dist/runtime/components/Input.vue +3 -2
  81. package/dist/runtime/components/InputMenu.vue +13 -2
  82. package/dist/runtime/components/InputNumber.vue +2 -1
  83. package/dist/runtime/components/Kbd.vue +2 -1
  84. package/dist/runtime/components/Link.vue +1 -1
  85. package/dist/runtime/components/Modal.vue +8 -13
  86. package/dist/runtime/components/NavigationMenu.vue +14 -9
  87. package/dist/runtime/components/Pagination.vue +1 -1
  88. package/dist/runtime/components/PinInput.vue +4 -3
  89. package/dist/runtime/components/Popover.vue +7 -6
  90. package/dist/runtime/components/Progress.vue +4 -3
  91. package/dist/runtime/components/RadioGroup.vue +2 -1
  92. package/dist/runtime/components/Select.vue +3 -2
  93. package/dist/runtime/components/SelectMenu.vue +20 -4
  94. package/dist/runtime/components/Separator.vue +2 -1
  95. package/dist/runtime/components/Skeleton.vue +1 -1
  96. package/dist/runtime/components/Slideover.vue +8 -12
  97. package/dist/runtime/components/Slider.vue +2 -1
  98. package/dist/runtime/components/Stepper.vue +6 -4
  99. package/dist/runtime/components/Switch.vue +2 -1
  100. package/dist/runtime/components/Table.vue +2 -1
  101. package/dist/runtime/components/Tabs.vue +3 -1
  102. package/dist/runtime/components/Textarea.vue +3 -2
  103. package/dist/runtime/components/Toast.vue +2 -1
  104. package/dist/runtime/components/Toaster.vue +2 -1
  105. package/dist/runtime/components/Tooltip.vue +1 -1
  106. package/dist/runtime/composables/defineShortcuts.js +1 -1
  107. package/dist/runtime/composables/useFormField.d.ts +1 -1
  108. package/dist/runtime/composables/useFormField.js +6 -3
  109. package/dist/runtime/locale/ar.js +3 -1
  110. package/dist/runtime/locale/cs.js +3 -1
  111. package/dist/runtime/locale/da.d.ts +2 -0
  112. package/dist/runtime/locale/da.js +54 -0
  113. package/dist/runtime/locale/de.js +3 -1
  114. package/dist/runtime/locale/el.d.ts +2 -0
  115. package/dist/runtime/locale/el.js +54 -0
  116. package/dist/runtime/locale/en.js +3 -1
  117. package/dist/runtime/locale/es.js +3 -1
  118. package/dist/runtime/locale/et.d.ts +2 -0
  119. package/dist/runtime/locale/et.js +54 -0
  120. package/dist/runtime/locale/fa_ir.js +3 -1
  121. package/dist/runtime/locale/fi.d.ts +2 -0
  122. package/dist/runtime/locale/fi.js +54 -0
  123. package/dist/runtime/locale/fr.js +3 -1
  124. package/dist/runtime/locale/id.d.ts +2 -0
  125. package/dist/runtime/locale/id.js +54 -0
  126. package/dist/runtime/locale/index.d.ts +9 -0
  127. package/dist/runtime/locale/index.js +9 -0
  128. package/dist/runtime/locale/it.js +3 -1
  129. package/dist/runtime/locale/ja.js +3 -1
  130. package/dist/runtime/locale/ko.js +3 -1
  131. package/dist/runtime/locale/nl.js +3 -1
  132. package/dist/runtime/locale/pl.js +3 -1
  133. package/dist/runtime/locale/pt.js +3 -1
  134. package/dist/runtime/locale/pt_br.js +3 -1
  135. package/dist/runtime/locale/ru.js +3 -1
  136. package/dist/runtime/locale/sk.js +3 -1
  137. package/dist/runtime/locale/sv.d.ts +2 -0
  138. package/dist/runtime/locale/sv.js +54 -0
  139. package/dist/runtime/locale/th.d.ts +2 -0
  140. package/dist/runtime/locale/th.js +54 -0
  141. package/dist/runtime/locale/tr.js +3 -1
  142. package/dist/runtime/locale/uk.d.ts +2 -0
  143. package/dist/runtime/locale/uk.js +54 -0
  144. package/dist/runtime/locale/vi.d.ts +2 -0
  145. package/dist/runtime/locale/vi.js +54 -0
  146. package/dist/runtime/locale/zh_hans.js +3 -1
  147. package/dist/runtime/locale/zh_hant.js +11 -9
  148. package/dist/runtime/types/form.d.ts +2 -2
  149. package/dist/runtime/types/form.js +2 -2
  150. package/dist/runtime/types/locale.d.ts +2 -0
  151. package/dist/runtime/utils/form.d.ts +2 -2
  152. package/dist/runtime/utils/form.js +3 -3
  153. package/dist/runtime/utils/tv.d.ts +1 -0
  154. package/dist/runtime/utils/tv.js +4 -0
  155. package/dist/runtime/vue/components/Icon.vue +2 -2
  156. package/dist/runtime/vue/plugins/head.d.ts +1 -1
  157. package/dist/runtime/vue/plugins/head.js +3 -3
  158. package/dist/shared/{ui.D_93iuwH.mjs → ui.BKsd22-Q.mjs} +63 -36
  159. package/dist/shared/{ui.CwmIkD_Y.cjs → ui.DCjJwb6l.cjs} +63 -36
  160. package/dist/unplugin.cjs +5 -5
  161. package/dist/unplugin.mjs +5 -5
  162. package/dist/vite.cjs +1 -1
  163. package/dist/vite.mjs +1 -1
  164. package/package.json +49 -44
  165. package/dist/client/devtools/_nuxt/B1fTd_Rf.js +0 -1
  166. package/dist/client/devtools/_nuxt/CSUxkedg.js +0 -1
  167. package/dist/client/devtools/_nuxt/CbRTGpb7.js +0 -1
  168. package/dist/client/devtools/_nuxt/YQTlxbcT.js +0 -53
  169. package/dist/client/devtools/_nuxt/builds/meta/b3465abc-0a92-4ee7-ba6b-e5174891fcc0.json +0 -1
  170. package/dist/client/devtools/_nuxt/entry.DXXceQev.css +0 -1
  171. package/dist/client/devtools/_nuxt/error-404.BJpkZFyY.css +0 -1
  172. package/dist/client/devtools/_nuxt/error-500.D3i9VDlt.css +0 -1
@@ -0,0 +1,54 @@
1
+ import { defineLocale } from "../composables/defineLocale.js";
2
+ export default defineLocale({
3
+ name: "Ti\u1EBFng Vi\u1EC7t",
4
+ code: "vi",
5
+ messages: {
6
+ inputMenu: {
7
+ noMatch: "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3 ph\xF9 h\u1EE3p",
8
+ noData: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u",
9
+ create: 'T\u1EA1o "{label}"'
10
+ },
11
+ calendar: {
12
+ prevYear: "N\u0103m tr\u01B0\u1EDBc",
13
+ nextYear: "N\u0103m sau",
14
+ prevMonth: "Th\xE1ng tr\u01B0\u1EDBc",
15
+ nextMonth: "Th\xE1ng sau"
16
+ },
17
+ inputNumber: {
18
+ increment: "T\u0103ng",
19
+ decrement: "Gi\u1EA3m"
20
+ },
21
+ commandPalette: {
22
+ placeholder: "Nh\u1EADp l\u1EC7nh ho\u1EB7c t\xECm ki\u1EBFm...",
23
+ noMatch: "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3 ph\xF9 h\u1EE3p",
24
+ noData: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u",
25
+ close: "\u0110\xF3ng"
26
+ },
27
+ selectMenu: {
28
+ noMatch: "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3 ph\xF9 h\u1EE3p",
29
+ noData: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u",
30
+ create: 'T\u1EA1o "{label}"',
31
+ search: "T\xECm ki\u1EBFm..."
32
+ },
33
+ toast: {
34
+ close: "\u0110\xF3ng"
35
+ },
36
+ carousel: {
37
+ prev: "Tr\u01B0\u1EDBc",
38
+ next: "Sau",
39
+ goto: "\u0110i t\u1EDBi \xF4 {slide}"
40
+ },
41
+ modal: {
42
+ close: "\u0110\xF3ng"
43
+ },
44
+ slideover: {
45
+ close: "\u0110\xF3ng"
46
+ },
47
+ alert: {
48
+ close: "\u0110\xF3ng"
49
+ },
50
+ table: {
51
+ noData: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u"
52
+ }
53
+ }
54
+ });
@@ -19,6 +19,7 @@ export default defineLocale({
19
19
  decrement: "\u51CF\u5C11"
20
20
  },
21
21
  commandPalette: {
22
+ placeholder: "\u8F93\u5165\u547D\u4EE4\u6216\u641C\u7D22...",
22
23
  noMatch: "\u6CA1\u6709\u5339\u914D\u7684\u6570\u636E",
23
24
  noData: "\u6CA1\u6709\u6570\u636E",
24
25
  close: "\u5173\u95ED"
@@ -26,7 +27,8 @@ export default defineLocale({
26
27
  selectMenu: {
27
28
  noMatch: "\u6CA1\u6709\u5339\u914D\u7684\u6570\u636E",
28
29
  noData: "\u6CA1\u6709\u6570\u636E",
29
- create: '\u521B\u5EFA "{label}"'
30
+ create: '\u521B\u5EFA "{label}"',
31
+ search: "\u641C\u7D22..."
30
32
  },
31
33
  toast: {
32
34
  close: "\u5173\u95ED"
@@ -1,32 +1,34 @@
1
1
  import { defineLocale } from "../composables/defineLocale.js";
2
2
  export default defineLocale({
3
- name: "\u7E41\u4F53\u4E2D\u6587",
3
+ name: "\u7E41\u9AD4\u4E2D\u6587",
4
4
  code: "zh-Hant",
5
5
  messages: {
6
6
  inputMenu: {
7
- noMatch: "\u6C92\u6709\u5339\u914D\u7684\u8CC7\u6599",
7
+ noMatch: "\u6C92\u6709\u76F8\u7B26\u7684\u8CC7\u6599",
8
8
  noData: "\u6C92\u6709\u8CC7\u6599",
9
- create: '\u5275\u5EFA "{label}"'
9
+ create: "\u5EFA\u7ACB\u300C{label}\u300D"
10
10
  },
11
11
  calendar: {
12
12
  prevYear: "\u53BB\u5E74",
13
13
  nextYear: "\u660E\u5E74",
14
- prevMonth: "\u4E0A\u4E2A\u6708",
15
- nextMonth: "\u4E0B\u4E2A\u6708"
14
+ prevMonth: "\u4E0A\u500B\u6708",
15
+ nextMonth: "\u4E0B\u500B\u6708"
16
16
  },
17
17
  inputNumber: {
18
18
  increment: "\u589E\u52A0",
19
- decrement: "\u51CF\u5C11"
19
+ decrement: "\u6E1B\u5C11"
20
20
  },
21
21
  commandPalette: {
22
- noMatch: "\u6C92\u6709\u5339\u914D\u7684\u8CC7\u6599",
22
+ placeholder: "\u8F38\u5165\u547D\u4EE4\u6216\u641C\u5C0B...",
23
+ noMatch: "\u6C92\u6709\u76F8\u7B26\u7684\u8CC7\u6599",
23
24
  noData: "\u6C92\u6709\u8CC7\u6599",
24
25
  close: "\u95DC\u9589"
25
26
  },
26
27
  selectMenu: {
27
- noMatch: "\u6C92\u6709\u5339\u914D\u7684\u8CC7\u6599",
28
+ noMatch: "\u6C92\u6709\u76F8\u7B26\u7684\u8CC7\u6599",
28
29
  noData: "\u6C92\u6709\u8CC7\u6599",
29
- create: '\u5275\u5EFA "{label}"'
30
+ create: "\u5EFA\u7ACB\u300C{label}\u300D",
31
+ search: "\u641C\u5C0B..."
30
32
  },
31
33
  toast: {
32
34
  close: "\u95DC\u9589"
@@ -33,7 +33,7 @@ export type FormSubmitEvent<T> = SubmitEvent & {
33
33
  };
34
34
  export type FormValidationError = {
35
35
  errors: FormErrorWithId[];
36
- childrens: FormValidationError[];
36
+ children?: FormValidationError[];
37
37
  };
38
38
  export type FormErrorEvent = SubmitEvent & FormValidationError;
39
39
  export type FormEventType = FormInputEvents;
@@ -70,6 +70,6 @@ export interface ValidateReturnSchema<T> {
70
70
  export declare class FormValidationException extends Error {
71
71
  formId: string | number;
72
72
  errors: FormErrorWithId[];
73
- childrens: FormValidationException[];
73
+ children?: FormValidationException[];
74
74
  constructor(formId: string | number, errors: FormErrorWithId[], childErrors: FormValidationException[]);
75
75
  }
@@ -1,12 +1,12 @@
1
1
  export class FormValidationException extends Error {
2
2
  formId;
3
3
  errors;
4
- childrens;
4
+ children;
5
5
  constructor(formId, errors, childErrors) {
6
6
  super("Form validation exception");
7
7
  this.formId = formId;
8
8
  this.errors = errors;
9
- this.childrens = childErrors;
9
+ this.children = childErrors;
10
10
  Object.setPrototypeOf(this, FormValidationException.prototype);
11
11
  }
12
12
  }
@@ -15,6 +15,7 @@ export type Messages = {
15
15
  decrement: string;
16
16
  };
17
17
  commandPalette: {
18
+ placeholder: string;
18
19
  noMatch: string;
19
20
  noData: string;
20
21
  close: string;
@@ -23,6 +24,7 @@ export type Messages = {
23
24
  noMatch: string;
24
25
  noData: string;
25
26
  create: string;
27
+ search: string;
26
28
  };
27
29
  toast: {
28
30
  close: string;
@@ -13,5 +13,5 @@ export declare function isJoiSchema(schema: any): schema is JoiSchema;
13
13
  export declare function isJoiError(error: any): error is JoiError;
14
14
  export declare function isValibotSchema(schema: any): schema is ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>;
15
15
  export declare function isStandardSchema(schema: any): schema is StandardSchemaV1;
16
- export declare function validateStandarSchema(state: any, schema: StandardSchemaV1): Promise<ValidateReturnSchema<typeof state>>;
17
- export declare function parseSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;
16
+ export declare function validateStandardSchema(state: any, schema: StandardSchemaV1): Promise<ValidateReturnSchema<typeof state>>;
17
+ export declare function validateSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;
@@ -22,7 +22,7 @@ export function isValibotSchema(schema) {
22
22
  export function isStandardSchema(schema) {
23
23
  return "~standard" in schema;
24
24
  }
25
- export async function validateStandarSchema(state, schema) {
25
+ export async function validateStandardSchema(state, schema) {
26
26
  const result = await schema["~standard"].validate({
27
27
  value: state
28
28
  });
@@ -136,7 +136,7 @@ async function validateValibotSchema(state, schema) {
136
136
  result: null
137
137
  };
138
138
  }
139
- export function parseSchema(state, schema) {
139
+ export function validateSchema(state, schema) {
140
140
  if (isZodSchema(schema)) {
141
141
  return validateZodSchema(state, schema);
142
142
  } else if (isJoiSchema(schema)) {
@@ -148,7 +148,7 @@ export function parseSchema(state, schema) {
148
148
  } else if (isSuperStructSchema(schema)) {
149
149
  return validateSuperstructSchema(state, schema);
150
150
  } else if (isStandardSchema(schema)) {
151
- return validateStandarSchema(state, schema);
151
+ return validateStandardSchema(state, schema);
152
152
  } else {
153
153
  throw new Error("Form validation failed: Unsupported form schema");
154
154
  }
@@ -0,0 +1 @@
1
+ export declare const tv: import("tailwind-variants").CreateTV<boolean | (string | number | symbol)[] | {} | undefined>;
@@ -0,0 +1,4 @@
1
+ import { createTV } from "tailwind-variants";
2
+ import _appConfig from "#build/app.config";
3
+ const appConfig = _appConfig;
4
+ export const tv = createTV(appConfig.ui?.tv);
@@ -5,11 +5,11 @@ export interface IconProps {
5
5
  </script>
6
6
 
7
7
  <script setup lang="ts">
8
- import { Icon } from '@iconify/vue'
8
+ import { Icon as IconifyIcon } from '@iconify/vue'
9
9
 
10
10
  defineProps<IconProps>()
11
11
  </script>
12
12
 
13
13
  <template>
14
- <Icon :icon="name.replace(/^i-/, '')" />
14
+ <IconifyIcon :icon="name.replace(/^i-/, '')" />
15
15
  </template>
@@ -1,4 +1,4 @@
1
1
  declare const _default: {
2
- install(app: import("vue").App<any>): void;
2
+ install(): void;
3
3
  };
4
4
  export default _default;
@@ -1,6 +1,6 @@
1
- import { createHead } from "@unhead/vue";
1
+ import { createHead, setHeadInjectionHandler } from "@unhead/vue";
2
2
  export default {
3
- install(app) {
4
- app.use(createHead());
3
+ install() {
4
+ setHeadInjectionHandler(() => createHead());
5
5
  }
6
6
  };
@@ -40,7 +40,7 @@ const defaultOptions = {
40
40
  fonts: true,
41
41
  colorMode: true,
42
42
  theme: {
43
- colors: void 0,
43
+ colors: undefined,
44
44
  transitions: true
45
45
  },
46
46
  devtools: {
@@ -247,7 +247,7 @@ const avatarGroup = {
247
247
 
248
248
  const badge = (options) => ({
249
249
  slots: {
250
- base: "rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center",
250
+ base: "font-medium inline-flex items-center",
251
251
  label: "truncate",
252
252
  leadingIcon: "shrink-0",
253
253
  leadingAvatar: "shrink-0",
@@ -266,23 +266,35 @@ const badge = (options) => ({
266
266
  subtle: ""
267
267
  },
268
268
  size: {
269
+ xs: {
270
+ base: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))]",
271
+ leadingIcon: "size-3",
272
+ leadingAvatarSize: "3xs",
273
+ trailingIcon: "size-3"
274
+ },
269
275
  sm: {
270
- base: "text-xs px-1.5 py-0.5 gap-1",
271
- leadingIcon: "size-4",
276
+ base: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))]",
277
+ leadingIcon: "size-3",
272
278
  leadingAvatarSize: "3xs",
273
- trailingIcon: "size-4"
279
+ trailingIcon: "size-3"
274
280
  },
275
281
  md: {
276
- base: "text-xs px-2 py-1 gap-1",
282
+ base: "text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)]",
277
283
  leadingIcon: "size-4",
278
284
  leadingAvatarSize: "3xs",
279
285
  trailingIcon: "size-4"
280
286
  },
281
287
  lg: {
282
- base: "text-sm px-2 py-1 gap-1.5",
288
+ base: "text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
283
289
  leadingIcon: "size-5",
284
290
  leadingAvatarSize: "2xs",
285
291
  trailingIcon: "size-5"
292
+ },
293
+ xl: {
294
+ base: "text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
295
+ leadingIcon: "size-6",
296
+ leadingAvatarSize: "2xs",
297
+ trailingIcon: "size-6"
286
298
  }
287
299
  }
288
300
  },
@@ -671,9 +683,6 @@ const carousel = (options) => ({
671
683
  dot: "bg-[var(--ui-border-inverted)]"
672
684
  }
673
685
  }
674
- },
675
- defaultVariants: {
676
- orientation: "horizontal"
677
686
  }
678
687
  });
679
688
 
@@ -906,7 +915,7 @@ const container = {
906
915
 
907
916
  const contextMenu = (options) => ({
908
917
  slots: {
909
- content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
918
+ content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
910
919
  group: "p-1 isolate",
911
920
  label: "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
912
921
  separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
@@ -1058,7 +1067,7 @@ const drawer = {
1058
1067
 
1059
1068
  const dropdownMenu = (options) => ({
1060
1069
  slots: {
1061
- content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
1070
+ content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
1062
1071
  arrow: "fill-[var(--ui-border)]",
1063
1072
  group: "p-1 isolate",
1064
1073
  label: "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
@@ -1362,7 +1371,7 @@ const inputMenu = (options) => {
1362
1371
  base: () => ["rounded-[calc(var(--ui-radius)*1.5)]", options.theme.transitions && "transition-colors"],
1363
1372
  trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
1364
1373
  arrow: "fill-[var(--ui-border)]",
1365
- content: "max-h-60 w-[var(--reka-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
1374
+ content: "max-h-60 w-[var(--reka-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
1366
1375
  viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
1367
1376
  group: "p-1 isolate",
1368
1377
  empty: "py-2 text-center text-sm text-[var(--ui-text-muted)]",
@@ -1647,7 +1656,7 @@ const navigationMenu = (options) => ({
1647
1656
  linkLeadingAvatar: "shrink-0",
1648
1657
  linkLeadingAvatarSize: "2xs",
1649
1658
  linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
1650
- linkTrailingBadge: "shrink-0 rounded-[var(--ui-radius)]",
1659
+ linkTrailingBadge: "shrink-0",
1651
1660
  linkTrailingBadgeSize: "sm",
1652
1661
  linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
1653
1662
  linkLabel: "truncate",
@@ -1664,7 +1673,7 @@ const navigationMenu = (options) => ({
1664
1673
  viewportWrapper: "absolute top-full left-0 flex w-full justify-center",
1665
1674
  viewport: "relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height] origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
1666
1675
  content: "absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]",
1667
- indicator: "data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out",
1676
+ indicator: "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-[var(--reka-navigation-menu-indicator-size)] translate-x-[var(--reka-navigation-menu-indicator-position)] flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
1668
1677
  arrow: "relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]"
1669
1678
  },
1670
1679
  variants: {
@@ -1688,7 +1697,7 @@ const navigationMenu = (options) => ({
1688
1697
  },
1689
1698
  orientation: {
1690
1699
  horizontal: {
1691
- root: "w-full items-center justify-between",
1700
+ root: "items-center justify-between",
1692
1701
  list: "flex items-center",
1693
1702
  item: "py-2",
1694
1703
  link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
@@ -1720,21 +1729,24 @@ const navigationMenu = (options) => ({
1720
1729
  },
1721
1730
  highlight: {
1722
1731
  true: ""
1732
+ },
1733
+ level: {
1734
+ true: ""
1723
1735
  }
1724
1736
  },
1725
1737
  compoundVariants: [{
1726
- highlight: true,
1727
1738
  orientation: "horizontal",
1739
+ highlight: true,
1728
1740
  class: {
1729
1741
  item: "-mb-px",
1730
- link: "after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full"
1742
+ link: ["after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full", options.theme.transitions && "after:transition-colors"]
1731
1743
  }
1732
1744
  }, {
1733
- highlight: true,
1734
1745
  orientation: "vertical",
1746
+ highlight: true,
1747
+ level: true,
1735
1748
  class: {
1736
- item: "px-1.5 -ms-px",
1737
- link: "after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full"
1749
+ link: ["after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full", options.theme.transitions && "after:transition-colors"]
1738
1750
  }
1739
1751
  }, {
1740
1752
  disabled: false,
@@ -1767,7 +1779,7 @@ const navigationMenu = (options) => ({
1767
1779
  active: true,
1768
1780
  class: {
1769
1781
  link: `text-[var(--ui-${color})]`,
1770
- linkLeadingIcon: `text-[var(--ui-${color})]`
1782
+ linkLeadingIcon: `text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
1771
1783
  }
1772
1784
  })), {
1773
1785
  color: "neutral",
@@ -1775,7 +1787,7 @@ const navigationMenu = (options) => ({
1775
1787
  active: true,
1776
1788
  class: {
1777
1789
  link: "text-[var(--ui-text-highlighted)]",
1778
- linkLeadingIcon: "text-[var(--ui-text-highlighted)]"
1790
+ linkLeadingIcon: "text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]"
1779
1791
  }
1780
1792
  }, {
1781
1793
  variant: "pill",
@@ -1805,7 +1817,7 @@ const navigationMenu = (options) => ({
1805
1817
  active: true,
1806
1818
  class: {
1807
1819
  link: `text-[var(--ui-${color})]`,
1808
- linkLeadingIcon: `text-[var(--ui-${color})]`
1820
+ linkLeadingIcon: `text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
1809
1821
  }
1810
1822
  })), {
1811
1823
  color: "neutral",
@@ -1813,11 +1825,12 @@ const navigationMenu = (options) => ({
1813
1825
  active: true,
1814
1826
  class: {
1815
1827
  link: "text-[var(--ui-text-highlighted)]",
1816
- linkLeadingIcon: "text-[var(--ui-text-highlighted)]"
1828
+ linkLeadingIcon: "text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]"
1817
1829
  }
1818
1830
  }, ...(options.theme.colors || []).map((highlightColor) => ({
1819
1831
  highlightColor,
1820
1832
  highlight: true,
1833
+ level: true,
1821
1834
  active: true,
1822
1835
  class: {
1823
1836
  link: `after:bg-[var(--ui-${highlightColor})]`
@@ -1825,6 +1838,7 @@ const navigationMenu = (options) => ({
1825
1838
  })), {
1826
1839
  highlightColor: "neutral",
1827
1840
  highlight: true,
1841
+ level: true,
1828
1842
  active: true,
1829
1843
  class: {
1830
1844
  link: "after:bg-[var(--ui-bg-inverted)]"
@@ -1910,7 +1924,7 @@ const pinInput = (options) => ({
1910
1924
 
1911
1925
  const popover = {
1912
1926
  slots: {
1913
- content: "bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none",
1927
+ content: "bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto",
1914
1928
  arrow: "fill-[var(--ui-border)]"
1915
1929
  }
1916
1930
  };
@@ -2225,12 +2239,12 @@ const radioGroup = (options) => ({
2225
2239
  const select = (options) => {
2226
2240
  return defuFn({
2227
2241
  slots: {
2228
- root: () => void 0,
2242
+ root: () => undefined,
2229
2243
  base: () => ["relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
2230
2244
  value: "truncate pointer-events-none",
2231
2245
  placeholder: "truncate text-[var(--ui-text-dimmed)]",
2232
2246
  arrow: "fill-[var(--ui-border)]",
2233
- content: "max-h-60 w-[var(--reka-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
2247
+ content: "max-h-60 w-[var(--reka-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
2234
2248
  viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
2235
2249
  group: "p-1 isolate",
2236
2250
  empty: "py-2 text-center text-sm text-[var(--ui-text-muted)]",
@@ -2701,7 +2715,6 @@ const stepper = (options) => ({
2701
2715
  class: { separator: "top-[62px]", item: "gap-3.5" }
2702
2716
  }],
2703
2717
  defaultVariants: {
2704
- orientation: "horizontal",
2705
2718
  size: "md",
2706
2719
  color: "primary"
2707
2720
  }
@@ -3114,7 +3127,7 @@ const toaster = {
3114
3127
 
3115
3128
  const tooltip = {
3116
3129
  slots: {
3117
- content: "flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow-sm rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] 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]",
3130
+ content: "flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow-sm rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] 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] pointer-events-auto",
3118
3131
  arrow: "fill-[var(--ui-border)]",
3119
3132
  text: "truncate",
3120
3133
  kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:me-0.5`,
@@ -3189,16 +3202,28 @@ function getTemplates(options, uiConfig) {
3189
3202
  getContents: async () => {
3190
3203
  const template = theme[component];
3191
3204
  const result = typeof template === "function" ? template(options) : template;
3192
- const variants = Object.keys(result.variants || {});
3205
+ const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
3206
+ const keys = Object.keys(values);
3207
+ return keys.some((key) => key !== "true" && key !== "false");
3208
+ }).map(([key]) => key);
3193
3209
  let json = JSON.stringify(result, null, 2);
3194
3210
  for (const variant of variants) {
3195
- json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), "$1 as const");
3211
+ json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
3196
3212
  json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
3197
- const replaced = match.replace(/("[^"]+")/g, "$1 as const");
3213
+ const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
3198
3214
  return `${before}${replaced}${after}`;
3199
3215
  });
3200
3216
  }
3201
- return `export default ${json}`;
3217
+ function generateVariantDeclarations(variants2) {
3218
+ return variants2.map((variant) => {
3219
+ const keys = Object.keys(result.variants[variant]);
3220
+ return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
3221
+ });
3222
+ }
3223
+ return [
3224
+ ...generateVariantDeclarations(variants),
3225
+ `export default ${json}`
3226
+ ].join("\n\n");
3202
3227
  }
3203
3228
  });
3204
3229
  }
@@ -3211,12 +3236,13 @@ function getTemplates(options, uiConfig) {
3211
3236
  filename: "types/ui.d.ts",
3212
3237
  getContents: () => `import * as ui from '#build/ui'
3213
3238
  import type { DeepPartial } from '#ui/types/utils'
3239
+ import type { defaultConfig } from 'tailwind-variants'
3214
3240
  import colors from 'tailwindcss/colors'
3215
3241
 
3216
3242
  const icons = ${JSON.stringify(uiConfig.icons)};
3217
3243
 
3218
- type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
3219
- type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor>
3244
+ type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | (string & {})
3245
+ type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor> | (string & {})
3220
3246
 
3221
3247
  type AppConfigUI = {
3222
3248
  colors?: {
@@ -3224,6 +3250,7 @@ type AppConfigUI = {
3224
3250
  neutral?: NeutralColor
3225
3251
  }
3226
3252
  icons?: Partial<typeof icons>
3253
+ tv?: typeof defaultConfig
3227
3254
  } & DeepPartial<typeof ui>
3228
3255
 
3229
3256
  declare module '@nuxt/schema' {