fulldev-ui 0.9.3 → 0.10.1

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

@@ -1,4 +1,7 @@
 ---
+import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
+import SearchIcon from "@lucide/astro/icons/search"
+
 import { cn } from "@/lib/utils"
 import {
   Breadcrumb,
@@ -29,11 +32,6 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
 import { Icon } from "@/components/ui/icon"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/components/ui/input-group"
 import { Kbd } from "@/components/ui/kbd"
 import { LogoImage, LogoText } from "@/components/ui/logo"
 import { Separator } from "@/components/ui/separator"
@@ -124,7 +122,18 @@ const searchGroups = search.items.reduce<
   return groups
 }, [])
 
-const githubStars = "560+"
+let githubStars = "Stars"
+
+try {
+  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)
+  const data = await response.json()
+
+  if (response.ok && typeof data.stargazers_count === "number") {
+    githubStars = new Intl.NumberFormat().format(data.stargazers_count)
+  }
+} catch {
+  // Keep the fallback label when GitHub is unavailable.
+}
 ---
 
 <SidebarProvider>
@@ -141,28 +150,19 @@ const githubStars = "560+"
       </SidebarMenuButton>
       <Dialog class="w-full" data-search-dialog>
         <DialogTrigger
-          as="div"
-          role="button"
-          tabindex="0"
-          class="h-auto w-full cursor-pointer border-0 bg-transparent p-0 shadow-none hover:bg-transparent"
+          variant="outline"
+          size="sm"
+          class="w-full justify-start shadow-none"
           aria-keyshortcuts="Meta+K Control+K"
         >
-          <InputGroup class="h-8 shadow-none">
-            <InputGroupInput
-              placeholder={search.label}
-              readonly
-              tabindex="-1"
-              aria-label={search.label}
-              class="cursor-pointer"
-            />
-            <InputGroupAddon>
-              <Icon name="search" />
-            </InputGroupAddon>
-            <InputGroupAddon align="inline-end">
-              <Kbd data-search-modifier>⌘</Kbd>
-              <Kbd>K</Kbd>
-            </InputGroupAddon>
-          </InputGroup>
+          <SearchIcon data-icon="inline-start" />
+          <span class="truncate">{search.label}</span>
+          <Kbd
+            class="bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]"
+            data-search-shortcut
+          >
+            ⌘ + K
+          </Kbd>
         </DialogTrigger>
 
         <CommandDialog title={search.label} description={search.label}>
@@ -179,9 +179,14 @@ const githubStars = "560+"
                     {group.items.map((item) => (
                       <CommandItem
                         href={item.href}
-                        value={item.path}
+                        value={`${item.group} ${item.label}`}
                         label={item.label}
-                        keywords={[item.title, item.path]}
+                        keywords={[
+                          item.group,
+                          item.title,
+                          item.path,
+                          item.description,
+                        ]}
                       >
                         {item.label}
                         <CommandShortcut>{item.href}</CommandShortcut>
@@ -196,7 +201,7 @@ const githubStars = "560+"
       </Dialog>
     </SidebarHeader>
     <SidebarContent
-      class="mask-[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-none group-data-[collapsible=icon]:[-webkit-mask-image:none]"
+      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]"
     >
       {
         navigation.map((group) => (
@@ -222,61 +227,10 @@ const githubStars = "560+"
   <SidebarInset>
     <Header class="h-16">
       <HeaderContainer class="max-w-none justify-between">
-        <HeaderGroup class="flex-1 md:flex-none">
+        <HeaderGroup>
           <SidebarTrigger />
           <Separator orientation="vertical" class="my-auto mr-2 h-4" />
-          <Dialog class="block min-w-0 flex-1 md:hidden" data-search-dialog>
-            <DialogTrigger
-              as="div"
-              role="button"
-              tabindex="0"
-              class="h-auto w-full cursor-pointer border-0 bg-transparent p-0 shadow-none hover:bg-transparent"
-              aria-keyshortcuts="Meta+K Control+K"
-            >
-              <InputGroup class="h-8 shadow-none">
-                <InputGroupInput
-                  placeholder={search.label}
-                  readonly
-                  tabindex="-1"
-                  aria-label={search.label}
-                  class="cursor-pointer"
-                />
-                <InputGroupAddon>
-                  <Icon name="search" />
-                </InputGroupAddon>
-              </InputGroup>
-            </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>
-
-                  {
-                    searchGroups.map((group) => (
-                      <CommandGroup heading={group.label}>
-                        {group.items.map((item) => (
-                          <CommandItem
-                            href={item.href}
-                            value={item.path}
-                            label={item.label}
-                            keywords={[item.title, item.path]}
-                          >
-                            {item.label}
-                            <CommandShortcut>{item.href}</CommandShortcut>
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    ))
-                  }
-                </CommandList>
-              </Command>
-            </CommandDialog>
-          </Dialog>
-          <Breadcrumb class="hidden md:block">
+          <Breadcrumb>
             <BreadcrumbList>
               {
                 breadcrumb.items.map((item, index) => {
@@ -299,7 +253,6 @@ const githubStars = "560+"
                         {hasMenu ? (
                           <DropdownMenu>
                             <DropdownMenuTrigger
-                              aria-label={`${item.label} pages`}
                               aria-current={isLast ? "page" : undefined}
                               class={cn(
                                 "hover:text-foreground inline-flex items-center gap-1 transition-colors",
@@ -307,8 +260,7 @@ const githubStars = "560+"
                               )}
                             >
                               {item.label}
-                              <Icon
-                                name="chevron-down"
+                              <ChevronDownIcon
                                 class="size-3.5 opacity-70"
                                 aria-hidden="true"
                               />
@@ -350,10 +302,7 @@ const githubStars = "560+"
                     <BreadcrumbSeparator>/</BreadcrumbSeparator>
                     <BreadcrumbItem>
                       <DropdownMenu>
-                        <DropdownMenuTrigger
-                          aria-label="Open page menu"
-                          class="hover:text-foreground inline-flex items-center leading-none transition-colors"
-                        >
+                        <DropdownMenuTrigger class="hover:text-foreground inline-flex items-center leading-none transition-colors">
                           <BreadcrumbEllipsis />
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="start">
@@ -384,7 +333,7 @@ const githubStars = "560+"
             variant="ghost"
             target="_blank"
             rel="noreferrer"
-            aria-label={`View ${githubRepo} on GitHub, ${githubStars}`}
+            aria-label={`View ${githubRepo} on GitHub`}
           >
             <Icon name="github" />
             <span>{githubStars}</span>
@@ -402,19 +351,15 @@ const githubStars = "560+"
     navigator.platform || navigator.userAgent
   )
 
-  document.querySelectorAll("[data-search-modifier]").forEach((shortcut) => {
-    shortcut.textContent = isMac ? "⌘" : "Ctrl"
+  document.querySelectorAll("[data-search-shortcut]").forEach((shortcut) => {
+    shortcut.textContent = isMac ? "⌘ + K" : "Ctrl + K"
   })
 
   document.addEventListener("keydown", (event) => {
     if (event.key.toLowerCase() !== "k") return
     if (event.shiftKey || event.altKey) return
 
-    const dialogs = Array.from(
-      document.querySelectorAll("[data-search-dialog]")
-    )
-    const dialog =
-      dialogs.find((dialog) => dialog.getClientRects().length > 0) ?? dialogs[0]
+    const dialog = document.querySelector("[data-search-dialog]")
     const isSearchShortcut = isMac
       ? event.metaKey && !event.ctrlKey
       : event.ctrlKey && !event.metaKey

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

@@ -5,11 +5,12 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div">
 
-const { class: className, ...props } = Astro.props
+const { class: className, hidden = true, ...props } = Astro.props
 ---
 
 <div
   data-slot="accordion-content"
+  hidden={hidden}
   class="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
   {...props}
 >

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

@@ -1,8 +1,9 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
+import ChevronUpIcon from "@lucide/astro/icons/chevron-up"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"button">
 
@@ -13,22 +14,20 @@ const { class: className, type = "button", ...props } = Astro.props
   data-slot="accordion-trigger"
   type={type}
   class={cn(
-    "group/accordion-trigger focus-visible:border-ring focus-visible:ring-ring/50 relative flex w-full flex-1 items-center justify-between gap-4 rounded-md border border-transparent bg-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "group/accordion-trigger focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground relative flex w-full flex-1 items-start justify-between rounded-md border border-transparent bg-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
     className
   )}
   {...props}
 >
   <slot />
-  <Icon
-    name="chevron-down"
+  <ChevronDownIcon
     data-slot="accordion-trigger-icon"
     aria-hidden="true"
-    class="text-muted-foreground pointer-events-none ml-auto size-4 shrink-0 group-aria-expanded/accordion-trigger:hidden"
+    class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
   />
-  <Icon
-    name="chevron-up"
+  <ChevronUpIcon
     data-slot="accordion-trigger-icon"
     aria-hidden="true"
-    class="text-muted-foreground pointer-events-none ml-auto hidden size-4 shrink-0 group-aria-expanded/accordion-trigger:inline"
+    class="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
   />
 </button>

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

@@ -22,7 +22,7 @@ const { class: className, size = "default", style, ...props } = Astro.props
       "group/alert-dialog-content 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 -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
       className
     )}
-    style={`z-index: calc(var(--alert-dialog-content-stack-index, 0) + 111);${style ? ` ${style}` : ""}`}
+    style={`z-index: calc(var(--alert-dialog-content-stack-index, 0) * 2 + 101);${style ? ` ${style}` : ""}`}
     {...props}
   >
     <slot />

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

@@ -1,12 +1,32 @@
 ---
 import type { HTMLAttributes } from "astro/types"
 
-type Props = HTMLAttributes<"div">
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+  lockScroll?: boolean
+}
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  defaultOpen,
+  closeOnClickOutside,
+  closeOnEscape,
+  lockScroll,
+  ...props
+} = Astro.props
 ---
 
-<div data-slot="alert-dialog" class={className} {...props}>
+<div
+  data-slot="alert-dialog"
+  data-default-open={defaultOpen}
+  data-close-on-click-outside={closeOnClickOutside}
+  data-close-on-escape={closeOnEscape}
+  data-lock-scroll={lockScroll}
+  class={className}
+  {...props}
+>
   <slot />
 </div>
 

package/src/components/ui/avatar/avatar.astro

@@ -14,7 +14,7 @@ const { class: className, size = "default", ...props } = Astro.props
   data-slot="avatar"
   data-size={size}
   class={cn(
-    "after:border-border group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+    "after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
     className
   )}
   {...props}

package/src/components/ui/badge/badge.astro

@@ -17,6 +17,7 @@ const {
 
 <Tag
   data-slot="badge"
+  data-variant={variant}
   class={cn(badgeVariants({ variant }), className)}
   {...props}
 >

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

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"div"> & {
   showClose?: boolean
@@ -24,11 +24,11 @@ const { class: className, showClose = true, ...props } = Astro.props
     showClose && (
       <button
         type="button"
-        class="focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center rounded-sm text-current/65 transition-colors outline-none hover:text-current focus-visible:text-current focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 in-data-[variant=floating]:right-5"
+        class="focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center rounded-sm text-current/65 transition-colors outline-none hover:text-current focus-visible:text-current focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5"
         aria-label="Close"
         data-slot="banner-close"
       >
-        <Icon name="x" class="size-4" />
+        <XIcon class="size-4" />
         <span class="sr-only">Close</span>
       </button>
     )

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

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import Ellipsis from "@lucide/astro/icons/ellipsis"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"span">
 
@@ -19,6 +19,6 @@ const { class: className, ...props } = Astro.props
   )}
   {...props}
 >
-  <Icon name="ellipsis" />
+  <Ellipsis />
   <span class="sr-only">More</span>
 </span>

package/src/components/ui/breadcrumb/breadcrumb-separator.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronRight from "@lucide/astro/icons/chevron-right"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"li">
 
@@ -16,5 +16,5 @@ const { class: className, ...props } = Astro.props
   class={cn("[&>svg]:size-3.5", className)}
   {...props}
 >
-  {Astro.slots.has("default") ? <slot /> : <Icon name="chevron-right" />}
+  {Astro.slots.has("default") ? <slot /> : <ChevronRight />}
 </li>

package/src/components/ui/button/button-variants.ts

@@ -7,20 +7,21 @@ export const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80",
         outline:
-          "!border-border bg-background hover:bg-muted hover:text-foreground dark:!border-input dark:bg-input/30 dark:hover:bg-input/50 shadow-xs",
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 shadow-xs",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
+          "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
         destructive:
           "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default:
-          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-[>svg:first-child]:pl-2 has-[>svg:last-child]:pr-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-[>svg:first-child]:pl-1.5 has-[>svg:last-child]:pr-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-[>svg:first-child]:pl-1.5 has-[>svg:last-child]:pr-1.5",
-        lg: "h-10 gap-1.5 px-2.5 has-[>svg:first-child]:pl-2 has-[>svg:last-child]:pr-2",
+          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         icon: "size-9",
         "icon-xs":
           "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",

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

@@ -10,7 +10,7 @@ const { class: className, ...props } = Astro.props
 
 <div
   data-slot="card-content"
-  class={cn("px-6 group-data-[size=sm]/card:px-4", className)}
+  class={cn("flex flex-col gap-3 px-(--card-spacing)", className)}
   {...props}
 >
   <slot />

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

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <div
   data-slot="card-footer"
   class={cn(
-    "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
+    "flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)",
     className
   )}
   {...props}

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

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <div
   data-slot="card-header"
   class={cn(
-    "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
+    "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
     className
   )}
   {...props}

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

@@ -14,7 +14,7 @@ const { class: className, size = "default", ...props } = Astro.props
   data-slot="card"
   data-size={size}
   class={cn(
-    "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+    "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
     className
   )}
   {...props}

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

@@ -1,9 +1,9 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronRightIcon from "@lucide/astro/icons/chevron-right"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants, type ButtonVariantProps } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 
 type Props = Omit<HTMLAttributes<"button">, "type"> & ButtonVariantProps
 
@@ -23,14 +23,14 @@ const {
   disabled={disabled}
   class={cn(
     buttonVariants({ variant, size }),
-    "absolute top-1/2 -right-12 z-10 -translate-y-1/2 touch-manipulation rounded-full",
+    "absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto",
     "group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90",
     className
   )}
   {...props}
 >
   <slot>
-    <Icon name="chevron-right" class="size-4" aria-hidden="true" />
+    <ChevronRightIcon aria-hidden="true" />
     <span class="sr-only">Next slide</span>
   </slot>
 </button>

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

@@ -1,9 +1,9 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronLeftIcon from "@lucide/astro/icons/chevron-left"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants, type ButtonVariantProps } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 
 type Props = Omit<HTMLAttributes<"button">, "type"> & ButtonVariantProps
 
@@ -23,14 +23,14 @@ const {
   disabled={disabled}
   class={cn(
     buttonVariants({ variant, size }),
-    "absolute top-1/2 -left-12 z-10 -translate-y-1/2 touch-manipulation rounded-full",
+    "absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto",
     "group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90",
     className
   )}
   {...props}
 >
   <slot>
-    <Icon name="chevron-left" class="size-4" aria-hidden="true" />
+    <ChevronLeftIcon aria-hidden="true" />
     <span class="sr-only">Previous slide</span>
   </slot>
 </button>

package/src/components/ui/checkbox/checkbox.astro

@@ -13,7 +13,7 @@ const { class: className, ...props } = Astro.props
   role="checkbox"
   data-slot="checkbox"
   class={cn(
-    "border-input dark:bg-input/30 checked:bg-primary dark:checked:bg-primary checked:border-primary indeterminate:bg-primary indeterminate:border-primary aria-invalid:checked:border-primary aria-invalid:indeterminate:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 checked:[color:var(--color-primary-foreground)] indeterminate:[color:var(--color-primary-foreground)] focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+    "border-input dark:bg-input/30 checked:bg-primary dark:checked:bg-primary checked:border-primary indeterminate:bg-primary indeterminate:border-primary aria-invalid:checked:border-primary aria-invalid:indeterminate:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer group-has-[:focus-visible]/field-label:not-checked:border-input relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 checked:[color:var(--color-primary-foreground)] indeterminate:[color:var(--color-primary-foreground)] focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
     className
   )}
   {...props}

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

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 import InputGroupAddon from "@/components/ui/input-group/input-group-addon.astro"
 import InputGroupInput from "@/components/ui/input-group/input-group-input.astro"
 import InputGroup from "@/components/ui/input-group/input-group.astro"
@@ -48,7 +48,7 @@ const {
           class="inline-flex size-6 shrink-0 items-center justify-center rounded-[calc(var(--radius)-5px)] p-0 text-sm shadow-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           disabled={disabled}
         >
-          <Icon name="x" class="pointer-events-none" />
+          <XIcon class="pointer-events-none" />
         </button>
       )
     }

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

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import CheckIcon from "@lucide/astro/icons/check"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"div"> & {
   value?: string
@@ -24,7 +24,7 @@ const {
   data-value={value}
   data-disabled={disabled ? "" : undefined}
   class={cn(
-    "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:[svg]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group/combobox-item data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:**:[svg]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
   )}
   {...props}
@@ -35,9 +35,9 @@ const {
       <span
         data-slot="combobox-item-indicator"
         hidden={false}
-        class="pointer-events-none absolute right-2 flex size-4 items-center justify-center opacity-0 group-data-[checked=true]/combobox-item:opacity-100"
+        class="pointer-events-none absolute right-2 flex size-4 items-center justify-center opacity-0 group-data-selected/combobox-item:opacity-100"
       >
-        <Icon name="check" class="pointer-events-none" />
+        <CheckIcon class="pointer-events-none" />
       </span>
     )
   }

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

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <div
   data-slot="combobox-list"
   class={cn(
-    "no-scrollbar max-h-[min(18rem,var(--available-height))] scroll-py-1 overflow-x-hidden overflow-y-auto overscroll-contain p-1 group-data-empty/combobox-content:p-0",
+    "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 group-data-empty/combobox-content:p-0",
     className
   )}
   {...props}