fulldev-ui 0.7.0-beta.9 → 0.7.0

package/src/components/ui/marquee/marquee.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  class={cn(
+    "group/marquee flex justify-stretch overflow-hidden select-none",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,5 @@
+export { default as NativeCarousel } from "./native-carousel.astro"
+export { default as NativeCarouselContent } from "./native-carousel-content.astro"
+export { default as NativeCarouselItem } from "./native-carousel-item.astro"
+export { default as NativeCarouselPrevious } from "./native-carousel-previous.astro"
+export { default as NativeCarouselNext } from "./native-carousel-next.astro"

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

@@ -0,0 +1,92 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  class={cn(
+    "flex snap-x snap-mandatory overflow-x-auto scroll-smooth",
+    "scrollbar-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+    "group-data-[orientation=vertical]/native-carousel:snap-y group-data-[orientation=vertical]/native-carousel:flex-col group-data-[orientation=vertical]/native-carousel:overflow-y-auto",
+    className
+  )}
+  data-slot="native-carousel-content"
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  // Add smooth scrolling behavior and snap support
+  document.addEventListener("DOMContentLoaded", () => {
+    const carousels = document.querySelectorAll('[data-slot="native-carousel"]')
+
+    carousels.forEach((carousel) => {
+      const content = carousel.querySelector(
+        '[data-slot="native-carousel-content"]'
+      ) as HTMLElement
+      const prevButton = carousel.querySelector(
+        '[data-slot="native-carousel-previous"]'
+      ) as HTMLButtonElement
+      const nextButton = carousel.querySelector(
+        '[data-slot="native-carousel-next"]'
+      ) as HTMLButtonElement
+
+      if (!content) return
+
+      const orientation =
+        carousel.getAttribute("data-orientation") || "horizontal"
+      const isVertical = orientation === "vertical"
+
+      const updateButtons = () => {
+        if (!prevButton || !nextButton) return
+
+        const scrollPos = isVertical ? content.scrollTop : content.scrollLeft
+        const maxScroll = isVertical
+          ? content.scrollHeight - content.clientHeight
+          : content.scrollWidth - content.clientWidth
+
+        prevButton.disabled = scrollPos <= 0
+        nextButton.disabled = scrollPos >= maxScroll - 1
+      }
+
+      const scroll = (direction: "next" | "prev") => {
+        const items = Array.from(
+          content.querySelectorAll('[data-slot="native-carousel-item"]')
+        ) as HTMLElement[]
+
+        if (items.length === 0) return
+
+        const itemSize = isVertical
+          ? items[0].offsetHeight
+          : items[0].offsetWidth
+        const scrollAmount =
+          itemSize + parseFloat(getComputedStyle(items[0]).marginRight || "0")
+
+        const delta = direction === "next" ? scrollAmount : -scrollAmount
+
+        if (isVertical) {
+          content.scrollBy({ top: delta, behavior: "smooth" })
+        } else {
+          content.scrollBy({ left: delta, behavior: "smooth" })
+        }
+      }
+
+      if (prevButton) {
+        prevButton.addEventListener("click", () => scroll("prev"))
+      }
+
+      if (nextButton) {
+        nextButton.addEventListener("click", () => scroll("next"))
+      }
+
+      content.addEventListener("scroll", updateButtons)
+      updateButtons()
+    })
+  })
+</script>

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  class={cn("min-w-0 shrink-0 grow-0 basis-full snap-start", className)}
+  data-slot="native-carousel-item"
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import ChevronRightIcon from "lucide-static/icons/chevron-right.svg"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends Omit<HTMLAttributes<"button">, "type"> {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  class={cn(
+    "border-input bg-background hover:bg-accent hover:text-accent-foreground absolute top-1/2 -right-12 z-10 flex size-8 -translate-y-1/2 items-center justify-center rounded-md border shadow-sm transition-colors disabled:pointer-events-none disabled:opacity-50",
+    "group-data-[orientation=vertical]/native-carousel:top-auto group-data-[orientation=vertical]/native-carousel:right-1/2 group-data-[orientation=vertical]/native-carousel:-bottom-12 group-data-[orientation=vertical]/native-carousel:-translate-x-1/2 group-data-[orientation=vertical]/native-carousel:translate-y-0 group-data-[orientation=vertical]/native-carousel:rotate-90",
+    className
+  )}
+  data-slot="native-carousel-next"
+  {...props}
+>
+  <ChevronRightIcon class="size-4" aria-hidden="true" />
+  <span class="sr-only">Next slide</span>
+</button>

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

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import ChevronLeftIcon from "lucide-static/icons/chevron-left.svg"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends Omit<HTMLAttributes<"button">, "type"> {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  class={cn(
+    "border-input bg-background hover:bg-accent hover:text-accent-foreground absolute top-1/2 -left-12 z-10 flex size-8 -translate-y-1/2 items-center justify-center rounded-md border shadow-sm transition-colors disabled:pointer-events-none disabled:opacity-50",
+    "group-data-[orientation=vertical]/native-carousel:-top-12 group-data-[orientation=vertical]/native-carousel:left-1/2 group-data-[orientation=vertical]/native-carousel:-translate-x-1/2 group-data-[orientation=vertical]/native-carousel:translate-y-0 group-data-[orientation=vertical]/native-carousel:rotate-90",
+    className
+  )}
+  data-slot="native-carousel-previous"
+  {...props}
+>
+  <ChevronLeftIcon class="size-4" aria-hidden="true" />
+  <span class="sr-only">Previous slide</span>
+</button>

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {
+  orientation?: "horizontal" | "vertical"
+}
+
+const { class: className, orientation = "horizontal", ...props } = Astro.props
+---
+
+<div
+  class={cn("relative", className)}
+  data-slot="native-carousel"
+  data-orientation={orientation}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/native-select/index.ts

@@ -0,0 +1,3 @@
+export { default as NativeSelect } from "./native-select.astro"
+export { default as NativeSelectOption } from "./native-select-option.astro"
+export { default as NativeSelectOptGroup } from "./native-select-optgroup.astro"

package/src/components/ui/native-select/native-select-optgroup.astro

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

package/src/components/ui/native-select/native-select-option.astro

@@ -0,0 +1,12 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+interface Props extends HTMLAttributes<"option"> {}
+
+const { ...props } = Astro.props
+---
+
+<option data-slot="native-select-option" {...props}>
+  <slot />
+</option>
+

package/src/components/ui/native-select/native-select.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import ChevronDownIcon from "lucide-static/icons/chevron-down.svg"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"select"> {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+  data-slot="native-select-wrapper"
+>
+  <select
+    data-slot="native-select"
+    class={cn(
+      "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+      className
+    )}
+    {...props}
+  >
+    <slot />
+  </select>
+  <ChevronDownIcon
+    class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+    aria-hidden="true"
+    data-slot="native-select-icon"
+  />
+</div>
+

package/src/components/ui/navigation-menu/index.ts

@@ -1,14 +1,9 @@
-import { cva } from 'class-variance-authority'
-
-export { default as NavigationMenu } from './NavigationMenu.vue'
-export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
-export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
-export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
-export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
-export { default as NavigationMenuList } from './NavigationMenuList.vue'
-export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
-export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'
-
-export const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
-)
+export { default as NavigationMenu } from "./navigation-menu.astro"
+export { default as NavigationMenuContent } from "./navigation-menu-content.astro"
+export { default as NavigationMenuItem } from "./navigation-menu-item.astro"
+export { default as NavigationMenuLink } from "./navigation-menu-link.astro"
+export { default as NavigationMenuList } from "./navigation-menu-list.astro"
+export { default as NavigationMenuSub } from "./navigation-menu-sub.astro"
+export { default as NavigationMenuSubItem } from "./navigation-menu-sub-item.astro"
+export { default as NavigationMenuSubLink } from "./navigation-menu-sub-link.astro"
+export { default as NavigationMenuTrigger } from "./navigation-menu-trigger.astro"

package/src/components/ui/navigation-menu/navigation-menu-content.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      data-slot="navigation-menu-content"
+      class={cn(
+        "bg-popover text-popover-foreground invisible absolute top-full left-0 z-50 mt-1.5 w-auto -translate-y-1 overflow-hidden rounded-md border p-2 pr-2.5 opacity-0 shadow transition-all duration-200 group-focus-within/navigation-menu-item:visible group-focus-within/navigation-menu-item:translate-y-0 group-focus-within/navigation-menu-item:opacity-100 group-hover/navigation-menu-item:visible group-hover/navigation-menu-item:translate-y-0 group-hover/navigation-menu-item:opacity-100 before:absolute before:top-0 before:right-0 before:left-0 before:h-2 before:-translate-y-full before:content-[''] hover:visible hover:translate-y-0 hover:opacity-100",
+        "navigation-menu-content",
+        className
+      )}
+      role="menu"
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/navigation-menu/navigation-menu-item.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"li"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <li
+      data-slot="navigation-menu-item"
+      class={cn("relative", "group/navigation-menu-item", className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </li>
+  )
+}

package/src/components/ui/navigation-menu/navigation-menu-link.astro

@@ -0,0 +1,49 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const variants = cva(
+  "focus-visible:ring-ring/50 inline-flex w-full items-start justify-start rounded-md transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-none",
+  {
+    variants: {
+      variant: {
+        default:
+          "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex-col gap-1 p-2 text-sm [&_svg:not([class*='size-'])]:size-4",
+        trigger:
+          "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground h-9 w-max px-4 py-2 text-sm font-medium disabled:pointer-events-none disabled:opacity-50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+interface Props extends HTMLAttributes<"a">, VariantProps<typeof variants> {
+  active?: boolean
+}
+
+const { class: className, variant, href, active, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <a
+      data-slot="navigation-menu-link"
+      class={cn(
+        variants({ variant }),
+        active &&
+          "bg-accent/50 text-accent-foreground hover:bg-accent focus:bg-accent",
+        className
+      )}
+      href={href}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </a>
+  )
+}

package/src/components/ui/navigation-menu/navigation-menu-list.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"ul"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <ul
+      data-slot="navigation-menu-list"
+      class={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </ul>
+  )
+}

package/src/components/ui/navigation-menu/navigation-menu-sub-item.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"li"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <li
+      data-slot="navigation-menu-sub-item"
+      class={cn("w-full", className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </li>
+  )
+}

package/src/components/ui/navigation-menu/navigation-menu-sub-link.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"a"> {}
+
+const { class: className, href, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <a
+      data-slot="navigation-menu-sub-link"
+      class={cn(
+        "hover:bg-accent hover:text-accent-foreground inline-flex w-full items-center justify-start rounded-md p-2 text-sm transition-colors",
+        className
+      )}
+      href={href}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </a>
+  )
+}

package/src/components/ui/navigation-menu/navigation-menu-sub.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"ul"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <ul
+      data-slot="navigation-menu-sub"
+      class={cn("flex min-w-[200px] flex-col gap-2", className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </ul>
+  )
+}

package/src/components/ui/navigation-menu/navigation-menu-trigger.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import ChevronDown from "lucide-static/icons/chevron-down.svg"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"button"> & HTMLAttributes<"a">
+
+const { class: className, href, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+
+const Comp = href ? "a" : "button"
+---
+
+{
+  slot?.trim().length > 0 && (
+    <Comp
+      data-slot="navigation-menu-trigger"
+      class={cn(
+        "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+        "navigation-menu-trigger cursor-pointer [&:where(button)]:border-none [&:where(button)]:bg-transparent",
+        className
+      )}
+      href={href}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+      <ChevronDown class="relative top-[1px] ml-1 size-3 transition-transform duration-300 group-focus-within/navigation-menu-item:rotate-180 group-hover/navigation-menu-item:rotate-180" />
+    </Comp>
+  )
+}

package/src/components/ui/navigation-menu/navigation-menu.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"nav"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <nav
+      data-slot="navigation-menu"
+      class={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </nav>
+  )
+}

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

@@ -0,0 +1,3 @@
+export { default as Price } from "./price.astro"
+export { default as PriceUnit } from "./price-unit.astro"
+export { default as PriceValue } from "./price-value.astro"

package/src/components/ui/price/price-unit.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"span"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <span
+      class={cn("text-muted-foreground text-sm leading-tight", className)}
+      {...props}
+    >
+      / <Fragment set:html={slot} />
+    </span>
+  )
+}

package/src/components/ui/price/price-value.astro

@@ -0,0 +1,48 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends VariantProps<typeof variants>, HTMLAttributes<"span"> {
+  price?: number | string
+  currency?: string
+  locale?: string
+  variant?: "default" | "sale"
+}
+
+const variants = cva("leading-tight", {
+  variants: {
+    variant: {
+      default: "text-foreground",
+      sale: "text-muted-foreground line-through",
+    },
+  },
+})
+
+const {
+  class: className,
+  price,
+  currency = "USD",
+  locale = "en-US",
+  variant = "default",
+  ...props
+} = Astro.props
+
+// Format price with currency only if it's a number
+const formattedPrice =
+  typeof price === "number"
+    ? new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: currency,
+      }).format(price)
+    : price
+---
+
+{
+  price && (
+    <span class={cn(variants({ variant }), className)} {...props}>
+      {formattedPrice}
+    </span>
+  )
+}

package/src/components/ui/price/price.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      class={cn("flex flex-wrap items-center gap-x-2", className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}