chore: make zod imports tree-shakeable (#2846)

devtools/app/components/inputs/ArrayInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 
 export const arrayInputSchema = z.object({
   kind: z.literal('array'),

devtools/app/components/inputs/BooleanInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 
 export const booleanInputSchema = z.literal('boolean').or(z.object({
   kind: z.literal('enum'),

devtools/app/components/inputs/NumberInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 
 export const numberInputSchema = z.literal('number')
 export type NumberInputSchema = z.infer<typeof numberInputSchema>

devtools/app/components/inputs/ObjectInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 
 export const objectInputSchema = z.object({
   kind: z.literal('object'),

devtools/app/components/inputs/StringEnumInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 
 export const stringEnumInputSchema = z.object({
   kind: z.literal('enum'),

devtools/app/components/inputs/StringInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 
 export const stringInputSchema = z.literal('string').or(z.string().transform(t => t.split('|').find(s => s.trim() === 'string')).pipe(z.string()))
 

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = z.object({

docs/app/components/content/examples/form/FormExampleNested.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = z.object({

docs/app/components/content/examples/form/FormExampleNestedList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = z.object({

docs/app/components/content/examples/form/FormExampleZod.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 import type { FormSubmitEvent } from '#ui/types'
 
 const schema = z.object({

docs/content/3.components/form.md

@@ -8,7 +8,7 @@ links:
 
 ## Usage
 
-Use the Form component to validate form data using schema libraries such as [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi), [Valibot](https://github.com/fabian-hiller/valibot), [Superstruct](https://github.com/ianstormtaylor/superstruct) or your own validation logic.
+Use the Form component to validate form data using schema libraries such as [Valibot](https://github.com/fabian-hiller/valibot), [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi), [Superstruct](https://github.com/ianstormtaylor/superstruct) or your own validation logic.
 
 It works with the [FormField](/components/form-field) component to display error messages around form elements automatically.
 
@@ -17,13 +17,21 @@ It works with the [FormField](/components/form-field) component to display error
 It requires two props:
 
 - `state` - a reactive object holding the form's state.
-- `schema` - a schema object from a validation library like [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi), [Valibot](https://github.com/fabian-hiller/valibot) or [Superstruct](https://github.com/ianstormtaylor/superstruct).
+- `schema` - a schema object from a validation library like [Valibot](https://github.com/fabian-hiller/valibot), [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi) or [Superstruct](https://github.com/ianstormtaylor/superstruct).
 
 ::warning
 **No validation library is included** by default, ensure you **install the one you need**.
 ::
 
 ::tabs
+  ::component-example{label="Valibot"}
+  ---
+  name: 'form-example-valibot'
+  props:
+    class: 'w-60'
+  ---
+  ::
+  
   ::component-example{label="Zod"}
   ---
   name: 'form-example-zod'
@@ -48,14 +56,6 @@ It requires two props:
   ---
   ::
 
-  ::component-example{label="Valibot"}
-  ---
-  name: 'form-example-valibot'
-  props:
-    class: 'w-60'
-  ---
-  ::
-
   ::component-example{label="Superstruct"}
   ---
   name: 'form-example-superstruct'

playground/app/pages/components/form.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { z } from 'zod'
+import * as z from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
 import FormExampleElements from '../../../../docs/app/components/content/examples/form/FormExampleElements.vue'
 import FormExampleNestedList from '../../../../docs/app/components/content/examples/form/FormExampleNestedList.vue'

test/components/Form.spec.ts

@@ -1,7 +1,7 @@
 import { reactive, ref, nextTick } from 'vue'
 import { describe, it, expect, test, beforeEach, vi } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { z } from 'zod'
+import * as z from 'zod'
 import * as yup from 'yup'
 import Joi from 'joi'
 import * as valibot from 'valibot'