fulldev-ui 0.10.1 → 0.11.1

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

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
@@ -9,8 +10,7 @@ import { Button } from "@/components/ui/button"
 import { Section, SectionContainer } from "@/components/ui/section"
 import PlaceholderImage from "@/assets/placeholder.webp"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge?: string
   title: string
   description?: string
@@ -37,10 +37,11 @@ const {
   description,
   buttons,
   services,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer
     class="grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start"
   >

package/src/components/blocks/services-7.astro

@@ -1,16 +1,21 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionContainer,
+  SectionTitle,
+} from "@/components/ui/section"
 import PlaceholderImage from "@/assets/placeholder.webp"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge?: string
   title: string
   description?: string
@@ -38,21 +43,20 @@ const {
   description,
   buttons,
   services,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div
       class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"
     >
       <div class="max-w-2xl">
         {badge && <Badge variant="secondary">{badge}</Badge>}
-        <h2
-          class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-        >
+        <SectionTitle class="mt-4">
           {title}
-        </h2>
+        </SectionTitle>
         {
           description && (
             <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">

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

@@ -325,7 +325,7 @@ try {
             </BreadcrumbList>
           </Breadcrumb>
         </HeaderGroup>
-        <HeaderGroup>
+        <HeaderGroup class="shrink-0">
           <Button
             as="a"
             href={`https://github.com/${githubRepo}`}
@@ -336,7 +336,7 @@ try {
             aria-label={`View ${githubRepo} on GitHub`}
           >
             <Icon name="github" />
-            <span>{githubStars}</span>
+            <span class="hidden sm:inline">{githubStars}</span>
           </Button>
           <ThemeToggle />
         </HeaderGroup>

package/src/components/ui/accordion/accordion.astro

@@ -49,4 +49,5 @@ const serializedDefaultValue = Array.isArray(defaultValue)
   import { create } from "@data-slot/accordion"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/alert-dialog/alert-dialog.astro

@@ -34,4 +34,5 @@ const {
   import { create } from "@data-slot/alert-dialog"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -35,51 +35,33 @@ const { class: className, variant, storageKey, ...props } = Astro.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']")
+<script>
+  const getStorageToken = (key: string) => `banner:${key}`
 
+  const syncBanners = () => {
+    document.querySelectorAll("[data-slot='banner']").forEach((banner) => {
       if (!(banner instanceof HTMLElement)) return
-
-      banner.hidden = true
-
       const storageKey = banner.dataset.bannerStorageKey
-
-      if (storageKey) {
-        sessionStorage.setItem(getStorageToken(storageKey), "hidden")
+      if (
+        storageKey &&
+        sessionStorage.getItem(getStorageToken(storageKey)) === "hidden"
+      ) {
+        banner.hidden = true
       }
     })
   }
+
+  syncBanners()
+  document.addEventListener("astro:page-load", syncBanners)
+
+  document.addEventListener("click", (event) => {
+    if (!(event.target instanceof Element)) return
+    const closeButton = event.target.closest("[data-slot='banner-close']")
+    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/collapsible/collapsible.astro

@@ -30,4 +30,5 @@ const {
   import { create } from "@data-slot/collapsible"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/dialog/dialog.astro

@@ -37,4 +37,5 @@ const {
   import { create } from "@data-slot/dialog"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -68,4 +68,5 @@ const defaultValuesAttr =
   import { create } from "@data-slot/dropdown-menu"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -66,7 +66,11 @@ const {
   import { getDataBool } from "@data-slot/core"
   import { createHoverCard } from "@data-slot/hover-card"
 
-  document.querySelectorAll('[data-slot="hover-card"]').forEach((root) => {
-    createHoverCard(root, { open: getDataBool(root, "controlledOpen") })
-  })
+  const initialize = () => {
+    document.querySelectorAll('[data-slot="hover-card"]').forEach((root) => {
+      createHoverCard(root, { open: getDataBool(root, "controlledOpen") })
+    })
+  }
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
 </script>

package/src/components/ui/icon/icon.astro

@@ -37,51 +37,68 @@ const hrefMap = {
   linkedin: "linkedin",
 } as const
 
-const icons = import.meta.glob([
-  "node_modules/lucide-static/icons/*.svg",
-  "node_modules/simple-icons/icons/*.svg",
-])
+type Source = "lucide" | "simple"
 
-const foundPath = () => {
-  let foundPath: string | undefined = undefined
+const icons: Record<Source, Record<string, () => Promise<unknown>>> = {
+  lucide: import.meta.glob("/node_modules/lucide-static/icons/*.svg"),
+  simple: import.meta.glob("/node_modules/simple-icons/icons/*.svg"),
+}
+
+const pathFor = (source: Source, icon: string) =>
+  source === "lucide"
+    ? `/node_modules/lucide-static/icons/${icon}.svg`
+    : `/node_modules/simple-icons/icons/${icon}.svg`
+
+// Resolve an icon by explicit name, or derive one from a link href.
+// Names may be prefixed with `lucide:` or `simple:` to pick a set when both
+// sets contain the same name (for example `github` or `figma`).
+const resolve = () => {
+  let key = name != null && name !== "" ? String(name) : undefined
+  let order: Source[] = ["lucide", "simple"]
 
-  // For x.com, use the Simple Icons X instead of Lucide's X icon.
-  if (name === "x.com") {
-    foundPath = "/node_modules/simple-icons/icons/x.svg"
-  } else if (name) {
-    foundPath = Object.keys(icons).find((key) => key.includes(`/${name}.svg`))
-  } else if (href) {
-    const hrefKey = Object.keys(hrefMap).find((key) =>
-      href.toString().includes(key)
+  if (!key && href) {
+    const hrefKey = Object.keys(hrefMap).find((candidate) =>
+      href.toString().includes(candidate)
     )
-    const hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]
-    foundPath = Object.keys(icons)
-      .reverse()
-      .find((key) => key.includes(`/${hrefValue}.svg`))
+    if (hrefKey) {
+      key = hrefMap[hrefKey as keyof typeof hrefMap]
+      order = ["simple", "lucide"]
+    }
+  }
+
+  if (!key) return undefined
+  if (key === "x.com") key = "simple:x"
+
+  const [prefix, icon] = key.includes(":") ? key.split(":") : [undefined, key]
+  if (prefix === "lucide" || prefix === "simple") order = [prefix]
+
+  for (const source of order) {
+    const path = pathFor(source, icon)
+    if (path in icons[source]) return { source, path }
   }
 
-  return foundPath
+  return undefined
 }
 
-const foundModule = foundPath() && icons[foundPath() as keyof typeof icons]
-const module = foundModule && ((await foundModule()) as any)
+const resolved = resolve()
+const module = resolved
+  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })
+  : undefined
 const Comp = module?.default
+
+const isLabelled =
+  "aria-label" in props || "aria-labelledby" in props || "role" in props
 ---
 
 {
-  Comp && foundPath()?.includes("simple-icons") && (
+  Comp && resolved && (
     <Comp
       height={24}
       width={24}
-      fill="currentColor"
+      fill={resolved.source === "simple" ? "currentColor" : "none"}
       class="size-[1em] text-base"
+      aria-hidden={isLabelled ? undefined : "true"}
       {...props}
     />
   )
 }
-
-{
-  Comp && foundPath()?.includes("lucide-static") && (
-    <Comp height={24} width={24} class="size-[1em] text-base" {...props} />
-  )
-}

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

@@ -60,4 +60,5 @@ const {
   import { create } from "@data-slot/navigation-menu"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/popover/popover.astro

@@ -56,4 +56,5 @@ const {
   import { create } from "@data-slot/popover"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/radio-group/radio-group.astro

@@ -39,4 +39,5 @@ const {
   import { create } from "@data-slot/radio-group"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

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

@@ -1,2 +1,4 @@
 export { default as Section } from "./section.astro"
 export { default as SectionContainer } from "./section-container.astro"
+export { default as SectionDescription } from "./section-description.astro"
+export { default as SectionTitle } from "./section-title.astro"

package/src/components/ui/section/section-container.astro

@@ -9,6 +9,7 @@ const { class: className, ...props } = Astro.props
 ---
 
 <div
+  data-slot="section-container"
   class={cn(
     "relative mx-auto flex w-full max-w-7xl flex-col gap-8 px-4",
     className

package/src/components/ui/section/section-description.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"p">
+
+const { class: className, ...props } = Astro.props
+---
+
+<p
+  data-slot="section-description"
+  class={cn(
+    "text-muted-foreground text-lg leading-relaxed text-balance",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</p>

package/src/components/ui/section/section-title.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props<Tag extends HTMLTag = "h2"> = Polymorphic<{ as: Tag }>
+
+const { as: Tag = "h2", class: className, ...props } = Astro.props
+---
+
+<Tag
+  data-slot="section-title"
+  class={cn(
+    "text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Tag>

package/src/components/ui/sheet/sheet-close.astro

@@ -1,9 +1,11 @@
 ---
-import type { ComponentProps } from "astro/types"
+import type { HTMLTag, Polymorphic } from "astro/types"
 
 import { Button } from "@/components/ui/button"
+import type { ButtonVariantProps } from "@/components/ui/button/button-variants"
 
-type Props = ComponentProps<typeof Button>
+type Props<Tag extends HTMLTag = "button"> = Polymorphic<{ as: Tag }> &
+  ButtonVariantProps
 
 const { ...props } = Astro.props
 ---

package/src/components/ui/sheet/sheet.astro

@@ -34,4 +34,5 @@ const {
   import { create } from "@data-slot/dialog"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/slider/slider.astro

@@ -83,4 +83,5 @@ const thumbCount = String(serializedDefaultValue ?? "").includes(",") ? 2 : 1
   import { create } from "@data-slot/slider"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/switch/switch.astro

@@ -70,4 +70,5 @@ const switchSizeStyle = {
   import { create } from "@data-slot/switch"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/tabs/tabs.astro

@@ -35,4 +35,5 @@ const {
   import { create } from "@data-slot/tabs"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/toggle/toggle.astro

@@ -39,4 +39,5 @@ const {
   import { create } from "@data-slot/toggle"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/tooltip/tooltip.astro

@@ -52,4 +52,5 @@ const {
   import { create } from "@data-slot/tooltip"
 
   create()
+  document.addEventListener("astro:page-load", () => create())
 </script>

package/src/components/ui/typography/typography.astro

@@ -126,7 +126,7 @@ const {
   [data-slot="typography"]
     > :is(p, blockquote, ul, ol, dl, table)
     a:not([data-slot]) {
-    @apply text-primary font-medium underline underline-offset-4;
+    @apply text-foreground font-medium underline underline-offset-4;
   }
 
   [data-slot="typography"] > blockquote {

package/src/lib/pages.ts

@@ -83,3 +83,15 @@ export const getPageBreadcrumbItems = async (
       }),
   ]
 }
+
+export const getMarkdownHref = (href: string) =>
+  href === "/" ? "/index.md" : `${href.replace(/\/$/, "")}.md`
+
+export const getInstallCommand = (source: string) => {
+  const names = [
+    ...source.matchAll(/props=\{\{\s*name:\s*['"]([^'"]+)['"]/g),
+  ].map((match) => `@fulldev/${match[1]}`)
+  return names.length
+    ? `npx shadcn@latest add ${[...new Set(names)].join(" ")}`
+    : undefined
+}

package/src/styles/global.css

@@ -68,7 +68,7 @@
   --popover: oklch(0.269 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.686 0.2105 41.139);
-  --primary-foreground: oklch(1 0 0);
+  --primary-foreground: oklch(0.145 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
@@ -88,7 +88,7 @@
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.686 0.2105 41.139);
-  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.275 0 0);