fulldev-ui 0.7.0-beta.9 → 0.9.0

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"button"> & {
+  value?: string
+}
+
+const { class: className, value, ...props } = Astro.props
+---
+
+<button
+  data-slot="tabs-trigger"
+  data-value={value}
+  class={cn(
+    "text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+    "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+    "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</button>

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

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultValue?: string
+  orientation?: "horizontal" | "vertical"
+  activationMode?: "auto" | "manual"
+}
+
+const {
+  class: className,
+  defaultValue,
+  orientation = "horizontal",
+  activationMode,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="tabs"
+  data-default-value={defaultValue}
+  data-orientation={orientation}
+  data-activation-mode={activationMode}
+  data-horizontal={orientation === "horizontal" ? "" : undefined}
+  data-vertical={orientation === "vertical" ? "" : undefined}
+  class={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/tabs"
+
+  create()
+</script>

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

@@ -1 +1 @@
-export { default as Textarea } from './Textarea.vue'
+export { default as Textarea } from "./textarea.astro"

package/src/components/ui/textarea/textarea.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"textarea">
+
+const {
+  class: className,
+  "data-slot": dataSlot = "textarea",
+  ...props
+} = Astro.props
+---
+
+<textarea
+  data-slot={dataSlot}
+  class={cn(
+    "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+    className
+  )}
+  {...props}
+>
+</textarea>

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

@@ -0,0 +1,2 @@
+export { default as ThemeToggle } from "./theme-toggle.astro"
+export { default as ThemeProvider } from "./theme-provider.astro"

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

@@ -0,0 +1,61 @@
+<script is:inline>
+  const getThemePreference = () => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+      return localStorage.getItem("theme")
+    }
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light"
+  }
+
+  const disableTransitionsTemporarily = () => {
+    const style = document.createElement("style")
+
+    style.appendChild(
+      document.createTextNode(
+        "*, *::before, *::after { transition: none !important; }"
+      )
+    )
+
+    document.head.appendChild(style)
+
+    return () => {
+      void document.documentElement.offsetHeight
+
+      requestAnimationFrame(() => {
+        style.remove()
+      })
+    }
+  }
+
+  const applyTheme = (theme, disableTransitions = false) => {
+    const restoreTransitions = disableTransitions
+      ? disableTransitionsTemporarily()
+      : null
+
+    document.documentElement.classList[theme === "dark" ? "add" : "remove"](
+      "dark"
+    )
+
+    restoreTransitions?.()
+  }
+
+  window.__setTheme = (theme) => {
+    applyTheme(theme, true)
+  }
+
+  applyTheme(getThemePreference())
+
+  if (typeof localStorage !== "undefined") {
+    const observer = new MutationObserver(() => {
+      const isDark = document.documentElement.classList.contains("dark")
+      localStorage.setItem("theme", isDark ? "dark" : "light")
+    })
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+  }
+</script>

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

@@ -0,0 +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"
+
+type Props = ComponentProps<typeof Button>
+
+const {
+  class: className,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+} = Astro.props
+---
+
+<Button
+  data-theme-toggle
+  aria-label="Toggle theme"
+  variant={variant}
+  size={size}
+  class={cn("relative", className)}
+  {...props}
+>
+  <Icon name="sun" class="dark:hidden" />
+  <Icon name="moon" class="hidden dark:block" />
+  <span class="sr-only">Toggle theme</span>
+</Button>
+
+<script is:inline>
+  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

@@ -0,0 +1,3 @@
+export { default as Tile } from "./tile.astro"
+export { default as TileContent } from "./tile-content.astro"
+export { default as TileGroup } from "./tile-group.astro"

package/src/components/ui/tile/tile-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="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

@@ -0,0 +1,46 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type Props = VariantProps<typeof variants> &
+  HTMLAttributes<"div"> &
+  HTMLAttributes<"a">
+
+const variants = cva(
+  "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:
+          "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: {
+      variant: "default",
+    },
+  }
+)
+
+const { class: className, variant = "default", href, ...props } = Astro.props
+
+const Comp = href ? "a" : "div"
+---
+
+<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>