fulldev-ui 0.12.0 → 0.13.0

package/src/components/ui/drawer/drawer-virtual-keyboard-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-virtual-keyboard-provider" class={className} {...props}>
+  <slot />
+</div>

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

@@ -0,0 +1,60 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { DrawerSnapPoint, DrawerSwipeDirection } from "@data-slot/drawer"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  modal?: boolean | "trap-focus"
+  disablePointerDismissal?: boolean
+  closeOnEscape?: boolean
+  swipeDirection?: DrawerSwipeDirection
+  snapPoint?: DrawerSnapPoint | null
+  defaultSnapPoint?: DrawerSnapPoint | null
+  triggerId?: string | null
+  defaultTriggerId?: string | null
+}
+
+const {
+  class: className,
+  defaultOpen,
+  modal,
+  disablePointerDismissal,
+  closeOnEscape,
+  swipeDirection,
+  snapPoint,
+  defaultSnapPoint,
+  triggerId,
+  defaultTriggerId,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="drawer"
+  data-default-open={defaultOpen}
+  data-modal={modal}
+  data-disable-pointer-dismissal={disablePointerDismissal}
+  data-close-on-escape={closeOnEscape}
+  data-swipe-direction={swipeDirection}
+  data-snap-point={snapPoint}
+  data-default-snap-point={defaultSnapPoint}
+  data-trigger-id={triggerId}
+  data-default-trigger-id={defaultTriggerId}
+  class={className}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/drawer"
+
+  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/drawer/index.ts

@@ -0,0 +1,28 @@
+export { default as Drawer } from "./drawer.astro"
+export { default as DrawerTrigger } from "./drawer-trigger.astro"
+export { default as DrawerClose } from "./drawer-close.astro"
+export { default as DrawerPortal } from "./drawer-portal.astro"
+export { default as DrawerOverlay } from "./drawer-overlay.astro"
+export { default as DrawerBackdrop } from "./drawer-overlay.astro"
+export { default as DrawerViewport } from "./drawer-viewport.astro"
+export { default as DrawerPopup } from "./drawer-popup.astro"
+export { default as DrawerContent } from "./drawer-content.astro"
+export { default as DrawerSwipeHandle } from "./drawer-swipe-handle.astro"
+export { default as DrawerHeader } from "./drawer-header.astro"
+export { default as DrawerFooter } from "./drawer-footer.astro"
+export { default as DrawerTitle } from "./drawer-title.astro"
+export { default as DrawerDescription } from "./drawer-description.astro"
+export { default as DrawerProvider } from "./drawer-provider.astro"
+export { default as DrawerIndent } from "./drawer-indent.astro"
+export { default as DrawerIndentBackground } from "./drawer-indent-background.astro"
+export { default as DrawerVirtualKeyboardProvider } from "./drawer-virtual-keyboard-provider.astro"
+
+export type {
+  DrawerChangeDetails,
+  DrawerChangeReason,
+  DrawerController,
+  DrawerOptions,
+  DrawerSnapChangeDetails,
+  DrawerSnapPoint,
+  DrawerSwipeDirection,
+} from "@data-slot/drawer"

package/src/components/ui/navigation-menu/navigation-menu.astro

@@ -27,7 +27,7 @@ const {
   openOnFocus,
   side = "bottom",
   align = "start",
-  sideOffset = 0,
+  sideOffset = 8,
   alignOffset = 0,
   positionMethod = "absolute",
   safeTriangle,
@@ -56,7 +56,7 @@ const {
   )}
 >
   <slot />
-  <NavigationMenuPositioner align={align} />
+  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />
 </nav>
 
 <script>

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

@@ -0,0 +1,7 @@
+export { default as Pagination } from "./pagination.astro"
+export { default as PaginationContent } from "./pagination-content.astro"
+export { default as PaginationEllipsis } from "./pagination-ellipsis.astro"
+export { default as PaginationItem } from "./pagination-item.astro"
+export { default as PaginationLink } from "./pagination-link.astro"
+export { default as PaginationNext } from "./pagination-next.astro"
+export { default as PaginationPrevious } from "./pagination-previous.astro"

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"ul">
+
+const { class: className, ...props } = Astro.props
+---
+
+<ul
+  data-slot="pagination-content"
+  class={cn("flex items-center gap-1", className)}
+  {...props}
+>
+  <slot />
+</ul>

package/src/components/ui/pagination/pagination-ellipsis.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import EllipsisIcon from "@lucide/astro/icons/ellipsis"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="pagination-ellipsis"
+  class={cn(
+    "flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <EllipsisIcon aria-hidden="true" />
+  <span class="sr-only">More pages</span>
+</span>

package/src/components/ui/pagination/pagination-item.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"li">
+
+const { ...props } = Astro.props
+---
+
+<li data-slot="pagination-item" {...props}>
+  <slot />
+</li>

package/src/components/ui/pagination/pagination-link.astro

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Button, type ButtonVariantProps } from "@/components/ui/button"
+
+type Props = HTMLAttributes<"a"> & {
+  isActive?: boolean
+  disabled?: boolean
+  size?: ButtonVariantProps["size"]
+}
+
+const {
+  class: className,
+  href,
+  isActive,
+  disabled,
+  size = "icon",
+  tabindex,
+  ...props
+} = Astro.props
+---
+
+<Button
+  as="a"
+  data-slot="pagination-link"
+  data-active={isActive ? "true" : undefined}
+  href={disabled ? undefined : href}
+  aria-current={isActive ? "page" : undefined}
+  aria-disabled={disabled ? "true" : undefined}
+  tabindex={disabled ? -1 : tabindex}
+  variant={isActive ? "outline" : "ghost"}
+  size={size}
+  class={cn(
+    "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Button>

package/src/components/ui/pagination/pagination-next.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import ChevronRightIcon from "@lucide/astro/icons/chevron-right"
+
+import { cn } from "@/lib/utils"
+import type { ButtonVariantProps } from "@/components/ui/button"
+
+import PaginationLink from "./pagination-link.astro"
+
+type Props = HTMLAttributes<"a"> & {
+  text?: string
+  disabled?: boolean
+  size?: ButtonVariantProps["size"]
+}
+
+const { class: className, text = "Next", ...props } = Astro.props
+---
+
+<PaginationLink
+  aria-label="Go to next page"
+  size="default"
+  class={cn("pr-2!", className)}
+  {...props}
+>
+  <span class="hidden sm:block">{text}</span>
+  <ChevronRightIcon data-icon="inline-end" class="rtl:rotate-180" />
+</PaginationLink>

package/src/components/ui/pagination/pagination-previous.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import ChevronLeftIcon from "@lucide/astro/icons/chevron-left"
+
+import { cn } from "@/lib/utils"
+import type { ButtonVariantProps } from "@/components/ui/button"
+
+import PaginationLink from "./pagination-link.astro"
+
+type Props = HTMLAttributes<"a"> & {
+  text?: string
+  disabled?: boolean
+  size?: ButtonVariantProps["size"]
+}
+
+const { class: className, text = "Previous", ...props } = Astro.props
+---
+
+<PaginationLink
+  aria-label="Go to previous page"
+  size="default"
+  class={cn("pl-2!", className)}
+  {...props}
+>
+  <ChevronLeftIcon data-icon="inline-start" class="rtl:rotate-180" />
+  <span class="hidden sm:block">{text}</span>
+</PaginationLink>

package/src/components/ui/pagination/pagination.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"nav">
+
+const { class: className, ...props } = Astro.props
+---
+
+<nav
+  role="navigation"
+  aria-label="pagination"
+  data-slot="pagination"
+  class={cn("mx-auto flex w-full justify-center", className)}
+  {...props}
+>
+  <slot />
+</nav>

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

@@ -0,0 +1,4 @@
+export { default as Resizable } from "./resizable.astro"
+export { default as ResizablePanelGroup } from "./resizable.astro"
+export { default as ResizablePanel } from "./resizable-panel.astro"
+export { default as ResizableHandle } from "./resizable-handle.astro"

package/src/components/ui/resizable/resizable-handle.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  withHandle?: boolean
+  disabled?: boolean
+}
+
+const { class: className, withHandle, disabled, ...props } = Astro.props
+---
+
+<div
+  data-slot="resizable-handle"
+  data-disabled={disabled ? "true" : undefined}
+  class={cn(
+    "bg-border ring-offset-background focus-visible:ring-ring data-[active]:bg-ring relative flex w-px shrink-0 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&[aria-orientation=horizontal]>div]:rotate-90",
+    className
+  )}
+  {...props}
+>
+  {
+    withHandle && (
+      <div
+        data-slot="resizable-handle-indicator"
+        aria-hidden="true"
+        class="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg"
+      />
+    )
+  }
+</div>

package/src/components/ui/resizable/resizable-panel.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultSize?: number
+  minSize?: number
+  maxSize?: number
+  collapsible?: boolean
+  collapsedSize?: number
+}
+
+const {
+  class: className,
+  defaultSize,
+  minSize,
+  maxSize,
+  collapsible,
+  collapsedSize,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="resizable-panel"
+  data-default-size={defaultSize}
+  data-min-size={minSize}
+  data-max-size={maxSize}
+  data-collapsible={collapsible}
+  data-collapsed-size={collapsedSize}
+  class={cn("min-h-0 min-w-0", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/resizable/resizable.astro

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  direction?: "horizontal" | "vertical"
+  keyboardResizeBy?: number
+}
+
+const {
+  class: className,
+  direction = "horizontal",
+  keyboardResizeBy,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="resizable"
+  data-direction={direction}
+  data-keyboard-resize-by={keyboardResizeBy}
+  class={cn(
+    "group/resizable flex h-full w-full data-[direction=vertical]:flex-col",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/resizable"
+
+  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/slider/slider.astro

@@ -25,7 +25,7 @@ const {
   step,
   largeStep,
   orientation = "horizontal",
-  thumbAlignment = "center",
+  thumbAlignment = "edge",
   disabled,
   ...props
 } = Astro.props

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

@@ -0,0 +1,26 @@
+export { default as Toast } from "./toast.astro"
+export { default as ToastTemplate } from "./toast-template.astro"
+export { default as ToastViewport } from "./toast-viewport.astro"
+export { default as ToastItem } from "./toast-item.astro"
+export { default as ToastContent } from "./toast-content.astro"
+export { default as ToastIcon } from "./toast-icon.astro"
+export { default as ToastTitle } from "./toast-title.astro"
+export { default as ToastDescription } from "./toast-description.astro"
+export { default as ToastAction } from "./toast-action.astro"
+export { default as ToastClose } from "./toast-close.astro"
+export { default as Toaster } from "./toaster.astro"
+
+export type {
+  ToastActionEvent,
+  ToastClearableField,
+  ToastController,
+  ToastOptions,
+  ToastPosition,
+  ToastPromiseErrorValue,
+  ToastPromiseHandle,
+  ToastPromiseOptions,
+  ToastPromiseState,
+  ToastPromiseStateValue,
+  ToastShowOptions,
+  ToastUpdateOptions,
+} from "@data-slot/toast"

package/src/components/ui/toast/toast-action.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+type Props = HTMLAttributes<"button">
+
+const {
+  class: className,
+  hidden = true,
+  type = "button",
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="toast-action"
+  type={type}
+  class={cn(buttonVariants({ variant: "outline", size: "sm" }), className)}
+  hidden={hidden}
+  {...props}
+>
+  <slot />
+</button>

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

@@ -0,0 +1,27 @@
+---
+import type { ComponentProps } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { class: className, ...props } = Astro.props
+---
+
+<Button
+  data-slot="toast-close"
+  variant="ghost"
+  size="icon-sm"
+  aria-label="Close notification"
+  class={cn(
+    "text-muted-foreground hover:text-foreground relative shrink-0 after:absolute after:-inset-2 after:content-['']",
+    className
+  )}
+  {...props}
+>
+  <slot>
+    <XIcon aria-hidden="true" />
+  </slot>
+</Button>

package/src/components/ui/toast/toast-content.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="toast-content"
+  class={cn(
+    "flex min-h-16 items-center gap-3 overflow-hidden p-4 transition-opacity duration-200",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,18 @@
+---
+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="toast-description"
+  class={cn("text-muted-foreground text-sm", className)}
+  hidden={hidden}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/toast/toast-icon.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import CircleCheckIcon from "@lucide/astro/icons/circle-check"
+import InfoIcon from "@lucide/astro/icons/info"
+import LoaderIcon from "@lucide/astro/icons/loader-circle"
+import OctagonXIcon from "@lucide/astro/icons/octagon-x"
+import TriangleAlertIcon from "@lucide/astro/icons/triangle-alert"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="toast-icon"
+  class={cn(
+    "shrink-0 group-data-[type=error]/toast-item:[&_[data-toast-icon=error]]:block group-data-[type=info]/toast-item:[&_[data-toast-icon=info]]:block group-data-[type=loading]/toast-item:[&_[data-toast-icon=loading]]:block group-data-[type=success]/toast-item:[&_[data-toast-icon=success]]:block group-data-[type=warning]/toast-item:[&_[data-toast-icon=warning]]:block [&_svg]:hidden [&_svg]:size-4",
+    className
+  )}
+  {...props}
+>
+  <CircleCheckIcon data-toast-icon="success" aria-hidden="true" />
+  <InfoIcon data-toast-icon="info" aria-hidden="true" />
+  <TriangleAlertIcon data-toast-icon="warning" aria-hidden="true" />
+  <OctagonXIcon
+    data-toast-icon="error"
+    class="text-destructive"
+    aria-hidden="true"
+  />
+  <LoaderIcon
+    data-toast-icon="loading"
+    class="animate-spin"
+    aria-hidden="true"
+  />
+</span>

package/src/components/ui/toast/toast-item.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"li">
+
+const { class: className, ...props } = Astro.props
+---
+
+<li
+  data-slot="toast-item"
+  role="status"
+  aria-atomic="true"
+  class={cn(
+    "group/toast-item bg-popover text-popover-foreground ring-foreground/10 focus-visible:border-ring focus-visible:ring-ring/50 pointer-events-auto absolute inset-x-0 z-[calc(1000-var(--toast-index))] box-border w-full rounded-xl opacity-0 shadow-lg ring-1 transition-[transform,opacity,height,box-shadow] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none group-data-[position=bottom-center]/toast-viewport:bottom-0 group-data-[position=bottom-center]/toast-viewport:origin-bottom group-data-[position=bottom-left]/toast-viewport:bottom-0 group-data-[position=bottom-left]/toast-viewport:origin-bottom group-data-[position=bottom-right]/toast-viewport:bottom-0 group-data-[position=bottom-right]/toast-viewport:origin-bottom group-data-[position=top-center]/toast-viewport:top-0 group-data-[position=top-center]/toast-viewport:origin-top group-data-[position=top-left]/toast-viewport:top-0 group-data-[position=top-left]/toast-viewport:origin-top group-data-[position=top-right]/toast-viewport:top-0 group-data-[position=top-right]/toast-viewport:origin-top focus-visible:ring-3",
+    "[transform:translate3d(0,calc(var(--toast-lift,-1)*-100%),0)] data-[mounted=true]:[transform:translate3d(0,0,0)] data-[mounted=true]:opacity-100 data-[swiping=true]:transition-none data-[visible=false]:pointer-events-none data-[visible=false]:opacity-0",
+    "data-[mounted=true]:data-[expanded=true]:h-(--toast-initial-height) data-[mounted=true]:data-[expanded=true]:[transform:translate3d(0,calc(var(--toast-offset,0px)*var(--toast-lift,-1)),0)] data-[mounted=true]:data-[expanded=false]:data-[front=false]:h-(--toast-front-height) data-[mounted=true]:data-[expanded=false]:data-[front=false]:[transform:translate3d(0,calc(var(--toast-collapsed-offset-y,0px)*var(--toast-lift,-1)),0)_scale(calc(1-var(--toast-index,0)*0.05))]",
+    "data-[removed=true]:data-[front=false]:data-[expanded=false]:[transform:translate3d(0,40%,0)] data-[removed=true]:data-[front=false]:data-[expanded=false]:opacity-0 data-[removed=true]:data-[front=false]:data-[expanded=true]:[transform:translate3d(0,calc(var(--toast-lift,-1)*var(--toast-offset,0px)+var(--toast-lift,-1)*-100%),0)] data-[removed=true]:data-[front=false]:data-[expanded=true]:opacity-0 data-[removed=true]:data-[front=true]:[transform:translate3d(0,calc(var(--toast-lift,-1)*-100%),0)] data-[removed=true]:data-[front=true]:opacity-0",
+    "data-[swiping=true]:data-[expanded=true]:[transform:translate3d(var(--toast-swipe-amount-x,0px),calc(var(--toast-offset,0px)*var(--toast-lift,-1)+var(--toast-swipe-amount-y,0px)),0)] data-[swiping=true]:data-[front=false]:data-[expanded=false]:[transform:translate3d(var(--toast-swipe-amount-x,0px),calc(var(--toast-collapsed-offset-y,0px)*var(--toast-lift,-1)+var(--toast-swipe-amount-y,0px)),0)_scale(calc(1-var(--toast-index,0)*0.05))] data-[swiping=true]:data-[front=true]:[transform:translate3d(var(--toast-swipe-amount-x,0px),var(--toast-swipe-amount-y,0px),0)]",
+    "data-[removed=true]:data-[swipe-out=true]:opacity-0 data-[removed=true]:data-[swipe-out=true]:data-[front=false]:data-[expanded=false]:[transform:translate3d(var(--toast-swipe-end-x,0px),calc(var(--toast-collapsed-offset-y,0px)*var(--toast-lift,-1)+var(--toast-swipe-end-y,0px)),0)_scale(calc(1-var(--toast-index,0)*0.05))] data-[removed=true]:data-[swipe-out=true]:data-[front=false]:data-[expanded=true]:[transform:translate3d(var(--toast-swipe-end-x,0px),calc(var(--toast-lift,-1)*var(--toast-offset,0px)+var(--toast-swipe-end-y,0px)),0)] data-[removed=true]:data-[swipe-out=true]:data-[front=true]:[transform:translate3d(var(--toast-swipe-end-x,0px),var(--toast-swipe-end-y,0px),0)]",
+    "after:absolute after:left-0 after:h-[calc(var(--toast-gap,0px)+1px)] after:w-full after:content-[''] group-data-[position=bottom-center]/toast-viewport:after:bottom-full group-data-[position=bottom-left]/toast-viewport:after:bottom-full group-data-[position=bottom-right]/toast-viewport:after:bottom-full group-data-[position=top-center]/toast-viewport:after:top-full group-data-[position=top-left]/toast-viewport:after:top-full group-data-[position=top-right]/toast-viewport:after:top-full data-[expanded=false]:data-[front=false]:data-open:[&>*]:opacity-0",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</li>

package/src/components/ui/toast/toast-template.astro

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

package/src/components/ui/toast/toast-title.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="toast-title"
+  class={cn("text-sm font-medium", className)}
+  {...props}
+>
+  <slot />
+</div>