fulldev-ui 0.12.0 → 0.13.0

package/src/components/ui/carousel/carousel.astro

@@ -1,246 +1,46 @@
 ---
 import type { HTMLAttributes } from "astro/types"
-import type { EmblaOptionsType } from "embla-carousel"
 
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
-  opts?: EmblaOptionsType
+  defaultIndex?: number
   orientation?: "horizontal" | "vertical"
+  drag?: boolean
+  loop?: boolean
 }
 
 const {
   class: className,
-  opts,
+  defaultIndex,
   orientation = "horizontal",
+  drag,
+  loop,
   ...props
 } = Astro.props
-
-const resolvedOpts: EmblaOptionsType = {
-  ...opts,
-  axis: orientation === "horizontal" ? "x" : "y",
-}
 ---
 
 <div
   data-slot="carousel"
+  data-default-index={defaultIndex}
   data-orientation={orientation}
-  data-carousel-options={JSON.stringify(resolvedOpts)}
+  data-drag={drag}
+  data-loop={loop}
   class={cn("group/carousel relative", className)}
-  role="region"
-  aria-roledescription="carousel"
   {...props}
 >
   <slot />
 </div>
 
 <script>
-  import EmblaCarousel, {
-    type EmblaCarouselType,
-    type EmblaOptionsType,
-  } from "embla-carousel"
-
-  type CarouselRoot = HTMLElement & {
-    __fulldevCarouselApi?: EmblaCarouselType
-  }
-
-  type CarouselInstance = {
-    cleanup: () => void
-  }
-
-  type CarouselStore = Map<CarouselRoot, CarouselInstance>
-
-  declare global {
-    interface Window {
-      __fulldevCarouselInitialized?: boolean
-      __fulldevCarouselStore?: CarouselStore
-    }
-  }
-
-  if (!window.__fulldevCarouselInitialized) {
-    window.__fulldevCarouselInitialized = true
-    window.__fulldevCarouselStore ??= new Map<CarouselRoot, CarouselInstance>()
-
-    const store = window.__fulldevCarouselStore
-
-    const getDetails = (api: EmblaCarouselType) => ({
-      api,
-      canScrollPrev: api.canScrollPrev(),
-      canScrollNext: api.canScrollNext(),
-      selectedScrollSnap: api.selectedScrollSnap(),
-      scrollSnapList: api.scrollSnapList(),
-    })
-
-    const emit = (
-      root: CarouselRoot,
-      type: "carousel:init" | "carousel:select",
-      api: EmblaCarouselType
-    ) => {
-      root.dispatchEvent(
-        new CustomEvent(type, {
-          detail: getDetails(api),
-        })
-      )
-    }
-
-    const parseOptions = (root: CarouselRoot): EmblaOptionsType => {
-      const rawOptions = root.getAttribute("data-carousel-options")
-
-      if (!rawOptions) {
-        return {}
-      }
-
-      try {
-        return JSON.parse(rawOptions) as EmblaOptionsType
-      } catch {
-        return {}
-      }
-    }
-
-    const syncButton = (button: Element | null, enabled: boolean) => {
-      if (!(button instanceof HTMLButtonElement)) {
-        return
-      }
-
-      if (button.dataset.manualDisabled === "true") {
-        button.disabled = true
-        return
-      }
-
-      button.disabled = !enabled
-    }
-
-    const cleanupDisconnectedCarousels = () => {
-      for (const [root, instance] of store.entries()) {
-        if (document.contains(root)) {
-          continue
-        }
-
-        instance.cleanup()
-        store.delete(root)
-      }
-    }
-
-    const initCarousel = (root: Element) => {
-      if (!(root instanceof HTMLElement) || store.has(root)) {
-        return
-      }
-
-      const carouselRoot = root as CarouselRoot
-      const viewport = carouselRoot.querySelector(
-        '[data-slot="carousel-content"]'
-      )
-      const prevButton = carouselRoot.querySelector(
-        '[data-slot="carousel-previous"]'
-      )
-      const nextButton = carouselRoot.querySelector(
-        '[data-slot="carousel-next"]'
-      )
-
-      if (!(viewport instanceof HTMLElement)) {
-        return
-      }
-
-      const api = EmblaCarousel(viewport, parseOptions(carouselRoot))
-
-      const sync = () => {
-        const details = getDetails(api)
-
-        carouselRoot.dataset.canScrollPrev = details.canScrollPrev
-          ? "true"
-          : "false"
-        carouselRoot.dataset.canScrollNext = details.canScrollNext
-          ? "true"
-          : "false"
-        carouselRoot.dataset.selectedScrollSnap = String(
-          details.selectedScrollSnap
-        )
-
-        syncButton(prevButton, details.canScrollPrev)
-        syncButton(nextButton, details.canScrollNext)
-
-        emit(carouselRoot, "carousel:select", api)
-      }
-
-      const onPrevClick = () => {
-        api.scrollPrev()
-      }
-
-      const onNextClick = () => {
-        api.scrollNext()
-      }
-
-      const onKeyDown = (event: KeyboardEvent) => {
-        const isVertical = carouselRoot.dataset.orientation === "vertical"
-
-        if (!isVertical && event.key === "ArrowLeft") {
-          event.preventDefault()
-          api.scrollPrev()
-        }
-
-        if (!isVertical && event.key === "ArrowRight") {
-          event.preventDefault()
-          api.scrollNext()
-        }
-
-        if (isVertical && event.key === "ArrowUp") {
-          event.preventDefault()
-          api.scrollPrev()
-        }
-
-        if (isVertical && event.key === "ArrowDown") {
-          event.preventDefault()
-          api.scrollNext()
-        }
-      }
-
-      if (prevButton instanceof HTMLElement) {
-        prevButton.addEventListener("click", onPrevClick)
-      }
-
-      if (nextButton instanceof HTMLElement) {
-        nextButton.addEventListener("click", onNextClick)
-      }
-
-      carouselRoot.addEventListener("keydown", onKeyDown, true)
-
-      api.on("reInit", sync)
-      api.on("select", sync)
-
-      carouselRoot.__fulldevCarouselApi = api
-
-      sync()
-      requestAnimationFrame(() => emit(carouselRoot, "carousel:init", api))
-
-      store.set(carouselRoot, {
-        cleanup: () => {
-          api.off("reInit", sync)
-          api.off("select", sync)
-
-          if (prevButton instanceof HTMLElement) {
-            prevButton.removeEventListener("click", onPrevClick)
-          }
-
-          if (nextButton instanceof HTMLElement) {
-            nextButton.removeEventListener("click", onNextClick)
-          }
-
-          carouselRoot.removeEventListener("keydown", onKeyDown, true)
-          delete carouselRoot.__fulldevCarouselApi
-          api.destroy()
-        },
-      })
-    }
-
-    const initCarousels = () => {
-      cleanupDisconnectedCarousels()
-
-      document
-        .querySelectorAll('[data-slot="carousel"]')
-        .forEach((root) => initCarousel(root))
-    }
-
-    initCarousels()
-    document.addEventListener("astro:page-load", initCarousels)
-  }
+  import { create } from "@data-slot/carousel"
+
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
 </script>

package/src/components/ui/carousel/index.ts

@@ -1,8 +1,4 @@
-export type {
-  EmblaCarouselType as CarouselApi,
-  EmblaOptionsType as CarouselOptions,
-  EmblaPluginType as CarouselPlugin,
-} from "embla-carousel"
+export type { CarouselController, CarouselOptions } from "@data-slot/carousel"
 
 export { default as Carousel } from "./carousel.astro"
 export { default as CarouselContent } from "./carousel-content.astro"

package/src/components/ui/combobox/combobox-input.astro

@@ -4,6 +4,7 @@ import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import InputGroupAddon from "@/components/ui/input-group/input-group-addon.astro"
+import InputGroupButton from "@/components/ui/input-group/input-group-button.astro"
 import InputGroupInput from "@/components/ui/input-group/input-group-input.astro"
 import InputGroup from "@/components/ui/input-group/input-group.astro"
 
@@ -24,7 +25,12 @@ const {
 } = Astro.props
 ---
 
-<InputGroup class={cn("w-auto", className)}>
+<InputGroup
+  class={cn(
+    "has-[[data-slot=combobox-input]:focus-visible]:border-ring has-[[data-slot=combobox-input]:focus-visible]:ring-ring/50 w-auto has-[[data-slot=combobox-input]:focus-visible]:ring-3",
+    className
+  )}
+>
   <InputGroupInput
     type={type}
     data-slot="combobox-input"
@@ -42,14 +48,15 @@ const {
     }
     {
       showClear && (
-        <button
+        <InputGroupButton
           type="button"
+          variant="ghost"
+          size="icon-xs"
           data-slot="combobox-clear"
-          class="inline-flex size-6 shrink-0 items-center justify-center rounded-[calc(var(--radius)-5px)] p-0 text-sm shadow-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           disabled={disabled}
         >
           <XIcon class="pointer-events-none" />
-        </button>
+        </InputGroupButton>
       )
     }
   </InputGroupAddon>

package/src/components/ui/combobox/combobox-trigger.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
+import InputGroupButton from "@/components/ui/input-group/input-group-button.astro"
 
 type Props = HTMLAttributes<"button"> & {
   showIcon?: boolean
@@ -16,13 +17,12 @@ const {
 } = Astro.props
 ---
 
-<button
-  type={type}
+<InputGroupButton
+  type={type ?? "button"}
+  variant="ghost"
+  size="icon-xs"
   data-slot="combobox-trigger"
-  class={cn(
-    "[&_svg]:text-muted-foreground inline-flex size-6 shrink-0 items-center justify-center gap-2 rounded-[calc(var(--radius)-5px)] p-0 text-sm shadow-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    className
-  )}
+  class={cn("[&_svg]:text-muted-foreground", className)}
   {...props}
 >
   <slot />
@@ -31,4 +31,4 @@ const {
       <ChevronDownIcon class="text-muted-foreground pointer-events-none size-4" />
     )
   }
-</button>
+</InputGroupButton>

package/src/components/ui/drawer/drawer-close.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { ...props } = Astro.props
+---
+
+<Button data-slot="drawer-close" {...props}>
+  <slot />
+</Button>

package/src/components/ui/drawer/drawer-content.astro

@@ -0,0 +1,43 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import DrawerOverlay from "./drawer-overlay.astro"
+import DrawerPopup from "./drawer-popup.astro"
+import DrawerPortal from "./drawer-portal.astro"
+import DrawerSwipeHandle from "./drawer-swipe-handle.astro"
+import DrawerViewport from "./drawer-viewport.astro"
+
+type Props = ComponentProps<typeof DrawerPopup> & {
+  showOverlay?: boolean
+  showSwipeHandle?: boolean
+  container?: string
+  keepMounted?: boolean
+  overlayClass?: string
+  viewportClass?: string
+}
+
+const {
+  showOverlay = true,
+  showSwipeHandle = false,
+  container,
+  keepMounted,
+  overlayClass,
+  viewportClass,
+  ...props
+} = Astro.props
+---
+
+<DrawerPortal container={container} keepMounted={keepMounted}>
+  {showOverlay && <DrawerOverlay class={overlayClass} />}
+  <DrawerViewport class={viewportClass}>
+    <DrawerPopup {...props}>
+      {showSwipeHandle && <DrawerSwipeHandle />}
+      <div
+        data-slot="drawer-content"
+        class="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain rounded-[inherit] transition-opacity duration-300 select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+      >
+        <slot />
+      </div>
+    </DrawerPopup>
+  </DrawerViewport>
+</DrawerPortal>

package/src/components/ui/drawer/drawer-description.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"p">
+
+const { class: className, ...props } = Astro.props
+---
+
+<p
+  data-slot="drawer-description"
+  class={cn("text-muted-foreground text-sm text-balance", className)}
+  {...props}
+>
+  <slot />
+</p>

package/src/components/ui/drawer/drawer-footer.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-footer"
+  class={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-header.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-header"
+  class={cn("flex shrink-0 flex-col gap-1.5 p-4 pb-0", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-indent-background.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="drawer-indent-background" class={className} {...props}>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-indent.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="drawer-indent" class={className} {...props}>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-overlay.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, hidden = true, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-backdrop"
+  hidden={hidden}
+  class={cn(
+    "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress,0))] transition-opacity duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-popup.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  initialFocus?: boolean | string
+  finalFocus?: boolean | string
+}
+
+const {
+  class: className,
+  initialFocus,
+  finalFocus,
+  hidden = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="drawer-popup"
+  data-initial-focus={initialFocus}
+  data-final-focus={finalFocus}
+  hidden={hidden}
+  class={cn(
+    "group/drawer-popup bg-popover text-popover-foreground pointer-events-auto fixed z-50 flex min-h-0 transform-gpu flex-col text-sm shadow-lg transition-[transform,height,opacity,filter] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95 data-swiping:duration-0",
+    "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:max-h-[calc(100dvh-3rem)] data-[swipe-direction=down]:[transform:translate3d(0,calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-amount-y,0px)),0)] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:data-ending-style:[transform:translate3d(0,calc(100%+2px),0)] data-[swipe-direction=down]:data-starting-style:[transform:translate3d(0,calc(100%+2px),0)]",
+    "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:max-h-[calc(100dvh-3rem)] data-[swipe-direction=up]:[transform:translate3d(0,calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-amount-y,0px)),0)] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:data-ending-style:[transform:translate3d(0,calc(-100%-2px),0)] data-[swipe-direction=up]:data-starting-style:[transform:translate3d(0,calc(-100%-2px),0)]",
+    "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-full data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:max-w-sm data-[swipe-direction=left]:[transform:translate3d(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-amount-x,0px)),0,0)] data-[swipe-direction=left]:flex-row data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:data-ending-style:[transform:translate3d(calc(-100%-2px),0,0)] data-[swipe-direction=left]:data-starting-style:[transform:translate3d(calc(-100%-2px),0,0)]",
+    "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:max-w-sm data-[swipe-direction=right]:[transform:translate3d(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-amount-x,0px)),0,0)] data-[swipe-direction=right]:flex-row data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:data-ending-style:[transform:translate3d(calc(100%+2px),0,0)] data-[swipe-direction=right]:data-starting-style:[transform:translate3d(calc(100%+2px),0,0)]",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-portal.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div"> & {
+  container?: string
+  keepMounted?: boolean
+}
+
+const {
+  class: className,
+  container,
+  keepMounted,
+  hidden = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="drawer-portal"
+  data-container={container}
+  data-keep-mounted={keepMounted}
+  class={className}
+  hidden={hidden}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-provider.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="drawer-provider" class={className} {...props}>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-swipe-handle.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-handle"
+  aria-hidden="true"
+  class={cn(
+    "after:bg-muted relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-swiping/drawer-popup:opacity-100 group-data-[swipe-direction=down]/drawer-popup:h-3 group-data-[swipe-direction=down]/drawer-popup:w-full group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=down]/drawer-popup:justify-center group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:h-full group-data-[swipe-direction=left]/drawer-popup:w-3 group-data-[swipe-direction=left]/drawer-popup:items-center group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:h-full group-data-[swipe-direction=right]/drawer-popup:w-3 group-data-[swipe-direction=right]/drawer-popup:items-center 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:h-3 group-data-[swipe-direction=up]/drawer-popup:w-full group-data-[swipe-direction=up]/drawer-popup:items-start group-data-[swipe-direction=up]/drawer-popup:justify-center after:block after:shrink-0 after:rounded-full group-data-[swipe-direction=down]/drawer-popup:after:h-1.5 group-data-[swipe-direction=down]/drawer-popup:after:w-24 group-data-[swipe-direction=left]/drawer-popup:after:h-24 group-data-[swipe-direction=left]/drawer-popup:after:w-1.5 group-data-[swipe-direction=right]/drawer-popup:after:h-24 group-data-[swipe-direction=right]/drawer-popup:after:w-1.5 group-data-[swipe-direction=up]/drawer-popup:after:h-1.5 group-data-[swipe-direction=up]/drawer-popup:after:w-24 active:cursor-grabbing",
+    className
+  )}
+  {...props}
+>
+</div>

package/src/components/ui/drawer/drawer-title.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"h2">
+
+const { class: className, ...props } = Astro.props
+---
+
+<h2
+  data-slot="drawer-title"
+  class={cn("text-foreground font-medium", className)}
+  {...props}
+>
+  <slot />
+</h2>

package/src/components/ui/drawer/drawer-trigger.astro

@@ -0,0 +1,21 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button> & {
+  drawerTarget?: string
+  payload?: string
+}
+
+const { drawerTarget, payload, ...props } = Astro.props
+---
+
+<Button
+  data-slot="drawer-trigger"
+  data-drawer-target={drawerTarget}
+  data-payload={payload}
+  {...props}
+>
+  <slot />
+</Button>

package/src/components/ui/drawer/drawer-viewport.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, hidden = true, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-viewport"
+  hidden={hidden}
+  class={cn(
+    "pointer-events-none fixed inset-0 z-50 min-h-dvh select-none",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>