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

package/dist/runtime/components/Table.vue

@@ -0,0 +1,241 @@
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import type { Ref } from 'vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import type {
+  Row,
+  ColumnDef,
+  ColumnFiltersState,
+  ColumnPinningState,
+  RowSelectionState,
+  SortingState,
+  ExpandedState,
+  VisibilityState,
+  GlobalFilterOptions,
+  ColumnFiltersOptions,
+  ColumnPinningOptions,
+  VisibilityOptions,
+  ExpandedOptions,
+  SortingOptions,
+  RowSelectionOptions,
+  Updater,
+  CellContext,
+  HeaderContext
+} from '@tanstack/vue-table'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/table'
+
+const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
+
+const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
+
+type TableVariants = VariantProps<typeof table>
+
+export type TableColumn<T> = ColumnDef<T>
+
+export interface TableData {
+  [key: string]: any
+}
+
+export interface TableProps<T> {
+  data?: T[]
+  columns?: TableColumn<T>[]
+  /**
+   * Whether the table should have a sticky header.
+   * @defaultValue false
+   */
+  sticky?: boolean
+  /** Whether the table should be in loading state. */
+  loading?: boolean
+  loadingColor?: TableVariants['loadingColor']
+  loadingAnimation?: TableVariants['loadingAnimation']
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
+   */
+  globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
+   */
+  columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
+   */
+  columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
+   */
+  visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+   */
+  sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
+   */
+  expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
+   */
+  rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
+  class?: any
+  ui?: Partial<typeof table.slots>
+}
+
+type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
+type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
+
+export type TableSlots<T> = {
+  expanded: (props: { row: Row<T> }) => any
+  empty: (props?: {}) => any
+} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
+
+</script>
+
+<script setup lang="ts" generic="T extends TableData">
+import { computed } from 'vue'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  getExpandedRowModel,
+  useVueTable
+} from '@tanstack/vue-table'
+import { upperFirst } from 'scule'
+
+const props = defineProps<TableProps<T>>()
+defineSlots<TableSlots<T>>()
+
+const data = computed(() => props.data ?? [])
+const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
+
+const ui = computed(() => table({
+  sticky: props.sticky,
+  loading: props.loading,
+  loadingColor: props.loadingColor,
+  loadingAnimation: props.loadingAnimation
+}))
+
+const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
+const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
+const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
+const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
+const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
+const sortingState = defineModel<SortingState>('sorting', { default: [] })
+const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+
+const tableApi = useVueTable({
+  data,
+  columns: columns.value,
+  getCoreRowModel: getCoreRowModel(),
+  ...(props.globalFilterOptions || {}),
+  onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
+  ...(props.columnFiltersOptions || {}),
+  getFilteredRowModel: getFilteredRowModel(),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
+  ...(props.visibilityOptions || {}),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
+  ...(props.columnPinningOptions || {}),
+  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
+  ...(props.rowSelectionOptions || {}),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
+  ...(props.sortingOptions || {}),
+  getSortedRowModel: getSortedRowModel(),
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
+  ...(props.expandedOptions || {}),
+  getExpandedRowModel: getExpandedRowModel(),
+  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
+  state: {
+    get globalFilter() {
+      return globalFilterState.value
+    },
+    get columnFilters() {
+      return columnFiltersState.value
+    },
+    get columnVisibility() {
+      return columnVisibilityState.value
+    },
+    get columnPinning() {
+      return columnPinningState.value
+    },
+    get expanded() {
+      return expandedState.value
+    },
+    get rowSelection() {
+      return rowSelectionState.value
+    },
+    get sorting() {
+      return sortingState.value
+    }
+  }
+})
+
+function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
+}
+
+defineExpose({
+  tableApi
+})
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <table :class="ui.base({ class: [props.ui?.base] })">
+      <thead :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :data-pinned="header.column.getIsPinned()"
+            :class="ui.th({ class: [props.ui?.th], pinned: !!header.column.getIsPinned() })"
+          >
+            <slot :name="`${header.id}-header`" v-bind="header.getContext()">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+            </slot>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
+        <template v-if="tableApi.getRowModel().rows?.length">
+          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
+            <tr :data-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+              <td
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                :data-pinned="cell.column.getIsPinned()"
+                :class="ui.td({ class: [props.ui?.td], pinned: !!cell.column.getIsPinned() })"
+              >
+                <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
+                  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                </slot>
+              </td>
+            </tr>
+            <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+              <td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
+                <slot name="expanded" :row="row" />
+              </td>
+            </tr>
+          </template>
+        </template>
+
+        <tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
+          <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
+            <slot name="empty">
+              No results
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/dist/runtime/components/Tabs.vue

@@ -1,10 +1,10 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { TabsRootProps, TabsRootEmits, TabsContentProps, TabsTriggerProps } from 'radix-vue'
+import type { TabsRootProps, TabsRootEmits, TabsContentProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -12,7 +12,7 @@ const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme>
 
 const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
 
-export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
+export interface TabsItem {
   label?: string
   icon?: string
   avatar?: AvatarProps
@@ -20,6 +20,7 @@ export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
   content?: string
   /** A unique value for the tab item. Defaults to the index. */
   value?: string | number
+  disabled?: boolean
 }
 
 type TabsVariants = VariantProps<typeof tabs>
@@ -44,6 +45,11 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    * @defaultValue true
    */
   content?: boolean | Omit<TabsContentProps, 'as' | 'asChild' | 'value'>
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof tabs.slots>
 }
@@ -59,6 +65,23 @@ export type TabsSlots<T extends { slot?: string }> = {
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
 
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [{
+      label: 'Tab1',
+      avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
+      content: 'This is the content shown for Tab1'
+    }, {
+      label: 'Tab2',
+      icon: 'i-lucide-user',
+      content: 'And, this is the content for Tab2'
+    }, {
+      label: 'Tab3',
+      icon: 'i-lucide-bell',
+      content: 'Finally, this is the content for Tab3'
+    }]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">
@@ -66,11 +89,15 @@ import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import { get } from '../utils'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,
   defaultValue: '0',
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  labelKey: 'label'
 })
 const emits = defineEmits<TabsEmits>()
 const slots = defineSlots<TabsSlots<T>>()
@@ -93,12 +120,12 @@ const ui = computed(() => tabs({
 
       <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: props.ui?.trigger })">
         <slot name="leading" :item="item" :index="index">
-          <UAvatar v-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
-          <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
 
-        <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
-          <slot :item="item" :index="index">{{ item.label }}</slot>
+        <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+          <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
         </span>
 
         <slot name="trailing" :item="item" :index="index" />

package/dist/runtime/components/Toast.vue

@@ -4,6 +4,7 @@ import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
@@ -53,6 +54,8 @@ export interface ToastSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
+
+extendDevtoolsMeta<ToastProps>({ ignore: true })
 </script>
 
 <script setup lang="ts">
@@ -62,6 +65,7 @@ import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
+import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
   close: true

package/dist/runtime/components/Toaster.vue

@@ -4,6 +4,7 @@ import type { ToastProviderProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toaster'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
 
@@ -25,6 +26,12 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
 export interface ToasterSlots {
   default(props?: {}): any
 }
+
+export default {
+  name: 'Toaster'
+}
+
+extendDevtoolsMeta({ example: 'ToasterExample' })
 </script>
 
 <script setup lang="ts">
@@ -32,8 +39,8 @@ import { ref, computed } from 'vue'
 import { ToastProvider, ToastViewport, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useToast } from '../composables/useToast'
-import UToast from './Toast.vue'
 import { omit } from '../utils'
+import UToast from './Toast.vue'
 
 const props = withDefaults(defineProps<ToasterProps>(), {
   expand: true,

package/dist/runtime/components/Tooltip.vue

@@ -4,6 +4,7 @@ import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipAr
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { KbdProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
@@ -40,6 +41,8 @@ export interface TooltipSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'TooltipExample', defaultProps: { text: 'Hello world!' } })
 </script>
 
 <script setup lang="ts">

package/dist/runtime/composables/defineShortcuts.js

@@ -1,6 +1,5 @@
 import { ref, computed, toValue } from "vue";
 import { useEventListener, useActiveElement, useDebounceFn } from "@vueuse/core";
-import { useKbd } from "../composables/useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
 export function extractShortcuts(items) {
@@ -9,7 +8,7 @@ export function extractShortcuts(items) {
     items2.forEach((item) => {
       if (item.kbds?.length && (item.select || item.click)) {
         const shortcutKey = item.kbds.join("_");
-        shortcuts[shortcutKey] = item.select || item.click;
+        shortcuts[shortcutKey] = item.onSelect || item.onClick;
       }
       if (item.children) {
         traverse(item.children.flat());
@@ -28,7 +27,6 @@ export function defineShortcuts(config, options = {}) {
     chainedInputs.value.splice(0, chainedInputs.value.length);
   };
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
-  const { macOS } = useKbd();
   const activeElement = useActiveElement();
   const onKeyDown = (e) => {
     if (!e.key) {
@@ -114,10 +112,6 @@ export function defineShortcuts(config, options = {}) {
         };
       }
       shortcut.chained = chained;
-      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
-        shortcut.metaKey = false;
-        shortcut.ctrlKey = true;
-      }
       if (typeof shortcutConfig === "function") {
         shortcut.handler = shortcutConfig;
       } else if (typeof shortcutConfig === "object") {

package/dist/runtime/composables/extendDevtoolsMeta.d.ts

@@ -0,0 +1,7 @@
+export type DevtoolsMeta<T> = {
+    defaultProps?: T;
+    example?: string;
+    ignore?: boolean;
+    ignoreProps?: string[];
+};
+export declare function extendDevtoolsMeta<T>(_meta: DevtoolsMeta<T>): void;

package/dist/runtime/composables/extendDevtoolsMeta.js

@@ -0,0 +1,2 @@
+export function extendDevtoolsMeta(_meta) {
+}

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -1,7 +1,10 @@
 import { type MaybeRefOrGetter } from 'vue';
+import type { AvatarProps } from '../types';
 export interface UseComponentIconsProps {
     /** Display an icon based on the `leading` and `trailing` props. */
     icon?: string;
+    /** Display an avatar on the left side. */
+    avatar?: AvatarProps;
     /** When `true`, the icon will be displayed on the left side. */
     leading?: boolean;
     /** Display an icon on the left side. */

package/dist/runtime/composables/useKbd.d.ts

@@ -1,10 +1,16 @@
+type KbdKeysSpecificMap = {
+    meta: string;
+    alt: string;
+    ctrl: string;
+};
 export declare const kbdKeysMap: {
     meta: string;
+    ctrl: string;
+    alt: string;
+    win: string;
     command: string;
     shift: string;
-    ctrl: string;
     option: string;
-    alt: string;
     enter: string;
     delete: string;
     backspace: string;
@@ -21,8 +27,9 @@ export declare const kbdKeysMap: {
     end: string;
 };
 export type KbdKey = keyof typeof kbdKeysMap;
+export type KbdKeySpecific = keyof KbdKeysSpecificMap;
 export declare const useKbd: () => {
     macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
-    metaSymbol: import("vue").Ref<string, string>;
     getKbdKey: (value?: KbdKey | string) => string | undefined;
 };
+export {};

package/dist/runtime/composables/useKbd.js

@@ -1,12 +1,13 @@
+import { reactive, computed, onMounted } from "vue";
 import { createSharedComposable } from "@vueuse/core";
-import { ref, computed, onMounted } from "vue";
 export const kbdKeysMap = {
   meta: "",
+  ctrl: "",
+  alt: "",
+  win: "\u229E",
   command: "\u2318",
   shift: "\u21E7",
-  ctrl: "\u2303",
   option: "\u2325",
-  alt: "\u2387",
   enter: "\u21B5",
   delete: "\u2326",
   backspace: "\u232B",
@@ -24,22 +25,27 @@ export const kbdKeysMap = {
 };
 const _useKbd = () => {
   const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
-  const metaSymbol = ref(" ");
+  const kbdKeysSpecificMap = reactive({
+    meta: " ",
+    alt: " ",
+    ctrl: " "
+  });
   onMounted(() => {
-    metaSymbol.value = macOS.value ? kbdKeysMap.command : kbdKeysMap.ctrl;
+    kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : kbdKeysMap.win;
+    kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : "alt";
+    kbdKeysSpecificMap.ctrl = macOS.value ? "\u2303" : "ctrl";
   });
   function getKbdKey(value) {
     if (!value) {
       return;
     }
-    if (value === "meta") {
-      return metaSymbol.value;
+    if (["meta", "alt", "ctrl"].includes(value)) {
+      return kbdKeysSpecificMap[value];
     }
     return kbdKeysMap[value] || value.toUpperCase();
   }
   return {
     macOS,
-    metaSymbol,
     getKbdKey
   };
 };

package/dist/runtime/composables/useModal.d.ts

@@ -1,6 +1,6 @@
 import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { ModalProps } from '../types';
-import type { ComponentProps } from '../types/component';
 export interface ModalState {
     component: Component | string;
     props: ModalProps;

package/dist/runtime/composables/useSlideover.d.ts

@@ -1,6 +1,6 @@
 import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { SlideoverProps } from '../types';
-import type { ComponentProps } from '../types/component';
 export interface SlideoverState {
     component: Component | string;
     props: SlideoverProps;

package/dist/runtime/index.css

@@ -1 +1 @@
-@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%}}}
+@import "./keyframes.css";@theme default{--spacing-4_5:1.125rem}@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased text-[var(--ui-text)] bg-[var(--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)}}

package/dist/runtime/keyframes.css

@@ -0,0 +1 @@
+@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/types/form.d.ts

@@ -5,6 +5,7 @@ import type { Schema as JoiSchema } from 'joi';
 import type { ObjectSchema as YupObjectSchema } from 'yup';
 import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
 import type { GetObjectField } from './utils';
+import type { Struct as SuperstructSchema } from 'superstruct';
 export interface Form<T> {
     validate(opts?: {
         name: string | string[];
@@ -18,7 +19,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> | StandardSchema;
+export type FormSchema<T extends Record<string, any>> = ZodSchema | YupObjectSchema<T> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> | JoiSchema<T> | SuperstructSchema<any, any> | StandardSchema;
 export type FormInputEvents = 'input' | 'blur' | 'change';
 export interface FormError<P extends string = string> {
     name: P;

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

@@ -35,6 +35,7 @@ export * from '../components/Skeleton.vue';
 export * from '../components/Slideover.vue';
 export * from '../components/Slider.vue';
 export * from '../components/Switch.vue';
+export * from '../components/Table.vue';
 export * from '../components/Tabs.vue';
 export * from '../components/Textarea.vue';
 export * from '../components/Toast.vue';

package/dist/runtime/types/index.js

@@ -35,6 +35,7 @@ export * from "../components/Skeleton.vue";
 export * from "../components/Slideover.vue";
 export * from "../components/Slider.vue";
 export * from "../components/Switch.vue";
+export * from "../components/Table.vue";
 export * from "../components/Tabs.vue";
 export * from "../components/Textarea.vue";
 export * from "../components/Toast.vue";

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

@@ -15,3 +15,10 @@ export type ArrayOrWrapped<T> = T extends any[] ? T : Array<T>;
 export type PartialString<T> = {
     [K in keyof T]?: string;
 };
+export type MaybeArrayOfArray<T> = T[] | T[][];
+export type MaybeArrayOfArrayItem<I> = I extends Array<infer T> ? T extends Array<infer U> ? U : T : never;
+export type SelectModelValue<T, V, M extends boolean = false, DV = T> = (T extends Record<string, any> ? V extends keyof T ? T[V] : DV : T) extends infer U ? M extends true ? U[] : U : never;
+export type SelectItemKey<T> = T extends Record<string, any> ? keyof T : string;
+export type SelectModelValueEmits<T, V, M extends boolean = false, DV = T> = {
+    'update:modelValue': [payload: SelectModelValue<T, V, M, DV>];
+};