fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/sidebar/sidebar-group-content.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="sidebar-group-content"
+  data-sidebar="group-content"
+  class={cn("w-full text-sm", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/sidebar/sidebar-group-label.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> &
+  HTMLAttributes<"button"> &
+  HTMLAttributes<"span"> & {
+    as?: "div" | "button" | "span"
+  }
+
+const { as: Tag = "div", class: className, type, ...props } = Astro.props
+---
+
+<Tag
+  data-slot="sidebar-group-label"
+  data-sidebar="group-label"
+  type={Tag === "button" ? type || "button" : undefined}
+  class={cn(
+    "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Tag>

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

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="sidebar-group"
+  data-sidebar="group"
+  class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/sidebar/sidebar-header.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="sidebar-header"
+  data-sidebar="header"
+  class={cn("flex flex-col gap-2 p-2", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/sidebar/sidebar-input.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"input">
+
+const { class: className, ...props } = Astro.props
+---
+
+<input
+  data-slot="sidebar-input"
+  data-sidebar="input"
+  class={cn(
+    "dark:bg-input/30 border-input 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 file:text-foreground placeholder:text-muted-foreground bg-background h-8 w-full min-w-0 rounded-md border px-2.5 py-1 text-base shadow-none transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+    className
+  )}
+  {...props}
+/>

package/src/components/ui/sidebar/sidebar-inset.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"main">
+
+const { class: className, ...props } = Astro.props
+---
+
+<main
+  data-slot="sidebar-inset"
+  class={cn(
+    "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</main>

package/src/components/ui/sidebar/sidebar-menu-action.astro

@@ -0,0 +1,40 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"button"> &
+  HTMLAttributes<"a"> &
+  HTMLAttributes<"div"> &
+  HTMLAttributes<"span"> & {
+    as?: "button" | "a" | "div" | "span"
+    href?: string
+    showOnHover?: boolean
+  }
+
+const {
+  as: explicitTag,
+  class: className,
+  showOnHover = false,
+  type,
+  ...props
+} = Astro.props
+
+const Tag = explicitTag || ("href" in Astro.props ? "a" : "button")
+const resolvedType = Tag === "button" ? type || "button" : undefined
+---
+
+<Tag
+  data-slot="sidebar-menu-action"
+  data-sidebar="menu-action"
+  type={resolvedType}
+  class={cn(
+    "text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+    showOnHover &&
+      "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Tag>

package/src/components/ui/sidebar/sidebar-menu-badge.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="sidebar-menu-badge"
+  data-sidebar="menu-badge"
+  class={cn(
+    "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/sidebar/sidebar-menu-button.astro

@@ -0,0 +1,126 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { TooltipAlign, TooltipSide } from "@data-slot/tooltip"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const variants = cva(
+  "peer/menu-button group/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-medium [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+type TooltipValue =
+  | string
+  | (HTMLAttributes<"div"> & {
+      content?: string
+      children?: string
+      side?: TooltipSide
+      align?: TooltipAlign
+      sideOffset?: number
+      alignOffset?: number
+      avoidCollisions?: boolean
+      collisionPadding?: number
+    })
+
+interface Props
+  extends VariantProps<typeof variants>, HTMLAttributes<"button"> {
+  as?: "a" | "button" | "div" | "span"
+  href?: string
+  isActive?: boolean
+  active?: boolean
+  tooltip?: TooltipValue
+}
+
+const {
+  as: explicitTag,
+  class: className,
+  variant = "default",
+  size = "default",
+  isActive,
+  active = false,
+  tooltip,
+  type,
+  ...props
+} = Astro.props satisfies Props
+
+const Tag = explicitTag || ("href" in Astro.props ? "a" : "button")
+const resolvedActive = isActive ?? active
+const baseClassName = cn(variants({ variant, size }), className)
+const resolvedTooltip =
+  typeof tooltip === "string" ? { children: tooltip } : tooltip
+const tooltipText =
+  resolvedTooltip?.content ??
+  (typeof resolvedTooltip?.children === "string"
+    ? resolvedTooltip.children
+    : undefined)
+const {
+  content: _tooltipContent,
+  children: _tooltipChildren,
+  ...tooltipProps
+} = resolvedTooltip ?? {}
+---
+
+{
+  tooltipText ? (
+    <Tooltip>
+      <TooltipTrigger
+        as={Tag}
+        data-slot="sidebar-menu-button"
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={resolvedActive ? "true" : undefined}
+        aria-current={resolvedActive ? "page" : undefined}
+        type={Tag === "button" ? type || "button" : undefined}
+        class={baseClassName}
+        {...props}
+      >
+        <slot />
+      </TooltipTrigger>
+      <TooltipContent
+        data-sidebar="menu-tooltip"
+        side="right"
+        align="center"
+        hidden
+        {...tooltipProps}
+      >
+        {tooltipText}
+      </TooltipContent>
+    </Tooltip>
+  ) : (
+    <Tag
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={resolvedActive ? "true" : undefined}
+      aria-current={resolvedActive ? "page" : undefined}
+      type={Tag === "button" ? type || "button" : undefined}
+      class={baseClassName}
+      {...props}
+    >
+      <slot />
+    </Tag>
+  )
+}

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

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

package/src/components/ui/sidebar/sidebar-menu-skeleton.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton"
+
+type Props = HTMLAttributes<"div"> & {
+  showIcon?: boolean
+}
+
+const { class: className, showIcon = false, ...props } = Astro.props
+const width = `${Math.floor(Math.random() * 40) + 50}%`
+---
+
+<div
+  data-slot="sidebar-menu-skeleton"
+  data-sidebar="menu-skeleton"
+  class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+  {...props}
+>
+  {
+    showIcon && (
+      <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+    )
+  }
+  <Skeleton
+    class="h-4 max-w-(--skeleton-width) flex-1"
+    data-sidebar="menu-skeleton-text"
+    style={`--skeleton-width: ${width};`}
+  />
+</div>

package/src/components/ui/sidebar/sidebar-menu-sub-button.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const variants = cva(
+  "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+interface Props
+  extends VariantProps<typeof variants>, HTMLAttributes<"button"> {
+  as?: "a" | "button" | "span"
+  href?: string
+  isActive?: boolean
+  active?: boolean
+}
+
+const {
+  as: explicitTag,
+  class: className,
+  size = "md",
+  isActive,
+  active = false,
+  type,
+  ...props
+} = Astro.props satisfies Props
+
+const Tag = explicitTag || "a"
+const resolvedActive = isActive ?? active
+---
+
+<Tag
+  data-slot="sidebar-menu-sub-button"
+  data-sidebar="menu-sub-button"
+  data-size={size}
+  data-active={resolvedActive ? "true" : undefined}
+  aria-current={resolvedActive ? "page" : undefined}
+  type={Tag === "button" ? type || "button" : undefined}
+  class={cn(variants({ size }), className)}
+  {...props}
+>
+  <slot />
+</Tag>

package/src/components/ui/sidebar/sidebar-menu-sub-item.astro

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

package/src/components/ui/sidebar/sidebar-menu-sub.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"ul">
+
+const { class: className, ...props } = Astro.props
+---
+
+<ul
+  data-slot="sidebar-menu-sub"
+  data-sidebar="menu-sub"
+  class={cn(
+    "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</ul>

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

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

package/src/components/ui/sidebar/sidebar-provider.astro

@@ -0,0 +1,180 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const {
+  class: className,
+  style,
+  defaultOpen = true,
+  open,
+  ...props
+} = Astro.props
+
+const resolvedStyle = [
+  `--sidebar-width: ${SIDEBAR_WIDTH}`,
+  `--sidebar-width-mobile: ${SIDEBAR_WIDTH_MOBILE}`,
+  `--sidebar-width-icon: ${SIDEBAR_WIDTH_ICON}`,
+  typeof style === "string" ? style : undefined,
+]
+  .filter(Boolean)
+  .join("; ")
+---
+
+<div
+  data-slot="sidebar-wrapper"
+  data-default-open={defaultOpen ? "true" : "false"}
+  data-open={open === undefined ? undefined : open ? "true" : "false"}
+  style={resolvedStyle}
+  class={cn(
+    "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+    className
+  )}
+  {...props}
+>
+  <slot />
+  <script is:inline>
+    ;(() => {
+      window.__fulldevSyncSidebarProvider ??= (provider, open) => {
+        const state = open ? "expanded" : "collapsed"
+        const sidebar = provider.querySelector(
+          "[data-slot='sidebar']:not([data-mobile='true'])"
+        )
+        const collapsible = sidebar?.dataset.sidebarCollapsible ?? "offcanvas"
+
+        provider.dataset.open = open ? "true" : "false"
+        provider.dataset.state = state
+
+        if (sidebar) {
+          sidebar.dataset.state = collapsible === "none" ? "expanded" : state
+          sidebar.dataset.collapsible =
+            collapsible === "none" ? "none" : open ? "" : collapsible
+        }
+
+        provider
+          .querySelectorAll("[data-sidebar='trigger'], [data-sidebar='rail']")
+          .forEach((control) => {
+            control.setAttribute("aria-expanded", String(open))
+          })
+
+        provider
+          .querySelectorAll("[data-sidebar='menu-tooltip']")
+          .forEach((tooltip) => {
+            tooltip.hidden = state !== "collapsed"
+          })
+      }
+
+      const provider = document.currentScript?.closest(
+        "[data-slot='sidebar-wrapper']"
+      )
+      if (!(provider instanceof HTMLElement)) return
+
+      const controlledOpen = provider.dataset.open
+      const cookieValue = document.cookie
+        .split("; ")
+        .find((entry) => entry.startsWith("sidebar_state="))
+        ?.slice("sidebar_state=".length)
+
+      const isOpen =
+        controlledOpen === "true" || controlledOpen === "false"
+          ? controlledOpen === "true"
+          : cookieValue === "true" || cookieValue === "false"
+            ? cookieValue === "true"
+            : provider.dataset.defaultOpen !== "false"
+
+      provider.dataset.openMobile = "false"
+      window.__fulldevSyncSidebarProvider(provider, isOpen)
+    })()
+  </script>
+</div>
+
+<script is:inline>
+  ;(() => {
+    const scrollTop = Number(sessionStorage.getItem("sidebar_scroll") || 0)
+
+    document.querySelectorAll("[data-sidebar='content']").forEach((content) => {
+      content.scrollTop = scrollTop
+    })
+  })()
+</script>
+
+<script is:inline>
+  ;(() => {
+    if (window.__fulldevSidebarInitialized) return
+    window.__fulldevSidebarInitialized = true
+
+    const SIDEBAR_COOKIE_NAME = "sidebar_state"
+    const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+
+    const toggleSidebar = (provider) => {
+      if (!window.matchMedia("(min-width: 768px)").matches) {
+        const openMobile = provider.dataset.openMobile !== "true"
+        provider.dataset.openMobile = openMobile ? "true" : "false"
+        provider
+          .querySelector("[data-sidebar='sheet']")
+          ?.dispatchEvent(
+            new CustomEvent("dialog:set", { detail: { open: openMobile } })
+          )
+        return
+      }
+
+      const open = provider.dataset.open === "false"
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      window.__fulldevSyncSidebarProvider?.(provider, open)
+    }
+
+    document.addEventListener("click", (event) => {
+      const control = event.target?.closest?.(
+        "[data-sidebar='trigger'], [data-sidebar='rail']"
+      )
+      if (!control || control.matches(":disabled, [aria-disabled='true']")) {
+        return
+      }
+
+      const provider = control.closest("[data-slot='sidebar-wrapper']")
+      if (!provider) return
+
+      toggleSidebar(provider)
+    })
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key.toLowerCase() !== "b") return
+      if (!event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return
+      }
+      if (event.defaultPrevented) return
+
+      const target = event.target
+      const isTyping =
+        target instanceof HTMLElement &&
+        (target.isContentEditable ||
+          target.matches("input, textarea, select, [role='textbox']"))
+      if (isTyping) return
+
+      const provider = document.querySelector("[data-slot='sidebar-wrapper']")
+      if (!(provider instanceof HTMLElement)) return
+
+      event.preventDefault()
+      toggleSidebar(provider)
+    })
+
+    document.addEventListener(
+      "scroll",
+      (event) => {
+        if (event.target?.dataset?.sidebar === "content") {
+          sessionStorage.setItem("sidebar_scroll", event.target.scrollTop)
+        }
+      },
+      true
+    )
+  })()
+</script>