fulldev-ui 0.10.0 → 0.11.0

package/src/components/ui/alert-dialog/alert-dialog-overlay.astro

@@ -15,7 +15,7 @@ const { class: className, style, ...props } = Astro.props
     "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-(--alert-dialog-overlay-stack-index) bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
     className
   )}
-  style={`z-index: calc(var(--alert-dialog-overlay-stack-index, 0) + 110);${style ? ` ${style}` : ""}`}
+  style={`z-index: calc(var(--alert-dialog-overlay-stack-index, 0) * 2 + 100);${style ? ` ${style}` : ""}`}
   {...props}
 >
 </div>

package/src/components/ui/alert-dialog/alert-dialog.astro

@@ -34,4 +34,5 @@ const {
   import { create } from "@data-slot/alert-dialog"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/collapsible/collapsible.astro

@@ -30,4 +30,5 @@ const {
   import { create } from "@data-slot/collapsible"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -28,7 +28,7 @@ const {
       "bg-popover text-popover-foreground ring-foreground/10 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 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md",
       className
     )}
-    style={`z-index: calc(var(--dialog-content-stack-index, 0) + 101);${style ? ` ${style}` : ""}`}
+    style={`z-index: calc(var(--dialog-content-stack-index, 0) * 2 + 101);${style ? ` ${style}` : ""}`}
     {...props}
   >
     {

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

@@ -15,7 +15,7 @@ const { class: className, style, ...props } = Astro.props
     "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
     className
   )}
-  style={`z-index: calc(var(--dialog-overlay-stack-index, 0) + 100);${style ? ` ${style}` : ""}`}
+  style={`z-index: calc(var(--dialog-overlay-stack-index, 0) * 2 + 100);${style ? ` ${style}` : ""}`}
   {...props}
 >
   <slot />

package/src/components/ui/dialog/dialog.astro

@@ -37,4 +37,5 @@ const {
   import { create } from "@data-slot/dialog"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -68,4 +68,5 @@ const defaultValuesAttr =
   import { create } from "@data-slot/dropdown-menu"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -43,7 +43,7 @@ const {
 <div
   data-slot="hover-card"
   data-default-open={defaultOpen}
-  data-open={open}
+  data-controlled-open={open}
   data-delay={delay}
   data-skip-delay-duration={skipDelayDuration}
   data-close-delay={closeDelay}
@@ -63,7 +63,14 @@ const {
 </div>
 
 <script>
-  import { create } from "@data-slot/hover-card"
+  import { getDataBool } from "@data-slot/core"
+  import { createHoverCard } from "@data-slot/hover-card"
 
-  create()
+  const initialize = () => {
+    document.querySelectorAll('[data-slot="hover-card"]').forEach((root) => {
+      createHoverCard(root, { open: getDataBool(root, "controlledOpen") })
+    })
+  }
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
 </script>

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

@@ -37,51 +37,68 @@ const hrefMap = {
   linkedin: "linkedin",
 } as const
 
-const icons = import.meta.glob([
-  "node_modules/lucide-static/icons/*.svg",
-  "node_modules/simple-icons/icons/*.svg",
-])
+type Source = "lucide" | "simple"
 
-const foundPath = () => {
-  let foundPath: string | undefined = undefined
+const icons: Record<Source, Record<string, () => Promise<unknown>>> = {
+  lucide: import.meta.glob("/node_modules/lucide-static/icons/*.svg"),
+  simple: import.meta.glob("/node_modules/simple-icons/icons/*.svg"),
+}
+
+const pathFor = (source: Source, icon: string) =>
+  source === "lucide"
+    ? `/node_modules/lucide-static/icons/${icon}.svg`
+    : `/node_modules/simple-icons/icons/${icon}.svg`
+
+// Resolve an icon by explicit name, or derive one from a link href.
+// Names may be prefixed with `lucide:` or `simple:` to pick a set when both
+// sets contain the same name (for example `github` or `figma`).
+const resolve = () => {
+  let key = name != null && name !== "" ? String(name) : undefined
+  let order: Source[] = ["lucide", "simple"]
 
-  // For x.com, use the Simple Icons X instead of Lucide's X icon.
-  if (name === "x.com") {
-    foundPath = "/node_modules/simple-icons/icons/x.svg"
-  } else if (name) {
-    foundPath = Object.keys(icons).find((key) => key.includes(`/${name}.svg`))
-  } else if (href) {
-    const hrefKey = Object.keys(hrefMap).find((key) =>
-      href.toString().includes(key)
+  if (!key && href) {
+    const hrefKey = Object.keys(hrefMap).find((candidate) =>
+      href.toString().includes(candidate)
     )
-    const hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]
-    foundPath = Object.keys(icons)
-      .reverse()
-      .find((key) => key.includes(`/${hrefValue}.svg`))
+    if (hrefKey) {
+      key = hrefMap[hrefKey as keyof typeof hrefMap]
+      order = ["simple", "lucide"]
+    }
+  }
+
+  if (!key) return undefined
+  if (key === "x.com") key = "simple:x"
+
+  const [prefix, icon] = key.includes(":") ? key.split(":") : [undefined, key]
+  if (prefix === "lucide" || prefix === "simple") order = [prefix]
+
+  for (const source of order) {
+    const path = pathFor(source, icon)
+    if (path in icons[source]) return { source, path }
   }
 
-  return foundPath
+  return undefined
 }
 
-const foundModule = foundPath() && icons[foundPath() as keyof typeof icons]
-const module = foundModule && ((await foundModule()) as any)
+const resolved = resolve()
+const module = resolved
+  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })
+  : undefined
 const Comp = module?.default
+
+const isLabelled =
+  "aria-label" in props || "aria-labelledby" in props || "role" in props
 ---
 
 {
-  Comp && foundPath()?.includes("simple-icons") && (
+  Comp && resolved && (
     <Comp
       height={24}
       width={24}
-      fill="currentColor"
+      fill={resolved.source === "simple" ? "currentColor" : "none"}
       class="size-[1em] text-base"
+      aria-hidden={isLabelled ? undefined : "true"}
       {...props}
     />
   )
 }
-
-{
-  Comp && foundPath()?.includes("lucide-static") && (
-    <Comp height={24} width={24} class="size-[1em] text-base" {...props} />
-  )
-}

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

@@ -13,6 +13,7 @@ type Props = {
 
 const {
   class: className = "",
+  hidden = true,
   align,
   alignOffset,
   side,
@@ -24,6 +25,7 @@ const {
 <div
   {...props}
   data-slot="navigation-menu-content"
+  hidden={hidden}
   data-align={align}
   data-align-offset={alignOffset}
   data-side={side}

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

@@ -10,8 +10,9 @@ const { class: className, ...props } = Astro.props
 
 <div
   data-slot="navigation-menu-indicator"
+  data-state="hidden"
   class={cn(
-    "data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+    "data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in absolute top-full left-(--indicator-left) z-1 flex h-1.5 w-(--indicator-width) items-end justify-center overflow-hidden data-[state=hidden]:invisible",
     className
   )}
   {...props}

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

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <ul
   data-slot="navigation-menu-list"
   class={cn(
-    "group flex flex-1 list-none items-center justify-center gap-0",
+    "group relative flex flex-1 list-none items-center justify-center gap-0",
     className
   )}
   {...props}

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

@@ -35,10 +35,12 @@ const {
   >
     <div
       data-slot="navigation-menu-popup"
+      hidden
       class="data-[ending-style]:easing-[ease] xs:w-(--popup-width) bg-popover text-popover-foreground ring-foreground/10 relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0"
     >
       <div
         data-slot="navigation-menu-viewport"
+        hidden
         class="relative size-full overflow-hidden"
       >
       </div>

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

@@ -60,4 +60,5 @@ const {
   import { create } from "@data-slot/navigation-menu"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -56,4 +56,5 @@ const {
   import { create } from "@data-slot/popover"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/radio-group/radio-group.astro

@@ -39,4 +39,5 @@ const {
   import { create } from "@data-slot/radio-group"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -1,2 +1,4 @@
 export { default as Section } from "./section.astro"
 export { default as SectionContainer } from "./section-container.astro"
+export { default as SectionDescription } from "./section-description.astro"
+export { default as SectionTitle } from "./section-title.astro"

package/src/components/ui/section/section-container.astro

@@ -9,6 +9,7 @@ const { class: className, ...props } = Astro.props
 ---
 
 <div
+  data-slot="section-container"
   class={cn(
     "relative mx-auto flex w-full max-w-7xl flex-col gap-8 px-4",
     className

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

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

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props<Tag extends HTMLTag = "h2"> = Polymorphic<{ as: Tag }>
+
+const { as: Tag = "h2", class: className, ...props } = Astro.props
+---
+
+<Tag
+  data-slot="section-title"
+  class={cn(
+    "text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Tag>

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

@@ -1,9 +1,11 @@
 ---
-import type { ComponentProps } from "astro/types"
+import type { HTMLTag, Polymorphic } from "astro/types"
 
 import { Button } from "@/components/ui/button"
+import type { ButtonVariantProps } from "@/components/ui/button/button-variants"
 
-type Props = ComponentProps<typeof Button>
+type Props<Tag extends HTMLTag = "button"> = Polymorphic<{ as: Tag }> &
+  ButtonVariantProps
 
 const { ...props } = Astro.props
 ---

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

@@ -25,7 +25,7 @@ const {
     data-slot="dialog-overlay"
     hidden
     class="fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs"
-    style="z-index: calc(var(--dialog-overlay-stack-index, 0) + 100);"
+    style="z-index: calc(var(--dialog-overlay-stack-index, 0) * 2 + 100);"
   >
   </div>
   <div
@@ -36,7 +36,7 @@ const {
       "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
       className
     )}
-    style={`z-index: calc(var(--dialog-content-stack-index, 0) + 101);${style ? ` ${style}` : ""}`}
+    style={`z-index: calc(var(--dialog-content-stack-index, 0) * 2 + 101);${style ? ` ${style}` : ""}`}
     {...props}
   >
     <slot />

package/src/components/ui/sheet/sheet.astro

@@ -16,18 +16,15 @@ const {
   lockScroll,
   ...props
 } = Astro.props
-
-const manageScrollLock = lockScroll !== false
 ---
 
 <div
   data-slot="dialog"
-  data-sheet-lock-scroll={manageScrollLock ? "" : undefined}
   class={className}
   data-default-open={defaultOpen}
   data-close-on-click-outside={closeOnClickOutside}
   data-close-on-escape={closeOnEscape}
-  data-lock-scroll="false"
+  data-lock-scroll={lockScroll}
   {...props}
 >
   <slot />
@@ -37,89 +34,5 @@ const manageScrollLock = lockScroll !== false
   import { create } from "@data-slot/dialog"
 
   create()
-
-  declare global {
-    interface Window {
-      __fulldevSheetScrollLock?: {
-        roots: Set<HTMLElement>
-        savedHtmlOverflow: string
-        savedHtmlScrollbarGutter: string
-        savedBodyPaddingRight: string
-      }
-      __fulldevSheetScrollLockBound?: boolean
-    }
-  }
-
-  const state =
-    window.__fulldevSheetScrollLock ??
-    (window.__fulldevSheetScrollLock = {
-      roots: new Set<HTMLElement>(),
-      savedHtmlOverflow: "",
-      savedHtmlScrollbarGutter: "",
-      savedBodyPaddingRight: "",
-    })
-
-  const applyScrollLock = () => {
-    const html = document.documentElement
-    const body = document.body
-
-    if (state.roots.size === 0) {
-      html.style.overflow = state.savedHtmlOverflow
-      html.style.scrollbarGutter = state.savedHtmlScrollbarGutter
-      body.style.paddingRight = state.savedBodyPaddingRight
-      return
-    }
-
-    if (state.roots.size === 1) {
-      state.savedHtmlOverflow = html.style.overflow
-      state.savedHtmlScrollbarGutter = html.style.scrollbarGutter
-      state.savedBodyPaddingRight = body.style.paddingRight
-    }
-
-    const scrollbarWidth = window.innerWidth - html.clientWidth
-    const bodyPaddingRight = Number.parseFloat(
-      window.getComputedStyle(body).paddingRight || "0"
-    )
-
-    html.style.overflow = "hidden"
-    html.style.scrollbarGutter = "auto"
-    body.style.paddingRight = `${bodyPaddingRight + Math.max(scrollbarWidth, 0)}px`
-  }
-
-  const syncRoot = (root: HTMLElement, open: boolean) => {
-    const hasRoot = state.roots.has(root)
-    if (open === hasRoot) return
-
-    if (open) state.roots.add(root)
-    else state.roots.delete(root)
-
-    applyScrollLock()
-  }
-
-  if (!window.__fulldevSheetScrollLockBound) {
-    window.__fulldevSheetScrollLockBound = true
-
-    document.addEventListener("dialog:change", (event) => {
-      const target = event.target
-
-      if (
-        !(target instanceof HTMLElement) ||
-        target.dataset.slot !== "dialog" ||
-        target.dataset.sheetLockScroll === undefined
-      ) {
-        return
-      }
-
-      const detail = (event as CustomEvent<{ open?: boolean }>).detail
-      syncRoot(target, Boolean(detail?.open))
-    })
-  }
-
-  document
-    .querySelectorAll<HTMLElement>(
-      '[data-slot="dialog"][data-sheet-lock-scroll]'
-    )
-    .forEach((root) => {
-      syncRoot(root, root.hasAttribute("data-open"))
-    })
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/sidebar/sidebar-menu-button.astro

@@ -91,7 +91,6 @@ const {
     <Tooltip>
       <TooltipTrigger
         as={Tag}
-        data-slot="sidebar-menu-button"
         data-sidebar="menu-button"
         data-size={size}
         data-active={resolvedActive ? "true" : undefined}

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

@@ -67,9 +67,16 @@ const resolvedStyle = [
           })
 
         provider
-          .querySelectorAll("[data-sidebar='menu-tooltip']")
+          .querySelectorAll("[data-slot='tooltip']")
           .forEach((tooltip) => {
-            tooltip.hidden = state !== "collapsed"
+            if (
+              state !== "collapsed" &&
+              tooltip.querySelector("[data-sidebar='menu-button']")
+            ) {
+              tooltip.dispatchEvent(
+                new CustomEvent("tooltip:set", { detail: { open: false } })
+              )
+            }
           })
       }
 
@@ -132,6 +139,33 @@ const resolvedStyle = [
       window.__fulldevSyncSidebarProvider?.(provider, open)
     }
 
+    document.addEventListener("dialog:change", (event) => {
+      const root = event.target
+      if (!(root instanceof HTMLElement) || root.dataset.sidebar !== "sheet")
+        return
+      const provider = root.closest("[data-slot='sidebar-wrapper']")
+      if (provider)
+        provider.dataset.openMobile = String(Boolean(event.detail?.open))
+    })
+
+    document.addEventListener("tooltip:change", (event) => {
+      if (!event.detail?.open) return
+      const root = event.target
+      if (!(root instanceof HTMLElement)) return
+      if (!root.querySelector("[data-sidebar='menu-button']")) return
+      const provider = root.closest("[data-slot='sidebar-wrapper']")
+      const sidebar = root.closest("[data-slot='sidebar']")
+      if (
+        provider?.dataset.state !== "collapsed" ||
+        sidebar?.dataset.collapsible !== "icon" ||
+        !window.matchMedia("(min-width: 768px)").matches
+      ) {
+        root.dispatchEvent(
+          new CustomEvent("tooltip:set", { detail: { open: false } })
+        )
+      }
+    })
+
     document.addEventListener("click", (event) => {
       const control = event.target?.closest?.(
         "[data-sidebar='trigger'], [data-sidebar='rail']"

package/src/components/ui/sidebar/sidebar.astro

@@ -54,7 +54,6 @@ const desktopCollapsible = desktopState === "collapsed" ? collapsible : ""
           side={side}
           showCloseButton={false}
           data-sidebar="sidebar"
-          data-slot="sidebar"
           data-mobile="true"
           style="--sidebar-width: var(--sidebar-width-mobile);"
           class={cn(

package/src/components/ui/slider/slider.astro

@@ -33,7 +33,7 @@ const {
 const serializedDefaultValue = Array.isArray(defaultValue)
   ? defaultValue.join(",")
   : defaultValue
-const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
+const thumbCount = String(serializedDefaultValue ?? "").includes(",") ? 2 : 1
 ---
 
 <div
@@ -45,7 +45,7 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
   data-large-step={largeStep}
   data-orientation={orientation}
   data-thumb-alignment={thumbAlignment}
-  data-disabled={disabled}
+  data-disabled={disabled ? "true" : undefined}
   class={cn(
     "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
     className
@@ -55,7 +55,7 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
   <div
     data-slot="slider-control"
     data-orientation={orientation}
-    data-disabled={disabled}
+    data-disabled={disabled ? "true" : undefined}
     class="relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
   >
     <div
@@ -83,4 +83,5 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
   import { create } from "@data-slot/slider"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/switch/switch.astro

@@ -47,9 +47,9 @@ const switchSizeStyle = {
   data-checked={initialChecked ? "" : undefined}
   data-unchecked={initialChecked ? undefined : ""}
   data-default-checked={defaultChecked}
-  data-disabled={disabled}
+  data-disabled={disabled ? "true" : undefined}
   data-read-only={readOnly}
-  data-readonly={readOnly}
+  data-readonly={readOnly ? "" : undefined}
   data-required={required}
   data-name={name}
   data-value={value}
@@ -60,6 +60,8 @@ const switchSizeStyle = {
   <span
     aria-hidden="true"
     data-slot="switch-thumb"
+    data-checked={initialChecked ? "" : undefined}
+    data-unchecked={initialChecked ? undefined : ""}
     class="bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
   ></span>
 </span>
@@ -68,4 +70,5 @@ const switchSizeStyle = {
   import { create } from "@data-slot/switch"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -7,11 +7,12 @@ type Props = HTMLAttributes<"div"> & {
   value?: string
 }
 
-const { class: className, value, ...props } = Astro.props
+const { class: className, hidden = true, value, ...props } = Astro.props
 ---
 
 <div
   data-slot="tabs-content"
+  hidden={hidden}
   data-value={value}
   class={cn("flex-1 text-sm outline-none", className)}
   {...props}

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

@@ -35,4 +35,5 @@ const {
   import { create } from "@data-slot/tabs"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/toggle/toggle.astro

@@ -27,6 +27,8 @@ const {
   data-default-pressed={defaultPressed}
   data-disabled={disabled}
   type={type}
+  disabled={disabled}
+  aria-pressed={defaultPressed === true ? "true" : "false"}
   class={cn(toggleVariants({ variant, size }), className)}
   {...props}
 >
@@ -37,4 +39,5 @@ const {
   import { create } from "@data-slot/toggle"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/tooltip/tooltip.astro

@@ -52,4 +52,5 @@ const {
   import { create } from "@data-slot/tooltip"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/lib/pages.ts

@@ -83,3 +83,15 @@ export const getPageBreadcrumbItems = async (
       }),
   ]
 }
+
+export const getMarkdownHref = (href: string) =>
+  href === "/" ? "/index.md" : `${href.replace(/\/$/, "")}.md`
+
+export const getInstallCommand = (source: string) => {
+  const names = [
+    ...source.matchAll(/props=\{\{\s*name:\s*['"]([^'"]+)['"]/g),
+  ].map((match) => `@fulldev/${match[1]}`)
+  return names.length
+    ? `npx shadcn@latest add ${[...new Set(names)].join(" ")}`
+    : undefined
+}