@byyuurin/ui 0.0.6 → 0.0.8

package/dist/runtime/components/Breadcrumb.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { breadcrumb } from '../theme'
+import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types'
+
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type BreadcrumbSlots<T extends { slot?: string }> = {
+  'item'?: SlotProps<T>
+  'item-leading'?: SlotProps<T>
+  'item-label'?: SlotProps<T>
+  'item-trailing'?: SlotProps<T>
+  'separator'?: (props?: {}) => any
+} & DynamicSlots<T, SlotProps<T>>
+
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  icon?: string
+  slot?: string
+}
+
+export interface BreadcrumbProps<T> extends ComponentAttrs<typeof breadcrumb> {
+  /**
+   * The element or component this component should render as.
+   * @default "nav"
+   */
+  as?: PrimitiveProps['as']
+  dir?: 'rtl' | 'ltr'
+  items?: T[]
+  /**
+   * The icon to use as a separator.
+   * @default app.icons.chevronRight
+   */
+  separatorIcon?: string
+  /**
+   * The key used to get the label from the item.
+   * @default "label"
+   */
+  labelKey?: string
+}
+</script>
+
+<script setup lang="ts" generic="T extends BreadcrumbItem">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { get, pickLinkProps } from '../utils'
+import Link from './Link.vue'
+import LinkBase from './LinkBase.vue'
+
+const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
+  as: 'nav',
+  labelKey: 'label',
+})
+
+const slots = defineSlots<BreadcrumbSlots<T>>()
+
+const { theme, createStyler } = useTheme()
+
+const separatorIcon = computed(() => props.separatorIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.breadcrumb)
+  return styler(props)
+})
+</script>
+
+<template>
+  <Primitive :as="props.as" aria-label="breadcrumb" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <ol :class="style.list({ class: props.ui?.list })">
+      <template v-for="(item, index) in props.items" :key="index">
+        <li :class="style.item({ class: props.ui?.item })">
+          <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <LinkBase
+              v-bind="slotProps"
+              as="span"
+              :aria-current="active && (index === items!.length - 1) ? 'page' : undefined"
+              :class="style.link({ class: props.ui?.link, active: index === items!.length - 1, disabled: item.disabled, to: !!item.to })"
+            >
+              <slot :name="item.slot || 'item'" :item="item" :index="index">
+                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="index === items!.length - 1" :index="index">
+                  <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })"></span>
+                </slot>
+
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
+                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="index === items!.length - 1" :index="index">
+                    {{ get(item, props.labelKey) }}
+                  </slot>
+                </span>
+
+                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="index === items!.length - 1" :index="index"></slot>
+              </slot>
+            </LinkBase>
+          </Link>
+        </li>
+
+        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="style.separator({ class: props.ui?.separator })">
+          <slot name="separator">
+            <span :class="style.separatorIcon({ class: [separatorIcon, props.ui?.separatorIcon] })"></span>
+          </slot>
+        </li>
+      </template>
+    </ol>
+  </Primitive>
+</template>

package/dist/runtime/components/Button.vue

@@ -6,15 +6,14 @@ import type { ComponentAttrs } from '../types'
 import type { LinkProps } from './Link.vue'
 
 export interface ButtonSlots {
-  default?: (props?: any) => any
-  prefix?: (props?: any) => any
-  suffix?: (props?: any) => any
+  default?: (props?: {}) => any
+  leading?: (props?: {}) => any
+  trailing?: (props?: {}) => any
 }
 
 type ButtonVariants = VariantProps<typeof button>
-type UIOptions = ComponentAttrs<typeof button>['ui'] & LinkProps['ui']
 
-export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>, UseComponentIconsProps, Omit<LinkProps, 'ui' | 'raw'> {
+export interface ButtonProps extends ComponentAttrs<typeof button>, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom' | 'underline'> {
   icon?: string
   label?: string
   variant?: ButtonVariants['variant']
@@ -22,11 +21,11 @@ export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>,
   loading?: boolean
   active?: boolean
   disabled?: boolean
-  ui?: UIOptions
 }
 </script>
 
 <script lang="ts" setup>
+import { useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
@@ -41,11 +40,11 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 const slots = defineSlots<ButtonSlots>()
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: props.loading })),
 )
 
-const linkProps = pickLinkProps(props)
+const linkProps = useForwardProps(pickLinkProps(props))
 
 const { theme, createStyler } = useTheme()
 
@@ -55,12 +54,12 @@ const style = computed(() => {
     ...props,
     size: size.value,
     groupOrientation: orientation.value,
-    prefix: isPrefix.value,
-    suffix: isSuffix.value,
+    leading: isLeading.value,
+    trailing: isTrailing.value,
     class: [
       props.class,
-      props.active ? props.ui?.active : props.ui?.inactive,
-      props.disabled ? props.ui?.disabled : undefined,
+      props.active ? props.activeClass : props.inactiveClass,
+      props.disabled ? props.disableClass : undefined,
     ],
   })
 })
@@ -71,14 +70,14 @@ const style = computed(() => {
     :class="style.base({ class: [props.class, props.ui?.base] })"
     :type="props.type"
     :disabled="props.disabled || props.loading"
-    v-bind="omit(linkProps, ['type', 'disabled'])"
+    v-bind="omit(linkProps, ['type', 'disabled', 'activeClass', 'inactiveClass', 'disableClass'])"
     raw
   >
-    <slot name="prefix">
-      <i
-        v-if="isPrefix && prefixIconName"
-        :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
-      ></i>
+    <slot name="leading">
+      <span
+        v-if="isLeading && leadingIconName"
+        :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"
+      ></span>
     </slot>
     <span
       v-if="props.label || slots.default"
@@ -86,11 +85,11 @@ const style = computed(() => {
     >
       <slot>{{ label }}</slot>
     </span>
-    <slot name="suffix">
-      <i
-        v-if="isSuffix && suffixIconName"
-        :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
-      ></i>
+    <slot name="trailing">
+      <span
+        v-if="isTrailing && trailingIconName"
+        :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"
+      ></span>
     </slot>
   </Link>
 </template>

package/dist/runtime/components/ButtonGroup.vue

@@ -4,22 +4,27 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { buttonGroup } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface ButtonGroupSlots {
+  default?: (props?: {}) => any
+}
+
 type ButtonGroupVariant = VariantProps<typeof buttonGroup>
 
-export interface ButtonGroupProps extends Omit<ComponentAttrs<typeof buttonGroup>, 'ui'>, Pick<PrimitiveProps, 'as'> {
+export interface ButtonGroupProps extends Omit<ComponentAttrs<typeof buttonGroup>, 'ui'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   size?: ButtonGroupVariant['size']
   orientation?: ButtonGroupVariant['orientation']
 }
-
-export interface ButtonGroupSlots {
-  default?: (props?: any) => any
-}
 </script>
 
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
-import { provideButtonGroup } from '../composables/useButtonGroup'
+import { provideButtonGroup } from '../app/injections'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
@@ -28,10 +33,7 @@ const props = withDefaults(defineProps<ButtonGroupProps>(), {
 
 defineSlots<ButtonGroupSlots>()
 
-provideButtonGroup(computed(() => ({
-  size: props.size,
-  orientation: props.orientation,
-})))
+provideButtonGroup(computed(() => props))
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {

package/dist/runtime/components/Card.vue

@@ -1,22 +1,30 @@
 <script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
 import type { PrimitiveProps } from 'reka-ui'
 import type { card } from '../theme'
 import type { ComponentAttrs } from '../types'
 
-export interface CardProps extends ComponentAttrs<typeof card> {
-  as?: PrimitiveProps['as']
-  title?: string
-  description?: string
-}
-
 export interface CardSlots {
   default?: (props?: {}) => any
   content?: (props?: {}) => any
   header?: (props?: {}) => any
-  title?: (props?: any) => any
-  description?: (props?: any) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
   footer?: (props?: {}) => any
 }
+
+type CardVariants = VariantProps<typeof card>
+
+export interface CardProps extends ComponentAttrs<typeof card> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
+  variant?: CardVariants['variant']
+  title?: string
+  description?: string
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Carousel.vue

@@ -11,9 +11,18 @@ import type { AcceptableValue, PrimitiveProps } from 'reka-ui'
 import type { carousel } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
+export interface CarouselSlots<T> {
+  default?: (props: { item: T, index: number }) => any
+}
+
 type CarouselVariants = VariantProps<typeof carousel>
 
-export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<PrimitiveProps, 'as'>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   /**
    * Configure the prev button when arrows are enabled.
    * @default { size: 'md', variant: 'link' }
@@ -21,7 +30,7 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
   prev?: ButtonProps
   /**
    * The icon displayed in the prev button.
-   * @default `app.icons.arrowLeft`
+   * @default app.icons.chevronLeft
    */
   prevIcon?: string
   /**
@@ -31,7 +40,7 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
   next?: ButtonProps
   /**
    * The icon displayed in the next button.
-   * @default `app.icons.arrowRight`
+   * @default app.icons.chevronRight
    */
   nextIcon?: string
   /**
@@ -78,10 +87,6 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
    */
   wheelGestures?: boolean | WheelGesturesPluginOptions
 }
-
-export interface CarouselSlots<T> {
-  default?: (props: { item: T, index: number }) => any
-}
 </script>
 
 <script setup lang="ts" generic="T extends AcceptableValue">
@@ -89,6 +94,7 @@ import { computedAsync, reactivePick } from '@vueuse/core'
 import useEmblaCarousel from 'embla-carousel-vue'
 import { Primitive, useForwardProps } from 'reka-ui'
 import { computed, onMounted, ref, watch } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -129,14 +135,15 @@ defineSlots<CarouselSlots<T>>()
 
 const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
 
+const { t } = useLocale()
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.carousel)
   return styler(props)
 })
 
-const prevIcon = computed(() => props.prevIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowRight : theme.value.app.icons.arrowLeft))
-const nextIcon = computed(() => props.nextIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowLeft : theme.value.app.icons.arrowRight))
+const prevIcon = computed(() => props.prevIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
+const nextIcon = computed(() => props.nextIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
 
 const options = computed<EmblaOptionsType>(() => ({
   ...(props.fade ? { align: 'center', containScroll: false } : {}),
@@ -279,7 +286,7 @@ defineExpose({
           :icon="prevIcon"
           size="md"
           variant="outline"
-          aria-label="prev"
+          :aria-label="t('carousel.prev')"
           v-bind="typeof props.prev === 'object' ? props.prev : undefined"
           :class="style.prev({ class: props.ui?.prev })"
           @click="scrollPrev"
@@ -289,7 +296,7 @@ defineExpose({
           :icon="nextIcon"
           size="md"
           variant="outline"
-          aria-label="next"
+          :aria-label="t('carousel.next')"
           v-bind="typeof props.next === 'object' ? props.next : undefined"
           :class="style.next({ class: props.ui?.next })"
           @click="scrollNext"
@@ -299,7 +306,7 @@ defineExpose({
       <div v-if="props.dots" :class="style.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
-            :aria-label="`Go to ${index + 1}`"
+            :aria-label="t('carousel.goto', { page: index + 1 })"
             :class="style.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             @click="scrollTo(index)"
           ></button>

package/dist/runtime/components/Checkbox.vue

@@ -4,9 +4,22 @@ import type { CheckboxRootProps, PrimitiveProps } from 'reka-ui'
 import type { checkbox } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface CheckboxEmits {
+  (event: 'change', payload: Event): void
+}
+
+export interface CheckboxSlots {
+  label?: (props: { label?: string }) => any
+  description?: (props: { description?: string }) => any
+}
+
 type CheckboxVariants = VariantProps<typeof checkbox>
 
 export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
   as?: PrimitiveProps['as']
   label?: string
   description?: string
@@ -22,15 +35,6 @@ export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<Che
    */
   indeterminateIcon?: string
 }
-
-export interface CheckboxEmits {
-  (event: 'change', payload: Event): void
-}
-
-export interface CheckboxSlots {
-  label?: (props: { label?: string }) => any
-  description?: (props: { description?: string }) => any
-}
 </script>
 
 <script lang="ts" setup>
@@ -78,11 +82,11 @@ function onUpdate(value: any) {
         @update:model-value="onUpdate"
       >
         <CheckboxIndicator as-child force-mount>
-          <i
+          <span
             v-if="modelValue === 'indeterminate'"
             :class="style.icon({ class: [props.indeterminateIcon || theme.app.icons.indeterminate, props.ui?.icon] })"
-          ></i>
-          <i v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })"></i>
+          ></span>
+          <span v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })"></span>
         </CheckboxIndicator>
       </CheckboxRoot>
     </div>

package/dist/runtime/components/Chip.vue

@@ -5,19 +5,24 @@ import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { chip } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface ChipSlots {
+  leading?: (props?: {}) => any
+  default?: (props?: {}) => any
+  trailing?: (props?: {}) => any
+}
+
 type ChipVariants = VariantProps<typeof chip>
 
-export interface ChipProps extends ComponentAttrs<typeof chip>, Pick<PrimitiveProps, 'as'>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface ChipProps extends ComponentAttrs<typeof chip>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   variant?: ChipVariants['variant']
   size?: ChipVariants['size']
   label?: string
 }
-
-export interface ChipSlots {
-  prefix?: (props?: {}) => any
-  default?: (props?: {}) => any
-  suffix?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -34,7 +39,7 @@ const props = withDefaults(defineProps<ChipProps>(), {
 const slots = defineSlots<ChipSlots>()
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
@@ -49,16 +54,16 @@ const style = computed(() => {
 
 <template>
   <Primitive :as="props.as" :class="style.base({ class: [props.class, props.ui?.base] })">
-    <slot name="prefix">
-      <i v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></i>
+    <slot name="leading">
+      <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"></span>
     </slot>
 
     <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })">
       <slot>{{ props.label }}</slot>
     </span>
 
-    <slot name="suffix">
-      <i v-if="isSuffix && suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></i>
+    <slot name="trailing">
+      <span v-if="isTrailing && trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"></span>
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Collapsible.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import type { collapsible } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface CollapsibleEmits extends CollapsibleRootEmits {}
+
+export interface CollapsibleSlots {
+  default?: (props: { open: boolean }) => any
+  content?: (props?: {}) => any
+}
+
+export interface CollapsibleProps extends ComponentAttrs<typeof collapsible>, Pick<CollapsibleRootProps, 'as' | 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<CollapsibleProps>(), {
+  unmountOnHide: true,
+})
+const emit = defineEmits<CollapsibleEmits>()
+const slots = defineSlots<CollapsibleSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emit)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.collapsible)
+  return styler(props)
+})
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-slot="{ open }"
+    v-bind="rootProps"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+  >
+    <CollapsibleTrigger v-if="slots.default" as-child>
+      <slot :open="open"></slot>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent :class="style.content({ class: props.ui?.content })">
+      <slot name="content"></slot>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>
+
+<style>
+@keyframes collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}
+</style>

package/dist/runtime/components/Drawer.vue

@@ -1,11 +1,23 @@
 <script lang="ts">
-import type { DialogContentProps, PrimitiveProps } from 'reka-ui'
+import type { DialogContentProps } from 'reka-ui'
 import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
 import type { drawer } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface DrawerEmits extends DrawerRootEmits {}
+
+export interface DrawerSlots {
+  default?: (props?: {}) => any
+  handle?: (props?: {}) => any
+  content?: (props?: {}) => any
+  header?: (props?: {}) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
+  body?: (props?: {}) => any
+  footer?: (props?: {}) => any
+}
+
 export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
-  as?: PrimitiveProps['as']
   title?: string
   description?: string
   /** The content of the drawer. */
@@ -15,8 +27,10 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerR
    * @default true
    */
   overlay?: boolean
-  blur?: boolean
-  full?: boolean
+  /**
+   * Whether to inset the drawer from the edges.
+   */
+  inset?: boolean
   /**
    * Render a handle on the drawer.
    * @default true
@@ -33,19 +47,6 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerR
    */
   dismissible?: boolean
 }
-
-export interface DrawerEmits extends DrawerRootEmits {}
-
-export interface DrawerSlots {
-  default?: (props?: {}) => any
-  handle?: (props?: {}) => any
-  content?: (props?: {}) => any
-  header?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  body?: (props?: {}) => any
-  footer?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">