fulldev-ui 0.10.1 → 0.11.0

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/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
+}