fulldev-ui 0.7.0 → 0.9.0

package/src/components/ui/command/command.astro

@@ -3,164 +3,74 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className, ...props } = Astro.props
+type Props = HTMLAttributes<"div"> & {
+  label?: string
+  defaultValue?: string
+  defaultSearch?: string
+  shouldFilter?: boolean
+  loop?: boolean
+  disablePointerSelection?: boolean
+  vimBindings?: boolean
+}
 
-const slot = await Astro.slots.render("default")
+const {
+  class: className,
+  label,
+  defaultValue,
+  defaultSearch,
+  shouldFilter,
+  loop,
+  disablePointerSelection,
+  vimBindings,
+  ...props
+} = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="command"
-      class={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="command"
+  data-label={label}
+  data-default-value={defaultValue}
+  data-default-search={defaultSearch}
+  data-should-filter={shouldFilter}
+  data-loop={loop}
+  data-disable-pointer-selection={disablePointerSelection}
+  data-vim-bindings={vimBindings}
+  class={cn(
+    "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>
 
 <script>
-  function initCommand() {
-    const commands = document.querySelectorAll("[data-slot='command']")
-
-    commands.forEach((command) => {
-      const input = command.querySelector(
-        "[data-slot='command-input']"
-      ) as HTMLInputElement
-      const list = command.querySelector("[data-slot='command-list']")
-      const empty = command.querySelector("[data-slot='command-empty']")
-      const items = list?.querySelectorAll(
-        "[data-slot='command-item']"
-      ) as NodeListOf<HTMLElement>
-
-      if (!input || !list) return
-
-      let selectedIndex = -1
-
-      // Filter items based on search
-      function filterItems() {
-        const searchTerm = input.value.toLowerCase().trim()
-        let visibleCount = 0
-
-        items.forEach((item) => {
-          if (item.hasAttribute("data-disabled")) return
-
-          const text = item.textContent?.toLowerCase() || ""
-          const shouldShow = searchTerm === "" || text.includes(searchTerm)
+  import { create } from "@data-slot/command"
 
-          if (shouldShow) {
-            item.style.display = ""
-            visibleCount++
-          } else {
-            item.style.display = "none"
-          }
-        })
+  const initCommand = () => {
+    create()
 
-        // Show/hide groups based on visible items
-        if (list) {
-          const groups = list.querySelectorAll("[data-slot='command-group']")
-          groups.forEach((group) => {
-            const groupItems = group.querySelectorAll(
-              "[data-slot='command-item']"
-            )
-            const hasVisible = Array.from(groupItems).some(
-              (item: Element) => (item as HTMLElement).style.display !== "none"
-            )
-            ;(group as HTMLElement).style.display = hasVisible ? "" : "none"
-          })
-        }
+    document.querySelectorAll("[data-slot=command]").forEach((command) => {
+      if (!(command instanceof HTMLElement)) return
+      if (command.dataset.linkNavigation === "true") return
 
-        // Show/hide empty state
-        if (empty) {
-          ;(empty as HTMLElement).style.display =
-            visibleCount === 0 ? "" : "none"
-        }
+      command.dataset.linkNavigation = "true"
+      command.addEventListener("command:select", (event) => {
+        const { detail } = event as CustomEvent<{ value?: unknown }>
+        const value = detail?.value
+        if (typeof value !== "string") return
 
-        // Reset selection when filtering
-        selectedIndex = -1
-        updateSelection()
-      }
+        const item = Array.from(
+          command.querySelectorAll("[data-slot=command-item][href]")
+        ).find((item) => item.getAttribute("data-value") === value)
+        const href = item?.getAttribute("href")
 
-      // Update visual selection
-      function updateSelection() {
-        const visibleItems = Array.from(items).filter(
-          (item) =>
-            item.style.display !== "none" && !item.hasAttribute("data-disabled")
-        )
-
-        visibleItems.forEach((item, index) => {
-          if (index === selectedIndex) {
-            item.setAttribute("data-selected", "true")
-            item.scrollIntoView({ block: "nearest" })
-          } else {
-            item.removeAttribute("data-selected")
-          }
-        })
-      }
-
-      // Get visible items
-      function getVisibleItems() {
-        return Array.from(items).filter(
-          (item) =>
-            item.style.display !== "none" && !item.hasAttribute("data-disabled")
-        )
-      }
-
-      // Handle keyboard navigation
-      input.addEventListener("keydown", (e) => {
-        const visibleItems = getVisibleItems()
-
-        if (e.key === "ArrowDown") {
-          e.preventDefault()
-          selectedIndex = Math.min(selectedIndex + 1, visibleItems.length - 1)
-          updateSelection()
-        } else if (e.key === "ArrowUp") {
-          e.preventDefault()
-          selectedIndex = Math.max(selectedIndex - 1, 0)
-          updateSelection()
-        } else if (e.key === "Enter") {
-          e.preventDefault()
-          if (selectedIndex >= 0 && selectedIndex < visibleItems.length) {
-            visibleItems[selectedIndex].click()
-          }
-        } else if (e.key === "Escape") {
-          e.preventDefault()
-          input.blur()
-        }
+        if (href) window.location.href = href
       })
-
-      // Handle search input
-      input.addEventListener("input", filterItems)
-
-      // Handle item clicks
-      items.forEach((item) => {
-        item.addEventListener("click", () => {
-          if (item.hasAttribute("data-disabled")) return
-
-          const event = new CustomEvent("command-item-select", {
-            detail: { item },
-            bubbles: true,
-          })
-          command.dispatchEvent(event)
-        })
-      })
-
-      // Initialize
-      if (empty) {
-        ;(empty as HTMLElement).style.display = "none"
-      }
     })
   }
 
-  // Initialize on load
   initCommand()
 
-  // Re-initialize after navigation (for Astro view transitions)
   document.addEventListener("astro:page-load", initCommand)
 </script>

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

@@ -7,4 +7,3 @@ export { default as CommandGroup } from "./command-group.astro"
 export { default as CommandItem } from "./command-item.astro"
 export { default as CommandSeparator } from "./command-separator.astro"
 export { default as CommandShortcut } from "./command-shortcut.astro"
-

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

@@ -1,21 +1,17 @@
 ---
 import type { ComponentProps } from "astro/types"
-import X from "lucide-static/icons/x.svg"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
 
-interface Props extends ComponentProps<typeof Button> {}
+type Props = ComponentProps<typeof Button>
 
 const { class: className, ...props } = Astro.props
 ---
 
-<Button
-  class={cn("ml-auto", className)}
-  size="icon-sm"
-  variant="ghost"
-  data-slot="dialog-close"
-  {...props}
->
-  <X />
+<Button class={cn(className)} data-slot="dialog-close" {...props}>
+  <slot>
+    <Icon name="x" />
+  </slot>
 </Button>

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

@@ -1,42 +1,50 @@
 ---
 import type { HTMLAttributes } from "astro/types"
-import XIcon from "lucide-static/icons/x.svg"
 
 import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import DialogOverlay from "@/components/ui/dialog/dialog-overlay.astro"
+import DialogPortal from "@/components/ui/dialog/dialog-portal.astro"
+import { Icon } from "@/components/ui/icon"
 
-interface Props extends HTMLAttributes<"div"> {
-  showClose?: boolean
+type Props = HTMLAttributes<"div"> & {
+  showCloseButton?: boolean
 }
 
-const { class: className, showClose = true, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
+const {
+  class: className,
+  showCloseButton = true,
+  style,
+  ...props
+} = Astro.props
 ---
 
-<dialog
-  data-slot="dialog-element"
-  class="fixed inset-0 z-50 m-0 max-h-none max-w-none border-0 bg-transparent p-0 backdrop:bg-black/50"
->
+<DialogPortal>
+  <DialogOverlay />
   <div
     data-slot="dialog-content"
+    hidden
     class={cn(
-      "bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+      "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}` : ""}`}
     {...props}
   >
     {
-      showClose && (
-        <button
+      showCloseButton && (
+        <Button
           type="button"
           data-slot="dialog-close"
-          class="ring-offset-background focus:ring-ring absolute top-4 right-4 cursor-pointer rounded-sm border-0 bg-transparent opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          aria-label="Close"
+          variant="ghost"
+          size="icon-sm"
+          class="absolute top-4 right-4"
         >
-          <XIcon class="size-4" />
-        </button>
+          <Icon name="x" class="size-4" />
+          <span class="sr-only">Close</span>
+        </Button>
       )
     }
-    <Fragment set:html={slot} />
+    <slot />
   </div>
-</dialog>
+</DialogPortal>

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

@@ -3,21 +3,18 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"p"> {}
+type Props = HTMLAttributes<"p">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <p
-      data-slot="dialog-description"
-      class={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </p>
-  )
-}
+<p
+  data-slot="dialog-description"
+  class={cn(
+    "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</p>

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

@@ -2,25 +2,23 @@
 import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
+import DialogClose from "@/components/ui/dialog/dialog-close.astro"
 
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className, ...props } = Astro.props
+type Props = HTMLAttributes<"div"> & {
+  showCloseButton?: boolean
+}
 
-const slot = await Astro.slots.render("default")
+const { class: className, showCloseButton = false, ...props } = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="dialog-footer"
-      class={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="dialog-footer"
+  class={cn(
+    "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+    className
+  )}
+  {...props}
+>
+  <slot />
+  {showCloseButton && <DialogClose variant="outline">Close</DialogClose>}
+</div>

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

@@ -3,21 +3,15 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="dialog-header"
-      class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="dialog-header"
+  class={cn("flex flex-col gap-2", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, style, ...props } = Astro.props
+---
+
+<div
+  data-slot="dialog-overlay"
+  hidden
+  class={cn(
+    "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}` : ""}`}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="dialog-portal" class={cn(className)} {...props}>
+  <slot />
+</div>

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

@@ -3,21 +3,15 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"h2"> {}
+type Props = HTMLAttributes<"h2">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <h2
-      data-slot="dialog-title"
-      class={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </h2>
-  )
-}
+<h2
+  data-slot="dialog-title"
+  class={cn("leading-none font-medium", className)}
+  {...props}
+>
+  <slot />
+</h2>

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

@@ -3,17 +3,11 @@ import type { ComponentProps } from "astro/types"
 
 import { Button } from "@/components/ui/button"
 
-interface Props extends ComponentProps<typeof Button> {}
+type Props = ComponentProps<typeof Button>
 
 const { ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <Button data-slot="dialog-trigger" {...props}>
-      <Fragment set:html={slot} />
-    </Button>
-  )
-}
+<Button data-slot="dialog-trigger" {...props}>
+  <slot />
+</Button>

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

@@ -1,46 +1,17 @@
 ---
 import type { HTMLAttributes } from "astro/types"
 
-import { cn } from "@/lib/utils"
-
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div data-slot="dialog" class={cn("relative", className)} {...props}>
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div data-slot="dialog" class={className} {...props}>
+  <slot />
+</div>
 
 <script>
-  const dialogs = document.querySelectorAll("[data-slot='dialog']")
-  dialogs.forEach((dialog) => {
-    const dialogElement = dialog.querySelector("[data-slot='dialog-element']")
-    if (!(dialogElement instanceof HTMLDialogElement)) return
-
-    // Close on backdrop click
-    dialogElement.addEventListener("click", (event) => {
-      if (event.target === dialogElement) dialogElement.close()
-    })
-
-    const triggers = dialog.querySelectorAll("[data-slot='dialog-trigger']")
-    triggers.forEach((trigger) => {
-      trigger.addEventListener("click", () => {
-        dialogElement.showModal()
-      })
-    })
+  import { create } from "@data-slot/dialog"
 
-    const closes = dialog.querySelectorAll("[data-slot='dialog-close']")
-    closes.forEach((close) => {
-      close.addEventListener("click", () => {
-        dialogElement.close()
-      })
-    })
-  })
+  create()
 </script>

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

@@ -1,4 +1,6 @@
 export { default as Dialog } from "./dialog.astro"
+export { default as DialogPortal } from "./dialog-portal.astro"
+export { default as DialogOverlay } from "./dialog-overlay.astro"
 export { default as DialogContent } from "./dialog-content.astro"
 export { default as DialogTrigger } from "./dialog-trigger.astro"
 export { default as DialogHeader } from "./dialog-header.astro"

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

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"button"> & {
+  value: string
+  defaultChecked?: boolean
+  disabled?: boolean
+  variant?: "default" | "destructive"
+  inset?: boolean
+}
+
+const {
+  class: className,
+  type = "button",
+  value,
+  defaultChecked,
+  disabled,
+  variant,
+  inset,
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="dropdown-menu-checkbox-item"
+  data-value={value}
+  data-default-checked={defaultChecked}
+  data-disabled={disabled}
+  data-variant={variant}
+  data-inset={inset}
+  disabled={disabled ? true : undefined}
+  type={type}
+  class={cn(
+    "group/dropdown-menu-checkbox-item data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**: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-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <span
+    data-slot="dropdown-menu-checkbox-item-indicator"
+    class="pointer-events-none absolute right-2 flex items-center justify-center"
+  >
+    <Icon
+      name="check"
+      class="size-4 opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100"
+    />
+  </span>
+  <slot />
+</button>