@stevederico/skateboard-ui 3.0.2 → 3.6.0

package/shadcn/lib/utils.js

@@ -1,5 +1,5 @@
 import { clsx } from "./clsx.js";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from "./tailwind-merge.js";
 
 export function cn(...inputs) {
   return twMerge(clsx(inputs));

package/shadcn/ui/accordion.jsx

@@ -1,4 +1,4 @@
-import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { Accordion as AccordionPrimitive } from "../lib/base-ui/accordion.js"
 
 import { cn } from "../lib/utils.js"
 import { ChevronDownIcon, ChevronUpIcon } from "../../icons"

package/shadcn/ui/alert-dialog.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import { AlertDialog as AlertDialogPrimitive } from "../lib/base-ui/alert-dialog.js"
 
 import { cn } from "../lib/utils.js"
 import { Button } from "./button.jsx"

package/shadcn/ui/avatar.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { Avatar as AvatarPrimitive } from "../lib/base-ui/avatar.js"
 
 import { cn } from "../lib/utils.js"
 

package/shadcn/ui/badge.jsx

@@ -1,5 +1,5 @@
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
+import { mergeProps } from "../lib/base-ui/merge-props.js"
+import { useRender } from "../lib/base-ui/use-render.js"
 import { cva } from "../lib/cva.js";
 
 import { cn } from "../lib/utils.js"

package/shadcn/ui/breadcrumb.jsx

@@ -1,6 +1,6 @@
 import * as React from "react"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
+import { mergeProps } from "../lib/base-ui/merge-props.js"
+import { useRender } from "../lib/base-ui/use-render.js"
 
 import { cn } from "../lib/utils.js"
 import { ChevronRightIcon, MoreHorizontalIcon } from "../../icons"

package/shadcn/ui/button-group.jsx

@@ -1,5 +1,5 @@
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
+import { mergeProps } from "../lib/base-ui/merge-props.js"
+import { useRender } from "../lib/base-ui/use-render.js"
 import { cva } from "../lib/cva.js";
 
 import { cn } from "../lib/utils.js"

package/shadcn/ui/button.jsx

@@ -1,4 +1,4 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { Button as ButtonPrimitive } from "../lib/base-ui/button.js"
 import { cva } from "../lib/cva.js";
 
 import { cn } from "../lib/utils.js"

package/shadcn/ui/calendar.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { DayPicker, getDefaultClassNames } from "../../core/Calendar.jsx";
+import { DayPicker, getDefaultClassNames } from "../../components/core/Calendar.jsx";
 
 import { cn } from "../lib/utils.js"
 import { Button, buttonVariants } from "./button.jsx"

package/shadcn/ui/checkbox.jsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+import { Checkbox as CheckboxPrimitive } from "../lib/base-ui/checkbox.js"
 
 import { cn } from "../lib/utils.js"
 import { CheckIcon } from "../../icons"

package/shadcn/ui/collapsible.jsx

@@ -1,4 +1,4 @@
-import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+import { Collapsible as CollapsiblePrimitive } from "../lib/base-ui/collapsible.js"
 
 function Collapsible({
   ...props

package/shadcn/ui/command.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Command as CommandPrimitive } from "../../core/Command.jsx"
+import { Command as CommandPrimitive } from "../../components/core/Command.jsx"
 
 import { cn } from "../lib/utils.js"
 import {

package/shadcn/ui/context-menu.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
+import { ContextMenu as ContextMenuPrimitive } from "../lib/base-ui/context-menu.js"
 
 import { cn } from "../lib/utils.js"
 import { ChevronRightIcon, CheckIcon } from "../../icons"

package/shadcn/ui/dialog.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { Dialog as DialogPrimitive } from "../lib/base-ui/dialog.js"
 
 import { cn } from "../lib/utils.js"
 import { Button } from "./button.jsx"

package/shadcn/ui/drawer.jsx

@@ -1,119 +1,221 @@
 import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Dialog as DialogPrimitive } from "../lib/base-ui/dialog.js"
 
 import { cn } from "../lib/utils.js"
 
-function Drawer({
-  ...props
-}) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+// Drag thresholds and animation timing ported from vaul (MIT — Emil Kowalski).
+// https://github.com/emilkowalski/vaul/blob/main/src/constants.ts
+const VELOCITY_THRESHOLD = 0.4
+const CLOSE_THRESHOLD = 0.25
+const TRANSITION = "transform 500ms cubic-bezier(0.32, 0.72, 0, 1)"
+
+function dampenValue(v) {
+  return 8 * (Math.log(v + 1) - 2)
+}
+
+// Ported from vaul/src/index.tsx `shouldDrag`. Skips drag when the pointer is
+// inside a scrollable child that isn't at scrollTop=0 (lets content scroll
+// naturally), on a <select>, on a [data-no-drag] subtree, or when text is
+// highlighted.
+function shouldDrag(el, popup) {
+  let element = el
+  if (window.getSelection()?.toString()) return false
+  while (element && element !== popup) {
+    if (element.tagName === "SELECT") return false
+    if (element.hasAttribute?.("data-no-drag") || element.closest?.("[data-no-drag]")) return false
+    if (element.scrollHeight > element.clientHeight && element.scrollTop !== 0) return false
+    element = element.parentNode
+  }
+  return true
+}
+
+const DrawerCtx = React.createContext(null)
+
+function Drawer({ open, defaultOpen, onOpenChange, ...props }) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)
+  const isControlled = open !== undefined
+  const actualOpen = isControlled ? open : internalOpen
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next)
+      onOpenChange?.(next)
+    },
+    [isControlled, onOpenChange]
+  )
+  return (
+    <DrawerCtx.Provider value={{ onOpenChange: handleOpenChange }}>
+      <DialogPrimitive.Root
+        data-slot="drawer"
+        open={actualOpen}
+        onOpenChange={handleOpenChange}
+        {...props}
+      />
+    </DrawerCtx.Provider>
+  )
 }
 
-function DrawerTrigger({
-  ...props
-}) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+function DrawerTrigger(props) {
+  return <DialogPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+function DrawerPortal(props) {
+  return <DialogPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+function DrawerClose(props) {
+  return <DialogPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
-function DrawerOverlay({
-  className,
-  ...props
-}) {
+function DrawerOverlay({ className, ...props }) {
   return (
-    <DrawerPrimitive.Overlay
+    <DialogPrimitive.Backdrop
       data-slot="drawer-overlay"
-      className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
-        className
-      )}
-      {...props} />
-  );
+      className={cn("drawer-backdrop fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs", className)}
+      {...props}
+    />
+  )
 }
 
-function DrawerContent({
-  className,
-  children,
-  ...props
-}) {
+function DrawerContent({ className, children, ...props }) {
+  const popupRef = React.useRef(null)
+  const ctx = React.useContext(DrawerCtx)
+  const dragState = React.useRef({ dragging: false, startY: 0, height: 0, startTime: 0 })
+
+  const snapBack = React.useCallback(() => {
+    const el = popupRef.current
+    if (!el) return
+    el.style.transition = ""
+    el.style.transform = ""
+  }, [])
+
+  const dismiss = React.useCallback(() => {
+    const el = popupRef.current
+    if (!el) {
+      ctx?.onOpenChange(false)
+      return
+    }
+    el.style.transition = TRANSITION
+    el.style.transform = "translate3d(0, 100%, 0)"
+    window.setTimeout(() => {
+      ctx?.onOpenChange(false)
+    }, 500)
+  }, [ctx])
+
+  const handlePointerDown = React.useCallback((event) => {
+    const el = popupRef.current
+    if (!el || !shouldDrag(event.target, el)) return
+    event.target.setPointerCapture?.(event.pointerId)
+    dragState.current = {
+      dragging: true,
+      startY: event.clientY,
+      height: el.getBoundingClientRect().height || 0,
+      startTime: event.timeStamp,
+    }
+    el.style.transition = "none"
+  }, [])
+
+  const handlePointerMove = React.useCallback((event) => {
+    const state = dragState.current
+    if (!state.dragging) return
+    const el = popupRef.current
+    if (!el) return
+    const delta = event.clientY - state.startY
+    if (delta >= 0) {
+      // Dragging down toward close — direct translate
+      el.style.transform = `translate3d(0, ${delta}px, 0)`
+    } else {
+      // Dragging up away from close — logarithmic rubber-band damping (vaul-style)
+      const damped = -dampenValue(-delta)
+      el.style.transform = `translate3d(0, ${damped}px, 0)`
+    }
+  }, [])
+
+  const handlePointerUp = React.useCallback(
+    (event) => {
+      const state = dragState.current
+      if (!state.dragging) return
+      state.dragging = false
+      const delta = event.clientY - state.startY
+      const elapsed = Math.max(1, event.timeStamp - state.startTime)
+      const velocity = Math.abs(delta) / elapsed
+
+      if (delta < 0) {
+        snapBack()
+        return
+      }
+      if (velocity > VELOCITY_THRESHOLD || delta >= state.height * CLOSE_THRESHOLD) {
+        dismiss()
+      } else {
+        snapBack()
+      }
+    },
+    [dismiss, snapBack]
+  )
+
+  const handlePointerCancel = React.useCallback(() => {
+    if (!dragState.current.dragging) return
+    dragState.current.dragging = false
+    snapBack()
+  }, [snapBack])
+
   return (
-    <DrawerPortal data-slot="drawer-portal">
+    <DrawerPortal>
       <DrawerOverlay />
-      <DrawerPrimitive.Content
+      <DialogPrimitive.Popup
+        ref={popupRef}
         data-slot="drawer-content"
-        className={cn(
-          "bg-background flex h-auto flex-col text-sm outline-none data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50",
-          className
-        )}
-        {...props}>
-        <div
-          className="bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        className={cn("drawer-popup bg-background text-sm", className)}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full" />
         {children}
-      </DrawerPrimitive.Content>
+      </DialogPrimitive.Popup>
     </DrawerPortal>
-  );
+  )
 }
 
-function DrawerHeader({
-  className,
-  ...props
-}) {
+function DrawerHeader({ className, ...props }) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn(
-        "gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col",
-        className
-      )}
-      {...props} />
-  );
+      className={cn("gap-0.5 p-4 text-center md:gap-1.5 md:text-left flex flex-col", className)}
+      {...props}
+    />
+  )
 }
 
-function DrawerFooter({
-  className,
-  ...props
-}) {
+function DrawerFooter({ className, ...props }) {
   return (
     <div
       data-slot="drawer-footer"
       className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
-      {...props} />
-  );
+      {...props}
+    />
+  )
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}) {
+function DrawerTitle({ className, ...props }) {
   return (
-    <DrawerPrimitive.Title
+    <DialogPrimitive.Title
       data-slot="drawer-title"
       className={cn("text-foreground font-medium", className)}
-      {...props} />
-  );
+      {...props}
+    />
+  )
 }
 
-function DrawerDescription({
-  className,
-  ...props
-}) {
+function DrawerDescription({ className, ...props }) {
   return (
-    <DrawerPrimitive.Description
+    <DialogPrimitive.Description
       data-slot="drawer-description"
       className={cn("text-muted-foreground text-sm", className)}
-      {...props} />
-  );
+      {...props}
+    />
+  )
 }
 
 export {

package/shadcn/ui/dropdown-menu.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { Menu as MenuPrimitive } from "../lib/base-ui/menu.js"
 
 import { cn } from "../lib/utils.js"
 import { ChevronRightIcon, CheckIcon } from "../../icons"

package/shadcn/ui/hover-card.jsx

@@ -1,4 +1,4 @@
-import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
+import { PreviewCard as PreviewCardPrimitive } from "../lib/base-ui/preview-card.js"
 
 import { cn } from "../lib/utils.js"
 

package/shadcn/ui/input.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
+import { Input as InputPrimitive } from "../lib/base-ui/input.js"
 
 import { cn } from "../lib/utils.js"
 

package/shadcn/ui/item.jsx

@@ -1,6 +1,6 @@
 import * as React from "react"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
+import { mergeProps } from "../lib/base-ui/merge-props.js"
+import { useRender } from "../lib/base-ui/use-render.js"
 import { cva } from "../lib/cva.js";
 
 import { cn } from "../lib/utils.js"

package/shadcn/ui/menubar.jsx

@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
+import { Menu as MenuPrimitive } from "../lib/base-ui/menu.js"
+import { Menubar as MenubarPrimitive } from "../lib/base-ui/menubar.js"
 
 import { cn } from "../lib/utils.js"
 import {

package/shadcn/ui/navigation-menu.jsx

@@ -1,4 +1,4 @@
-import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
+import { NavigationMenu as NavigationMenuPrimitive } from "../lib/base-ui/navigation-menu.js"
 import { cva } from "../lib/cva.js"
 
 import { cn } from "../lib/utils.js"

package/shadcn/ui/popover.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import { Popover as PopoverPrimitive } from "../lib/base-ui/popover.js"
 
 import { cn } from "../lib/utils.js"
 

package/shadcn/ui/progress.jsx

@@ -1,4 +1,4 @@
-import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+import { Progress as ProgressPrimitive } from "../lib/base-ui/progress.js"
 
 import { cn } from "../lib/utils.js"
 

package/shadcn/ui/radio-group.jsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { Radio as RadioPrimitive } from "@base-ui/react/radio"
-import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+import { Radio as RadioPrimitive } from "../lib/base-ui/radio.js"
+import { RadioGroup as RadioGroupPrimitive } from "../lib/base-ui/radio-group.js"
 
 import { cn } from "../lib/utils.js"
 import { CircleIcon } from "../../icons"

package/shadcn/ui/scroll-area.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+import { ScrollArea as ScrollAreaPrimitive } from "../lib/base-ui/scroll-area.js"
 
 import { cn } from "../lib/utils.js"
 

package/shadcn/ui/select.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { Select as SelectPrimitive } from "../lib/base-ui/select.js"
 
 import { cn } from "../lib/utils.js"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "../../icons"

package/shadcn/ui/separator.jsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+import { Separator as SeparatorPrimitive } from "../lib/base-ui/separator.js"
 
 import { cn } from "../lib/utils.js"
 

package/shadcn/ui/sheet.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+import { Dialog as SheetPrimitive } from "../lib/base-ui/dialog.js"
 
 import { cn } from "../lib/utils.js"
 import { Button } from "./button.jsx"

package/shadcn/ui/sidebar.jsx

@@ -1,7 +1,7 @@
 "use client";
 import * as React from "react"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
+import { mergeProps } from "../lib/base-ui/merge-props.js"
+import { useRender } from "../lib/base-ui/use-render.js"
 import { cva } from "../lib/cva.js";
 
 import { cn } from "../lib/utils.js"
@@ -454,7 +454,7 @@ const sidebarMenuButtonVariants = cva(
     variants: {
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
       },
       size: {
         default: "h-10 text-base",

package/shadcn/ui/slider.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+import { Slider as SliderPrimitive } from "../lib/base-ui/slider.js"
 
 import { cn } from "../lib/utils.js"
 

package/shadcn/ui/switch.jsx

@@ -1,4 +1,4 @@
-import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+import { Switch as SwitchPrimitive } from "../lib/base-ui/switch.js"
 
 import { cn } from "../lib/utils.js"
 

package/shadcn/ui/tabs.jsx

@@ -1,4 +1,4 @@
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { Tabs as TabsPrimitive } from "../lib/base-ui/tabs.js"
 import { cva } from "../lib/cva.js";
 
 import { cn } from "../lib/utils.js"

package/shadcn/ui/toggle-group.jsx

@@ -1,6 +1,6 @@
 import * as React from "react"
-import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
-import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { Toggle as TogglePrimitive } from "../lib/base-ui/toggle.js"
+import { ToggleGroup as ToggleGroupPrimitive } from "../lib/base-ui/toggle-group.js"
 
 import { cn } from "../lib/utils.js"
 import { toggleVariants } from "./toggle.jsx"

package/shadcn/ui/toggle.jsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { Toggle as TogglePrimitive } from "../lib/base-ui/toggle.js"
 import { cva } from "../lib/cva.js";
 
 import { cn } from "../lib/utils.js"

package/shadcn/ui/tooltip.jsx

@@ -1,4 +1,4 @@
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { Tooltip as TooltipPrimitive } from "../lib/base-ui/tooltip.js"
 
 import { cn } from "../lib/utils.js"
 

package/styles.css

@@ -87,6 +87,37 @@
 .slide-out-to-right-10  { --tw-exit-translate-x: 2.5rem; }
 .slide-out-to-right-52  { --tw-exit-translate-x: 13rem; }
 
+/* Drawer (bottom sheet) — base-ui Dialog shell + ported vaul drag math.
+   Entrance/exit keyed off base-ui's data-starting-style / data-ending-style. */
+.drawer-popup {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+  border-top: 1px solid var(--border);
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+  outline: none;
+  transform: translate3d(0, 0, 0);
+  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
+  touch-action: none;
+}
+.drawer-popup[data-starting-style],
+.drawer-popup[data-ending-style] {
+  transform: translate3d(0, 100%, 0);
+}
+.drawer-backdrop {
+  opacity: 1;
+  transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.drawer-backdrop[data-starting-style],
+.drawer-backdrop[data-ending-style] {
+  opacity: 0;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 @theme {