@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/shadcn/tabs/VerticalTabsList.vue

@@ -0,0 +1,28 @@
+
+<script setup lang="ts">
+import TabsList from "@/ui/tab-list.vue"
+import { cn } from "@/lib/utils"
+import { reactiveOmit } from "@vueuse/core"
+import type { TabsListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+
+const props = defineProps<
+  TabsListProps & {
+    class?: HTMLAttributes["class"]
+    width?: "w-32" | "w-40" | "w-48" | "w-56" | "w-64"
+  }
+>()
+
+const delegatedProps = reactiveOmit(props, ["class", "width"])
+const widthClass = props.width ?? "w-48"
+</script>
+
+<template>
+  <TabsList
+    variant="vertical"
+    v-bind="delegatedProps"
+    :class="cn(widthClass, props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/shadcn/tabs/VerticalTabsTrigger.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import TabsTrigger from "@/ui/tab-trigger.vue"
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="{ ...props, variant: 'vertical' }"
+    :class="props.class"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/src/shadcn/tabs/index.ts

@@ -0,0 +1,10 @@
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsContent } from "./TabsContent.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"
+export { default as GridTabsList } from "./GridTabsList.vue";
+export { default as VerticalTabsList } from "./VerticalTabsList.vue";
+export { default as ScrollableTabsList } from "./ScrollableTabsList.vue";
+export { default as CornerCutTabsTrigger } from "./CornerCutTabsTrigger.vue";
+export { default as VerticalTabsTrigger } from "./VerticalTabsTrigger.vue";
+export { default as CardTabsContent } from "./CardTabsContent.vue";

package/src/shadcn/toggle/Toggle.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ToggleVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Toggle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "."
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleVariants["variant"]
+  size?: ToggleVariants["size"]
+}>(), {
+  variant: "default",
+  size: "default",
+  disabled: false,
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    v-slot="slotProps"
+    data-slot="toggle"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </Toggle>
+</template>

package/src/shadcn/toggle/index.ts

@@ -0,0 +1,28 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Toggle } from "./Toggle.vue"
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>

package/src/shadcn/tooltip/Tooltip.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot />
+  </TooltipRoot>
+</template>

package/src/shadcn/tooltip/TooltipContent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/shadcn/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/shadcn/tooltip/TooltipTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

package/src/shadcn/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"

package/src/ui/InputOTP.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, provide, h, defineAsyncComponent, useSlots } from 'vue';
+import { cn } from './utils';
+import { InputOTPContext, InputOTPMaskContext } from './InputOTPContext';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  maxLength: { type: Number, required: true },
+  disabled: { type: Boolean, default: false },
+  masked: { type: Boolean, default: false },
+  class: String,
+  containerClass: String,
+});
+const emit = defineEmits(['update:modelValue']);
+const slots = useSlots();
+
+const handleChange = (newValue: string) => {
+  if (newValue.length <= props.maxLength) {
+    emit('update:modelValue', newValue);
+  }
+};
+
+// Try to use external input-otp package if available
+let OTPInput: any = null;
+try {
+  OTPInput = defineAsyncComponent(() => import('input-otp'));
+} catch (e) {
+  OTPInput = null;
+}
+
+if (OTPInput) {
+  provide(InputOTPMaskContext, { masked: props.masked });
+}
+
+const contextValue = computed(() => ({
+  value: props.modelValue,
+  onChange: handleChange,
+  maxLength: props.maxLength,
+  disabled: props.disabled,
+  masked: props.masked,
+}));
+
+if (!OTPInput) {
+  provide(InputOTPContext, contextValue.value);
+  provide(InputOTPMaskContext, { masked: props.masked });
+}
+</script>
+<template>
+  <component
+    v-if="OTPInput"
+    :is="OTPInput"
+    data-slot="input-otp"
+    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.containerClass)"
+    :class="cn('disabled:cursor-not-allowed', props.class)"
+    :max-length="props.maxLength"
+    :value="props.modelValue"
+    :onChange="(val: string) => emit('update:modelValue', val)"
+    :disabled="props.disabled"
+  >
+    <slot />
+  </component>
+  <div
+    v-else
+    data-slot="input-otp"
+    :class="cn('flex items-center gap-2 has-disabled:opacity-50', props.containerClass)"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/InputOTPContext.ts

@@ -0,0 +1,10 @@
+// Context symbols and types for InputOTP
+export const InputOTPContext = Symbol('InputOTPContext');
+export const InputOTPMaskContext = Symbol('InputOTPMaskContext');
+export type InputOTPContextType = {
+  value: string;
+  onChange: (value: string) => void;
+  maxLength: number;
+  disabled?: boolean;
+  masked?: boolean;
+};

package/src/ui/InputOTPGroup.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { cn } from './utils';
+const props = defineProps({ class: String });
+</script>
+<template>
+  <div data-slot="input-otp-group" :class="cn('flex items-center gap-1', props.class)"><slot /></div>
+</template>

package/src/ui/InputOTPSeparator.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { Minus } from 'lucide-vue-next';
+</script>
+<template>
+  <div data-slot="input-otp-separator" role="separator">
+    <Minus class="h-4 w-4" />
+  </div>
+</template>

package/src/ui/InputOTPSlot.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps({
+  index: Number,
+  char: String,
+  class: String,
+  disabled: Boolean,
+});
+
+const extDisplayChar = computed(() => {
+  return '';
+});
+
+const extIsActive = computed(() => {
+});
+
+const isActive = computed(() => {
+});
+
+const handleClick = () => {
+};
+
+const handleInput = (e) => {
+  const value = e.target.value;
+};
+
+</script>
+
+<template>
+  <!-- Fallback context: input field mode -->
+  <div
+    data-slot="input-otp-slot"
+    :data-index="props.index"
+    :data-active="isActive"
+    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px] cursor-text', props.class)"
+    @click="handleClick"
+  >
+    <input
+      ref="inputRef"
+      type="text"
+      inputmode="numeric"
+      pattern="[0-9]*"
+      maxlength="1"
+      :value="char"
+      @input="handleInput"
+      @keydown="handleKeydown"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+      class="absolute inset-0 w-full h-full bg-transparent border-0 outline-none text-center opacity-0 caret-transparent"
+      style="caret-color: transparent;"
+    />
+    <div class="pointer-events-none select-none relative z-10 flex items-center justify-center">
+      <span v-if="char" class="text-foreground">{{ displayChar }}</span>
+    </div>
+    <div v-if="isActive && !char" class="pointer-events-none absolute inset-0 flex items-center justify-center z-20">
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+    </div>
+  </div>
+</template>

package/src/ui/PopoverContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from './utils';
+import { PopoverContent, PopoverPortal } from 'reka-ui';
+
+const props = defineProps({
+  class: String,
+  align: { type: String, default: 'center' },
+  sideOffset: { type: Number, default: 4 },
+});
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      :align="props.align"
+      :side-offset="props.sideOffset"
+      :class="cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/src/ui/PopoverTrigger.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { PopoverTrigger } from '@/shadcn/popover';
+</script>
+
+<template>
+  <PopoverTrigger data-slot="popover-trigger" v-bind="$attrs">
+    <slot />
+  </PopoverTrigger>
+</template>

package/src/ui/SelectContent.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { SelectContent } from '@/shadcn/select';
+import { cn } from './utils';
+const props = defineProps({
+  class: String,
+  position: { type: String as () => 'popper' | 'item-aligned', default: 'popper' },
+});
+</script>
+
+<template>
+  <SelectContent
+    data-slot="select-content"
+    :class="cn(
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+      props.position === 'popper' &&
+        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+      props.class,
+    )"
+    :position="props.position"
+    v-bind="$attrs"
+  >
+    <slot />
+  </SelectContent>
+</template>

package/src/ui/SelectGroup.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
+let SelectPrimitiveGroup: any = null;
+try {
+  SelectPrimitiveGroup = defineAsyncComponent(() => import('shadcn-vue').then(m => m.SelectGroup));
+} catch (e) {
+  SelectPrimitiveGroup = null;
+}
+</script>
+<template>
+  <component
+    v-if="SelectPrimitiveGroup"
+    :is="SelectPrimitiveGroup"
+    data-slot="select-group"
+    v-bind="$attrs"
+  >
+    <slot />
+  </component>
+  <div v-else data-slot="select-group" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/src/ui/SelectItem.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { SelectItem } from '@/shadcn/select';
+import { Check } from 'lucide-vue-next';
+import { cn } from './utils';
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  class: String,
+});
+</script>
+<template>
+  <SelectItem
+    :value="props.value"
+    data-slot="select-item"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </SelectItem>
+</template>

package/src/ui/SelectLabel.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
+import { cn } from './utils';
+let SelectPrimitiveLabel: any = null;
+try {
+  SelectPrimitiveLabel = defineAsyncComponent(() => import('shadcn-vue').then(m => m.SelectLabel));
+} catch (e) {
+  SelectPrimitiveLabel = null;
+}
+defineProps({
+  class: String,
+});
+</script>
+<template>
+  <component
+    v-if="SelectPrimitiveLabel"
+    :is="SelectPrimitiveLabel"
+    data-slot="select-label"
+    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', $props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </component>
+  <div v-else data-slot="select-label" :class="cn('text-muted-foreground px-2 py-1.5 text-xs', $props.class)" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/src/ui/SelectSeparator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
+import { cn } from './utils';
+let SelectPrimitiveSeparator: any = null;
+try {
+  SelectPrimitiveSeparator = defineAsyncComponent(() => import('shadcn-vue').then(m => m.SelectSeparator));
+} catch (e) {
+  SelectPrimitiveSeparator = null;
+}
+defineProps({
+  class: String,
+});
+</script>
+<template>
+  <component
+    v-if="SelectPrimitiveSeparator"
+    :is="SelectPrimitiveSeparator"
+    data-slot="select-separator"
+    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', $props.class)"
+    v-bind="$attrs"
+  />
+  <div v-else data-slot="select-separator" :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', $props.class)" v-bind="$attrs" />
+</template>

package/src/ui/SelectTrigger.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from './utils';
+import { SelectTrigger } from '@/shadcn/select';
+import { ChevronDown } from 'lucide-vue-next';
+defineProps({
+  class: String,
+  size: { type: String, default: 'default' },
+});
+</script>
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    :class="cn(
+      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-select-hover flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:min-h-9 data-[size=sm]:min-h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:overflow-hidden [&_[data-slot=select-value]_div]:flex [&_[data-slot=select-value]_div]:items-center [&_[data-slot=select-value]_div]:gap-2 [&_[data-slot=select-value]_.text-xs]:hidden [&_[data-slot=select-value]_svg]:shrink-0',
+      $props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </SelectTrigger>
+</template>

package/src/ui/SelectValue.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { SelectValue } from '@/shadcn/select';
+</script>
+
+<template>
+  <SelectValue data-slot="select-value" v-bind="$attrs">
+    <slot />
+  </SelectValue>
+</template>

package/src/ui/SheetContent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+
+const props = defineProps({
+  side: { type: String, default: 'right' },
+  class: String,
+});
+</script>
+<template>
+  <div
+    :data-slot="'sheet-content'"
+    :class="[
+      cn(
+        'bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out',
+        side === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+        side === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        side === 'top' && 'inset-x-0 top-0 h-auto border-b',
+        side === 'bottom' && 'inset-x-0 bottom-0 h-auto border-t',
+        props.class,
+      )
+    ]"
+  >
+    <slot />
+    <button
+      class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      @click="$emit('close')"
+    >
+      <span class="sr-only">Close</span>
+      <!-- Replace with your icon component -->
+      <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+    </button>
+  </div>
+</template>

package/src/ui/SheetDescription.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+const props = defineProps({
+  class: String,
+});
+</script>
+<template>
+  <p :data-slot="'sheet-description'" :class="cn('text-muted-foreground text-sm', props.class)"><slot /></p>
+</template>

package/src/ui/SheetHeader.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+const props = defineProps({
+  class: String,
+});
+</script>
+<template>
+  <div :data-slot="'sheet-header'" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
+    <slot />
+  </div>
+</template>

package/src/ui/SheetTitle.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+const props = defineProps({
+  class: String,
+});
+</script>
+<template>
+  <h2 :data-slot="'sheet-title'" :class="cn('text-foreground font-semibold', props.class)"><slot /></h2>
+</template>