fulldev-ui 0.11.1 → 0.13.0

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

@@ -0,0 +1,26 @@
+export { default as Toast } from "./toast.astro"
+export { default as ToastTemplate } from "./toast-template.astro"
+export { default as ToastViewport } from "./toast-viewport.astro"
+export { default as ToastItem } from "./toast-item.astro"
+export { default as ToastContent } from "./toast-content.astro"
+export { default as ToastIcon } from "./toast-icon.astro"
+export { default as ToastTitle } from "./toast-title.astro"
+export { default as ToastDescription } from "./toast-description.astro"
+export { default as ToastAction } from "./toast-action.astro"
+export { default as ToastClose } from "./toast-close.astro"
+export { default as Toaster } from "./toaster.astro"
+
+export type {
+  ToastActionEvent,
+  ToastClearableField,
+  ToastController,
+  ToastOptions,
+  ToastPosition,
+  ToastPromiseErrorValue,
+  ToastPromiseHandle,
+  ToastPromiseOptions,
+  ToastPromiseState,
+  ToastPromiseStateValue,
+  ToastShowOptions,
+  ToastUpdateOptions,
+} from "@data-slot/toast"

package/src/components/ui/toast/toast-action.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+type Props = HTMLAttributes<"button">
+
+const {
+  class: className,
+  hidden = true,
+  type = "button",
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="toast-action"
+  type={type}
+  class={cn(buttonVariants({ variant: "outline", size: "sm" }), className)}
+  hidden={hidden}
+  {...props}
+>
+  <slot />
+</button>

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

@@ -0,0 +1,27 @@
+---
+import type { ComponentProps } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { class: className, ...props } = Astro.props
+---
+
+<Button
+  data-slot="toast-close"
+  variant="ghost"
+  size="icon-sm"
+  aria-label="Close notification"
+  class={cn(
+    "text-muted-foreground hover:text-foreground relative shrink-0 after:absolute after:-inset-2 after:content-['']",
+    className
+  )}
+  {...props}
+>
+  <slot>
+    <XIcon aria-hidden="true" />
+  </slot>
+</Button>

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="toast-content"
+  class={cn(
+    "flex min-h-16 items-center gap-3 overflow-hidden p-4 transition-opacity duration-200",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

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

package/src/components/ui/toast/toast-icon.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import CircleCheckIcon from "@lucide/astro/icons/circle-check"
+import InfoIcon from "@lucide/astro/icons/info"
+import LoaderIcon from "@lucide/astro/icons/loader-circle"
+import OctagonXIcon from "@lucide/astro/icons/octagon-x"
+import TriangleAlertIcon from "@lucide/astro/icons/triangle-alert"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="toast-icon"
+  class={cn(
+    "shrink-0 group-data-[type=error]/toast-item:[&_[data-toast-icon=error]]:block group-data-[type=info]/toast-item:[&_[data-toast-icon=info]]:block group-data-[type=loading]/toast-item:[&_[data-toast-icon=loading]]:block group-data-[type=success]/toast-item:[&_[data-toast-icon=success]]:block group-data-[type=warning]/toast-item:[&_[data-toast-icon=warning]]:block [&_svg]:hidden [&_svg]:size-4",
+    className
+  )}
+  {...props}
+>
+  <CircleCheckIcon data-toast-icon="success" aria-hidden="true" />
+  <InfoIcon data-toast-icon="info" aria-hidden="true" />
+  <TriangleAlertIcon data-toast-icon="warning" aria-hidden="true" />
+  <OctagonXIcon
+    data-toast-icon="error"
+    class="text-destructive"
+    aria-hidden="true"
+  />
+  <LoaderIcon
+    data-toast-icon="loading"
+    class="animate-spin"
+    aria-hidden="true"
+  />
+</span>

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

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"li">
+
+const { class: className, ...props } = Astro.props
+---
+
+<li
+  data-slot="toast-item"
+  role="status"
+  aria-atomic="true"
+  class={cn(
+    "group/toast-item bg-popover text-popover-foreground ring-foreground/10 focus-visible:border-ring focus-visible:ring-ring/50 pointer-events-auto absolute inset-x-0 z-[calc(1000-var(--toast-index))] box-border w-full rounded-xl opacity-0 shadow-lg ring-1 transition-[transform,opacity,height,box-shadow] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none group-data-[position=bottom-center]/toast-viewport:bottom-0 group-data-[position=bottom-center]/toast-viewport:origin-bottom group-data-[position=bottom-left]/toast-viewport:bottom-0 group-data-[position=bottom-left]/toast-viewport:origin-bottom group-data-[position=bottom-right]/toast-viewport:bottom-0 group-data-[position=bottom-right]/toast-viewport:origin-bottom group-data-[position=top-center]/toast-viewport:top-0 group-data-[position=top-center]/toast-viewport:origin-top group-data-[position=top-left]/toast-viewport:top-0 group-data-[position=top-left]/toast-viewport:origin-top group-data-[position=top-right]/toast-viewport:top-0 group-data-[position=top-right]/toast-viewport:origin-top focus-visible:ring-3",
+    "[transform:translate3d(0,calc(var(--toast-lift,-1)*-100%),0)] data-[mounted=true]:[transform:translate3d(0,0,0)] data-[mounted=true]:opacity-100 data-[swiping=true]:transition-none data-[visible=false]:pointer-events-none data-[visible=false]:opacity-0",
+    "data-[mounted=true]:data-[expanded=true]:h-(--toast-initial-height) data-[mounted=true]:data-[expanded=true]:[transform:translate3d(0,calc(var(--toast-offset,0px)*var(--toast-lift,-1)),0)] data-[mounted=true]:data-[expanded=false]:data-[front=false]:h-(--toast-front-height) data-[mounted=true]:data-[expanded=false]:data-[front=false]:[transform:translate3d(0,calc(var(--toast-collapsed-offset-y,0px)*var(--toast-lift,-1)),0)_scale(calc(1-var(--toast-index,0)*0.05))]",
+    "data-[removed=true]:data-[front=false]:data-[expanded=false]:[transform:translate3d(0,40%,0)] data-[removed=true]:data-[front=false]:data-[expanded=false]:opacity-0 data-[removed=true]:data-[front=false]:data-[expanded=true]:[transform:translate3d(0,calc(var(--toast-lift,-1)*var(--toast-offset,0px)+var(--toast-lift,-1)*-100%),0)] data-[removed=true]:data-[front=false]:data-[expanded=true]:opacity-0 data-[removed=true]:data-[front=true]:[transform:translate3d(0,calc(var(--toast-lift,-1)*-100%),0)] data-[removed=true]:data-[front=true]:opacity-0",
+    "data-[swiping=true]:data-[expanded=true]:[transform:translate3d(var(--toast-swipe-amount-x,0px),calc(var(--toast-offset,0px)*var(--toast-lift,-1)+var(--toast-swipe-amount-y,0px)),0)] data-[swiping=true]:data-[front=false]:data-[expanded=false]:[transform:translate3d(var(--toast-swipe-amount-x,0px),calc(var(--toast-collapsed-offset-y,0px)*var(--toast-lift,-1)+var(--toast-swipe-amount-y,0px)),0)_scale(calc(1-var(--toast-index,0)*0.05))] data-[swiping=true]:data-[front=true]:[transform:translate3d(var(--toast-swipe-amount-x,0px),var(--toast-swipe-amount-y,0px),0)]",
+    "data-[removed=true]:data-[swipe-out=true]:opacity-0 data-[removed=true]:data-[swipe-out=true]:data-[front=false]:data-[expanded=false]:[transform:translate3d(var(--toast-swipe-end-x,0px),calc(var(--toast-collapsed-offset-y,0px)*var(--toast-lift,-1)+var(--toast-swipe-end-y,0px)),0)_scale(calc(1-var(--toast-index,0)*0.05))] data-[removed=true]:data-[swipe-out=true]:data-[front=false]:data-[expanded=true]:[transform:translate3d(var(--toast-swipe-end-x,0px),calc(var(--toast-lift,-1)*var(--toast-offset,0px)+var(--toast-swipe-end-y,0px)),0)] data-[removed=true]:data-[swipe-out=true]:data-[front=true]:[transform:translate3d(var(--toast-swipe-end-x,0px),var(--toast-swipe-end-y,0px),0)]",
+    "after:absolute after:left-0 after:h-[calc(var(--toast-gap,0px)+1px)] after:w-full after:content-[''] group-data-[position=bottom-center]/toast-viewport:after:bottom-full group-data-[position=bottom-left]/toast-viewport:after:bottom-full group-data-[position=bottom-right]/toast-viewport:after:bottom-full group-data-[position=top-center]/toast-viewport:after:top-full group-data-[position=top-left]/toast-viewport:after:top-full group-data-[position=top-right]/toast-viewport:after:top-full data-[expanded=false]:data-[front=false]:data-open:[&>*]:opacity-0",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</li>

package/src/components/ui/toast/toast-template.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { ...props } = Astro.props
+---
+
+<template data-slot="toast-template" {...props}>
+  <slot />
+</template>

package/src/components/ui/toast/toast-title.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="toast-title"
+  class={cn("text-sm font-medium", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/toast/toast-viewport.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"ol">
+
+const { class: className, ...props } = Astro.props
+---
+
+<ol
+  data-slot="toast-viewport"
+  class={cn(
+    "group/toast-viewport pointer-events-none fixed z-50 m-0 h-(--toast-stack-size,0px) w-[min(24rem,calc(100vw-2rem))] list-none p-0 outline-none [--toast-collapsed-peek:0.75rem] [--toast-gap:0.75rem] data-[position=bottom-center]:bottom-4 data-[position=bottom-center]:left-1/2 data-[position=bottom-center]:-translate-x-1/2 data-[position=bottom-left]:bottom-4 data-[position=bottom-left]:left-4 data-[position=bottom-right]:right-4 data-[position=bottom-right]:bottom-4 data-[position=top-center]:top-4 data-[position=top-center]:left-1/2 data-[position=top-center]:-translate-x-1/2 data-[position=top-left]:top-4 data-[position=top-left]:left-4 data-[position=top-right]:top-4 data-[position=top-right]:right-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</ol>

package/src/components/ui/toast/toast.astro

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { ToastPosition } from "@data-slot/toast"
+
+type Props = HTMLAttributes<"div"> & {
+  limit?: number
+  duration?: number
+  position?: ToastPosition
+  pauseOnHover?: boolean
+  pauseOnFocus?: boolean
+  portal?: boolean
+}
+
+const {
+  class: className,
+  limit,
+  duration,
+  position,
+  pauseOnHover,
+  pauseOnFocus,
+  portal,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="toast"
+  data-limit={limit}
+  data-duration={duration}
+  data-position={position}
+  data-pause-on-hover={pauseOnHover}
+  data-pause-on-focus={pauseOnFocus}
+  data-portal={portal}
+  class={className}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/toast"
+
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
+</script>

package/src/components/ui/toast/toaster.astro

@@ -0,0 +1,37 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import ToastAction from "./toast-action.astro"
+import ToastClose from "./toast-close.astro"
+import ToastContent from "./toast-content.astro"
+import ToastDescription from "./toast-description.astro"
+import ToastIcon from "./toast-icon.astro"
+import ToastItem from "./toast-item.astro"
+import ToastTemplate from "./toast-template.astro"
+import ToastTitle from "./toast-title.astro"
+import ToastViewport from "./toast-viewport.astro"
+import Toast from "./toast.astro"
+
+type Props = ComponentProps<typeof Toast> & {
+  viewportClass?: string
+}
+
+const { viewportClass, ...props } = Astro.props
+---
+
+<Toast {...props}>
+  <ToastTemplate>
+    <ToastItem>
+      <ToastContent>
+        <ToastIcon />
+        <div class="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <ToastAction />
+        <ToastClose />
+      </ToastContent>
+    </ToastItem>
+  </ToastTemplate>
+  <ToastViewport class={viewportClass} />
+</Toast>

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

@@ -38,6 +38,12 @@ const {
 <script>
   import { create } from "@data-slot/toggle"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
 </script>

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

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./toggle-group.astro"
+export { default as ToggleGroupItem } from "./toggle-group-item.astro"

package/src/components/ui/toggle-group/toggle-group-item.astro

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import {
+  toggleVariants,
+  type ToggleVariantProps,
+} from "@/components/ui/toggle/toggle-variants"
+
+type Props = HTMLAttributes<"button"> &
+  ToggleVariantProps & {
+    value: string
+    disabled?: boolean
+  }
+
+const {
+  class: className,
+  value,
+  disabled,
+  variant = "default",
+  size = "default",
+  type = "button",
+  ...props
+} = Astro.props
+---
+
+<button
+  data-slot="toggle-group-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  type={type}
+  disabled={disabled}
+  aria-pressed="false"
+  class={cn(
+    "data-[state=on]:bg-muted shrink-0 group-aria-disabled/toggle-group:pointer-events-none group-aria-disabled/toggle-group:opacity-50 focus:z-10 focus-visible:z-10",
+    "group-data-[variant=outline]/toggle-group:border-input group-data-[variant=default]/toggle-group:border-0 group-data-[variant=default]/toggle-group:shadow-none group-data-[variant=outline]/toggle-group:border group-data-[variant=outline]/toggle-group:shadow-xs group-data-[variant=default]/toggle-group:data-[state=off]:bg-transparent group-data-[variant=outline]/toggle-group:data-[state=off]:bg-transparent",
+    "group-data-[size=default]/toggle-group:h-9 group-data-[size=default]/toggle-group:min-w-9 group-data-[size=default]/toggle-group:px-2.5 group-data-[size=lg]/toggle-group:h-10 group-data-[size=lg]/toggle-group:min-w-10 group-data-[size=lg]/toggle-group:px-2.5 group-data-[size=sm]/toggle-group:h-8 group-data-[size=sm]/toggle-group:min-w-8 group-data-[size=sm]/toggle-group:px-2.5 group-data-[size=default]/toggle-group:has-data-[icon=inline-end]:pr-2 group-data-[size=lg]/toggle-group:has-data-[icon=inline-end]:pr-2 group-data-[size=sm]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[size=default]/toggle-group:has-data-[icon=inline-start]:pl-2 group-data-[size=lg]/toggle-group:has-data-[icon=inline-start]:pl-2 group-data-[size=sm]/toggle-group:has-data-[icon=inline-start]:pl-1.5",
+    toggleVariants({ variant, size }),
+    className
+  )}
+  {...props}
+>
+  <slot />
+</button>

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

@@ -0,0 +1,74 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import type { ToggleVariantProps } from "@/components/ui/toggle/toggle-variants"
+
+type Props = HTMLAttributes<"div"> &
+  ToggleVariantProps & {
+    defaultValue?: string | string[]
+    multiple?: boolean
+    orientation?: "horizontal" | "vertical"
+    loop?: boolean
+    disabled?: boolean
+    spacing?: number
+  }
+
+const {
+  class: className,
+  style,
+  defaultValue,
+  multiple,
+  orientation = "horizontal",
+  loop,
+  disabled,
+  variant,
+  size,
+  spacing = 2,
+  ...props
+} = Astro.props
+
+const serializedDefaultValue = Array.isArray(defaultValue)
+  ? defaultValue.join(" ")
+  : defaultValue
+
+const resolvedStyle =
+  typeof style === "string"
+    ? `--gap: ${spacing}; ${style}`
+    : { "--gap": spacing, ...(style ?? {}) }
+---
+
+<div
+  data-slot="toggle-group"
+  data-default-value={serializedDefaultValue}
+  data-multiple={multiple ? "" : undefined}
+  data-orientation={orientation}
+  data-horizontal={orientation === "horizontal" ? "" : undefined}
+  data-vertical={orientation === "vertical" ? "" : undefined}
+  data-loop={loop}
+  data-disabled={disabled ? "" : undefined}
+  data-variant={variant}
+  data-size={size}
+  data-spacing={spacing}
+  style={resolvedStyle}
+  class={cn(
+    "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:shadow-xs [&[data-orientation=horizontal][data-spacing='0']>[data-slot=toggle-group-item]:first-child]:rounded-l-md [&[data-orientation=horizontal][data-spacing='0']>[data-slot=toggle-group-item]:last-child]:rounded-r-md [&[data-orientation=horizontal][data-spacing='0'][data-variant=outline]>[data-slot=toggle-group-item]:not(:first-child)]:border-l-0 [&[data-orientation=vertical][data-spacing='0']>[data-slot=toggle-group-item]:first-child]:rounded-t-md [&[data-orientation=vertical][data-spacing='0']>[data-slot=toggle-group-item]:last-child]:rounded-b-md [&[data-orientation=vertical][data-spacing='0'][data-variant=outline]>[data-slot=toggle-group-item]:not(:first-child)]:border-t-0 [&[data-spacing='0']>[data-slot=toggle-group-item]]:rounded-none [&[data-spacing='0']>[data-slot=toggle-group-item]]:px-2 [&[data-spacing='0']>[data-slot=toggle-group-item]]:shadow-none [&[data-spacing='0']>[data-slot=toggle-group-item]:has([data-icon=inline-end])]:pr-1.5 [&[data-spacing='0']>[data-slot=toggle-group-item]:has([data-icon=inline-start])]:pl-1.5",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/toggle-group"
+
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
+</script>

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

@@ -35,7 +35,7 @@ const {
     data-align-offset={alignOffset}
     data-avoid-collisions={avoidCollisions}
     data-collision-padding={collisionPadding}
-    class="isolate z-50"
+    class="isolate z-[1000]"
   >
     <div
       data-slot="tooltip-content"

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

@@ -5,6 +5,7 @@ import type { TooltipAlign, TooltipSide } from "@data-slot/tooltip"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
+  mountStrategy?: "lazy" | "eager"
   delay?: number
   skipDelayDuration?: number
   side?: TooltipSide
@@ -17,6 +18,7 @@ type Props = HTMLAttributes<"div"> & {
 }
 
 const {
+  mountStrategy,
   class: className,
   delay = 300,
   skipDelayDuration = 300,
@@ -33,6 +35,7 @@ const {
 
 <div
   data-slot="tooltip"
+  data-mount-strategy={mountStrategy}
   data-delay={delay}
   data-skip-delay-duration={skipDelayDuration}
   data-side={side}
@@ -51,6 +54,12 @@ const {
 <script>
   import { create } from "@data-slot/tooltip"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
 </script>