fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/select/select-group.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="select-group"
+  class={cn("scroll-my-1 p-1", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/select/select-item.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"div"> & {
+  value?: string
+  disabled?: boolean
+  label?: string
+}
+
+const { class: className, value, disabled, label, ...props } = Astro.props
+---
+
+<div
+  data-slot="select-item"
+  data-value={value}
+  data-disabled={disabled ? "true" : undefined}
+  data-label={label}
+  class={cn(
+    "group/select-item data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:[svg]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 *:data-[slot=select-item-text]:flex *:data-[slot=select-item-text]:shrink-0 *:data-[slot=select-item-text]:items-center *:data-[slot=select-item-text]:gap-2 *:data-[slot=select-item-text]:whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <span
+    data-slot="select-item-text"
+    class="flex flex-1 shrink-0 items-center gap-2 whitespace-nowrap"
+  >
+    <slot />
+  </span>
+  <span
+    aria-hidden="true"
+    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center opacity-0 group-data-selected/select-item:opacity-100"
+  >
+    <Icon name="check" />
+  </span>
+</div>

package/src/components/ui/select/select-label.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="select-label"
+  class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="select-separator"
+  class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+  {...props}
+>
+</div>

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

@@ -0,0 +1,40 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"button"> & {
+  size?: "sm" | "default"
+  showIcon?: boolean
+}
+
+const {
+  class: className,
+  type = "button",
+  size = "default",
+  showIcon = true,
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="select-trigger"
+  data-size={size}
+  type={type}
+  class={cn(
+    "border-input dark:bg-input/30 dark:hover:bg-input/50 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 data-placeholder:text-muted-foreground flex w-full items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+  {
+    showIcon && (
+      <Icon
+        name="chevron-down"
+        class="text-muted-foreground pointer-events-none size-4"
+      />
+    )
+  }
+</button>

package/src/components/ui/select/select-value.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="select-value"
+  class={cn("flex flex-1 text-left", className)}
+  {...props}
+>
+  <slot />
+</span>

package/src/components/ui/select/select.astro

@@ -0,0 +1,76 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { Align, Position, Side } from "@data-slot/select"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultValue?: string
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  position?: Position
+  side?: Side
+  align?: Align
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+  highlightItemOnHover?: boolean
+}
+
+const {
+  class: className,
+  defaultValue,
+  placeholder,
+  disabled,
+  required,
+  name,
+  position,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  highlightItemOnHover,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="select"
+  data-default-value={defaultValue}
+  data-placeholder={placeholder}
+  data-disabled={disabled}
+  data-required={required}
+  data-name={name}
+  data-position={position}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  data-avoid-collisions={avoidCollisions}
+  data-collision-padding={collisionPadding}
+  data-highlight-item-on-hover={highlightItemOnHover}
+  class={cn(
+    "group/select relative inline-flex w-fit flex-col gap-1.5",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/select"
+
+  const initSelect = () => {
+    create()
+  }
+
+  initSelect()
+
+  document.addEventListener("astro:page-load", initSelect)
+</script>

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

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

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

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  orientation?: "horizontal" | "vertical"
+  decorative?: boolean
+}
+
+const {
+  class: className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="separator"
+  data-orientation={orientation}
+  data-horizontal={orientation === "horizontal" ? "" : undefined}
+  data-vertical={orientation === "vertical" ? "" : undefined}
+  role={decorative ? "none" : "separator"}
+  aria-orientation={decorative ? undefined : orientation}
+  class={cn(
+    "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+    className
+  )}
+  {...props}
+>
+</div>

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

@@ -0,0 +1,8 @@
+export { default as Sheet } from "./sheet.astro"
+export { default as SheetContent } from "./sheet-content.astro"
+export { default as SheetTrigger } from "./sheet-trigger.astro"
+export { default as SheetHeader } from "./sheet-header.astro"
+export { default as SheetTitle } from "./sheet-title.astro"
+export { default as SheetDescription } from "./sheet-description.astro"
+export { default as SheetFooter } from "./sheet-footer.astro"
+export { default as SheetClose } from "./sheet-close.astro"

package/src/components/ui/sheet/sheet-close.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { ...props } = Astro.props
+---
+
+<Button data-slot="dialog-close" {...props}>
+  <slot />
+</Button>

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

@@ -0,0 +1,59 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import DialogPortal from "@/components/ui/dialog/dialog-portal.astro"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"div"> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}
+
+const {
+  class: className,
+  side = "right",
+  showCloseButton = true,
+  style,
+  ...props
+} = Astro.props
+---
+
+<DialogPortal>
+  <div
+    data-slot="dialog-overlay"
+    hidden
+    class="fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs"
+    style="z-index: calc(var(--dialog-overlay-stack-index, 0) + 100);"
+  >
+  </div>
+  <div
+    data-slot="dialog-content"
+    data-side={side}
+    hidden
+    class={cn(
+      "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+      "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+      className
+    )}
+    style={`z-index: calc(var(--dialog-content-stack-index, 0) + 101);${style ? ` ${style}` : ""}`}
+    {...props}
+  >
+    <slot />
+    {
+      showCloseButton && (
+        <Button
+          type="button"
+          data-slot="dialog-close"
+          variant="ghost"
+          size="icon-sm"
+          class="absolute top-3 right-3"
+        >
+          <Icon name="x" class="size-4" />
+          <span class="sr-only">Close</span>
+        </Button>
+      )
+    }
+  </div>
+</DialogPortal>

package/src/components/ui/sheet/sheet-description.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"p">
+
+const { class: className, ...props } = Astro.props
+---
+
+<p
+  data-slot="dialog-description"
+  class={cn("text-muted-foreground text-sm", className)}
+  {...props}
+>
+  <slot />
+</p>

package/src/components/ui/sheet/sheet-footer.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="sheet-footer"
+  class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/sheet/sheet-header.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="sheet-header"
+  class={cn("flex flex-col gap-1.5 p-4", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"h2">
+
+const { class: className, ...props } = Astro.props
+---
+
+<h2
+  data-slot="dialog-title"
+  class={cn("text-foreground font-medium", className)}
+  {...props}
+>
+  <slot />
+</h2>

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

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { ...props } = Astro.props
+---
+
+<Button data-slot="dialog-trigger" {...props}>
+  <slot />
+</Button>

package/src/components/ui/sheet/sheet.astro

@@ -0,0 +1,125 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+  lockScroll?: boolean
+}
+
+const {
+  class: className,
+  defaultOpen,
+  closeOnClickOutside,
+  closeOnEscape,
+  lockScroll,
+  ...props
+} = Astro.props
+
+const manageScrollLock = lockScroll !== false
+---
+
+<div
+  data-slot="dialog"
+  data-sheet-lock-scroll={manageScrollLock ? "" : undefined}
+  class={className}
+  data-default-open={defaultOpen}
+  data-close-on-click-outside={closeOnClickOutside}
+  data-close-on-escape={closeOnEscape}
+  data-lock-scroll="false"
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/dialog"
+
+  create()
+
+  declare global {
+    interface Window {
+      __fulldevSheetScrollLock?: {
+        roots: Set<HTMLElement>
+        savedHtmlOverflow: string
+        savedHtmlScrollbarGutter: string
+        savedBodyPaddingRight: string
+      }
+      __fulldevSheetScrollLockBound?: boolean
+    }
+  }
+
+  const state =
+    window.__fulldevSheetScrollLock ??
+    (window.__fulldevSheetScrollLock = {
+      roots: new Set<HTMLElement>(),
+      savedHtmlOverflow: "",
+      savedHtmlScrollbarGutter: "",
+      savedBodyPaddingRight: "",
+    })
+
+  const applyScrollLock = () => {
+    const html = document.documentElement
+    const body = document.body
+
+    if (state.roots.size === 0) {
+      html.style.overflow = state.savedHtmlOverflow
+      html.style.scrollbarGutter = state.savedHtmlScrollbarGutter
+      body.style.paddingRight = state.savedBodyPaddingRight
+      return
+    }
+
+    if (state.roots.size === 1) {
+      state.savedHtmlOverflow = html.style.overflow
+      state.savedHtmlScrollbarGutter = html.style.scrollbarGutter
+      state.savedBodyPaddingRight = body.style.paddingRight
+    }
+
+    const scrollbarWidth = window.innerWidth - html.clientWidth
+    const bodyPaddingRight = Number.parseFloat(
+      window.getComputedStyle(body).paddingRight || "0"
+    )
+
+    html.style.overflow = "hidden"
+    html.style.scrollbarGutter = "auto"
+    body.style.paddingRight = `${bodyPaddingRight + Math.max(scrollbarWidth, 0)}px`
+  }
+
+  const syncRoot = (root: HTMLElement, open: boolean) => {
+    const hasRoot = state.roots.has(root)
+    if (open === hasRoot) return
+
+    if (open) state.roots.add(root)
+    else state.roots.delete(root)
+
+    applyScrollLock()
+  }
+
+  if (!window.__fulldevSheetScrollLockBound) {
+    window.__fulldevSheetScrollLockBound = true
+
+    document.addEventListener("dialog:change", (event) => {
+      const target = event.target
+
+      if (
+        !(target instanceof HTMLElement) ||
+        target.dataset.slot !== "dialog" ||
+        target.dataset.sheetLockScroll === undefined
+      ) {
+        return
+      }
+
+      const detail = (event as CustomEvent<{ open?: boolean }>).detail
+      syncRoot(target, Boolean(detail?.open))
+    })
+  }
+
+  document
+    .querySelectorAll<HTMLElement>(
+      '[data-slot="dialog"][data-sheet-lock-scroll]'
+    )
+    .forEach((root) => {
+      syncRoot(root, root.hasAttribute("data-open"))
+    })
+</script>

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

@@ -0,0 +1,23 @@
+export { default as SidebarProvider } from "./sidebar-provider.astro"
+export { default as Sidebar } from "./sidebar.astro"
+export { default as SidebarTrigger } from "./sidebar-trigger.astro"
+export { default as SidebarRail } from "./sidebar-rail.astro"
+export { default as SidebarInset } from "./sidebar-inset.astro"
+export { default as SidebarInput } from "./sidebar-input.astro"
+export { default as SidebarHeader } from "./sidebar-header.astro"
+export { default as SidebarFooter } from "./sidebar-footer.astro"
+export { default as SidebarSeparator } from "./sidebar-separator.astro"
+export { default as SidebarContent } from "./sidebar-content.astro"
+export { default as SidebarGroup } from "./sidebar-group.astro"
+export { default as SidebarGroupLabel } from "./sidebar-group-label.astro"
+export { default as SidebarGroupAction } from "./sidebar-group-action.astro"
+export { default as SidebarGroupContent } from "./sidebar-group-content.astro"
+export { default as SidebarMenu } from "./sidebar-menu.astro"
+export { default as SidebarMenuItem } from "./sidebar-menu-item.astro"
+export { default as SidebarMenuButton } from "./sidebar-menu-button.astro"
+export { default as SidebarMenuAction } from "./sidebar-menu-action.astro"
+export { default as SidebarMenuBadge } from "./sidebar-menu-badge.astro"
+export { default as SidebarMenuSkeleton } from "./sidebar-menu-skeleton.astro"
+export { default as SidebarMenuSub } from "./sidebar-menu-sub.astro"
+export { default as SidebarMenuSubButton } from "./sidebar-menu-sub-button.astro"
+export { default as SidebarMenuSubItem } from "./sidebar-menu-sub-item.astro"

package/src/components/ui/sidebar/sidebar-content.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-content"
+  data-sidebar="content"
+  class={cn(
+    "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/sidebar/sidebar-footer.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-footer"
+  data-sidebar="footer"
+  class={cn("flex flex-col gap-2 p-2", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,31 @@
+---
+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
+  }
+
+const { as: explicitTag, class: className, type, ...props } = Astro.props
+
+const Tag = explicitTag || ("href" in Astro.props ? "a" : "button")
+const resolvedType = Tag === "button" ? type || "button" : undefined
+---
+
+<Tag
+  data-slot="sidebar-group-action"
+  data-sidebar="group-action"
+  type={resolvedType}
+  class={cn(
+    "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Tag>