@adea-ai/ui 0.22.2 → 0.23.1

package/src/components/ui/dialog.tsx

@@ -1,116 +1,119 @@
-'use client'
-
-import * as React from 'react'
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
-import { X } from 'lucide-react'
+import { Dialog as DialogPrimitive } from '@kobalte/core/dialog'
+import { X } from 'lucide-solid'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
-function Dialog({ ...props }: DialogPrimitive.Root.Props) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+function Dialog(props: ComponentProps<typeof DialogPrimitive>) {
+  // Background inertness is owned by `ModalDialog` (see
+  // packages/workspace-ui), which marks the rest of the document `inert` while
+  // a dialog is open. Kobalte's own modal layer hides the document with
+  // `aria-hidden` and can leave that attribute behind when a dialog closes as
+  // a side effect of an async action, which would hide the whole workspace
+  // from assistive technology.
+  return <DialogPrimitive data-slot="dialog" modal={false} {...props} />
 }
 
-function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+function DialogTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
-function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+function DialogPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
-function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+function DialogClose(props: ComponentProps<typeof DialogPrimitive.CloseButton>) {
+  return <DialogPrimitive.CloseButton data-slot="dialog-close" {...props} />
 }
 
-function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+function DialogOverlay(props: ComponentProps<typeof DialogPrimitive.Overlay>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
-    <DialogPrimitive.Backdrop
+    <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
-      className={cn(
-        'fixed inset-0 z-[120] bg-slate-950/55 backdrop-blur-[2px] transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0',
-        className
-      )}
-      {...props}
+      class={cn('fixed inset-0 z-[120] bg-slate-950/55 backdrop-blur-[2px]', local.class)}
+      {...rest}
     />
   )
 }
 
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: DialogPrimitive.Popup.Props & { showCloseButton?: boolean }) {
+function DialogContent(
+  props: ComponentProps<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }
+) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'showCloseButton'])
   return (
     <DialogPortal>
       <DialogOverlay />
-      <DialogPrimitive.Viewport
-        data-slot="dialog-viewport"
-        className="fixed inset-0 z-[120] flex items-center justify-center p-4"
-      >
-        <DialogPrimitive.Popup
+      {/* Flex centering keeps the dialog on whole pixels; a translate-based
+          center can land on a half pixel and shift every edge. */}
+      <div class="fixed inset-0 z-[120] flex items-center justify-center p-4">
+        <DialogPrimitive.Content
           data-slot="dialog-content"
-          className={cn(
-            'relative grid max-h-[min(44rem,calc(100dvh-2rem))] w-full max-w-2xl gap-0 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-2xl outline-none transition-[opacity,transform] duration-200 data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0',
-            className
+          class={cn(
+            'relative grid max-h-[min(44rem,calc(100dvh-2rem))] w-full max-w-2xl gap-0 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-2xl outline-none',
+            local.class
           )}
-          {...props}
+          {...rest}
         >
-          {children}
-          {showCloseButton && (
-            <DialogPrimitive.Close
+          {local.children}
+          {(local.showCloseButton ?? true) ? (
+            <DialogPrimitive.CloseButton
               data-slot="dialog-close"
-              className="absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
+              class="absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
               aria-label="Close dialog"
             >
-              <X className="size-4" aria-hidden="true" />
-            </DialogPrimitive.Close>
-          )}
-        </DialogPrimitive.Popup>
-      </DialogPrimitive.Viewport>
+              <X class="size-4" aria-hidden="true" />
+            </DialogPrimitive.CloseButton>
+          ) : null}
+        </DialogPrimitive.Content>
+      </div>
     </DialogPortal>
   )
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogHeader(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-1.5 border-b px-6 py-5 pr-14', className)}
-      {...props}
+      class={cn('flex flex-col gap-1.5 border-b px-6 py-5 pr-14', local.class)}
+      {...rest}
     />
   )
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogFooter(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="dialog-footer"
-      className={cn(
+      class={cn(
         'flex flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
 
-function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+function DialogTitle(props: ComponentProps<typeof DialogPrimitive.Title>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-base font-semibold tracking-tight', className)}
-      {...props}
+      class={cn('text-base font-semibold tracking-tight', local.class)}
+      {...rest}
     />
   )
 }
 
-function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+function DialogDescription(props: ComponentProps<typeof DialogPrimitive.Description>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn('text-sm leading-5 text-muted-foreground', className)}
-      {...props}
+      class={cn('text-sm leading-5 text-muted-foreground', local.class)}
+      {...rest}
     />
   )
 }

package/src/components/ui/drawer.tsx

@@ -1,195 +1,153 @@
-'use client'
-
-import * as React from 'react'
-import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'
+import DrawerPrimitive from '@corvu/drawer'
+import type { Side } from '@corvu/drawer'
+import { Show, splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
-type DrawerContextProps = {
-  hasSnapPoints: boolean
-  modal: DrawerPrimitive.Root.Props['modal']
-  showSwipeHandle: boolean
-  swipeDirection: NonNullable<DrawerPrimitive.Root.Props['swipeDirection']>
-}
-
-const DrawerContext = React.createContext<DrawerContextProps | null>(null)
-
-function useDrawer() {
-  const context = React.useContext(DrawerContext)
+type DrawerSide = Side
 
-  if (!context) {
-    throw new Error('useDrawer must be used within a Drawer.')
-  }
-
-  return context
+type DrawerProps = ComponentProps<typeof DrawerPrimitive> & {
+  /** Base UI spoke of swipe directions; corvu speaks of the side the drawer attaches to. */
+  swipeDirection?: DrawerSide
+  showSwipeHandle?: boolean
 }
 
-function Drawer({
-  modal = true,
-  showSwipeHandle = false,
-  snapPoints,
-  swipeDirection = 'down',
-  ...props
-}: DrawerPrimitive.Root.Props & {
-  showSwipeHandle?: boolean
-}) {
-  const hasSnapPoints = snapPoints != null && snapPoints.length > 0
-  const contextValue = React.useMemo(
-    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
-    [hasSnapPoints, modal, showSwipeHandle, swipeDirection]
-  )
+// Side drawers honor `--drawer-content-width` (the contract the pre-Solid
+// drawer exposed) and fall back to the default width. Task detail sets the
+// variable to `min(29rem, 94vw)`; without the variable here the class below
+// would win and the panel would render narrower than its committed baseline.
+const SIDE_DRAWER_WIDTH = 'w-[var(--drawer-content-width,min(24rem,90vw))]'
+
+const SIDE_CLASSES: Record<DrawerSide, string> = {
+  bottom: 'inset-x-0 bottom-0 max-h-[calc(100dvh-2rem)] rounded-t-xl border-t',
+  top: 'inset-x-0 top-0 max-h-[calc(100dvh-2rem)] rounded-b-xl border-b',
+  left: `inset-y-0 left-0 h-full ${SIDE_DRAWER_WIDTH} rounded-r-xl border-r`,
+  right: `inset-y-0 right-0 h-full ${SIDE_DRAWER_WIDTH} rounded-l-xl border-l`,
+}
 
+function Drawer(props: DrawerProps) {
+  const [local, rest] = splitProps(props, ['swipeDirection', 'side'])
   return (
-    <DrawerContext.Provider value={contextValue}>
-      <DrawerPrimitive.Root
-        data-slot="drawer"
-        modal={modal}
-        snapPoints={snapPoints}
-        swipeDirection={swipeDirection}
-        {...props}
-      />
-    </DrawerContext.Provider>
+    <DrawerPrimitive
+      data-slot="drawer"
+      side={local.side ?? local.swipeDirection ?? 'bottom'}
+      {...rest}
+    />
   )
 }
 
-function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+function DrawerPortal(props: ComponentProps<typeof DrawerPrimitive.Portal>) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+function DrawerClose(props: ComponentProps<typeof DrawerPrimitive.Close>) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
-function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props) {
+function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
-    <DrawerPrimitive.Backdrop
+    <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
-      className={cn(
-        'fixed inset-0 z-[110] min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute',
-        className
+      // The scrim keeps the pre-Solid 10% black the committed screenshots
+      // were taken against; 25% dimmed the page behind every drawer.
+      class={cn(
+        'fixed inset-0 z-[110] bg-black/10 backdrop-blur-xs transition-opacity duration-300 data-closed:opacity-0',
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
 
-function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<'div'>) {
+function DrawerSwipeHandle(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="drawer-swipe-handle"
       aria-hidden="true"
-      className={cn(
-        'relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing',
-        className
+      class={cn(
+        'relative z-10 flex shrink-0 cursor-grab items-center justify-center py-2 active:cursor-grabbing after:block after:h-1 after:w-24 after:shrink-0 after:rounded-full after:bg-muted',
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
 
-function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {
-  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
-  const swipeAxis = swipeDirection === 'down' || swipeDirection === 'up' ? 'y' : 'x'
+type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+  showSwipeHandle?: boolean
+}
+
+function DrawerContent(props: DrawerContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'showSwipeHandle'])
+  const side = DrawerPrimitive.useContext().side
 
   return (
     <DrawerPortal data-slot="drawer-portal">
-      {modal === true && <DrawerOverlay data-snap-points={hasSnapPoints ? '' : undefined} />}
-      <DrawerPrimitive.Viewport
-        data-slot="drawer-viewport"
-        data-modal={modal}
-        className="pointer-events-none fixed inset-0 z-[110] select-none data-[modal=true]:pointer-events-auto"
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        class={cn(
+          'group/drawer-content fixed z-[110] flex flex-col overflow-hidden bg-popover text-sm text-popover-foreground shadow-lg outline-none transition-transform duration-300 ease-out will-change-transform',
+          SIDE_CLASSES[side()],
+          local.class
+        )}
+        {...rest}
       >
-        <DrawerPrimitive.Popup
-          data-slot="drawer-popup"
-          data-swipe-axis={swipeAxis}
-          data-snap-points={hasSnapPoints ? '' : undefined}
-          className={cn(
-            // Base.
-            'group/drawer-popup pointer-events-auto fixed z-[110] m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b',
-            // Nested.
-            'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95',
-            // Bleed.
-            'after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full',
-            // Sizing.
-            '[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]',
-            // Stack.
-            '[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]',
-            // Transitions.
-            'data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
-            // Axis: y.
-            'data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)',
-            // Axis: x.
-            'data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row',
-            // Direction: down.
-            'data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]',
-            // Direction: up.
-            'data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]',
-            // Direction: left.
-            'data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]',
-            // Direction: right.
-            'data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]',
-            className
-          )}
-          {...props}
-        >
-          {showSwipeHandle && <DrawerSwipeHandle />}
-          <DrawerPrimitive.Content
-            data-slot="drawer-content"
-            className={cn(
-              'flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none'
-            )}
-          >
-            {children}
-          </DrawerPrimitive.Content>
-        </DrawerPrimitive.Popup>
-      </DrawerPrimitive.Viewport>
+        <Show when={local.showSwipeHandle}>
+          <DrawerSwipeHandle />
+        </Show>
+        {local.children}
+      </DrawerPrimitive.Content>
     </DrawerPortal>
   )
 }
 
-function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function DrawerHeader(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="drawer-header"
-      className={cn(
-        'flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left',
-        className
-      )}
-      {...props}
+      class={cn('flex shrink-0 flex-col gap-0.5 p-4 pb-0 text-center md:text-left', local.class)}
+      {...rest}
     />
   )
 }
 
-function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function DrawerFooter(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="drawer-footer"
-      className={cn('mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0', className)}
-      {...props}
+      class={cn('mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0', local.class)}
+      {...rest}
     />
   )
 }
 
-function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
+function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
-    <DrawerPrimitive.Title
+    <DrawerPrimitive.Label
       data-slot="drawer-title"
-      className={cn('text-base font-medium text-foreground', className)}
-      {...props}
+      class={cn('text-base font-medium text-foreground', local.class)}
+      {...rest}
     />
   )
 }
 
-function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {
+function DrawerDescription(props: ComponentProps<typeof DrawerPrimitive.Description>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn('text-sm text-balance text-muted-foreground', className)}
-      {...props}
+      class={cn('text-sm text-balance text-muted-foreground', local.class)}
+      {...rest}
     />
   )
 }
@@ -206,4 +164,5 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
+  type DrawerProps,
 }