@iqual/nuxt-icms 1.1.0 → 1.2.2

package/components/ui/sidebar/SidebarMenu.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
+</template>

package/components/ui/sidebar/SidebarMenuAction.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  showOnHover?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-action"
+    :class="cn(
+      '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',
+      'after:absolute after:-inset-2 after:md:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover
+        && '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',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>

package/components/ui/sidebar/SidebarMenuBadge.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-badge"
+    :class="cn(
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/components/ui/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/default/ui/tooltip'
+import { computed } from 'vue'
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
+import { useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps & {
+  tooltip?: string | Component
+}>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+
+const { isMobile, state } = useSidebar()
+
+const delegatedProps = computed(() => {
+  const { tooltip, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      :hidden="state !== 'collapsed' || isMobile"
+    >
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>

package/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { SidebarMenuButtonVariants } from '.'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+import { sidebarMenuButtonVariants } from '.'
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>

package/components/ui/sidebar/SidebarMenuItem.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>

package/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Skeleton } from '@/lib/registry/default/ui/skeleton'
+import { cn } from '@/lib/utils'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  showIcon?: boolean
+  class?: HTMLAttributes['class']
+}>()
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`
+})
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-skeleton"
+    :class="cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)"
+  >
+    <Skeleton
+      v-if="showIcon"
+      class="size-4 rounded-md"
+      data-sidebar="menu-skeleton-icon"
+    />
+
+    <Skeleton
+      class="h-4 flex-1 max-w-[--skeleton-width]"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>

package/components/ui/sidebar/SidebarMenuSub.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu-badge"
+    :class="cn(
+      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
+</template>

package/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  size?: 'sm' | 'md'
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'a',
+  size: 'md',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(
+      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>

package/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <li>
+    <slot />
+  </li>
+</template>

package/components/ui/sidebar/SidebarProvider.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { HTMLAttributes, Ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
+import { TooltipProvider } from 'radix-vue'
+import { computed, ref } from 'vue'
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
+
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean
+  open?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  defaultOpen: true,
+  open: undefined,
+})
+
+const emits = defineEmits<{
+  'update:open': [open: boolean]
+}>()
+
+const isMobile = useMediaQuery('(max-width: 768px)')
+const openMobile = ref(false)
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+function setOpen(value: boolean) {
+  open.value = value // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => open.value ? 'expanded' : 'collapsed')
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>

package/components/ui/sidebar/SidebarRail.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="cn(
+      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>

package/components/ui/sidebar/SidebarSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Separator } from '@/lib/registry/default/ui/separator'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Separator
+    data-sidebar="separator"
+    :class="cn('mx-2 w-auto bg-sidebar-border', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>

package/components/ui/sidebar/SidebarTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { PanelLeft } from 'lucide-vue-next'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>

package/components/ui/sidebar/index.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
+
+export interface SidebarProps {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}
+
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>

package/components/ui/sidebar/utils.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'radix-vue'
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>('Sidebar')

package/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface SkeletonProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
+</template>

package/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'

package/components/ui/slider/Slider.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack class="relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary">
+      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+    />
+  </SliderRoot>
+</template>

package/components/ui/slider/index.ts

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue'

package/components/ui/sonner/Sonner.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { ToasterProps } from 'vue-sonner'
+import { Toaster as Sonner } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :toast-options="{
+      classes: {
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+  />
+</template>

package/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'

package/components/ui/stepper/Stepper.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<StepperRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <StepperRoot
+    v-slot="slotProps"
+    :class="cn(
+      'flex gap-2',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </StepperRoot>
+</template>