@nuxt/ui 3.0.0-alpha.5 → 3.0.0-alpha.6

package/dist/runtime/components/Alert.vue

@@ -31,7 +31,7 @@ export interface AlertProps {
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the alert.
-   * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
    * @emits `close`
    * @defaultValue false
    */
@@ -117,7 +117,7 @@ const ui = computed(() => alert({
           v-if="close"
           :icon="closeIcon || appConfig.ui.icons.close"
           size="md"
-          color="gray"
+          color="neutral"
           variant="link"
           aria-label="Close"
           v-bind="typeof close === 'object' ? close : undefined"

package/dist/runtime/components/Breadcrumb.vue

@@ -5,7 +5,7 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/breadcrumb'
 import type { AvatarProps, LinkProps } from '../types'
-import type { DynamicSlots } from '../types/utils'
+import type { DynamicSlots, PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
 
@@ -31,7 +31,7 @@ export interface BreadcrumbProps<T> {
    */
   separatorIcon?: string
   class?: any
-  ui?: Partial<typeof breadcrumb.slots>
+  ui?: PartialString<typeof breadcrumb.slots>
 }
 
 type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any

package/dist/runtime/components/Carousel.vue

@@ -0,0 +1,306 @@
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay'
+import type { AutoScrollOptionsType } from 'embla-carousel-auto-scroll'
+import type { AutoHeightOptionsType } from 'embla-carousel-auto-height'
+import type { ClassNamesOptionsType } from 'embla-carousel-class-names'
+import type { FadeOptionsType } from 'embla-carousel-fade'
+import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/carousel'
+import type { ButtonProps } from '../types'
+import type { AcceptableValue, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { carousel: Partial<typeof theme> } }
+
+const carousel = tv({ extend: tv(theme), ...(appConfig.ui?.carousel || {}) })
+
+type CarouselVariants = VariantProps<typeof carousel>
+
+export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+  /**
+   * Configure the prev button when arrows are enabled.
+   * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
+   */
+  prev?: ButtonProps
+  /**
+   * The icon displayed in the prev button.
+   * @defaultValue appConfig.ui.icons.arrowLeft
+   */
+  prevIcon?: string
+  /**
+   * Configure the next button when arrows are enabled.
+   * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
+   */
+  next?: ButtonProps
+  /**
+   * The icon displayed in the next button.
+   * @defaultValue appConfig.ui.icons.arrowRight
+   */
+  nextIcon?: string
+  /**
+   * Display prev and next buttons to scroll the carousel.
+   * @defaultValue false
+   */
+  arrows?: boolean
+  /**
+   * Display dots to scroll to a specific slide.
+   * @defaultValue false
+   */
+  dots?: boolean
+  orientation?: CarouselVariants['orientation']
+  items?: T[]
+  /**
+   * Enable Autoplay plugin
+   * @see https://www.embla-carousel.com/plugins/autoplay/
+   */
+  autoplay?: boolean | AutoplayOptionsType
+  /**
+   * Enable Auto Scroll plugin
+   * @see https://www.embla-carousel.com/plugins/auto-scroll/
+   */
+  autoScroll?: boolean | AutoScrollOptionsType
+  /**
+   * Enable Auto Height plugin
+   * @see https://www.embla-carousel.com/plugins/auto-height/
+   */
+  autoHeight?: boolean | AutoHeightOptionsType
+  /**
+   * Enable Class Names plugin
+   * @see https://www.embla-carousel.com/plugins/class-names/
+   */
+  classNames?: boolean | ClassNamesOptionsType
+  /**
+   * Enable Fade plugin
+   * @see https://www.embla-carousel.com/plugins/fade/
+   */
+  fade?: boolean | FadeOptionsType
+  /**
+   * Enable Wheel Gestures plugin
+   * @see https://www.embla-carousel.com/plugins/wheel-gestures/
+   */
+  wheelGestures?: boolean | WheelGesturesPluginOptions
+  class?: any
+  ui?: PartialString<typeof carousel.slots>
+}
+
+export type CarouselSlots<T> = {
+  default(props: { item: T, index: number }): any
+}
+
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import { computed, ref, watch, onMounted } from 'vue'
+import useEmblaCarousel from 'embla-carousel-vue'
+import { useForwardProps } from 'radix-vue'
+import { reactivePick, computedAsync } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import UButton from './Button.vue'
+
+const props = withDefaults(defineProps<CarouselProps<T>>(), {
+  orientation: 'horizontal',
+  arrows: false,
+  dots: false,
+  // Embla Options
+  active: true,
+  align: 'center',
+  breakpoints: () => ({}),
+  containScroll: 'trimSnaps',
+  dragFree: false,
+  dragThreshold: 10,
+  duration: 25,
+  inViewThreshold: 0,
+  loop: false,
+  skipSnaps: false,
+  slidesToScroll: 1,
+  startIndex: 0,
+  watchDrag: true,
+  watchResize: true,
+  watchSlides: true,
+  watchFocus: true,
+  // Embla Plugins
+  autoplay: false,
+  autoScroll: false,
+  autoHeight: false,
+  classNames: false,
+  fade: false,
+  wheelGestures: false
+})
+defineSlots<CarouselSlots<T>>()
+
+const appConfig = useAppConfig()
+const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
+
+const ui = computed(() => carousel({
+  orientation: props.orientation
+}))
+
+const options = computed<EmblaOptionsType>(() => ({
+  ...(props.fade ? { align: 'center', containScroll: false } : {}),
+  ...rootProps.value,
+  axis: props.orientation === 'horizontal' ? 'x' : 'y',
+  // TODO: Get from ConfigProvider
+  direction: 'ltr'
+}))
+
+const plugins = computedAsync<EmblaPluginType[]>(async () => {
+  const plugins = []
+
+  if (props.autoplay) {
+    const AutoplayPlugin = await import('embla-carousel-autoplay').then(r => r.default)
+    plugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
+  }
+
+  if (props.autoScroll) {
+    const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then(r => r.default)
+    plugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
+  }
+
+  if (props.autoHeight) {
+    const AutoHeightPlugin = await import('embla-carousel-auto-height').then(r => r.default)
+    plugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
+  }
+
+  if (props.classNames) {
+    const ClassNamesPlugin = await import('embla-carousel-class-names').then(r => r.default)
+    plugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
+  }
+
+  if (props.fade) {
+    const FadePlugin = await import('embla-carousel-fade').then(r => r.default)
+    plugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
+  }
+
+  if (props.wheelGestures) {
+    const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures')
+    plugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
+  }
+
+  return plugins
+})
+
+const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value)
+
+watch([options, plugins], () => {
+  emblaApi.value?.reInit(options.value, plugins.value)
+})
+
+function scrollPrev() {
+  emblaApi.value?.scrollPrev()
+}
+function scrollNext() {
+  emblaApi.value?.scrollNext()
+}
+function scrollTo(index: number) {
+  emblaApi.value?.scrollTo(index)
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    scrollNext()
+  }
+}
+
+const canScrollNext = ref(false)
+const canScrollPrev = ref(false)
+const selectedIndex = ref<number>(0)
+const scrollSnaps = ref<number[]>([])
+
+function onInit(api: EmblaCarouselType) {
+  scrollSnaps.value = api?.scrollSnapList() || []
+}
+function onSelect(api: EmblaCarouselType) {
+  canScrollNext.value = api?.canScrollNext() || false
+  canScrollPrev.value = api?.canScrollPrev() || false
+  selectedIndex.value = api?.selectedScrollSnap() || 0
+}
+
+onMounted(() => {
+  if (!emblaApi.value) {
+    return
+  }
+
+  emblaApi.value?.on('init', onInit)
+  emblaApi.value?.on('init', onSelect)
+  emblaApi.value?.on('reInit', onInit)
+  emblaApi.value?.on('reInit', onSelect)
+  emblaApi.value?.on('select', onSelect)
+})
+
+defineExpose({
+  emblaRef,
+  emblaApi
+})
+</script>
+
+<template>
+  <div
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    @keydown="onKeyDown"
+  >
+    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div :class="ui.container({ class: props.ui?.container })">
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          role="group"
+          aria-roledescription="slide"
+          :class="ui.item({ class: props.ui?.item })"
+        >
+          <slot :item="item" :index="index" />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="arrows || dots" :class="ui.controls({ class: props.ui?.controls })">
+      <div v-if="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
+        <UButton
+          :disabled="!canScrollPrev"
+          :icon="prevIcon || appConfig.ui.icons.arrowLeft"
+          size="md"
+          color="neutral"
+          variant="outline"
+          aria-label="Prev"
+          v-bind="typeof prev === 'object' ? prev : undefined"
+          :class="ui.prev({ class: props.ui?.prev })"
+          @click="scrollPrev"
+        />
+        <UButton
+          :disabled="!canScrollNext"
+          :icon="nextIcon || appConfig.ui.icons.arrowRight"
+          size="md"
+          color="neutral"
+          variant="outline"
+          aria-label="Next"
+          v-bind="typeof next === 'object' ? next : undefined"
+          :class="ui.next({ class: props.ui?.next })"
+          @click="scrollNext"
+        />
+      </div>
+
+      <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
+        <template v-for="(_, index) in scrollSnaps" :key="index">
+          <button :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })" @click="scrollTo(index)" />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/CommandPalette.vue

@@ -67,7 +67,7 @@ export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'mult
   placeholder?: InputProps['placeholder']
   /**
    * Display a close button in the input (useful when inside a Modal for example).
-   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
    * @defaultValue false
    */
   close?: ButtonProps | boolean
@@ -233,7 +233,7 @@ const groups = computed(() => {
               v-if="close"
               :icon="closeIcon || appConfig.ui.icons.close"
               size="md"
-              color="gray"
+              color="neutral"
               variant="ghost"
               aria-label="Close"
               v-bind="typeof close === 'object' ? close : undefined"

package/dist/runtime/components/ContextMenu.vue

@@ -6,7 +6,7 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/context-menu'
 import type { AvatarProps, KbdProps, LinkProps } from '../types'
-import type { DynamicSlots } from '../types/utils'
+import type { DynamicSlots, PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { contextMenu: Partial<typeof theme> } }
 
@@ -43,7 +43,7 @@ export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'>,
    */
   portal?: boolean
   class?: any
-  ui?: Partial<typeof contextMenu.slots>
+  ui?: PartialString<typeof contextMenu.slots>
 }
 
 export interface ContextMenuEmits extends ContextMenuRootEmits {}

package/dist/runtime/components/DropdownMenu.vue

@@ -6,7 +6,7 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/dropdown-menu'
 import type { AvatarProps, KbdProps, LinkProps } from '../types'
-import type { DynamicSlots } from '../types/utils'
+import type { DynamicSlots, PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }
 
@@ -51,7 +51,7 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
    */
   portal?: boolean
   class?: any
-  ui?: Partial<typeof dropdownMenu.slots>
+  ui?: PartialString<typeof dropdownMenu.slots>
 }
 
 export interface DropdownMenuEmits extends DropdownMenuRootEmits {}

package/dist/runtime/components/Form.vue

@@ -35,7 +35,7 @@ export interface FormSlots {
 import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
-import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
+import { getYupErrors, isYupSchema, getValibotErrors, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema, getStandardErrors, isStandardSchema } from '../utils/form'
 import { FormValidationException } from '../types/form'
 
 const props = withDefaults(defineProps<FormProps<T>>(), {
@@ -112,7 +112,9 @@ async function getErrors(): Promise<FormErrorWithId[]> {
     } else if (isJoiSchema(props.schema)) {
       errs = errs.concat(await getJoiErrors(props.state, props.schema))
     } else if (isValibotSchema(props.schema)) {
-      errs = errs.concat(await getValibotError(props.state, props.schema))
+      errs = errs.concat(await getValibotErrors(props.state, props.schema))
+    } else if (isStandardSchema(props.schema)) {
+      errs = errs.concat(await getStandardErrors(props.state, props.schema))
     } else {
       throw new Error('Form validation failed: Unsupported form schema')
     }

package/dist/runtime/components/Modal.vue

@@ -37,7 +37,7 @@ export interface ModalProps extends DialogRootProps {
   portal?: boolean
   /**
    * Display a close button to dismiss the modal.
-   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
    * @defaultValue true
    */
   close?: ButtonProps | boolean
@@ -138,7 +138,7 @@ const ui = computed(() => modal({
                     v-if="close"
                     :icon="closeIcon || appConfig.ui.icons.close"
                     size="md"
-                    color="gray"
+                    color="neutral"
                     variant="ghost"
                     aria-label="Close"
                     v-bind="typeof close === 'object' ? close : undefined"

package/dist/runtime/components/NavigationMenu.vue

@@ -6,7 +6,7 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/navigation-menu'
 import type { AvatarProps, BadgeProps, LinkProps } from '../types'
-import type { DynamicSlots } from '../types/utils'
+import type { DynamicSlots, PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
 
@@ -62,7 +62,7 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'd
    */
   arrow?: boolean
   class?: any
-  ui?: Partial<typeof navigationMenu.slots>
+  ui?: PartialString<typeof navigationMenu.slots>
 }
 
 export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
@@ -142,7 +142,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
                     <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
                       <UBadge
                         v-if="item.badge"
-                        color="gray"
+                        color="neutral"
                         variant="outline"
                         :size="((props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
                         v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"

package/dist/runtime/components/Pagination.vue

@@ -44,7 +44,7 @@ export interface PaginationProps extends Pick<PaginationRootProps, 'defaultPage'
   ellipsisIcon?: string
   /**
    * The color of the pagination controls.
-   * @defaultValue 'gray'
+   * @defaultValue 'neutral'
    */
   color?: ButtonProps['color']
   /**
@@ -106,7 +106,7 @@ import { useAppConfig } from '#imports'
 
 const props = withDefaults(defineProps<PaginationProps>(), {
   size: 'md',
-  color: 'gray',
+  color: 'neutral',
   variant: 'outline',
   activeColor: 'primary',
   activeVariant: 'solid',

package/dist/runtime/components/Slideover.vue

@@ -35,7 +35,7 @@ export interface SlideoverProps extends DialogRootProps {
   portal?: boolean
   /**
    * Display a close button to dismiss the slideover.
-   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
    * @defaultValue true
    */
   close?: ButtonProps | boolean
@@ -137,7 +137,7 @@ const ui = computed(() => slideover({
                     v-if="close"
                     :icon="closeIcon || appConfig.ui.icons.close"
                     size="md"
-                    color="gray"
+                    color="neutral"
                     variant="ghost"
                     aria-label="Close"
                     v-bind="typeof close === 'object' ? close : undefined"

package/dist/runtime/components/Toast.vue

@@ -31,7 +31,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the toast.
-   * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
    * @defaultValue true
    */
   close?: ButtonProps | boolean
@@ -145,7 +145,7 @@ defineExpose({
             v-if="close"
             :icon="closeIcon || appConfig.ui.icons.close"
             size="md"
-            color="gray"
+            color="neutral"
             variant="link"
             aria-label="Close"
             v-bind="typeof close === 'object' ? close : undefined"

package/dist/runtime/index.css

@@ -1 +1 @@
-@theme{--color-gray-*:initial;--color-cool-50:#f9fafb;--color-cool-100:#f3f4f6;--color-cool-200:#e5e7eb;--color-cool-300:#d1d5db;--color-cool-400:#9ca3af;--color-cool-500:#6b7280;--color-cool-600:#4b5563;--color-cool-700:#374151;--color-cool-800:#1f2937;--color-cool-900:#111827;--color-cool-950:#030712;--spacing-4_5:1.125rem;--color-primary-50:var(--color-primary-50);--color-primary-100:var(--color-primary-100);--color-primary-200:var(--color-primary-200);--color-primary-300:var(--color-primary-300);--color-primary-400:var(--color-primary-400);--color-primary-500:var(--color-primary-500);--color-primary-600:var(--color-primary-600);--color-primary-700:var(--color-primary-700);--color-primary-800:var(--color-primary-800);--color-primary-900:var(--color-primary-900);--color-primary-950:var(--color-primary-950);--color-error-50:var(--color-error-50);--color-error-100:var(--color-error-100);--color-error-200:var(--color-error-200);--color-error-300:var(--color-error-300);--color-error-400:var(--color-error-400);--color-error-500:var(--color-error-500);--color-error-600:var(--color-error-600);--color-error-700:var(--color-error-700);--color-error-800:var(--color-error-800);--color-error-900:var(--color-error-900);--color-error-950:var(--color-error-950);--color-gray-50:var(--color-gray-50);--color-gray-100:var(--color-gray-100);--color-gray-200:var(--color-gray-200);--color-gray-300:var(--color-gray-300);--color-gray-400:var(--color-gray-400);--color-gray-500:var(--color-gray-500);--color-gray-600:var(--color-gray-600);--color-gray-700:var(--color-gray-700);--color-gray-800:var(--color-gray-800);--color-gray-900:var(--color-gray-900);--color-gray-950:var(--color-gray-950)}@variant dark (&:where(.dark, .dark *));@layer base{:root{color-scheme:light dark}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes collapsible-up{0%{height:var(--radix-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--radix-collapsible-content-height)}}@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-from-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-in-from-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-from-top-and-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-top-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes slide-in-from-right-and-fade{0%{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-right-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes slide-in-from-bottom-and-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes slide-in-from-left-and-fade{0%{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-left-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes enter-from-right{0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}@keyframes exit-to-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}@keyframes exit-to-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-vertical{0%,to{height:50%}0%{transform:translateY(-100%)}to{transform:translateY(200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-vertical{0%,to{height:50%}0%{transform:translateY(200%)}to{transform:translateY(-100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes swing-vertical{0%,to{height:50%}0%,to{transform:translateY(-25%)}50%{transform:translateY(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}@keyframes elastic-vertical{0%,to{height:50%;margin-top:25%}50%{height:90%;margin-top:5%}}}
+@theme{--spacing-4_5:1.125rem}@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased font-sans text-[--ui-text] bg-[--ui-bg]}:root{color-scheme:light;--ui-text-dimmed:var(--ui-color-neutral-400);--ui-text-muted:var(--ui-color-neutral-500);--ui-text-toned:var(--ui-color-neutral-600);--ui-text:var(--ui-color-neutral-700);--ui-text-highlighted:var(--ui-color-neutral-900);--ui-bg:var(--color-white);--ui-bg-elevated:var(--ui-color-neutral-100);--ui-bg-accented:var(--ui-color-neutral-200);--ui-bg-inverted:var(--ui-color-neutral-900);--ui-border:var(--ui-color-neutral-200);--ui-border-accented:var(--ui-color-neutral-300);--ui-border-inverted:var(--ui-color-neutral-900);--ui-radius:var(--radius)}.dark{color-scheme:dark;--ui-text-dimmed:var(--ui-color-neutral-500);--ui-text-muted:var(--ui-color-neutral-400);--ui-text-toned:var(--ui-color-neutral-300);--ui-text:var(--ui-color-neutral-200);--ui-text-highlighted:var(--color-white);--ui-bg:var(--ui-color-neutral-900);--ui-bg-elevated:var(--ui-color-neutral-800);--ui-bg-accented:var(--ui-color-neutral-700);--ui-bg-inverted:var(--color-white);--ui-border:var(--ui-color-neutral-800);--ui-border-accented:var(--ui-color-neutral-700);--ui-border-inverted:var(--color-white)}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes collapsible-up{0%{height:var(--radix-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--radix-collapsible-content-height)}}@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-from-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-in-from-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-from-top-and-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-top-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes slide-in-from-right-and-fade{0%{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-right-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes slide-in-from-bottom-and-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes slide-in-from-left-and-fade{0%{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-left-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes enter-from-right{0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}@keyframes exit-to-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}@keyframes exit-to-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-vertical{0%,to{height:50%}0%{transform:translateY(-100%)}to{transform:translateY(200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-vertical{0%,to{height:50%}0%{transform:translateY(200%)}to{transform:translateY(-100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes swing-vertical{0%,to{height:50%}0%,to{transform:translateY(-25%)}50%{transform:translateY(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}@keyframes elastic-vertical{0%,to{height:50%;margin-top:25%}50%{height:90%;margin-top:5%}}}

package/dist/runtime/plugins/colors.js

@@ -4,18 +4,22 @@ export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig();
   const nuxtApp = useNuxtApp();
   const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-  function generateColor(key, value) {
-    return `${shades.map((shade) => `--color-${key}-${shade}: var(--color-${value}-${shade});`).join("\n  ")}`;
+  function generateShades(key, value) {
+    return `${shades.map((shade) => `--ui-color-${key}-${shade}: var(--color-${value}-${shade});`).join("\n  ")}`;
+  }
+  function generateColor(key, shade) {
+    return `--ui-${key}: var(--ui-color-${key}-${shade});`;
   }
   const root = computed(() => {
+    const { neutral, ...colors } = appConfig.ui.colors;
     return `:root {
-  ${Object.entries(appConfig.ui.colors).map(([key, value]) => generateColor(key, value)).join("\n  ")}
-  --color-primary-DEFAULT: var(--color-primary-500);
+  ${Object.entries(appConfig.ui.colors).map(([key, value]) => generateShades(key, value)).join("\n  ")}
+
+  ${Object.keys(colors).map((key) => generateColor(key, 500)).join("\n  ")}
 }
 .dark {
-  --color-primary-DEFAULT: var(--color-primary-400);
-}
-`;
+  ${Object.keys(colors).map((key) => generateColor(key, 400)).join("\n  ")}
+}`;
   });
   const headData = {
     style: [{

package/dist/runtime/types/form.d.ts

@@ -1,3 +1,4 @@
+import type { StandardSchema } from '@standard-schema/spec';
 import type { ComputedRef, Ref } from 'vue';
 import type { ZodSchema } from 'zod';
 import type { Schema as JoiSchema } from 'joi';
@@ -17,7 +18,7 @@ export interface Form<T> {
     submit(): Promise<void>;
     disabled: ComputedRef<boolean>;
 }
-export type FormSchema<T extends Record<string, any>> = ZodSchema | YupObjectSchema<T> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> | JoiSchema<T>;
+export type FormSchema<T extends Record<string, any>> = ZodSchema | YupObjectSchema<T> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> | JoiSchema<T> | StandardSchema;
 export type FormInputEvents = 'input' | 'blur' | 'change';
 export interface FormError<P extends string = string> {
     name: P;

package/dist/runtime/types/index.d.ts

@@ -7,6 +7,7 @@ export * from '../components/Badge.vue';
 export * from '../components/Breadcrumb.vue';
 export * from '../components/Button.vue';
 export * from '../components/Card.vue';
+export * from '../components/Carousel.vue';
 export * from '../components/Checkbox.vue';
 export * from '../components/Chip.vue';
 export * from '../components/Collapsible.vue';

package/dist/runtime/types/index.js

@@ -7,6 +7,7 @@ export * from "../components/Badge.vue";
 export * from "../components/Breadcrumb.vue";
 export * from "../components/Button.vue";
 export * from "../components/Card.vue";
+export * from "../components/Carousel.vue";
 export * from "../components/Checkbox.vue";
 export * from "../components/Chip.vue";
 export * from "../components/Collapsible.vue";

package/dist/runtime/utils/form.d.ts

@@ -1,3 +1,4 @@
+import type { StandardSchema } from '@standard-schema/spec';
 import type { ZodSchema } from 'zod';
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi';
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup';
@@ -12,4 +13,6 @@ export declare function isJoiSchema(schema: any): schema is JoiSchema;
 export declare function isJoiError(error: any): error is JoiError;
 export declare function getJoiErrors(state: any, schema: JoiSchema): Promise<FormError[]>;
 export declare function isValibotSchema(schema: any): schema is ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>;
-export declare function getValibotError(state: any, schema: ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>): Promise<FormError[]>;
+export declare function getValibotErrors(state: any, schema: ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>): Promise<FormError[]>;
+export declare function isStandardSchema(schema: any): schema is StandardSchema;
+export declare function getStandardErrors(state: any, schema: StandardSchema): Promise<FormError[]>;

package/dist/runtime/utils/form.js

@@ -56,7 +56,7 @@ export async function getJoiErrors(state, schema) {
 export function isValibotSchema(schema) {
   return "_run" in schema || typeof schema === "function" && "schema" in schema;
 }
-export async function getValibotError(state, schema) {
+export async function getValibotErrors(state, schema) {
   const result = await ("_run" in schema ? schema._run({ typed: false, value: state }, {}) : schema(state));
   return result.issues?.map((issue) => ({
     // We know that the key for a form schema is always a string or a number
@@ -64,3 +64,13 @@ export async function getValibotError(state, schema) {
     message: issue.message
   })) || [];
 }
+export function isStandardSchema(schema) {
+  return "~standard" in schema;
+}
+export async function getStandardErrors(state, schema) {
+  const result = await schema["~validate"]({ value: state });
+  return result.issues?.map((issue) => ({
+    name: issue.path?.map((item) => typeof item === "object" ? item.key : item).join(".") || "",
+    message: issue.message
+  })) || [];
+}