fulldev-ui 0.11.1 → 0.13.0

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

@@ -0,0 +1,24 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props<Tag extends HTMLTag = "button"> = Polymorphic<{ as: Tag }>
+
+const {
+  as: Tag = "href" in Astro.props ? "a" : "button",
+  class: className,
+  ...props
+} = Astro.props
+
+const attributes: Record<string, unknown> = { ...props }
+if (Tag === "button") attributes.type ??= "button"
+---
+
+<Tag
+  data-slot="attachment-trigger"
+  class={cn("absolute inset-0 z-10 outline-none", className)}
+  {...attributes}
+>
+  <slot />
+</Tag>

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

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const attachmentVariants = cva(
+  "group/attachment bg-card text-card-foreground focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border transition-colors focus-within:ring-1 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default:
+          "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      orientation: "horizontal",
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> &
+  VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done"
+  }
+
+const {
+  class: className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="attachment"
+  data-state={state}
+  data-size={size}
+  data-orientation={orientation}
+  class={cn(attachmentVariants({ size, orientation }), className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,9 @@
+export { default as Attachment } from "./attachment.astro"
+export { default as AttachmentAction } from "./attachment-action.astro"
+export { default as AttachmentActions } from "./attachment-actions.astro"
+export { default as AttachmentContent } from "./attachment-content.astro"
+export { default as AttachmentDescription } from "./attachment-description.astro"
+export { default as AttachmentGroup } from "./attachment-group.astro"
+export { default as AttachmentMedia } from "./attachment-media.astro"
+export { default as AttachmentTitle } from "./attachment-title.astro"
+export { default as AttachmentTrigger } from "./attachment-trigger.astro"

package/src/components/ui/button/button.astro

@@ -15,12 +15,15 @@ const {
   size,
   ...props
 } = Astro.props
+
+const attributes: Record<string, unknown> = { ...props }
+if (Tag === "button") attributes.type ??= "button"
 ---
 
 <Tag
   data-slot="button"
   class={cn(buttonVariants({ variant, size }), className)}
-  {...props}
+  {...attributes}
 >
   <slot />
 </Tag>

package/src/components/ui/button-group/button-group-separator.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+type Props = HTMLAttributes<"div"> & {
+  orientation?: "horizontal" | "vertical"
+  decorative?: boolean
+}
+
+const {
+  class: className,
+  orientation = "vertical",
+  decorative = true,
+  ...props
+} = Astro.props
+---
+
+<Separator
+  data-slot="button-group-separator"
+  orientation={orientation}
+  decorative={decorative}
+  class={cn(
+    "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+    className
+  )}
+  {...props}
+/>

package/src/components/ui/button-group/button-group-text.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props<Tag extends HTMLTag = "div"> = Polymorphic<{ as: Tag }>
+
+const { as: Tag = "div", class: className, ...props } = Astro.props
+---
+
+<Tag
+  data-slot="button-group-text"
+  class={cn(
+    "bg-muted flex items-center gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Tag>

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

@@ -0,0 +1,20 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+export type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>

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

@@ -0,0 +1,30 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+import {
+  buttonGroupVariants,
+  type ButtonGroupVariantProps,
+} from "./button-group-variants"
+
+type Props<Tag extends HTMLTag = "div"> = Polymorphic<{ as: Tag }> &
+  ButtonGroupVariantProps
+
+const {
+  as: Tag = "div",
+  class: className,
+  orientation = "horizontal",
+  ...props
+} = Astro.props
+---
+
+<Tag
+  role="group"
+  data-slot="button-group"
+  data-orientation={orientation}
+  class={cn(buttonGroupVariants({ orientation }), className)}
+  {...props}
+>
+  <slot />
+</Tag>

package/src/components/ui/button-group/index.ts

@@ -0,0 +1,7 @@
+export { default as ButtonGroup } from "./button-group.astro"
+export { default as ButtonGroupSeparator } from "./button-group-separator.astro"
+export { default as ButtonGroupText } from "./button-group-text.astro"
+export {
+  buttonGroupVariants,
+  type ButtonGroupVariantProps,
+} from "./button-group-variants"

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

@@ -8,17 +8,15 @@ type Props = HTMLAttributes<"div">
 const { class: className, ...props } = Astro.props
 ---
 
-<div class="overflow-hidden" data-slot="carousel-content">
-  <div
-    data-slot="carousel-container"
-    class={cn(
-      "flex [touch-action:pan-y_pinch-zoom]",
-      "group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col",
-      "group-data-[orientation=horizontal]/carousel:-ml-4",
-      className
-    )}
-    {...props}
-  >
-    <slot />
-  </div>
+<div
+  data-slot="carousel-content"
+  class={cn(
+    "no-scrollbar flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain",
+    "group-data-[dragging=true]/carousel:cursor-grabbing",
+    "group-data-[orientation=vertical]/carousel:snap-y group-data-[orientation=vertical]/carousel:flex-col group-data-[orientation=vertical]/carousel:overflow-x-hidden group-data-[orientation=vertical]/carousel:overflow-y-auto group-data-[orientation=vertical]/carousel:overscroll-y-contain",
+    className
+  )}
+  {...props}
+>
+  <slot />
 </div>

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

@@ -10,12 +10,9 @@ const { class: className, ...props } = Astro.props
 
 <div
   data-slot="carousel-item"
-  role="group"
-  aria-roledescription="slide"
   class={cn(
-    "min-w-0 shrink-0 grow-0 basis-full",
-    "group-data-[orientation=horizontal]/carousel:pl-4",
-    "group-data-[orientation=vertical]/carousel:pt-4",
+    "min-w-0 shrink-0 grow-0 basis-full snap-start",
+    "group-data-[orientation=vertical]/carousel:min-h-0",
     className
   )}
   {...props}

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

@@ -11,7 +11,6 @@ const {
   class: className,
   variant = "outline",
   size = "icon-sm",
-  disabled,
   ...props
 } = Astro.props
 ---
@@ -19,8 +18,6 @@ const {
 <button
   type="button"
   data-slot="carousel-next"
-  data-manual-disabled={disabled ? "true" : undefined}
-  disabled={disabled}
   class={cn(
     buttonVariants({ variant, size }),
     "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",

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

@@ -11,7 +11,6 @@ const {
   class: className,
   variant = "outline",
   size = "icon-sm",
-  disabled,
   ...props
 } = Astro.props
 ---
@@ -19,8 +18,6 @@ const {
 <button
   type="button"
   data-slot="carousel-previous"
-  data-manual-disabled={disabled ? "true" : undefined}
-  disabled={disabled}
   class={cn(
     buttonVariants({ variant, size }),
     "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",

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

@@ -1,246 +1,46 @@
 ---
 import type { HTMLAttributes } from "astro/types"
-import type { EmblaOptionsType } from "embla-carousel"
 
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
-  opts?: EmblaOptionsType
+  defaultIndex?: number
   orientation?: "horizontal" | "vertical"
+  drag?: boolean
+  loop?: boolean
 }
 
 const {
   class: className,
-  opts,
+  defaultIndex,
   orientation = "horizontal",
+  drag,
+  loop,
   ...props
 } = Astro.props
-
-const resolvedOpts: EmblaOptionsType = {
-  ...opts,
-  axis: orientation === "horizontal" ? "x" : "y",
-}
 ---
 
 <div
   data-slot="carousel"
+  data-default-index={defaultIndex}
   data-orientation={orientation}
-  data-carousel-options={JSON.stringify(resolvedOpts)}
+  data-drag={drag}
+  data-loop={loop}
   class={cn("group/carousel relative", className)}
-  role="region"
-  aria-roledescription="carousel"
   {...props}
 >
   <slot />
 </div>
 
 <script>
-  import EmblaCarousel, {
-    type EmblaCarouselType,
-    type EmblaOptionsType,
-  } from "embla-carousel"
-
-  type CarouselRoot = HTMLElement & {
-    __fulldevCarouselApi?: EmblaCarouselType
-  }
-
-  type CarouselInstance = {
-    cleanup: () => void
-  }
-
-  type CarouselStore = Map<CarouselRoot, CarouselInstance>
-
-  declare global {
-    interface Window {
-      __fulldevCarouselInitialized?: boolean
-      __fulldevCarouselStore?: CarouselStore
-    }
-  }
-
-  if (!window.__fulldevCarouselInitialized) {
-    window.__fulldevCarouselInitialized = true
-    window.__fulldevCarouselStore ??= new Map<CarouselRoot, CarouselInstance>()
-
-    const store = window.__fulldevCarouselStore
-
-    const getDetails = (api: EmblaCarouselType) => ({
-      api,
-      canScrollPrev: api.canScrollPrev(),
-      canScrollNext: api.canScrollNext(),
-      selectedScrollSnap: api.selectedScrollSnap(),
-      scrollSnapList: api.scrollSnapList(),
-    })
-
-    const emit = (
-      root: CarouselRoot,
-      type: "carousel:init" | "carousel:select",
-      api: EmblaCarouselType
-    ) => {
-      root.dispatchEvent(
-        new CustomEvent(type, {
-          detail: getDetails(api),
-        })
-      )
-    }
-
-    const parseOptions = (root: CarouselRoot): EmblaOptionsType => {
-      const rawOptions = root.getAttribute("data-carousel-options")
-
-      if (!rawOptions) {
-        return {}
-      }
-
-      try {
-        return JSON.parse(rawOptions) as EmblaOptionsType
-      } catch {
-        return {}
-      }
-    }
-
-    const syncButton = (button: Element | null, enabled: boolean) => {
-      if (!(button instanceof HTMLButtonElement)) {
-        return
-      }
-
-      if (button.dataset.manualDisabled === "true") {
-        button.disabled = true
-        return
-      }
-
-      button.disabled = !enabled
-    }
-
-    const cleanupDisconnectedCarousels = () => {
-      for (const [root, instance] of store.entries()) {
-        if (document.contains(root)) {
-          continue
-        }
-
-        instance.cleanup()
-        store.delete(root)
-      }
-    }
-
-    const initCarousel = (root: Element) => {
-      if (!(root instanceof HTMLElement) || store.has(root)) {
-        return
-      }
-
-      const carouselRoot = root as CarouselRoot
-      const viewport = carouselRoot.querySelector(
-        '[data-slot="carousel-content"]'
-      )
-      const prevButton = carouselRoot.querySelector(
-        '[data-slot="carousel-previous"]'
-      )
-      const nextButton = carouselRoot.querySelector(
-        '[data-slot="carousel-next"]'
-      )
-
-      if (!(viewport instanceof HTMLElement)) {
-        return
-      }
-
-      const api = EmblaCarousel(viewport, parseOptions(carouselRoot))
-
-      const sync = () => {
-        const details = getDetails(api)
-
-        carouselRoot.dataset.canScrollPrev = details.canScrollPrev
-          ? "true"
-          : "false"
-        carouselRoot.dataset.canScrollNext = details.canScrollNext
-          ? "true"
-          : "false"
-        carouselRoot.dataset.selectedScrollSnap = String(
-          details.selectedScrollSnap
-        )
-
-        syncButton(prevButton, details.canScrollPrev)
-        syncButton(nextButton, details.canScrollNext)
-
-        emit(carouselRoot, "carousel:select", api)
-      }
-
-      const onPrevClick = () => {
-        api.scrollPrev()
-      }
-
-      const onNextClick = () => {
-        api.scrollNext()
-      }
-
-      const onKeyDown = (event: KeyboardEvent) => {
-        const isVertical = carouselRoot.dataset.orientation === "vertical"
-
-        if (!isVertical && event.key === "ArrowLeft") {
-          event.preventDefault()
-          api.scrollPrev()
-        }
-
-        if (!isVertical && event.key === "ArrowRight") {
-          event.preventDefault()
-          api.scrollNext()
-        }
-
-        if (isVertical && event.key === "ArrowUp") {
-          event.preventDefault()
-          api.scrollPrev()
-        }
-
-        if (isVertical && event.key === "ArrowDown") {
-          event.preventDefault()
-          api.scrollNext()
-        }
-      }
-
-      if (prevButton instanceof HTMLElement) {
-        prevButton.addEventListener("click", onPrevClick)
-      }
-
-      if (nextButton instanceof HTMLElement) {
-        nextButton.addEventListener("click", onNextClick)
-      }
-
-      carouselRoot.addEventListener("keydown", onKeyDown, true)
-
-      api.on("reInit", sync)
-      api.on("select", sync)
-
-      carouselRoot.__fulldevCarouselApi = api
-
-      sync()
-      requestAnimationFrame(() => emit(carouselRoot, "carousel:init", api))
-
-      store.set(carouselRoot, {
-        cleanup: () => {
-          api.off("reInit", sync)
-          api.off("select", sync)
-
-          if (prevButton instanceof HTMLElement) {
-            prevButton.removeEventListener("click", onPrevClick)
-          }
-
-          if (nextButton instanceof HTMLElement) {
-            nextButton.removeEventListener("click", onNextClick)
-          }
-
-          carouselRoot.removeEventListener("keydown", onKeyDown, true)
-          delete carouselRoot.__fulldevCarouselApi
-          api.destroy()
-        },
-      })
-    }
-
-    const initCarousels = () => {
-      cleanupDisconnectedCarousels()
-
-      document
-        .querySelectorAll('[data-slot="carousel"]')
-        .forEach((root) => initCarousel(root))
-    }
-
-    initCarousels()
-    document.addEventListener("astro:page-load", initCarousels)
-  }
+  import { create } from "@data-slot/carousel"
+
+  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/carousel/index.ts

@@ -1,8 +1,4 @@
-export type {
-  EmblaCarouselType as CarouselApi,
-  EmblaOptionsType as CarouselOptions,
-  EmblaPluginType as CarouselPlugin,
-} from "embla-carousel"
+export type { CarouselController, CarouselOptions } from "@data-slot/carousel"
 
 export { default as Carousel } from "./carousel.astro"
 export { default as CarouselContent } from "./carousel-content.astro"

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

@@ -29,6 +29,12 @@ const {
 <script>
   import { create } from "@data-slot/collapsible"
 
-  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/combobox/combobox-content.astro

@@ -38,7 +38,7 @@ const {
     data-align-offset={alignOffset}
     data-avoid-collisions={avoidCollisions}
     data-collision-padding={collisionPadding}
-    class="isolate z-50"
+    class="isolate z-[1000]"
   >
     <div
       data-slot="combobox-content"

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

@@ -4,6 +4,7 @@ import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import InputGroupAddon from "@/components/ui/input-group/input-group-addon.astro"
+import InputGroupButton from "@/components/ui/input-group/input-group-button.astro"
 import InputGroupInput from "@/components/ui/input-group/input-group-input.astro"
 import InputGroup from "@/components/ui/input-group/input-group.astro"
 
@@ -24,7 +25,12 @@ const {
 } = Astro.props
 ---
 
-<InputGroup class={cn("w-auto", className)}>
+<InputGroup
+  class={cn(
+    "has-[[data-slot=combobox-input]:focus-visible]:border-ring has-[[data-slot=combobox-input]:focus-visible]:ring-ring/50 w-auto has-[[data-slot=combobox-input]:focus-visible]:ring-3",
+    className
+  )}
+>
   <InputGroupInput
     type={type}
     data-slot="combobox-input"
@@ -42,14 +48,15 @@ const {
     }
     {
       showClear && (
-        <button
+        <InputGroupButton
           type="button"
+          variant="ghost"
+          size="icon-xs"
           data-slot="combobox-clear"
-          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}
         >
           <XIcon class="pointer-events-none" />
-        </button>
+        </InputGroupButton>
       )
     }
   </InputGroupAddon>

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

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
+import InputGroupButton from "@/components/ui/input-group/input-group-button.astro"
 
 type Props = HTMLAttributes<"button"> & {
   showIcon?: boolean
@@ -16,13 +17,12 @@ const {
 } = Astro.props
 ---
 
-<button
-  type={type}
+<InputGroupButton
+  type={type ?? "button"}
+  variant="ghost"
+  size="icon-xs"
   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
-  )}
+  class={cn("[&_svg]:text-muted-foreground", className)}
   {...props}
 >
   <slot />
@@ -31,4 +31,4 @@ const {
       <ChevronDownIcon class="text-muted-foreground pointer-events-none size-4" />
     )
   }
-</button>
+</InputGroupButton>