diff --git a/apps/www/src/public/registry/styles/default/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
index fca1f24d..b565f155 100644
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ b/apps/www/src/public/registry/styles/default/auto-form.json
@@ -36,7 +36,7 @@
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :modelValue=\"slotProps.componentField.modelValue\"\n              @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
@@ -68,7 +68,7 @@
     },
     {
       "name": "constant.ts",
-      "content": "import AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
+      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
     },
     {
       "name": "dependencies.ts",
@@ -80,7 +80,7 @@
     },
     {
       "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
+      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
     },
     {
       "name": "utils.ts",
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index c420f638..e96b5fd5 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -43,7 +43,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
diff --git a/apps/www/src/public/registry/styles/default/sidebar.json b/apps/www/src/public/registry/styles/default/sidebar.json
index 12991300..123e8cc1 100644
--- a/apps/www/src/public/registry/styles/default/sidebar.json
+++ b/apps/www/src/public/registry/styles/default/sidebar.json
@@ -62,7 +62,7 @@
     },
     {
       "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot/>\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuBadge.vue",
@@ -98,7 +98,7 @@
     },
     {
       "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = ref(false) // useIsMobile()\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
     },
     {
       "name": "SidebarRail.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
index 769d0de9..70636308 100644
--- a/apps/www/src/public/registry/styles/new-york/auto-form.json
+++ b/apps/www/src/public/registry/styles/new-york/auto-form.json
@@ -36,7 +36,7 @@
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :modelValue=\"slotProps.componentField.modelValue\"\n              @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
@@ -68,7 +68,7 @@
     },
     {
       "name": "constant.ts",
-      "content": "import AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
+      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
     },
     {
       "name": "dependencies.ts",
@@ -80,7 +80,7 @@
     },
     {
       "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
+      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
     },
     {
       "name": "utils.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index 1596b0be..002a4dcb 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -43,7 +43,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/sidebar.json b/apps/www/src/public/registry/styles/new-york/sidebar.json
index 5e03b542..b88c60c9 100644
--- a/apps/www/src/public/registry/styles/new-york/sidebar.json
+++ b/apps/www/src/public/registry/styles/new-york/sidebar.json
@@ -62,7 +62,7 @@
     },
     {
       "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot/>\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuBadge.vue",
@@ -98,7 +98,7 @@
     },
     {
       "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = ref(false) // useIsMobile()\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
     },
     {
       "name": "SidebarRail.vue",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8087883e..c8085d31 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -310,8 +310,8 @@ importers:
         specifier: '*'
         version: 2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0)
       vue-metamorph:
-        specifier: ^3.2.2
-        version: 3.2.2(eslint@9.15.0(jiti@2.4.0))
+        specifier: 3.2.0
+        version: 3.2.0(eslint@9.15.0(jiti@2.4.0))
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -589,18 +589,10 @@ packages:
     resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@8.0.0-alpha.13':
-    resolution: {integrity: sha512-YHapkEwMu3nqoikRQhUqPZXUjqRepotzlYww49FWObNaU+9CKYtOJkJBwfY9RmcFDsFqGeLNk+IUSWRPgwhujA==}
-    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
-
   '@babel/helper-validator-identifier@7.25.9':
     resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@8.0.0-alpha.13':
-    resolution: {integrity: sha512-/IZpaAHTp39t0YIZQT51w7xEAPVlEYA9YsxA4tUsveqjvkK47rc/teUWzhQnXKwMwWDiSnP9vLfxYCR2DomrWg==}
-    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
-
   '@babel/helper-validator-option@7.25.9':
     resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
@@ -614,9 +606,9 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@8.0.0-alpha.13':
-    resolution: {integrity: sha512-b8jxzP/fDYLjByadJgnXutKZvjXJUIyf0bIWMUIX47jhtbgA3ZFPC0PByLlqD6rKhTbgvuGHZ0GQilMFL5EaOQ==}
-    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
+  '@babel/parser@8.0.0-alpha.12':
+    resolution: {integrity: sha512-AzWmrp4uJ+DcXVH0uoUpJVhRqxNirC0BbXsZ82AQuVod41CoaV5G+cwcvtYusrIIxv7BIJb6ce0dQ9L0wAl1iA==}
+    engines: {node: ^18.20.0 || ^20.10.0 || >=21.0.0}
     hasBin: true
 
   '@babel/plugin-proposal-decorators@7.25.9':
@@ -692,10 +684,6 @@ packages:
     resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@8.0.0-alpha.13':
-    resolution: {integrity: sha512-Kt8oBPvsc0h5t06LfUPkBtkPk6t58FzCcpf4Qsjg142gEgaDwFcg+ZPeBCJySLqenk+ISUkdTXsvhbLXj74kIA==}
-    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
-
   '@clack/core@0.3.4':
     resolution: {integrity: sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==}
 
@@ -7630,8 +7618,8 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-metamorph@3.2.2:
-    resolution: {integrity: sha512-+sdjJ8dqcKghAgT88cH1Q93tE5t10k7F3vqdHU0V8iMTIkRcEdfIb1AZT7jeORV0TMldFxyexnrnPQThgfWDVg==}
+  vue-metamorph@3.2.0:
+    resolution: {integrity: sha512-dCWwwh7OngblFqUvD/pilS++TVnTHY1Nft2Tp02mHYv8ZrxFHN3NDMOKOoIg8lo7WR3TKxi3+bD/rmnN9tS2yw==}
     hasBin: true
 
   vue-router@4.4.5:
@@ -8111,12 +8099,8 @@ snapshots:
 
   '@babel/helper-string-parser@7.25.9': {}
 
-  '@babel/helper-string-parser@8.0.0-alpha.13': {}
-
   '@babel/helper-validator-identifier@7.25.9': {}
 
-  '@babel/helper-validator-identifier@8.0.0-alpha.13': {}
-
   '@babel/helper-validator-option@7.25.9': {}
 
   '@babel/helpers@7.26.0':
@@ -8128,9 +8112,7 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.0
 
-  '@babel/parser@8.0.0-alpha.13':
-    dependencies:
-      '@babel/types': 8.0.0-alpha.13
+  '@babel/parser@8.0.0-alpha.12': {}
 
   '@babel/plugin-proposal-decorators@7.25.9(@babel/core@7.26.0)':
     dependencies:
@@ -8226,11 +8208,6 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
-  '@babel/types@8.0.0-alpha.13':
-    dependencies:
-      '@babel/helper-string-parser': 8.0.0-alpha.13
-      '@babel/helper-validator-identifier': 8.0.0-alpha.13
-
   '@clack/core@0.3.4':
     dependencies:
       picocolors: 1.1.1
@@ -16351,9 +16328,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-metamorph@3.2.2(eslint@9.15.0(jiti@2.4.0)):
+  vue-metamorph@3.2.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@babel/parser': 8.0.0-alpha.13
+      '@babel/parser': 8.0.0-alpha.12
       ast-types: 0.14.2
       chalk: 5.3.0
       cli-progress: 3.12.0