fulldev-ui 0.7.0-beta.9 → 0.9.0

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

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"button"> & {
+  showIcon?: boolean
+}
+
+const {
+  class: className,
+  type = "button",
+  showIcon = true,
+  ...props
+} = Astro.props
+---
+
+<button
+  type={type}
+  data-slot="combobox-trigger"
+  class={cn(
+    "[&_svg]:text-muted-foreground inline-flex size-6 shrink-0 items-center justify-center gap-2 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",
+    className
+  )}
+  {...props}
+>
+  <slot />
+  {
+    showIcon && (
+      <Icon
+        name="chevron-down"
+        class="text-muted-foreground pointer-events-none size-4"
+      />
+    )
+  }
+</button>

package/src/components/ui/combobox/combobox-value.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="combobox-value"
+  class={cn(
+    "data-[placeholder]:text-muted-foreground block flex-1 truncate text-left",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</span>

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

@@ -0,0 +1,85 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type {
+  Align as ComboboxAlign,
+  Side as ComboboxSide,
+} from "@data-slot/combobox"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultValue?: string
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  openOnFocus?: boolean
+  autoHighlight?: boolean
+  side?: ComboboxSide
+  align?: ComboboxAlign
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+}
+
+const {
+  class: className,
+  defaultValue,
+  placeholder,
+  disabled,
+  required,
+  name,
+  openOnFocus,
+  autoHighlight,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="combobox"
+  data-default-value={defaultValue}
+  data-placeholder={placeholder}
+  data-disabled={disabled}
+  data-required={required}
+  data-name={name}
+  data-open-on-focus={openOnFocus}
+  data-auto-highlight={autoHighlight}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  data-avoid-collisions={avoidCollisions}
+  data-collision-padding={collisionPadding}
+  class={cn("group/combobox relative", className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { createCombobox } from "@data-slot/combobox"
+
+  const initCombobox = () => {
+    document.querySelectorAll('[data-slot="combobox"]').forEach((root) => {
+      if (
+        !root.querySelector('[data-slot="combobox-input"]') ||
+        !root.querySelector('[data-slot="combobox-content"]')
+      ) {
+        return
+      }
+
+      createCombobox(root as HTMLElement)
+    })
+  }
+
+  initCombobox()
+
+  document.addEventListener("astro:page-load", initCombobox)
+</script>

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

@@ -0,0 +1,11 @@
+export { default as Combobox } from "./combobox.astro"
+export { default as ComboboxContent } from "./combobox-content.astro"
+export { default as ComboboxEmpty } from "./combobox-empty.astro"
+export { default as ComboboxGroup } from "./combobox-group.astro"
+export { default as ComboboxInput } from "./combobox-input.astro"
+export { default as ComboboxItem } from "./combobox-item.astro"
+export { default as ComboboxLabel } from "./combobox-label.astro"
+export { default as ComboboxList } from "./combobox-list.astro"
+export { default as ComboboxSeparator } from "./combobox-separator.astro"
+export { default as ComboboxTrigger } from "./combobox-trigger.astro"
+export { default as ComboboxValue } from "./combobox-value.astro"

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

@@ -0,0 +1,54 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+type Props = ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  contentClass?: string
+  showCloseButton?: boolean
+}
+
+const {
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  contentClass,
+  showCloseButton = false,
+  ...props
+} = Astro.props
+---
+
+<Dialog {...props}>
+  <DialogContent
+    class:list={[
+      "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
+      "**:data-[slot=command]:border-0",
+      "**:data-[slot=command]:bg-transparent",
+      "**:data-[slot=command-input-wrapper]:h-12",
+      "[&_[data-slot=command-input-wrapper]_svg]:size-5",
+      "**:data-[slot=command-input]:h-12",
+      "**:data-[slot=command-item]:px-2",
+      "**:data-[slot=command-item]:py-3",
+      "[&_[data-slot=command-item]_svg]:size-5",
+      "**:data-[slot=command-group-heading]:text-muted-foreground",
+      "**:data-[slot=command-group-heading]:px-2",
+      "**:data-[slot=command-group-heading]:font-medium",
+      "**:data-[slot=command-group]:px-2",
+      "[&_[data-slot=command-group]:not([hidden])_~[data-slot=command-group]]:pt-0",
+      contentClass,
+    ]}
+    showCloseButton={showCloseButton}
+  >
+    <div class="sr-only">
+      <DialogTitle>{title}</DialogTitle>
+      <DialogDescription>{description}</DialogDescription>
+    </div>
+    <slot />
+  </DialogContent>
+</Dialog>

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

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, hidden = true, ...props } = Astro.props
+---
+
+<div
+  data-slot="command-empty"
+  hidden={hidden}
+  class={cn("py-6 text-center text-sm", className)}
+  {...props}
+>
+  <slot>No results found.</slot>
+</div>

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

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  heading?: string
+  value?: string
+  forceMount?: boolean
+}
+
+const { class: className, heading, value, forceMount, ...props } = Astro.props
+---
+
+<div
+  data-slot="command-group"
+  data-value={value}
+  data-force-mount={forceMount ? "true" : undefined}
+  class={cn(
+    "text-foreground [&_[data-slot=command-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[data-slot=command-group-heading]]:px-2 [&_[data-slot=command-group-heading]]:py-1.5 [&_[data-slot=command-group-heading]]:text-xs [&_[data-slot=command-group-heading]]:font-medium",
+    className
+  )}
+  {...props}
+>
+  {heading && <div data-slot="command-group-heading">{heading}</div>}
+  <slot />
+</div>

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

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"input"> & {
+  wrapperClass?: string
+}
+
+const { class: className, wrapperClass, ...props } = Astro.props
+---
+
+<div data-slot="command-input-wrapper" class={cn("p-1 pb-0", wrapperClass)}>
+  <div
+    class="border-input/30 bg-input/30 flex h-8! items-center rounded-lg! border shadow-none!"
+  >
+    <div class="flex items-center pl-2">
+      <Icon name="search" class="size-4 shrink-0 opacity-50" />
+    </div>
+    <input
+      type="text"
+      data-slot="command-input"
+      class={cn(
+        "placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent px-2.5 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+</div>

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

@@ -0,0 +1,50 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"a"> & {
+  disabled?: boolean
+  href?: string
+  value?: string
+  label?: string
+  keywords?: string | string[]
+  forceMount?: boolean
+}
+
+const {
+  class: className,
+  disabled,
+  href,
+  value,
+  label,
+  keywords,
+  forceMount,
+  ...props
+} = Astro.props
+
+const Tag = href ? "a" : "div"
+const keywordsValue = Array.isArray(keywords) ? keywords.join(", ") : keywords
+---
+
+<Tag
+  data-slot="command-item"
+  data-disabled={disabled ? "true" : undefined}
+  data-value={value}
+  data-label={label}
+  data-keywords={keywordsValue}
+  data-force-mount={forceMount ? "true" : undefined}
+  href={href}
+  class={cn(
+    "group/command-item data-selected:bg-accent data-selected:text-accent-foreground data-selected:**:[svg]:text-accent-foreground href:cursor-pointer href:no-underline relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+  <Icon
+    name="check"
+    class="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+  />
+</Tag>

package/src/components/ui/command/command-list.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="command-list"
+  class={cn(
+    "no-scrollbar h-[var(--command-list-height)] max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto transition-[height] duration-150 ease-out outline-none",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="command-separator"
+  class={cn("bg-border -mx-1 h-px", className)}
+  {...props}
+>
+</div>

package/src/components/ui/command/command-shortcut.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="command-shortcut"
+  class={cn(
+    "text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</span>

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

@@ -0,0 +1,76 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  label?: string
+  defaultValue?: string
+  defaultSearch?: string
+  shouldFilter?: boolean
+  loop?: boolean
+  disablePointerSelection?: boolean
+  vimBindings?: boolean
+}
+
+const {
+  class: className,
+  label,
+  defaultValue,
+  defaultSearch,
+  shouldFilter,
+  loop,
+  disablePointerSelection,
+  vimBindings,
+  ...props
+} = Astro.props
+---
+
+<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>
+  import { create } from "@data-slot/command"
+
+  const initCommand = () => {
+    create()
+
+    document.querySelectorAll("[data-slot=command]").forEach((command) => {
+      if (!(command instanceof HTMLElement)) return
+      if (command.dataset.linkNavigation === "true") return
+
+      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
+
+        const item = Array.from(
+          command.querySelectorAll("[data-slot=command-item][href]")
+        ).find((item) => item.getAttribute("data-value") === value)
+        const href = item?.getAttribute("href")
+
+        if (href) window.location.href = href
+      })
+    })
+  }
+
+  initCommand()
+
+  document.addEventListener("astro:page-load", initCommand)
+</script>

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

@@ -1,9 +1,9 @@
-export { default as Command } from './Command.vue'
-export { default as CommandDialog } from './CommandDialog.vue'
-export { default as CommandEmpty } from './CommandEmpty.vue'
-export { default as CommandGroup } from './CommandGroup.vue'
-export { default as CommandInput } from './CommandInput.vue'
-export { default as CommandItem } from './CommandItem.vue'
-export { default as CommandList } from './CommandList.vue'
-export { default as CommandSeparator } from './CommandSeparator.vue'
-export { default as CommandShortcut } from './CommandShortcut.vue'
+export { default as Command } from "./command.astro"
+export { default as CommandDialog } from "./command-dialog.astro"
+export { default as CommandInput } from "./command-input.astro"
+export { default as CommandList } from "./command-list.astro"
+export { default as CommandEmpty } from "./command-empty.astro"
+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

@@ -0,0 +1,17 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+
+type Props = ComponentProps<typeof Button>
+
+const { class: className, ...props } = Astro.props
+---
+
+<Button class={cn(className)} data-slot="dialog-close" {...props}>
+  <slot>
+    <Icon name="x" />
+  </slot>
+</Button>

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

@@ -0,0 +1,50 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+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"
+
+type Props = HTMLAttributes<"div"> & {
+  showCloseButton?: boolean
+}
+
+const {
+  class: className,
+  showCloseButton = true,
+  style,
+  ...props
+} = Astro.props
+---
+
+<DialogPortal>
+  <DialogOverlay />
+  <div
+    data-slot="dialog-content"
+    hidden
+    class={cn(
+      "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}
+  >
+    {
+      showCloseButton && (
+        <Button
+          type="button"
+          data-slot="dialog-close"
+          variant="ghost"
+          size="icon-sm"
+          class="absolute top-4 right-4"
+        >
+          <Icon name="x" class="size-4" />
+          <span class="sr-only">Close</span>
+        </Button>
+      )
+    }
+    <slot />
+  </div>
+</DialogPortal>

package/src/components/ui/dialog/dialog-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="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

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import DialogClose from "@/components/ui/dialog/dialog-close.astro"
+
+type Props = HTMLAttributes<"div"> & {
+  showCloseButton?: boolean
+}
+
+const { class: className, showCloseButton = false, ...props } = Astro.props
+---
+
+<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

@@ -0,0 +1,17 @@
+---
+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-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>