fulldev-ui 0.7.0 → 0.9.0

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

@@ -4,85 +4,82 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-interface Props
-  extends HTMLAttributes<"header">,
-    VariantProps<typeof variants> {}
-
-const variants = cva(
-  "relative mx-auto flex min-h-12 items-center justify-between gap-8 border border-transparent px-(--banner-px) py-1",
-  {
-    variants: {
-      variant: {
-        default: "bg-foreground text-background w-full",
-        floating: [
-          "bg-foreground text-background rounded-xl shadow-sm",
-          "w-[calc(100%-2*var(--gutter,24px))] max-w-(--banner-width)",
-          "border-border my-2 overflow-hidden rounded-xl border",
-        ],
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
+type Props = HTMLAttributes<"aside"> &
+  VariantProps<typeof variants> & {
+    storageKey?: string
   }
-)
 
-const { class: className, variant, ...props } = Astro.props
+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 slot = await Astro.slots.render("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>
-  // Inline because it needs to run before the banner is rendered
-  if (sessionStorage.getItem("closedBanners")) {
-    document.body.classList.add("banner-hidden")
-  } else {
-    document.body.classList.remove("banner-hidden")
-  }
-</script>
+  const initializedKey = "fulldevBannerInitialized"
 
-{
-  slot?.trim().length > 0 && (
-    <header
-      class={cn(variants({ variant }), className)}
-      data-slot="banner"
-      data-variant={variant}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </header>
-  )
-}
-
-<script>
-  document.querySelectorAll("[data-slot='banner-close']").forEach((btn) => {
-    btn.addEventListener("click", () => {
-      sessionStorage.setItem("closedBanners", "true")
-      document.body.classList.add("banner-hidden")
-    })
-  })
-</script>
+  if (!document.documentElement.dataset[initializedKey]) {
+    document.documentElement.dataset[initializedKey] = "true"
 
-<style is:global>
-  body.banner-hidden [data-slot="banner"] {
-    display: none;
-  }
+    const getStorageToken = (key) => `banner:${key}`
 
-  [data-slot="banner"] {
-    --banner-width: var(--container, var(--breakpoint-xl));
-    --banner-px: max(
-      var(--gutter, 24px),
-      calc((100cqw - var(--banner-width)) / 2)
-    );
-  }
+    const syncBanners = () => {
+      document.querySelectorAll("[data-slot='banner']").forEach((banner) => {
+        if (!(banner instanceof HTMLElement)) return
 
-  [data-slot="banner"][data-variant="floating"] {
-    --banner-px: calc(var(--spacing) * 6);
-  }
+        const storageKey = banner.dataset.bannerStorageKey
 
-  @media (min-width: 1024px) {
-    [data-slot="banner"][data-variant="floating"] {
-      --banner-px: calc(var(--spacing) * 16);
+        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")
+      }
+    })
   }
-</style>
+</script>

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

@@ -1,5 +1,2 @@
 export { default as Banner } from "./banner.astro"
-export { default as BannerContent } from "./banner-content.astro"
-export { default as BannerTitle } from "./banner-title.astro"
-export { default as BannerDescription } from "./banner-description.astro"
-export { default as BannerClose } from "./banner-close.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

@@ -1,74 +1,26 @@
 ---
-import type { HTMLAttributes } from "astro/types"
-import { cva, type VariantProps } from "class-variance-authority"
+import type { HTMLTag, Polymorphic } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = VariantProps<typeof variants> &
-  HTMLAttributes<"button"> &
-  HTMLAttributes<"a"> &
-  HTMLAttributes<"label"> & {
-    as?: "button" | "a" | "label"
-    text?: string
-    html?: string
-  }
+import { buttonVariants, type ButtonVariantProps } from "./button-variants"
 
-const variants = cva(
-  "focus-visible:border-ring text-foreground focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
-        outline:
-          "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+type Props<Tag extends HTMLTag = "button"> = Polymorphic<{ as: Tag }> &
+  ButtonVariantProps
 
 const {
+  as: Tag = "href" in Astro.props ? "a" : "button",
   class: className,
   variant,
   size,
-  href,
-  text,
-  html,
   ...props
 } = Astro.props
-
-const slot = await Astro.slots.render("default")
-
-const Comp = href ? "a" : "button"
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <Comp
-      data-slot="button"
-      class={cn(variants({ variant, size }), className)}
-      href={href}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </Comp>
-  )
-}
+<Tag
+  data-slot="button"
+  class={cn(buttonVariants({ variant, size }), className)}
+  {...props}
+>
+  <slot />
+</Tag>

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

@@ -1 +1,3 @@
+export { buttonVariants, type ButtonVariantProps } from "./button-variants"
+
 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

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