fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/banner/banner.astro

@@ -0,0 +1,85 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"aside"> &
+  VariantProps<typeof variants> & {
+    storageKey?: string
+  }
+
+const variants = cva("relative flex items-center py-2", {
+  variants: {
+    variant: {
+      default: "bg-foreground text-background w-full",
+      floating:
+        "bg-background mx-auto my-2 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-lg border shadow-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+const { class: className, variant, storageKey, ...props } = Astro.props
+---
+
+<aside
+  class={cn(variants({ variant }), className)}
+  data-slot="banner"
+  data-banner-storage-key={storageKey}
+  data-variant={variant}
+  {...props}
+>
+  <slot />
+</aside>
+
+<script is:inline>
+  const initializedKey = "fulldevBannerInitialized"
+
+  if (!document.documentElement.dataset[initializedKey]) {
+    document.documentElement.dataset[initializedKey] = "true"
+
+    const getStorageToken = (key) => `banner:${key}`
+
+    const syncBanners = () => {
+      document.querySelectorAll("[data-slot='banner']").forEach((banner) => {
+        if (!(banner instanceof HTMLElement)) return
+
+        const storageKey = banner.dataset.bannerStorageKey
+
+        if (
+          storageKey &&
+          sessionStorage.getItem(getStorageToken(storageKey)) === "hidden"
+        ) {
+          banner.hidden = true
+        }
+      })
+    }
+
+    syncBanners()
+
+    document.addEventListener("click", (event) => {
+      const target = event.target
+
+      if (!(target instanceof Element)) return
+
+      const closeButton = target.closest("[data-slot='banner-close']")
+
+      if (!(closeButton instanceof HTMLElement)) return
+
+      const banner = closeButton.closest("[data-slot='banner']")
+
+      if (!(banner instanceof HTMLElement)) return
+
+      banner.hidden = true
+
+      const storageKey = banner.dataset.bannerStorageKey
+
+      if (storageKey) {
+        sessionStorage.setItem(getStorageToken(storageKey), "hidden")
+      }
+    })
+  }
+</script>

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

@@ -0,0 +1,2 @@
+export { default as Banner } from "./banner.astro"
+export { default as BannerContainer } from "./banner-container.astro"

package/src/components/ui/breadcrumb/breadcrumb-ellipsis.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="breadcrumb-ellipsis"
+  role="presentation"
+  aria-hidden="true"
+  class={cn(
+    "flex size-5 items-center justify-center [&>svg]:size-4",
+    className
+  )}
+  {...props}
+>
+  <Icon name="ellipsis" />
+  <span class="sr-only">More</span>
+</span>

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"li">
+
+const { class: className, ...props } = Astro.props
+---
+
+<li
+  data-slot="breadcrumb-item"
+  class={cn("inline-flex items-center gap-1.5", className)}
+  {...props}
+>
+  <slot />
+</li>

package/src/components/ui/breadcrumb/breadcrumb-link.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props<Tag extends HTMLTag = "a"> = Polymorphic<{ as: Tag }>
+
+const { as: Tag = "a", class: className, ...props } = Astro.props
+---
+
+<Tag
+  data-slot="breadcrumb-link"
+  class={cn("hover:text-foreground transition-colors", className)}
+  {...props}
+>
+  <slot />
+</Tag>

package/src/components/ui/breadcrumb/breadcrumb-list.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"ol">
+
+const { class: className, ...props } = Astro.props
+---
+
+<ol
+  data-slot="breadcrumb-list"
+  class={cn(
+    "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</ol>

package/src/components/ui/breadcrumb/breadcrumb-page.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="breadcrumb-page"
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  class={cn("text-foreground font-normal", className)}
+  {...props}
+>
+  <slot />
+</span>

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"li">
+
+const { class: className, ...props } = Astro.props
+---
+
+<li
+  data-slot="breadcrumb-separator"
+  role="presentation"
+  aria-hidden="true"
+  class={cn("[&>svg]:size-3.5", className)}
+  {...props}
+>
+  {Astro.slots.has("default") ? <slot /> : <Icon name="chevron-right" />}
+</li>

package/src/components/ui/breadcrumb/breadcrumb.astro

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

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

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./breadcrumb.astro"
+export { default as BreadcrumbEllipsis } from "./breadcrumb-ellipsis.astro"
+export { default as BreadcrumbItem } from "./breadcrumb-item.astro"
+export { default as BreadcrumbLink } from "./breadcrumb-link.astro"
+export { default as BreadcrumbList } from "./breadcrumb-list.astro"
+export { default as BreadcrumbPage } from "./breadcrumb-page.astro"
+export { default as BreadcrumbSeparator } from "./breadcrumb-separator.astro"

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

@@ -0,0 +1,39 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const buttonVariants = cva(
+  "group/button focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "!border-border bg-background hover:bg-muted hover:text-foreground dark:!border-input dark:bg-input/30 dark:hover:bg-input/50 shadow-xs",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-[>svg:first-child]:pl-2 has-[>svg:last-child]:pr-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-[>svg:first-child]:pl-1.5 has-[>svg:last-child]:pr-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-[>svg:first-child]:pl-1.5 has-[>svg:last-child]:pr-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-[>svg:first-child]:pl-2 has-[>svg:last-child]:pr-2",
+        icon: "size-9",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+import { buttonVariants, type ButtonVariantProps } from "./button-variants"
+
+type Props<Tag extends HTMLTag = "button"> = Polymorphic<{ as: Tag }> &
+  ButtonVariantProps
+
+const {
+  as: Tag = "href" in Astro.props ? "a" : "button",
+  class: className,
+  variant,
+  size,
+  ...props
+} = Astro.props
+---
+
+<Tag
+  data-slot="button"
+  class={cn(buttonVariants({ variant, size }), className)}
+  {...props}
+>
+  <slot />
+</Tag>

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

@@ -1,31 +1,3 @@
-import { cva, type VariantProps } from 'class-variance-authority'
+export { buttonVariants, type ButtonVariantProps } from "./button-variants"
 
-export { default as Button } from './Button.vue'
-
-export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>
+export { default as Button } from "./button.astro"

package/src/components/ui/card/card-action.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="card-action"
+  class={cn(
+    "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/card/card-content.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="card-content"
+  class={cn("px-6 group-data-[size=sm]/card:px-4", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/card/card-description.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="card-description"
+  class={cn("text-muted-foreground text-sm", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/card/card-footer.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="card-footer"
+  class={cn(
+    "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/card/card-header.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="card-header"
+  class={cn(
+    "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/card/card-title.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="card-title"
+  class={cn(
+    "text-base leading-normal font-medium group-data-[size=sm]/card:text-sm",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/card/card.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  size?: "default" | "sm"
+}
+
+const { class: className, size = "default", ...props } = Astro.props
+---
+
+<div
+  data-slot="card"
+  data-size={size}
+  class={cn(
+    "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -1,6 +1,7 @@
-export { default as Card } from './Card.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardFooter } from './CardFooter.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
+export { default as Card } from "./card.astro"
+export { default as CardAction } from "./card-action.astro"
+export { default as CardContent } from "./card-content.astro"
+export { default as CardDescription } from "./card-description.astro"
+export { default as CardFooter } from "./card-footer.astro"
+export { default as CardHeader } from "./card-header.astro"
+export { default as CardTitle } from "./card-title.astro"

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

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+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>

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

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+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",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants, type ButtonVariantProps } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+
+type Props = Omit<HTMLAttributes<"button">, "type"> & ButtonVariantProps
+
+const {
+  class: className,
+  variant = "outline",
+  size = "icon-sm",
+  disabled,
+  ...props
+} = Astro.props
+---
+
+<button
+  type="button"
+  data-slot="carousel-next"
+  data-manual-disabled={disabled ? "true" : undefined}
+  disabled={disabled}
+  class={cn(
+    buttonVariants({ variant, size }),
+    "absolute top-1/2 -right-12 z-10 -translate-y-1/2 touch-manipulation rounded-full",
+    "group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90",
+    className
+  )}
+  {...props}
+>
+  <slot>
+    <Icon name="chevron-right" class="size-4" aria-hidden="true" />
+    <span class="sr-only">Next slide</span>
+  </slot>
+</button>

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

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants, type ButtonVariantProps } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+
+type Props = Omit<HTMLAttributes<"button">, "type"> & ButtonVariantProps
+
+const {
+  class: className,
+  variant = "outline",
+  size = "icon-sm",
+  disabled,
+  ...props
+} = Astro.props
+---
+
+<button
+  type="button"
+  data-slot="carousel-previous"
+  data-manual-disabled={disabled ? "true" : undefined}
+  disabled={disabled}
+  class={cn(
+    buttonVariants({ variant, size }),
+    "absolute top-1/2 -left-12 z-10 -translate-y-1/2 touch-manipulation rounded-full",
+    "group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90",
+    className
+  )}
+  {...props}
+>
+  <slot>
+    <Icon name="chevron-left" class="size-4" aria-hidden="true" />
+    <span class="sr-only">Previous slide</span>
+  </slot>
+</button>