fulldev-ui 0.9.2 → 0.10.0

package/src/components/blocks/article-1.astro

@@ -69,7 +69,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-16/10 w-full rounded-xl object-cover"
+      class="aspect-[16/10] w-full rounded-xl object-cover"
       widths={[640, 960]}
       sizes="(min-width: 42rem) 42rem, 100vw"
     />

package/src/components/blocks/article-2.astro

@@ -69,7 +69,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-16/10 w-full rounded-xl object-cover"
+      class="aspect-[16/10] w-full rounded-xl object-cover"
       widths={[640, 960]}
       sizes="(min-width: 42rem) 42rem, 100vw"
     />

package/src/components/blocks/articles-1.astro

@@ -63,7 +63,7 @@ const { class: className, badge, title, description, articles } = Astro.props
             <Image
               src={article.image.src}
               alt={article.image.alt}
-              class="-mx-4 -mt-4 aspect-video w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
+              class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
               widths={[480, 720, 960]}
               sizes="(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw"
             />

package/src/components/blocks/articles-2.astro

@@ -80,7 +80,7 @@ const {
       <Image
         src={featured.image.src}
         alt={featured.image.alt}
-        class="aspect-4/3 rounded-lg object-cover transition-opacity group-hover:opacity-85"
+        class="aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85"
         widths={[640, 960, 1280]}
         sizes="(min-width: 64rem) 50vw, 100vw"
       />
@@ -120,7 +120,7 @@ const {
             <Image
               src={article.image.src}
               alt={article.image.alt}
-              class="-mx-4 -mt-4 aspect-video w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
+              class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
               widths={[480, 720]}
               sizes="(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw"
             />

package/src/components/blocks/articles-3.astro

@@ -61,7 +61,7 @@ const { class: className, badge, title, articles } = Astro.props
             <Image
               src={article.image.src}
               alt={article.image.alt}
-              class="-mx-4 -mt-4 aspect-video w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
+              class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
               widths={[480, 720]}
               sizes="(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw"
             />

package/src/components/blocks/banner-1.astro

@@ -1,7 +1,8 @@
 ---
+import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
+
 import { cn } from "@/lib/utils"
 import { Banner, BannerContainer } from "@/components/ui/banner"
-import { Icon } from "@/components/ui/icon"
 
 type Props = {
   class?: string
@@ -33,10 +34,7 @@ const { class: className, title, description, link } = Astro.props
           class="group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80"
         >
           {link.label}
-          <Icon
-            name="arrow-right"
-            class="size-3.5 transition-transform group-hover/link:translate-x-0.5"
-          />
+          <ArrowRightIcon class="size-3.5 transition-transform group-hover/link:translate-x-0.5" />
         </a>
       )
     }

package/src/components/blocks/banner-2.astro

@@ -20,7 +20,7 @@ const { class: className, title, description, buttons } = Astro.props
 <Banner variant="floating" storageKey="banner-2" class={cn("", className)}>
   <BannerContainer class="gap-4 py-1" showClose={false}>
     <div
-      class="flex flex-1 flex-col gap-0.5 lg:flex-row lg:items-center lg:gap-x-4"
+      class="flex flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4"
     >
       <p class="text-sm font-semibold">{title}</p>
       <p class="text-muted-foreground text-sm">{description}</p>

package/src/components/blocks/blocks-1.astro

@@ -1,4 +1,14 @@
 ---
+import ArrowLeft from "@lucide/astro/icons/arrow-left"
+import ArrowRight from "@lucide/astro/icons/arrow-right"
+import Check from "@lucide/astro/icons/check"
+import ChevronDown from "@lucide/astro/icons/chevron-down"
+import Copy from "@lucide/astro/icons/copy"
+import ExternalLink from "@lucide/astro/icons/external-link"
+import Claude from "simple-icons-astro/Claude"
+import Cursor from "simple-icons-astro/Cursor"
+import Markdown from "simple-icons-astro/Markdown"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { buttonVariants } from "@/components/ui/button/button-variants"
@@ -7,7 +17,6 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Icon } from "@/components/ui/icon"
 import { SectionContainer } from "@/components/ui/section"
 import {
   Typography,
@@ -93,7 +102,7 @@ const openLinks = markdownUrl
   data-slot="blocks-page"
   class={cn("gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12", className)}
 >
-  <div class="mx-auto flex w-full max-w-336 flex-col gap-10">
+  <div class="mx-auto flex w-full max-w-[84rem] flex-col gap-10">
     <header
       class="flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between"
     >
@@ -122,8 +131,8 @@ const openLinks = markdownUrl
               data-source={copyButton?.source}
               aria-label={labels.copyMarkdown}
             >
-              <Icon name="copy" class="blocks-copy-icon size-3.5" />
-              <Icon name="check" class="blocks-check-icon hidden size-3.5" />
+              <Copy class="blocks-copy-icon size-3.5" />
+              <Check class="blocks-check-icon hidden size-3.5" />
               <span>{labels.copyMarkdown}</span>
             </Button>
           )
@@ -135,7 +144,7 @@ const openLinks = markdownUrl
                 class={buttonVariants({ variant: "outline", size: "xs" })}
               >
                 <span>{labels.openIn}</span>
-                <Icon name="chevron-down" class="size-3.5 opacity-70" />
+                <ChevronDown class="size-3.5 opacity-70" />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" sideOffset={6} class="w-56">
                 {openLinks.map((link) => (
@@ -145,9 +154,7 @@ const openLinks = markdownUrl
                     rel="noreferrer noopener"
                     class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none"
                   >
-                    {link.icon === "markdown" && (
-                      <Icon name="markdown" class="size-4 fill-current" />
-                    )}
+                    {link.icon === "markdown" && <Markdown class="size-4" />}
                     {link.icon === "chatgpt" && (
                       <svg
                         role="img"
@@ -159,17 +166,10 @@ const openLinks = markdownUrl
                         <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" />
                       </svg>
                     )}
-                    {link.icon === "claude" && (
-                      <Icon name="claude" class="size-4 fill-current" />
-                    )}
-                    {link.icon === "cursor" && (
-                      <Icon name="cursor" class="size-4 fill-current" />
-                    )}
+                    {link.icon === "claude" && <Claude class="size-4" />}
+                    {link.icon === "cursor" && <Cursor class="size-4" />}
                     <span>{link.label}</span>
-                    <Icon
-                      name="external-link"
-                      class="text-muted-foreground ml-auto size-3.5"
-                    />
+                    <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
                   </a>
                 ))}
               </DropdownMenuContent>
@@ -179,7 +179,7 @@ const openLinks = markdownUrl
       </div>
     </header>
 
-    <Typography as="article" class="w-full max-w-none" size="sm">
+    <Typography as="article" class="w-full max-w-none">
       <slot />
     </Typography>
 
@@ -196,7 +196,7 @@ const openLinks = markdownUrl
               variant="outline"
               class="h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal"
             >
-              <Icon name="arrow-left" class="size-4" />
+              <ArrowLeft class="size-4" />
               <span class="truncate text-sm font-medium">
                 {previousPage.title}
               </span>
@@ -213,7 +213,7 @@ const openLinks = markdownUrl
               class="h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal"
             >
               <span class="truncate text-sm font-medium">{nextPage.title}</span>
-              <Icon name="arrow-right" class="size-4" />
+              <ArrowRight class="size-4" />
             </Button>
           ) : (
             <div aria-hidden="true" />
@@ -228,27 +228,13 @@ const openLinks = markdownUrl
   const button = copyButtonId ? document.getElementById(copyButtonId) : null
 
   if (button instanceof HTMLButtonElement) {
-    const writeToClipboard = async (text) => {
-      if (navigator.clipboard && window.isSecureContext) {
-        try {
-          await navigator.clipboard.writeText(text)
-          return true
-        } catch {
-          return false
-        }
-      }
-
-      return false
-    }
-
     button.addEventListener("click", async () => {
       const source = button.dataset.source
 
       if (!source) return
 
-      const copied = await writeToClipboard(source)
-
-      if (copied) {
+      try {
+        await navigator.clipboard.writeText(source)
         button.querySelector(".blocks-copy-icon")?.classList.add("hidden")
         button.querySelector(".blocks-check-icon")?.classList.remove("hidden")
 
@@ -256,6 +242,8 @@ const openLinks = markdownUrl
           button.querySelector(".blocks-copy-icon")?.classList.remove("hidden")
           button.querySelector(".blocks-check-icon")?.classList.add("hidden")
         }, 1200)
+      } catch {
+        // Ignore clipboard failures; the button remains available for retry.
       }
     })
   }

package/src/components/blocks/contact-3.astro

@@ -15,6 +15,7 @@ import { Icon } from "@/components/ui/icon"
 import { Input } from "@/components/ui/input"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Textarea } from "@/components/ui/textarea"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -36,7 +37,7 @@ type Props = {
     messagePlaceholder: string
     actionLabel: string
   }
-  image: {
+  image?: {
     src: ImageMetadata
     alt: string
   }
@@ -48,7 +49,7 @@ const {
   description,
   contactItems,
   form,
-  image,
+  image = { src: PlaceholderImage, alt: "Contact image" },
 } = Astro.props
 ---
 
@@ -136,7 +137,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-3/4 w-full rounded-xl border object-cover lg:sticky lg:top-24"
+      class="aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 50vw, 100vw"
     />

package/src/components/blocks/content-1.astro

@@ -1,11 +1,12 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -17,7 +18,7 @@ type Props = {
     href: string
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image: {
+  image?: {
     src: ImageMetadata
     alt: string
   }
@@ -29,7 +30,7 @@ const {
   description,
   features,
   buttons,
-  image,
+  image = { src: PlaceholderImage, alt: "Content image" },
 } = Astro.props
 ---
 
@@ -50,7 +51,7 @@ const {
         <ul class="flex flex-col gap-3">
           {features.map((feature) => (
             <li class="flex items-center gap-3 text-sm">
-              <Icon name="check" class="text-primary size-4 shrink-0" />
+              <CheckIcon class="text-primary size-4 shrink-0" />
               {feature}
             </li>
           ))}

package/src/components/blocks/content-2.astro

@@ -1,11 +1,12 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -17,7 +18,7 @@ type Props = {
     href: string
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image: {
+  image?: {
     src: ImageMetadata
     alt: string
   }
@@ -29,7 +30,7 @@ const {
   description,
   features,
   buttons,
-  image,
+  image = { src: PlaceholderImage, alt: "Content image" },
 } = Astro.props
 ---
 
@@ -51,7 +52,7 @@ const {
           <ul class="flex flex-col gap-3">
             {features.map((feature) => (
               <li class="flex items-center gap-3 text-sm">
-                <Icon name="check" class="text-primary size-4 shrink-0" />
+                <CheckIcon class="text-primary size-4 shrink-0" />
                 {feature}
               </li>
             ))}
@@ -81,7 +82,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-4/3 w-full rounded-xl border object-cover"
+      class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 50vw, 100vw"
     />

package/src/components/blocks/content-3.astro

@@ -5,6 +5,7 @@ import { Image } from "astro:assets"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -15,13 +16,19 @@ type Props = {
     href: string
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image: {
+  image?: {
     src: ImageMetadata
     alt: string
   }
 }
 
-const { class: className, title, description, buttons, image } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  image = { src: PlaceholderImage, alt: "Content image" },
+} = Astro.props
 ---
 
 <Section class={cn("", className)}>

package/src/components/blocks/content-4.astro

@@ -1,11 +1,12 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -17,7 +18,7 @@ type Props = {
     href: string
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image: {
+  image?: {
     src: ImageMetadata
     alt: string
   }
@@ -29,7 +30,7 @@ const {
   description,
   features,
   buttons,
-  image,
+  image = { src: PlaceholderImage, alt: "Content image" },
 } = Astro.props
 ---
 
@@ -52,7 +53,7 @@ const {
             <ul class="flex flex-col gap-3">
               {features.map((feature) => (
                 <li class="flex items-center gap-3 text-sm">
-                  <Icon name="check" class="text-primary size-4 shrink-0" />
+                  <CheckIcon class="text-primary size-4 shrink-0" />
                   {feature}
                 </li>
               ))}
@@ -82,7 +83,7 @@ const {
       <Image
         src={image.src}
         alt={image.alt}
-        class="aspect-4/3 w-full rounded-xl border object-cover"
+        class="aspect-[4/3] w-full rounded-xl border object-cover"
         widths={[640, 960, 1280]}
         sizes="(min-width: 1024px) 66vw, 100vw"
       />

package/src/components/blocks/cta-2.astro

@@ -12,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -31,7 +32,7 @@ type Props = {
     rating: number
     text: string
   }
-  image: {
+  image?: {
     src: ImageMetadata
     alt: string
   }
@@ -43,7 +44,7 @@ const {
   description,
   buttons,
   socialProof,
-  image,
+  image = { src: PlaceholderImage, alt: "CTA image" },
 } = Astro.props
 ---
 
@@ -106,7 +107,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-4/3 w-full rounded-xl border object-cover"
+      class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 50vw, 100vw"
     />

package/src/components/blocks/cta-4.astro

@@ -12,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -31,7 +32,7 @@ type Props = {
     rating: number
     text: string
   }
-  image: {
+  image?: {
     src: ImageMetadata
     alt: string
   }
@@ -43,7 +44,7 @@ const {
   description,
   buttons,
   socialProof,
-  image,
+  image = { src: PlaceholderImage, alt: "CTA image" },
 } = Astro.props
 ---
 

package/src/components/blocks/cta-5.astro

@@ -1,11 +1,12 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -17,7 +18,7 @@ type Props = {
     href: string
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image: {
+  image?: {
     src: ImageMetadata
     alt: string
   }
@@ -29,7 +30,7 @@ const {
   description,
   features,
   buttons,
-  image,
+  image = { src: PlaceholderImage, alt: "CTA image" },
 } = Astro.props
 ---
 
@@ -51,7 +52,7 @@ const {
           <ul class="flex flex-col gap-3">
             {features.map((feature) => (
               <li class="flex items-center gap-3 text-sm">
-                <Icon name="check" class="text-primary size-4 shrink-0" />
+                <CheckIcon class="text-primary size-4 shrink-0" />
                 {feature}
               </li>
             ))}
@@ -81,7 +82,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-4/3 w-full rounded-xl border object-cover"
+      class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 50vw, 100vw"
     />

package/src/components/blocks/cta-6.astro

@@ -12,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -31,7 +32,7 @@ type Props = {
     rating: number
     text: string
   }
-  image: {
+  image?: {
     src: ImageMetadata
     alt: string
   }
@@ -43,7 +44,7 @@ const {
   description,
   buttons,
   socialProof,
-  image,
+  image = { src: PlaceholderImage, alt: "CTA image" },
 } = Astro.props
 ---
 
@@ -52,7 +53,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-4/3 w-full rounded-xl border object-cover"
+      class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 50vw, 100vw"
     />