fulldev-ui 0.7.0 → 0.9.0

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

@@ -1,34 +1,36 @@
 ---
 import type { HTMLAttributes } from "astro/types"
-import ChevronDownIcon from "lucide-static/icons/chevron-down.svg"
 
 import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
 
-interface Props extends HTMLAttributes<"select"> {}
+type Props = Omit<HTMLAttributes<"select">, "size"> & {
+  size?: "sm" | "default"
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
 <div
-  class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+  class={cn(
+    "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+    className
+  )}
   data-slot="native-select-wrapper"
+  data-size={size}
 >
   <select
     data-slot="native-select"
-    class={cn(
-      "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
-      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-      className
-    )}
+    data-size={size}
+    class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground 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 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-8"
     {...props}
   >
     <slot />
   </select>
-  <ChevronDownIcon
-    class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+  <Icon
+    name="chevron-down"
+    class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
     aria-hidden="true"
     data-slot="native-select-icon"
   />
 </div>
-

package/src/components/ui/navigation-menu/index.ts

@@ -1,9 +1,9 @@
 export { default as NavigationMenu } from "./navigation-menu.astro"
 export { default as NavigationMenuContent } from "./navigation-menu-content.astro"
+export { default as NavigationMenuIndicator } from "./navigation-menu-indicator.astro"
 export { default as NavigationMenuItem } from "./navigation-menu-item.astro"
 export { default as NavigationMenuLink } from "./navigation-menu-link.astro"
 export { default as NavigationMenuList } from "./navigation-menu-list.astro"
-export { default as NavigationMenuSub } from "./navigation-menu-sub.astro"
-export { default as NavigationMenuSubItem } from "./navigation-menu-sub-item.astro"
-export { default as NavigationMenuSubLink } from "./navigation-menu-sub-link.astro"
+export { default as NavigationMenuPositioner } from "./navigation-menu-positioner.astro"
 export { default as NavigationMenuTrigger } from "./navigation-menu-trigger.astro"
+export { default as navigationMenuTriggerStyle } from "./navigation-menu-trigger-style"

package/src/components/ui/navigation-menu/navigation-menu-content.astro

@@ -3,26 +3,35 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = {
+  class?: string
+  align?: "start" | "center" | "end"
+  alignOffset?: number
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+} & HTMLAttributes<"div">
 
-const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
+const {
+  class: className = "",
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  ...props
+} = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="navigation-menu-content"
-      class={cn(
-        "bg-popover text-popover-foreground invisible absolute top-full left-0 z-50 mt-1.5 w-auto -translate-y-1 overflow-hidden rounded-md border p-2 pr-2.5 opacity-0 shadow transition-all duration-200 group-focus-within/navigation-menu-item:visible group-focus-within/navigation-menu-item:translate-y-0 group-focus-within/navigation-menu-item:opacity-100 group-hover/navigation-menu-item:visible group-hover/navigation-menu-item:translate-y-0 group-hover/navigation-menu-item:opacity-100 before:absolute before:top-0 before:right-0 before:left-0 before:h-2 before:-translate-y-full before:content-[''] hover:visible hover:translate-y-0 hover:opacity-100",
-        "navigation-menu-content",
-        className
-      )}
-      role="menu"
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  {...props}
+  data-slot="navigation-menu-content"
+  data-align={align}
+  data-align-offset={alignOffset}
+  data-side={side}
+  data-side-offset={sideOffset}
+  class={cn(
+    "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 h-full w-auto p-2 pr-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+    className
+  )}
+>
+  <slot />
+</div>

package/src/components/ui/navigation-menu/navigation-menu-indicator.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="navigation-menu-indicator"
+  class={cn(
+    "data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+    className
+  )}
+  {...props}
+>
+  <div
+    class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md"
+  >
+  </div>
+</div>

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

@@ -3,21 +3,34 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"li"> {}
-
-const { class: className, ...props } = Astro.props
+type Props = HTMLAttributes<"li"> & {
+  value: string
+  align?: "start" | "center" | "end"
+  alignOffset?: number
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+}
 
-const slot = await Astro.slots.render("default")
+const {
+  class: className,
+  value,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  ...props
+} = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <li
-      data-slot="navigation-menu-item"
-      class={cn("relative", "group/navigation-menu-item", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </li>
-  )
-}
+<li
+  data-slot="navigation-menu-item"
+  data-value={value}
+  data-align={align}
+  data-align-offset={alignOffset}
+  data-side={side}
+  data-side-offset={sideOffset}
+  class={cn("relative list-none", className)}
+  {...props}
+>
+  <slot />
+</li>

package/src/components/ui/navigation-menu/navigation-menu-link.astro

@@ -1,49 +1,23 @@
 ---
 import type { HTMLAttributes } from "astro/types"
-import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const variants = cva(
-  "focus-visible:ring-ring/50 inline-flex w-full items-start justify-start rounded-md transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-none",
-  {
-    variants: {
-      variant: {
-        default:
-          "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex-col gap-1 p-2 text-sm [&_svg:not([class*='size-'])]:size-4",
-        trigger:
-          "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground h-9 w-max px-4 py-2 text-sm font-medium disabled:pointer-events-none disabled:opacity-50",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-interface Props extends HTMLAttributes<"a">, VariantProps<typeof variants> {
+type Props = HTMLAttributes<"a"> & {
   active?: boolean
 }
 
-const { class: className, variant, href, active, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
+const { class: className, active, ...props } = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <a
-      data-slot="navigation-menu-link"
-      class={cn(
-        variants({ variant }),
-        active &&
-          "bg-accent/50 text-accent-foreground hover:bg-accent focus:bg-accent",
-        className
-      )}
-      href={href}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </a>
-  )
-}
+<a
+  data-slot="navigation-menu-link"
+  data-active={active ? "true" : undefined}
+  class={cn(
+    "hover:bg-muted focus:bg-muted focus-visible:ring-ring/50 data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-sm [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</a>

package/src/components/ui/navigation-menu/navigation-menu-list.astro

@@ -3,24 +3,18 @@ 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="navigation-menu-list"
-      class={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </ul>
-  )
-}
+<ul
+  data-slot="navigation-menu-list"
+  class={cn(
+    "group flex flex-1 list-none items-center justify-center gap-1",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</ul>

package/src/components/ui/navigation-menu/navigation-menu-positioner.astro

@@ -0,0 +1,47 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+  align?: "start" | "center" | "end"
+  alignOffset?: number
+}
+
+const {
+  class: className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+} = Astro.props
+---
+
+<div data-slot="navigation-menu-portal">
+  <div
+    {...props}
+    data-slot="navigation-menu-positioner"
+    data-side={side}
+    data-side-offset={sideOffset}
+    data-align={align}
+    data-align-offset={alignOffset}
+    class={cn(
+      "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+      className
+    )}
+  >
+    <div
+      data-slot="navigation-menu-popup"
+      class="data-[ending-style]:easing-[ease] xs:w-(--popup-width) bg-popover text-popover-foreground ring-foreground/10 relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0"
+    >
+      <div
+        data-slot="navigation-menu-viewport"
+        class="relative size-full overflow-hidden"
+      >
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/ui/navigation-menu/navigation-menu-trigger-style.ts

@@ -0,0 +1,7 @@
+import { cva } from "class-variance-authority"
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger hover:bg-muted focus:bg-muted focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50"
+)
+
+export default navigationMenuTriggerStyle

package/src/components/ui/navigation-menu/navigation-menu-trigger.astro

@@ -1,32 +1,27 @@
 ---
 import type { HTMLAttributes } from "astro/types"
-import ChevronDown from "lucide-static/icons/chevron-down.svg"
 
 import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
 
-type Props = HTMLAttributes<"button"> & HTMLAttributes<"a">
+import navigationMenuTriggerStyle from "./navigation-menu-trigger-style"
 
-const { class: className, href, ...props } = Astro.props
+type Props = HTMLAttributes<"button">
 
-const slot = await Astro.slots.render("default")
-
-const Comp = href ? "a" : "button"
+const { class: className, type = "button", ...props } = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <Comp
-      data-slot="navigation-menu-trigger"
-      class={cn(
-        "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
-        "navigation-menu-trigger cursor-pointer [&:where(button)]:border-none [&:where(button)]:bg-transparent",
-        className
-      )}
-      href={href}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-      <ChevronDown class="relative top-[1px] ml-1 size-3 transition-transform duration-300 group-focus-within/navigation-menu-item:rotate-180 group-hover/navigation-menu-item:rotate-180" />
-    </Comp>
-  )
-}
+<button
+  data-slot="navigation-menu-trigger"
+  type={type}
+  class={cn(navigationMenuTriggerStyle(), "group", className)}
+  {...props}
+>
+  <slot />
+  {" "}
+  <Icon
+    name="chevron-down"
+    class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+    aria-hidden="true"
+  />
+</button>

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

@@ -3,24 +3,61 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"nav"> {}
+import NavigationMenuPositioner from "./navigation-menu-positioner.astro"
 
-const { class: className, ...props } = Astro.props
+type Props = HTMLAttributes<"nav"> & {
+  delayOpen?: number
+  delayClose?: number
+  openOnFocus?: boolean
+  side?: "top" | "right" | "bottom" | "left"
+  align?: "start" | "center" | "end"
+  sideOffset?: number
+  alignOffset?: number
+  positionMethod?: "absolute" | "fixed"
+  safeTriangle?: boolean
+  debugSafeTriangle?: boolean
+}
 
-const slot = await Astro.slots.render("default")
+const {
+  class: className = "",
+  delayOpen = 0,
+  delayClose = 0,
+  openOnFocus,
+  side = "bottom",
+  align = "start",
+  sideOffset = 0,
+  alignOffset = 0,
+  positionMethod = "absolute",
+  safeTriangle,
+  debugSafeTriangle,
+  ...props
+} = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <nav
-      data-slot="navigation-menu"
-      class={cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </nav>
-  )
-}
+<nav
+  {...props}
+  data-slot="navigation-menu"
+  data-delay-open={delayOpen}
+  data-delay-close={delayClose}
+  data-open-on-focus={openOnFocus}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  data-position-method={positionMethod}
+  data-safe-triangle={safeTriangle}
+  data-debug-safe-triangle={debugSafeTriangle}
+  class={cn(
+    "group/navigation-menu relative flex flex-1 items-center justify-center",
+    className
+  )}
+>
+  <slot />
+  <NavigationMenuPositioner align={align} />
+</nav>
+
+<script>
+  import { create } from "@data-slot/navigation-menu"
+
+  create()
+</script>

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

@@ -0,0 +1,6 @@
+export { default as Popover } from "./popover.astro"
+export { default as PopoverContent } from "./popover-content.astro"
+export { default as PopoverDescription } from "./popover-description.astro"
+export { default as PopoverHeader } from "./popover-header.astro"
+export { default as PopoverTitle } from "./popover-title.astro"
+export { default as PopoverTrigger } from "./popover-trigger.astro"

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

@@ -0,0 +1,62 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { PopoverAlign, PopoverSide } from "@data-slot/popover"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  side?: PopoverSide
+  align?: PopoverAlign
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+  position?: PopoverSide
+}
+
+const {
+  class: className,
+  hidden = true,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  position,
+  ...props
+} = Astro.props
+---
+
+<div data-slot="popover-portal">
+  <div
+    data-slot="popover-positioner"
+    data-side={side}
+    data-align={align}
+    data-side-offset={sideOffset}
+    data-align-offset={alignOffset}
+    data-avoid-collisions={avoidCollisions}
+    data-collision-padding={collisionPadding}
+    data-position={position}
+    class="isolate z-50"
+  >
+    <div
+      data-slot="popover-content"
+      data-side={side}
+      data-align={align}
+      data-side-offset={sideOffset}
+      data-align-offset={alignOffset}
+      data-avoid-collisions={avoidCollisions}
+      data-collision-padding={collisionPadding}
+      data-position={position}
+      hidden={hidden}
+      class={cn(
+        "bg-popover text-popover-foreground ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 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 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100 outline-none",
+        className
+      )}
+      {...props}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

package/src/components/ui/popover/popover-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="popover-description"
+  class={cn("text-muted-foreground", className)}
+  {...props}
+>
+  <slot />
+</p>

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

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

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

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

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"button">
+
+const { class: className, type = "button", ...props } = Astro.props
+---
+
+<button data-slot="popover-trigger" type={type} class={className} {...props}>
+  <slot />
+</button>