fulldev-ui 0.7.0 → 0.9.0

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

@@ -1,55 +1,84 @@
 ---
+import type { ComponentProps } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
 
-interface Props {
-  class?: string
-}
+type Props = ComponentProps<typeof Button>
 
-const { class: className } = Astro.props
+const {
+  class: className,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+} = Astro.props
 ---
 
 <Button
-  data-slot="theme-toggle"
-  variant="ghost"
-  size="icon-sm"
+  data-theme-toggle
   aria-label="Toggle theme"
+  variant={variant}
+  size={size}
   class={cn("relative", className)}
+  {...props}
 >
-  <Icon name="sun" class="dark:hidden [&:is([data-theme=dark]_&)]:hidden" />
-  <Icon
-    name="moon"
-    class="hidden dark:block [&:is([data-theme=dark]_&)]:block"
-  />
+  <Icon name="sun" class="dark:hidden" />
+  <Icon name="moon" class="hidden dark:block" />
+  <span class="sr-only">Toggle theme</span>
 </Button>
 
-<style>
-  :global(html.no-transitions *) {
-    @apply !transition-none !duration-0;
-  }
-</style>
-
 <script is:inline>
-  if (!window.__themeHandlersInitialized) {
-    window.__themeHandlersInitialized = true
-    document
-      .querySelectorAll("[data-slot='theme-toggle']")
-      .forEach((toggle) => {
-        toggle.addEventListener("click", () => {
-          const element = document.documentElement
-          element.classList.add("no-transitions")
-          element.classList.toggle("dark")
-
-          const isDark = element.classList.contains("dark")
-          const newTheme = isDark ? "dark" : "light"
-          localStorage.setItem("theme", newTheme)
-          element.setAttribute("data-theme", newTheme)
-
-          requestAnimationFrame(() => {
-            element.classList.remove("no-transitions")
-          })
-        })
+  if (!window.__themeToggleHandlersInitialized) {
+    window.__themeToggleHandlersInitialized = true
+
+    const syncThemeToggles = () => {
+      const isDark = document.documentElement.classList.contains("dark")
+
+      document.querySelectorAll("[data-theme-toggle]").forEach((toggle) => {
+        if (!(toggle instanceof HTMLButtonElement)) return
+
+        toggle.setAttribute("aria-pressed", isDark ? "true" : "false")
+        toggle.setAttribute("data-state", isDark ? "on" : "off")
+
+        if (isDark) {
+          toggle.setAttribute("data-pressed", "")
+        } else {
+          toggle.removeAttribute("data-pressed")
+        }
       })
+    }
+
+    syncThemeToggles()
+
+    const observer = new MutationObserver(syncThemeToggles)
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+
+    document.addEventListener("click", (event) => {
+      const target = event.target
+
+      if (!(target instanceof Element)) return
+
+      const toggle = target.closest("[data-theme-toggle]")
+
+      if (!(toggle instanceof HTMLButtonElement)) return
+      if (toggle.disabled) return
+
+      const isDark = document.documentElement.classList.contains("dark")
+      const nextTheme = isDark ? "light" : "dark"
+
+      if (typeof window.__setTheme === "function") {
+        window.__setTheme(nextTheme)
+        return
+      }
+
+      document.documentElement.classList[
+        nextTheme === "dark" ? "add" : "remove"
+      ]("dark")
+    })
   }
 </script>

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

@@ -1,8 +1,3 @@
 export { default as Tile } from "./tile.astro"
-export { default as TileActions } from "./tile-actions.astro"
 export { default as TileContent } from "./tile-content.astro"
-export { default as TileDescription } from "./tile-description.astro"
-export { default as TileMedia } from "./tile-media.astro"
-export { default as TileSplit } from "./tile-split.astro"
-export { default as TileSpread } from "./tile-spread.astro"
-export { default as TileTitle } from "./tile-title.astro"
+export { default as TileGroup } from "./tile-group.astro"

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

@@ -3,17 +3,15 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div class={cn("relative z-10 flex flex-col gap-3", className)} {...props}>
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="tile-content"
+  class={cn("flex min-w-0 flex-1 flex-col gap-3 p-5", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,76 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & VariantProps<typeof variants>
+
+const variants = cva("group/tile-group w-full gap-4", {
+  variants: {
+    variant: {
+      default: "grid",
+      masonry: "columns-1",
+    },
+    size: {
+      sm: "",
+      default: "",
+      lg: "",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      size: "sm",
+      class: "grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(240px,1fr))]",
+    },
+    {
+      variant: "default",
+      size: "default",
+      class: "grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(300px,1fr))]",
+    },
+    {
+      variant: "default",
+      size: "lg",
+      class: "grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))]",
+    },
+    {
+      variant: "masonry",
+      size: "sm",
+      class: "sm:[column-count:5] sm:[column-width:240px]",
+    },
+    {
+      variant: "masonry",
+      size: "default",
+      class: "sm:[column-count:4] sm:[column-width:300px]",
+    },
+    {
+      variant: "masonry",
+      size: "lg",
+      class: "sm:[column-count:3] sm:[column-width:400px]",
+    },
+  ],
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+})
+
+const {
+  class: className,
+  variant = "default",
+  size = "default",
+  ...props
+} = Astro.props
+---
+
+<div
+  role="list"
+  data-slot="tile-group"
+  data-variant={variant}
+  data-size={size}
+  class={cn(variants({ variant, size }), className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/tile/tile.astro

@@ -9,14 +9,18 @@ type Props = VariantProps<typeof variants> &
   HTMLAttributes<"a">
 
 const variants = cva(
-  "group/tile focus-visible:border-ring focus-visible:ring-ring/50 [a]:hover:ring-accent/50 relative flex flex-col items-start gap-6 outline-none focus-visible:ring-[3px] [a]:transition-all",
+  "group/tile focus-visible:border-ring focus-visible:ring-ring/50 flex min-w-0 flex-col overflow-hidden rounded-xl transition-colors outline-none group-data-[variant=masonry]/tile-group:mb-4 group-data-[variant=masonry]/tile-group:break-inside-avoid focus-visible:ring-3",
   {
     variants: {
       variant: {
         default:
-          "[a]:hover:ring-accent/50 [a]:hover:bg-accent/50 rounded-sm bg-transparent [a]:hover:ring-12",
-        floating:
-          "bg-card text-card-foreground [a]:hover:bg-accent/50 overflow-hidden rounded-sm border p-6 shadow-sm duration-100",
+          "text-foreground data-[link]:hover:bg-muted/40 border border-transparent",
+        inset:
+          "text-foreground data-[link]:hover:bg-muted/40 -mx-5 border border-transparent",
+        outline:
+          "border-border bg-background text-foreground data-[link]:hover:bg-muted/40 border",
+        muted:
+          "bg-muted/50 text-foreground data-[link]:hover:bg-muted/70 border-transparent",
       },
     },
     defaultVariants: {
@@ -25,33 +29,18 @@ const variants = cva(
   }
 )
 
-const { class: className, variant, href, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
+const { class: className, variant = "default", href, ...props } = Astro.props
 
 const Comp = href ? "a" : "div"
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <Comp
-      data-slot="tile"
-      data-variant={variant}
-      class={cn(variants({ variant }), className)}
-      href={href}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </Comp>
-  )
-}
-
-<style is:global>
-  [data-slot="tile"] {
-    --tile-padding: 0px;
-  }
-
-  [data-slot="tile"][data-variant="floating"] {
-    --tile-padding: 24px;
-  }
-</style>
+<Comp
+  data-slot="tile"
+  data-variant={variant}
+  data-link={href ? "" : undefined}
+  class={cn(variants({ variant }), className)}
+  href={href}
+  {...props}
+>
+  <slot />
+</Comp>

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

@@ -0,0 +1,5 @@
+export { default as Toc } from "./toc.astro"
+export { default as TocMenu } from "./toc-menu.astro"
+export { default as TocMenuItem } from "./toc-menu-item.astro"
+export { default as TocMenuLink } from "./toc-menu-link.astro"
+export { default as TocTitle } from "./toc-title.astro"

package/src/components/ui/toc/toc-menu-item.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"li">
+
+const { class: className, ...props } = Astro.props
+---
+
+<li data-slot="toc-menu-item" class={cn("relative", className)} {...props}>
+  <slot />
+</li>

package/src/components/ui/toc/toc-menu-link.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"a"> & {
+  depth?: number
+  isActive?: boolean
+  active?: boolean
+}
+
+const {
+  class: className,
+  depth = 2,
+  isActive,
+  active = false,
+  ...props
+} = Astro.props
+
+const resolvedActive = isActive ?? active
+---
+
+<a
+  data-slot="toc-menu-link"
+  data-depth={depth}
+  data-active={resolvedActive ? "true" : undefined}
+  aria-current={resolvedActive ? "location" : undefined}
+  class={cn(
+    "text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block text-sm leading-6 transition-colors",
+    depth === 3 && "pl-4",
+    depth >= 4 && "pl-8",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</a>

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"ul">
+
+const { class: className, ...props } = Astro.props
+---
+
+<ul
+  data-slot="toc-menu"
+  class={cn("flex flex-col gap-1", className)}
+  {...props}
+>
+  <slot />
+</ul>

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"p"> &
+  HTMLAttributes<"h2"> &
+  HTMLAttributes<"div"> & {
+    as?: "p" | "h2" | "div"
+  }
+
+const { as: Tag = "p", class: className, ...props } = Astro.props
+---
+
+<Tag
+  data-slot="toc-title"
+  class={cn("text-sm font-medium tracking-tight", className)}
+  {...props}
+>
+  <slot />
+</Tag>

package/src/components/ui/toc/toc.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"nav">
+
+const { class: className, ...props } = Astro.props
+---
+
+<nav data-slot="toc" class={cn("flex flex-col gap-3", className)} {...props}>
+  <slot />
+</nav>

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

@@ -0,0 +1,3 @@
+export { default as Toggle } from "./toggle.astro"
+export { toggleVariants } from "./toggle-variants"
+export type { ToggleVariantProps } from "./toggle-variants"

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

@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const toggleVariants = cva(
+  "group/toggle hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] 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-transparent",
+        outline: "border-input hover:bg-muted border bg-transparent shadow-xs",
+      },
+      size: {
+        default:
+          "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export type ToggleVariantProps = VariantProps<typeof toggleVariants>

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

@@ -0,0 +1,40 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+import { toggleVariants, type ToggleVariantProps } from "./toggle-variants"
+
+type Props = HTMLAttributes<"button"> &
+  ToggleVariantProps & {
+    defaultPressed?: boolean
+    disabled?: boolean
+  }
+
+const {
+  class: className,
+  variant = "default",
+  size = "default",
+  defaultPressed,
+  disabled,
+  type = "button",
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="toggle"
+  data-default-pressed={defaultPressed}
+  data-disabled={disabled}
+  type={type}
+  class={cn(toggleVariants({ variant, size }), className)}
+  {...props}
+>
+  <slot />
+</button>
+
+<script>
+  import { create } from "@data-slot/toggle"
+
+  create()
+</script>

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

@@ -0,0 +1,3 @@
+export { default as Tooltip } from "./tooltip.astro"
+export { default as TooltipContent } from "./tooltip-content.astro"
+export { default as TooltipTrigger } from "./tooltip-trigger.astro"

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

@@ -0,0 +1,64 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { TooltipAlign, TooltipSide } from "@data-slot/tooltip"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  side?: TooltipSide
+  align?: TooltipAlign
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+}
+
+const {
+  class: className,
+  hidden = true,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  ...props
+} = Astro.props
+---
+
+<div data-slot="tooltip-portal">
+  <div
+    data-slot="tooltip-positioner"
+    data-side={side}
+    data-align={align}
+    data-side-offset={sideOffset}
+    data-align-offset={alignOffset}
+    data-avoid-collisions={avoidCollisions}
+    data-collision-padding={collisionPadding}
+    class="z-50"
+  >
+    <div
+      data-slot="tooltip-content"
+      data-side={side}
+      data-align={align}
+      data-side-offset={sideOffset}
+      data-align-offset={alignOffset}
+      data-avoid-collisions={avoidCollisions}
+      data-collision-padding={collisionPadding}
+      hidden={hidden}
+      class={cn(
+        "bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 data-[instant]:animate-none data-[instant]:transition-none **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
+        className
+      )}
+      {...props}
+    >
+      <slot />
+      <div
+        data-slot="tooltip-arrow"
+        aria-hidden="true"
+        class="bg-foreground fill-foreground z-50 size-2.5 rotate-45 rounded-[2px] data-[side=bottom]:-top-1 data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-x-[1.5px] data-[side=left]:-right-1 data-[side=left]:-translate-x-[1.5px] data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] data-[side=top]:-bottom-1"
+      >
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"button"> &
+  HTMLAttributes<"a"> &
+  HTMLAttributes<"div"> &
+  HTMLAttributes<"span"> & {
+    as?: "a" | "button" | "div" | "span"
+    href?: string
+  }
+
+const { as: explicitTag, class: className, type, ...props } = Astro.props
+
+const Tag = explicitTag || ("href" in Astro.props ? "a" : "button")
+---
+
+<Tag
+  data-slot="tooltip-trigger"
+  type={Tag === "button" ? type || "button" : undefined}
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</Tag>

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

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { TooltipAlign, TooltipSide } from "@data-slot/tooltip"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  delay?: number
+  skipDelayDuration?: number
+  side?: TooltipSide
+  align?: TooltipAlign
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+  portal?: boolean
+}
+
+const {
+  class: className,
+  delay = 300,
+  skipDelayDuration = 300,
+  side = "top",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionPadding = 8,
+  portal = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="tooltip"
+  data-delay={delay}
+  data-skip-delay-duration={skipDelayDuration}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  data-avoid-collisions={avoidCollisions}
+  data-collision-padding={collisionPadding}
+  data-portal={portal}
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/tooltip"
+
+  create()
+</script>

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

@@ -0,0 +1,16 @@
+export { default as Typography } from "./typography.astro"
+export { default as TypographyA } from "./typography-a.astro"
+export { default as TypographyBlockquote } from "./typography-blockquote.astro"
+export { default as TypographyH1 } from "./typography-h1.astro"
+export { default as TypographyH2 } from "./typography-h2.astro"
+export { default as TypographyH3 } from "./typography-h3.astro"
+export { default as TypographyH4 } from "./typography-h4.astro"
+export { default as TypographyInlineCode } from "./typography-inline-code.astro"
+export { default as TypographyLead } from "./typography-lead.astro"
+export { default as TypographyList } from "./typography-list.astro"
+export { default as TypographyListItem } from "./typography-list-item.astro"
+export { default as TypographyP } from "./typography-p.astro"
+export { default as TypographyTable } from "./typography-table.astro"
+export { default as TypographyTableCell } from "./typography-table-cell.astro"
+export { default as TypographyTableHead } from "./typography-table-head.astro"
+export { default as TypographyTableRow } from "./typography-table-row.astro"