fulldev-ui 0.11.1 → 0.13.0

package/src/components/blocks/blocks-1.astro

@@ -15,6 +15,7 @@ import { buttonVariants } from "@/components/ui/button/button-variants"
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { SectionContainer } from "@/components/ui/section"
@@ -129,6 +130,7 @@ const openLinks = markdownUrl
               variant="outline"
               size="xs"
               data-source={copyButton?.source}
+              data-blocks-copy
               aria-label={labels.copyMarkdown}
             >
               <Copy class="blocks-copy-icon size-3.5" />
@@ -148,11 +150,10 @@ const openLinks = markdownUrl
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" sideOffset={6} class="w-56">
                 {openLinks.map((link) => (
-                  <a
+                  <DropdownMenuItem
                     href={link.href}
                     target="_blank"
                     rel="noreferrer noopener"
-                    class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none"
                   >
                     {link.icon === "markdown" && <Markdown class="size-4" />}
                     {link.icon === "chatgpt" && (
@@ -170,7 +171,7 @@ const openLinks = markdownUrl
                     {link.icon === "cursor" && <Cursor class="size-4" />}
                     <span>{link.label}</span>
                     <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
-                  </a>
+                  </DropdownMenuItem>
                 ))}
               </DropdownMenuContent>
             </DropdownMenu>
@@ -224,27 +225,26 @@ const openLinks = markdownUrl
   </div>
 </SectionContainer>
 
-<script is:inline define:vars={{ copyButtonId: copyButton?.id }}>
-  const button = copyButtonId ? document.getElementById(copyButtonId) : null
+<script>
+  document.addEventListener("click", async (event) => {
+    if (!(event.target instanceof Element)) return
+    const button = event.target.closest("[data-blocks-copy]")
+    if (!(button instanceof HTMLButtonElement)) return
 
-  if (button instanceof HTMLButtonElement) {
-    button.addEventListener("click", async () => {
-      const source = button.dataset.source
+    const source = button.dataset.source
+    if (!source) return
 
-      if (!source) return
+    try {
+      await navigator.clipboard.writeText(source)
+      button.querySelector(".blocks-copy-icon")?.classList.add("hidden")
+      button.querySelector(".blocks-check-icon")?.classList.remove("hidden")
 
-      try {
-        await navigator.clipboard.writeText(source)
-        button.querySelector(".blocks-copy-icon")?.classList.add("hidden")
-        button.querySelector(".blocks-check-icon")?.classList.remove("hidden")
-
-        window.setTimeout(() => {
-          button.querySelector(".blocks-copy-icon")?.classList.remove("hidden")
-          button.querySelector(".blocks-check-icon")?.classList.add("hidden")
-        }, 1200)
-      } catch {
-        // Ignore clipboard failures; the button remains available for retry.
-      }
-    })
-  }
+      window.setTimeout(() => {
+        button.querySelector(".blocks-copy-icon")?.classList.remove("hidden")
+        button.querySelector(".blocks-check-icon")?.classList.add("hidden")
+      }, 1200)
+    } catch {
+      // Keep the copy state unchanged so the action can be retried.
+    }
+  })
 </script>

package/src/components/blocks/doc-1.astro

@@ -21,6 +21,7 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { SectionContainer } from "@/components/ui/section"
@@ -180,11 +181,10 @@ const openLinks = markdownUrl
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" sideOffset={6} class="w-56">
                 {openLinks.map((link) => (
-                  <a
+                  <DropdownMenuItem
                     href={link.href}
                     target="_blank"
                     rel="noreferrer noopener"
-                    class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none"
                   >
                     {link.icon === "markdown" && <Markdown class="size-4" />}
                     {link.icon === "chatgpt" && (
@@ -202,7 +202,7 @@ const openLinks = markdownUrl
                     {link.icon === "cursor" && <Cursor class="size-4" />}
                     <span>{link.label}</span>
                     <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
-                  </a>
+                  </DropdownMenuItem>
                 ))}
               </DropdownMenuContent>
             </DropdownMenu>
@@ -299,38 +299,128 @@ const openLinks = markdownUrl
   }
 </SectionContainer>
 
-<script is:inline>
+<style is:global>
+  .docs-code-block {
+    position: relative;
+    overflow: hidden;
+    margin-block-start: var(--typeset-flow);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    background: color-mix(in oklab, var(--color-muted) 60%, transparent);
+  }
+
+  .docs-code-block > pre,
+  .docs-code-block > pre.astro-code {
+    margin: 0;
+    overflow-x: auto;
+    border: 0;
+    border-radius: 0;
+    background: transparent !important;
+    padding: 1rem 3.5rem 1rem 1rem;
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+  }
+
+  .docs-code-block > pre.astro-code code {
+    color: var(--shiki-light, var(--color-foreground)) !important;
+    font: inherit;
+  }
+
+  .dark .docs-code-block > pre.astro-code code {
+    color: var(--shiki-dark, var(--color-foreground)) !important;
+  }
+
+  .dark .docs-code-block > pre.astro-code span[style*="--shiki-dark"] {
+    color: var(--shiki-dark) !important;
+    font-style: var(--shiki-dark-font-style, inherit) !important;
+    font-weight: var(--shiki-dark-font-weight, inherit) !important;
+    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;
+  }
+
+  .docs-code-copy {
+    position: absolute;
+    z-index: 10;
+    top: 0.75rem;
+    right: 0.75rem;
+    display: inline-flex;
+    width: 2rem;
+    height: 2rem;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-background);
+    color: var(--color-muted-foreground);
+    box-shadow: var(--shadow-sm);
+    transition:
+      color 150ms,
+      background-color 150ms;
+  }
+
+  .docs-code-copy:hover {
+    background: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .docs-code-copy:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  .docs-code-copy svg {
+    width: 1rem;
+    height: 1rem;
+  }
+</style>
+
+<script>
   const copyIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`
   const checkIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>`
-  document.querySelectorAll("[data-slot='typography'] > pre").forEach((pre) => {
-    if (pre.closest(".docs-code-block")) return
-    const wrapper = document.createElement("div")
-    const button = document.createElement("button")
-    wrapper.className = "docs-code-block"
-    button.type = "button"
-    button.className = "docs-code-copy"
-    button.ariaLabel = "Copy code"
-    button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class="hidden">${checkIcon}</span>`
-    pre.before(wrapper)
-    wrapper.append(pre, button)
-  })
-  document.addEventListener("click", (event) => {
-    const button = event.target?.closest?.(
+  const initializeCodeBlocks = () => {
+    document
+      .querySelectorAll("[data-slot='typography'] > pre")
+      .forEach((pre) => {
+        if (pre.closest(".docs-code-block")) return
+        const wrapper = document.createElement("div")
+        const button = document.createElement("button")
+        wrapper.className = "docs-code-block"
+        wrapper.dataset.notTypeset = ""
+        button.type = "button"
+        button.className = "docs-code-copy"
+        button.ariaLabel = "Copy code"
+        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class="hidden">${checkIcon}</span>`
+        pre.before(wrapper)
+        wrapper.append(pre, button)
+      })
+  }
+
+  initializeCodeBlocks()
+  document.addEventListener("astro:page-load", initializeCodeBlocks)
+
+  document.addEventListener("click", async (event) => {
+    if (!(event.target instanceof Element)) return
+    const button = event.target.closest(
       "[id^='docs-copy-page-'], .docs-code-copy"
     )
-    if (!button) return
+    if (!(button instanceof HTMLButtonElement)) return
     const source =
       button.dataset.source ??
       button
         .closest(".docs-code-block")
         ?.querySelector("pre")
         ?.textContent?.replace(/\n$/, "")
-    button.querySelector("[data-copy-icon]")?.classList.add("hidden")
-    button.querySelector("[data-check-icon]")?.classList.remove("hidden")
-    navigator.clipboard?.writeText(source ?? "")
-    setTimeout(() => {
-      button.querySelector("[data-copy-icon]")?.classList.remove("hidden")
-      button.querySelector("[data-check-icon]")?.classList.add("hidden")
-    }, 1200)
+
+    try {
+      await navigator.clipboard.writeText(source ?? "")
+      button.querySelector("[data-copy-icon]")?.classList.add("hidden")
+      button.querySelector("[data-check-icon]")?.classList.remove("hidden")
+      setTimeout(() => {
+        button.querySelector("[data-copy-icon]")?.classList.remove("hidden")
+        button.querySelector("[data-check-icon]")?.classList.add("hidden")
+      }, 1200)
+    } catch {
+      // Keep the copy state unchanged so the action can be retried.
+    }
   })
 </script>

package/src/components/blocks/reviews-3.astro

@@ -50,7 +50,7 @@ const { class: className, title, description, reviews, ...props } = Astro.props
     )
   }
   <SectionContainer>
-    <Carousel opts={{ loop: true, align: "center" }} class="mx-auto max-w-3xl">
+    <Carousel loop drag class="mx-auto w-[calc(100%-6rem)] max-w-3xl">
       <CarouselContent>
         {
           reviews.map((item) => (

package/src/components/blocks/sidebar-1.astro

@@ -23,11 +23,12 @@ import {
   CommandList,
   CommandShortcut,
 } from "@/components/ui/command"
-import { Dialog, DialogTrigger } from "@/components/ui/dialog"
+import { DialogTrigger } from "@/components/ui/dialog"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
@@ -139,7 +140,7 @@ try {
 <SidebarProvider>
   <Sidebar class={cn("", className)} collapsible="offcanvas" variant="inset">
     <SidebarHeader class="flex-col">
-      <SidebarMenuButton size="lg" variant="ghost" href={logo.href}>
+      <SidebarMenuButton size="lg" href={logo.href}>
         <LogoImage
           src={logo.src}
           srcLight={logo.srcLight}
@@ -148,8 +149,14 @@ try {
         />
         <LogoText class="font-semibold">{logo.label}</LogoText>
       </SidebarMenuButton>
-      <Dialog class="w-full" data-search-dialog>
+      <CommandDialog
+        class="w-full"
+        data-search-dialog
+        title={search.label}
+        description={search.label}
+      >
         <DialogTrigger
+          slot="trigger"
           variant="outline"
           size="sm"
           class="w-full justify-start shadow-none"
@@ -165,40 +172,38 @@ try {
           </Kbd>
         </DialogTrigger>
 
-        <CommandDialog title={search.label} description={search.label}>
-          <Command
-            class="[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground"
-          >
-            <CommandInput placeholder={search.label} />
-            <CommandList>
-              <CommandEmpty>{search.empty}</CommandEmpty>
+        <Command
+          class="[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground"
+        >
+          <CommandInput autofocus placeholder={search.label} />
+          <CommandList>
+            <CommandEmpty>{search.empty}</CommandEmpty>
 
-              {
-                searchGroups.map((group) => (
-                  <CommandGroup heading={group.label}>
-                    {group.items.map((item) => (
-                      <CommandItem
-                        href={item.href}
-                        value={`${item.group} ${item.label}`}
-                        label={item.label}
-                        keywords={[
-                          item.group,
-                          item.title,
-                          item.path,
-                          item.description,
-                        ]}
-                      >
-                        {item.label}
-                        <CommandShortcut>{item.href}</CommandShortcut>
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                ))
-              }
-            </CommandList>
-          </Command>
-        </CommandDialog>
-      </Dialog>
+            {
+              searchGroups.map((group) => (
+                <CommandGroup heading={group.label}>
+                  {group.items.map((item) => (
+                    <CommandItem
+                      href={item.href}
+                      value={`${item.group} ${item.label}`}
+                      label={item.label}
+                      keywords={[
+                        item.group,
+                        item.title,
+                        item.path,
+                        item.description,
+                      ]}
+                    >
+                      {item.label}
+                      <CommandShortcut>{item.href}</CommandShortcut>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))
+            }
+          </CommandList>
+        </Command>
+      </CommandDialog>
     </SidebarHeader>
     <SidebarContent
       class="[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]"
@@ -268,7 +273,7 @@ try {
                             <DropdownMenuContent align="start">
                               <DropdownMenuGroup>
                                 {breadcrumb.menu.map((menuItem) => (
-                                  <a
+                                  <DropdownMenuItem
                                     href={menuItem.href}
                                     aria-current={
                                       normalizePath(menuItem.href) ===
@@ -276,10 +281,10 @@ try {
                                         ? "page"
                                         : undefined
                                     }
-                                    class="hover:bg-accent hover:text-accent-foreground aria-[current=page]:text-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
+                                    class="aria-[current=page]:text-foreground"
                                   >
                                     {menuItem.label}
-                                  </a>
+                                  </DropdownMenuItem>
                                 ))}
                               </DropdownMenuGroup>
                             </DropdownMenuContent>
@@ -308,12 +313,9 @@ try {
                         <DropdownMenuContent align="start">
                           <DropdownMenuGroup>
                             {breadcrumb.menu.map((item) => (
-                              <a
-                                href={item.href}
-                                class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
-                              >
+                              <DropdownMenuItem href={item.href}>
                                 {item.label}
-                              </a>
+                              </DropdownMenuItem>
                             ))}
                           </DropdownMenuGroup>
                         </DropdownMenuContent>

package/src/components/ui/accordion/accordion.astro

@@ -48,6 +48,12 @@ const serializedDefaultValue = Array.isArray(defaultValue)
 <script>
   import { create } from "@data-slot/accordion"
 
-  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/alert-dialog/alert-dialog.astro

@@ -33,6 +33,12 @@ const {
 <script>
   import { create } from "@data-slot/alert-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/aspect-ratio/aspect-ratio.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  ratio: number
+}
+
+const { class: className, ratio, style, ...props } = Astro.props
+
+const resolvedStyle =
+  typeof style === "string"
+    ? `--ratio: ${ratio}; ${style}`
+    : { "--ratio": ratio, ...(style ?? {}) }
+---
+
+<div
+  data-slot="aspect-ratio"
+  style={resolvedStyle}
+  class={cn("relative aspect-(--ratio)", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from "./aspect-ratio.astro"

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { Button, type ButtonVariantProps } from "@/components/ui/button"
+
+type Props<Tag extends HTMLTag = "button"> = Polymorphic<{ as: Tag }> &
+  ButtonVariantProps
+
+const { as, variant = "ghost", size = "icon-xs", ...props } = Astro.props
+---
+
+<Button
+  as={as}
+  data-slot="attachment-action"
+  variant={variant}
+  size={size}
+  {...props}
+>
+  <slot />
+</Button>

package/src/components/ui/attachment/attachment-actions.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="attachment-actions"
+  class={cn(
+    "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/attachment/attachment-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="attachment-content"
+  class={cn(
+    "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="attachment-description"
+  class={cn(
+    "text-muted-foreground group-data-[state=error]/attachment:text-destructive/80 mt-0.5 block max-w-full min-w-0 truncate text-xs",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</span>

package/src/components/ui/attachment/attachment-group.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="attachment-group"
+  class={cn(
+    "flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/attachment/attachment-media.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const attachmentMediaVariants = cva(
+  "bg-muted text-foreground group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image:
+          "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "icon",
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> &
+  VariantProps<typeof attachmentMediaVariants>
+
+const { class: className, variant = "icon", ...props } = Astro.props
+---
+
+<div
+  data-slot="attachment-media"
+  data-variant={variant}
+  class={cn(attachmentMediaVariants({ variant }), className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="attachment-title"
+  class={cn(
+    "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</span>