fulldev-ui 0.7.0 → 0.9.0

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

@@ -5,46 +5,51 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const variants = cva(
-  "hover:bg-accent hover:text-accent-foreground focus-visible:outline-ring flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "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",
       },
-      active: {
-        true: "bg-accent text-accent-foreground",
-        false: "",
-      },
     },
     defaultVariants: {
       size: "md",
-      active: false,
     },
   }
 )
 
-type Props = VariantProps<typeof variants> &
-  HTMLAttributes<"button"> &
-  HTMLAttributes<"a"> & {
-    href?: string
-  }
+interface Props
+  extends VariantProps<typeof variants>, HTMLAttributes<"button"> {
+  as?: "a" | "button" | "span"
+  href?: string
+  isActive?: boolean
+  active?: boolean
+}
 
-const { class: className, size, active, href, ...props } = Astro.props
+const {
+  as: explicitTag,
+  class: className,
+  size = "md",
+  isActive,
+  active = false,
+  type,
+  ...props
+} = Astro.props satisfies Props
 
-const Comp = href ? "a" : "button"
-const slot = await Astro.slots.render("default")
+const Tag = explicitTag || "a"
+const resolvedActive = isActive ?? active
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <Comp
-      data-slot="sidebar-menu-sub-button"
-      class={cn(variants({ size, active }), className)}
-      href={href}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </Comp>
-  )
-}
+<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

@@ -3,21 +3,16 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"li"> {}
+type Props = HTMLAttributes<"li">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <li
-      data-slot="sidebar-menu-sub-item"
-      class={cn("group/menu-sub-item relative", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </li>
-  )
-}
+<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

@@ -3,24 +3,19 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"ul"> {}
+type Props = HTMLAttributes<"ul">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <ul
-      data-slot="sidebar-menu-sub"
-      class={cn(
-        "border-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </ul>
-  )
-}
+<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

@@ -3,24 +3,16 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"ul"> {}
+type Props = HTMLAttributes<"ul">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <ul
-      data-slot="sidebar-menu"
-      class={cn(
-        "text-foreground flex w-full min-w-0 flex-col gap-1",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </ul>
-  )
-}
+<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>

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

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"button">
+
+const { class: className, type = "button", ...props } = Astro.props
+---
+
+<button
+  data-sidebar="rail"
+  data-slot="sidebar-rail"
+  aria-label="Toggle Sidebar"
+  tabindex={-1}
+  title="Toggle Sidebar"
+  type={type}
+  class={cn(
+    "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+    "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+    "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+    "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+    "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+    "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+    className
+  )}
+  {...props}></button>

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

@@ -0,0 +1,17 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+type Props = ComponentProps<typeof Separator>
+
+const { class: className, ...props } = Astro.props
+---
+
+<Separator
+  data-slot="sidebar-separator"
+  data-sidebar="separator"
+  class={cn("bg-sidebar-border mx-2 w-auto", className)}
+  {...props}
+/>

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"button"> & {
+  variant?: "ghost" | "secondary"
+}
+
+const { class: className, ...props } = Astro.props
+---
+
+<Button
+  data-sidebar="trigger"
+  data-slot="sidebar-trigger"
+  variant="ghost"
+  size="icon-sm"
+  class={className}
+  aria-keyshortcuts="Meta+B"
+  {...props}
+>
+  <Icon name="panel-left" />
+  <span class="sr-only">Toggle Sidebar</span>
+  <slot />
+</Button>

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

@@ -0,0 +1,118 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+
+type Props = Omit<HTMLAttributes<"div">, "dir"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+  state?: "expanded" | "collapsed"
+}
+
+const {
+  class: className,
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  state = "expanded",
+  ...props
+} = Astro.props
+
+const desktopState = collapsible === "none" ? "expanded" : state
+const desktopCollapsible = desktopState === "collapsed" ? collapsible : ""
+---
+
+{
+  collapsible === "none" ? (
+    <div
+      data-slot="sidebar"
+      data-state="expanded"
+      data-collapsible="none"
+      data-variant={variant}
+      data-side={side}
+      data-sidebar-collapsible="none"
+      class={cn(
+        "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+        className
+      )}
+      {...props}
+    >
+      <slot />
+    </div>
+  ) : (
+    <>
+      <Sheet data-sidebar="sheet" defaultOpen={false}>
+        <SheetContent
+          side={side}
+          showCloseButton={false}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          style="--sidebar-width: var(--sidebar-width-mobile);"
+          class={cn(
+            "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden",
+            className
+          )}
+        >
+          <SheetHeader class="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div class="flex h-full w-full flex-col">
+            <slot />
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <div
+        data-slot="sidebar"
+        data-state={desktopState}
+        data-collapsible={desktopCollapsible}
+        data-variant={variant}
+        data-side={side}
+        data-sidebar-collapsible={collapsible}
+        class="group peer text-sidebar-foreground hidden md:block"
+      >
+        <div
+          data-slot="sidebar-gap"
+          class={cn(
+            "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+          )}
+        />
+        <div
+          data-slot="sidebar-container"
+          data-side={side}
+          class={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width) data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width) md:flex",
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            data-slot="sidebar-inner"
+            class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
+          >
+            <slot />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/ui/skeleton/skeleton.astro

@@ -3,9 +3,14 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
-const { class: className } = Astro.props
+const { class: className, ...props } = Astro.props
 ---
 
-<div class={cn("bg-accent animate-pulse rounded-md", className)}></div>
+<div
+  data-slot="skeleton"
+  class={cn("bg-muted animate-pulse rounded-md", className)}
+  {...props}
+>
+</div>

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

@@ -0,0 +1 @@
+export { default as Slider } from "./slider.astro"

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

@@ -0,0 +1,84 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type SliderValue = number | [number, number] | string
+type ThumbAlignment = "center" | "edge" | "edge-client-only"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultValue?: SliderValue
+  min?: number
+  max?: number
+  step?: number
+  largeStep?: number
+  orientation?: "horizontal" | "vertical"
+  thumbAlignment?: ThumbAlignment
+  disabled?: boolean
+}
+
+const {
+  class: className,
+  defaultValue,
+  min,
+  max,
+  step,
+  largeStep,
+  orientation = "horizontal",
+  thumbAlignment = "edge",
+  disabled,
+  ...props
+} = Astro.props
+
+const serializedDefaultValue = Array.isArray(defaultValue)
+  ? defaultValue.join(",")
+  : defaultValue
+const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
+---
+
+<div
+  data-slot="slider"
+  data-default-value={serializedDefaultValue}
+  data-min={min}
+  data-max={max}
+  data-step={step}
+  data-large-step={largeStep}
+  data-orientation={orientation}
+  data-thumb-alignment={thumbAlignment}
+  data-disabled={disabled}
+  class={cn(
+    "relative flex touch-none items-center select-none data-disabled:opacity-50 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+    className
+  )}
+  {...props}
+>
+  <div
+    data-slot="slider-control"
+    class="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
+  >
+    <div
+      data-slot="slider-track"
+      class="bg-muted relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+    >
+      <div
+        data-slot="slider-range"
+        class="bg-primary rounded-full select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      >
+      </div>
+    </div>
+    {
+      Array.from({ length: thumbCount }).map(() => (
+        <div
+          data-slot="slider-thumb"
+          class="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+        />
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  import { create } from "@data-slot/slider"
+
+  create()
+</script>