fulldev-ui 0.7.0-beta.9 → 0.9.0

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

@@ -0,0 +1,246 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { EmblaOptionsType } from "embla-carousel"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  opts?: EmblaOptionsType
+  orientation?: "horizontal" | "vertical"
+}
+
+const {
+  class: className,
+  opts,
+  orientation = "horizontal",
+  ...props
+} = Astro.props
+
+const resolvedOpts: EmblaOptionsType = {
+  ...opts,
+  axis: orientation === "horizontal" ? "x" : "y",
+}
+---
+
+<div
+  data-slot="carousel"
+  data-orientation={orientation}
+  data-carousel-options={JSON.stringify(resolvedOpts)}
+  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)
+  }
+</script>

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

@@ -1,10 +1,11 @@
-export { default as Carousel } from './Carousel.vue'
-export { default as CarouselContent } from './CarouselContent.vue'
-export { default as CarouselItem } from './CarouselItem.vue'
-export { default as CarouselNext } from './CarouselNext.vue'
-export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export type {
-  UnwrapRefCarouselApi as CarouselApi,
-} from './interface'
+  EmblaCarouselType as CarouselApi,
+  EmblaOptionsType as CarouselOptions,
+  EmblaPluginType as CarouselPlugin,
+} from "embla-carousel"
 
-export { useCarousel } from './useCarousel'
+export { default as Carousel } from "./carousel.astro"
+export { default as CarouselContent } from "./carousel-content.astro"
+export { default as CarouselItem } from "./carousel-item.astro"
+export { default as CarouselPrevious } from "./carousel-previous.astro"
+export { default as CarouselNext } from "./carousel-next.astro"

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

@@ -0,0 +1,63 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = Omit<HTMLAttributes<"input">, "type">
+
+const { class: className, ...props } = Astro.props
+---
+
+<input
+  type="checkbox"
+  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",
+    className
+  )}
+  {...props}
+/>
+
+<style>
+  [data-slot="checkbox"] {
+    color: inherit;
+  }
+
+  [data-slot="checkbox"]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 14px;
+    height: 14px;
+    opacity: 0;
+    background-color: currentColor;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 14px 14px;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: 14px 14px;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 14px 14px;
+  }
+
+  [data-slot="checkbox"]:checked,
+  [data-slot="checkbox"]:indeterminate {
+    color: var(--color-primary-foreground);
+  }
+
+  [data-slot="checkbox"]:checked::before {
+    opacity: 1;
+  }
+
+  [data-slot="checkbox"]:indeterminate::before {
+    opacity: 1;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  }
+</style>

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

@@ -1 +1 @@
-export { default as Checkbox } from './Checkbox.vue'
+export { default as Checkbox } from "./checkbox.astro"

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

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

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

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

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

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  hiddenUntilFound?: boolean
+}
+
+const {
+  class: className,
+  defaultOpen,
+  hiddenUntilFound,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="collapsible"
+  data-default-open={defaultOpen}
+  data-hidden-until-found={hiddenUntilFound}
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/collapsible"
+
+  create()
+</script>

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

@@ -1,3 +1,3 @@
-export { default as Collapsible } from './Collapsible.vue'
-export { default as CollapsibleContent } from './CollapsibleContent.vue'
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
+export { default as Collapsible } from "./collapsible.astro"
+export { default as CollapsibleContent } from "./collapsible-content.astro"
+export { default as CollapsibleTrigger } from "./collapsible-trigger.astro"

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

@@ -0,0 +1,61 @@
+---
+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"> & {
+  side?: ComboboxSide
+  align?: ComboboxAlign
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+}
+
+const {
+  class: className,
+  hidden = true,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  ...props
+} = Astro.props
+---
+
+<div data-slot="combobox-portal">
+  <div
+    data-slot="combobox-positioner"
+    data-side={side}
+    data-align={align}
+    data-side-offset={sideOffset}
+    data-align-offset={alignOffset}
+    data-avoid-collisions={avoidCollisions}
+    data-collision-padding={collisionPadding}
+    class="isolate z-50"
+  >
+    <div
+      data-slot="combobox-content"
+      data-side={side}
+      data-align={align}
+      data-side-offset={sideOffset}
+      data-align-offset={alignOffset}
+      data-avoid-collisions={avoidCollisions}
+      data-collision-padding={collisionPadding}
+      hidden={hidden}
+      class={cn(
+        "group/combobox-content bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 relative z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
+        className
+      )}
+      {...props}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+---
+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="combobox-empty"
+  hidden={hidden}
+  class={cn(
+    "text-muted-foreground hidden w-full items-center justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+    className
+  )}
+  {...props}
+>
+  <slot>No results found.</slot>
+</div>

package/src/components/ui/combobox/combobox-group.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="combobox-group" class={cn(className)} {...props}>
+  <slot />
+</div>

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

@@ -0,0 +1,57 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+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"
+
+import ComboboxTrigger from "./combobox-trigger.astro"
+
+type Props = HTMLAttributes<"input"> & {
+  showTrigger?: boolean
+  showClear?: boolean
+}
+
+const {
+  class: className,
+  type = "text",
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+} = Astro.props
+---
+
+<InputGroup class={cn("w-auto", className)}>
+  <InputGroupInput
+    type={type}
+    data-slot="combobox-input"
+    disabled={disabled}
+    {...props}
+  />
+  <InputGroupAddon align="inline-end">
+    {
+      showTrigger && (
+        <ComboboxTrigger
+          class="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+          disabled={disabled}
+        />
+      )
+    }
+    {
+      showClear && (
+        <button
+          type="button"
+          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}
+        >
+          <Icon name="x" class="pointer-events-none" />
+        </button>
+      )
+    }
+  </InputGroupAddon>
+  <slot />
+</InputGroup>

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

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"div"> & {
+  value?: string
+  disabled?: boolean
+  showIndicator?: boolean
+}
+
+const {
+  class: className,
+  value,
+  disabled,
+  showIndicator = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="combobox-item"
+  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",
+    className
+  )}
+  {...props}
+>
+  <slot />
+  {
+    showIndicator && (
+      <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"
+      >
+        <Icon name="check" class="pointer-events-none" />
+      </span>
+    )
+  }
+</div>

package/src/components/ui/combobox/combobox-label.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="combobox-label"
+  class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/combobox/combobox-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="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",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/combobox/combobox-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="combobox-separator"
+  class={cn("bg-border -mx-1 my-1 h-px", className)}
+  {...props}
+>
+</div>