fulldev-ui 0.11.1 → 0.13.0

package/src/components/ui/hover-card/hover-card-content.astro

@@ -34,7 +34,7 @@ const {
     data-align-offset={alignOffset}
     data-avoid-collisions={avoidCollisions}
     data-collision-padding={collisionPadding}
-    class="isolate z-50"
+    class="isolate z-[1000]"
   >
     <div
       data-slot="hover-card-content"

package/src/components/ui/hover-card/hover-card.astro

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from "astro/types"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
+  mountStrategy?: "lazy" | "eager"
   defaultOpen?: boolean
   open?: boolean
   delay?: number
@@ -21,6 +22,7 @@ type Props = HTMLAttributes<"div"> & {
 }
 
 const {
+  mountStrategy,
   class: className,
   defaultOpen,
   open,
@@ -42,6 +44,7 @@ const {
 
 <div
   data-slot="hover-card"
+  data-mount-strategy={mountStrategy}
   data-default-open={defaultOpen}
   data-controlled-open={open}
   data-delay={delay}
@@ -63,14 +66,22 @@ const {
 </div>
 
 <script>
-  import { getDataBool } from "@data-slot/core"
+  import { getDataBool, getRoots, hasRootBinding } from "@data-slot/core"
   import { createHoverCard } from "@data-slot/hover-card"
 
+  const controllers: ReturnType<typeof createHoverCard>[] = []
   const initialize = () => {
-    document.querySelectorAll('[data-slot="hover-card"]').forEach((root) => {
-      createHoverCard(root, { open: getDataBool(root, "controlledOpen") })
-    })
+    for (const root of getRoots(document, "hover-card")) {
+      if (hasRootBinding(root, "@data-slot/hover-card")) continue
+      controllers.push(
+        createHoverCard(root, { open: getDataBool(root, "controlledOpen") })
+      )
+    }
   }
   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/navigation-menu/navigation-menu-positioner.astro

@@ -29,7 +29,7 @@ const {
     data-align={align}
     data-align-offset={alignOffset}
     class={cn(
-      "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+      "isolate z-[1000] h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
       className
     )}
   >

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

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 import NavigationMenuPositioner from "./navigation-menu-positioner.astro"
 
 type Props = HTMLAttributes<"nav"> & {
+  mountStrategy?: "lazy" | "eager"
   delayOpen?: number
   delayClose?: number
   openOnFocus?: boolean
@@ -19,13 +20,14 @@ type Props = HTMLAttributes<"nav"> & {
 }
 
 const {
+  mountStrategy,
   class: className = "",
   delayOpen = 0,
   delayClose = 0,
   openOnFocus,
   side = "bottom",
   align = "start",
-  sideOffset = 0,
+  sideOffset = 8,
   alignOffset = 0,
   positionMethod = "absolute",
   safeTriangle,
@@ -37,6 +39,7 @@ const {
 <nav
   {...props}
   data-slot="navigation-menu"
+  data-mount-strategy={mountStrategy}
   data-delay-open={delayOpen}
   data-delay-close={delayClose}
   data-open-on-focus={openOnFocus}
@@ -53,12 +56,18 @@ const {
   )}
 >
   <slot />
-  <NavigationMenuPositioner align={align} />
+  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />
 </nav>
 
 <script>
   import { create } from "@data-slot/navigation-menu"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  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/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/popover/popover-content.astro

@@ -11,6 +11,7 @@ type Props = HTMLAttributes<"div"> & {
   alignOffset?: number
   avoidCollisions?: boolean
   collisionPadding?: number
+  /** Compatibility alias. Prefer `side`. */
   position?: PopoverSide
 }
 
@@ -38,7 +39,7 @@ const {
     data-avoid-collisions={avoidCollisions}
     data-collision-padding={collisionPadding}
     data-position={position}
-    class="isolate z-50"
+    class="isolate z-[1000]"
   >
     <div
       data-slot="popover-content"

package/src/components/ui/popover/popover.astro

@@ -11,6 +11,7 @@ type Props = HTMLAttributes<"div"> & {
   avoidCollisions?: boolean
   collisionPadding?: number
   portal?: boolean
+  /** Compatibility alias. Prefer `side`. */
   position?: PopoverSide
   closeOnClickOutside?: boolean
   closeOnEscape?: boolean
@@ -55,6 +56,12 @@ const {
 <script>
   import { create } from "@data-slot/popover"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  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/radio-group/radio-group.astro

@@ -38,6 +38,12 @@ const {
 <script>
   import { create } from "@data-slot/radio-group"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  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/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/select/select-content.astro

@@ -38,7 +38,7 @@ const {
     data-align-offset={alignOffset}
     data-avoid-collisions={avoidCollisions}
     data-collision-padding={collisionPadding}
-    class="isolate z-50"
+    class="isolate z-[1000]"
   >
     <div
       data-slot="select-content"
@@ -52,7 +52,7 @@ const {
       data-collision-padding={collisionPadding}
       hidden={hidden}
       class={cn(
-        "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100 outline-none data-[align-trigger=true]:animate-none",
+        "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-[1000] max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100 outline-none data-[align-trigger=true]:animate-none",
         className
       )}
       {...props}

package/src/components/ui/select/select.astro

@@ -5,6 +5,7 @@ import type { Align, Position, Side } from "@data-slot/select"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
+  mountStrategy?: "lazy" | "eager"
   defaultValue?: string
   defaultOpen?: boolean
   placeholder?: string
@@ -23,6 +24,7 @@ type Props = HTMLAttributes<"div"> & {
 }
 
 const {
+  mountStrategy,
   class: className,
   defaultValue,
   defaultOpen,
@@ -45,6 +47,7 @@ const {
 
 <div
   data-slot="select"
+  data-mount-strategy={mountStrategy}
   data-default-value={defaultValue}
   data-default-open={defaultOpen}
   data-placeholder={placeholder}
@@ -72,11 +75,12 @@ const {
 <script>
   import { create } from "@data-slot/select"
 
-  const initSelect = () => {
-    create()
-  }
-
-  initSelect()
-
-  document.addEventListener("astro:page-load", initSelect)
+  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/sheet/sheet.astro

@@ -33,6 +33,12 @@ const {
 <script>
   import { create } from "@data-slot/dialog"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type SliderValue = number | [number, number] | string
+type SliderValue = number | [number, number]
 type ThumbAlignment = "center" | "edge" | "edge-client-only"
 
 type Props = HTMLAttributes<"div"> & {
@@ -82,6 +82,12 @@ const thumbCount = String(serializedDefaultValue ?? "").includes(",") ? 2 : 1
 <script>
   import { create } from "@data-slot/slider"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  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/switch/switch.astro

@@ -69,6 +69,12 @@ const switchSizeStyle = {
 <script>
   import { create } from "@data-slot/switch"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  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/tabs/tabs-content.astro

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from "astro/types"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
-  value?: string
+  value: string
 }
 
 const { class: className, hidden = true, value, ...props } = Astro.props

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

@@ -4,14 +4,15 @@ import type { HTMLAttributes } from "astro/types"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"button"> & {
-  value?: string
+  value: string
 }
 
-const { class: className, value, ...props } = Astro.props
+const { class: className, value, type = "button", ...props } = Astro.props
 ---
 
 <button
   data-slot="tabs-trigger"
+  type={type}
   data-value={value}
   class={cn(
     "text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

package/src/components/ui/tabs/tabs.astro

@@ -34,6 +34,12 @@ const {
 <script>
   import { create } from "@data-slot/tabs"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  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>