fulldev-ui 0.7.0 → 0.9.1

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

@@ -3,24 +3,18 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="field-group"
-      class={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="field-group"
+  class={cn(
+    "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/field/field-label.astro

@@ -1,29 +1,22 @@
 ---
-import type { HTMLAttributes } from "astro/types"
+import type { ComponentProps } from "astro/types"
 
 import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
 
-interface Props extends HTMLAttributes<"label"> {}
+type Props = ComponentProps<typeof Label>
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <label
-      data-slot="field-label"
-      class={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 text-sm leading-snug font-medium select-none",
-        "group-data-[disabled=true]/field:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </label>
-  )
-}
+<Label
+  data-slot="field-label"
+  class={cn(
+    "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
+    "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Label>

package/src/components/ui/field/field-legend.astro

@@ -3,29 +3,21 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"legend"> {
+type Props = HTMLAttributes<"legend"> & {
   variant?: "legend" | "label"
 }
 
 const { class: className, variant = "legend", ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      class={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </legend>
-  )
-}
+<legend
+  data-slot="field-legend"
+  data-variant={variant}
+  class={cn(
+    "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</legend>

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

@@ -4,16 +4,15 @@ import type { HTMLAttributes } from "astro/types"
 import { cn } from "@/lib/utils"
 import { Separator } from "@/components/ui/separator"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
+const hasContent = Astro.slots.has("default")
 ---
 
 <div
   data-slot="field-separator"
-  data-content={slot}
+  data-content={hasContent}
   class={cn(
     "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
     className
@@ -22,12 +21,12 @@ const slot = await Astro.slots.render("default")
 >
   <Separator class="absolute inset-0 top-1/2" />
   {
-    slot?.trim().length > 0 && (
+    hasContent && (
       <span
-        class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+        class="text-muted-foreground bg-background relative mx-auto block w-fit px-2"
         data-slot="field-separator-content"
       >
-        <Fragment set:html={slot} />
+        <slot />
       </span>
     )
   }

package/src/components/ui/field/field-set.astro

@@ -3,25 +3,18 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"fieldset"> {}
+type Props = HTMLAttributes<"fieldset">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <fieldset
-      data-slot="field-set"
-      class={cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </fieldset>
-  )
-}
+<fieldset
+  data-slot="field-set"
+  class={cn(
+    "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</fieldset>

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

@@ -3,24 +3,18 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="field-label"
-      class={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="field-label"
+  class={cn(
+    "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/field/field.astro

@@ -4,24 +4,19 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div">, VariantProps<typeof variants> {}
+type Props = HTMLAttributes<"div"> & VariantProps<typeof variants>
 
 const variants = cva(
-  "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+  "data-[invalid=true]:text-destructive group/field flex w-full gap-3",
   {
     variants: {
       orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-        horizontal: [
-          "flex-row items-center",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-        responsive: [
-          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
+        vertical:
+          "flex-col [&>.sr-only]:w-auto [&>:not([role=checkbox]):not([role=radio])]:w-full",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto [&>:not([role=checkbox]):not([role=radio])]:w-full @md/field-group:[&>:not([role=checkbox]):not([role=radio])]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -31,20 +26,14 @@ const variants = cva(
 )
 
 const { class: className, orientation = "vertical", ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      role="group"
-      data-slot="field"
-      data-orientation={orientation}
-      class={cn(variants({ orientation }), className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  role="group"
+  data-slot="field"
+  data-orientation={orientation}
+  class={cn(variants({ orientation }), className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -1,6 +1,7 @@
 export { default as Field } from "./field.astro"
 export { default as FieldContent } from "./field-content.astro"
 export { default as FieldDescription } from "./field-description.astro"
+export { default as FieldError } from "./field-error.astro"
 export { default as FieldGroup } from "./field-group.astro"
 export { default as FieldLabel } from "./field-label.astro"
 export { default as FieldLegend } from "./field-legend.astro"

package/src/components/ui/form/form.astro

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

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

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

package/src/components/ui/header/header-container.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="header-container"
+  class={cn("relative mx-auto flex w-full max-w-7xl gap-4 px-4", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/header/header-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="header-group"
+  class={cn("flex min-w-0 items-center gap-2", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -4,67 +4,29 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-interface Props
-  extends HTMLAttributes<"header">,
-    VariantProps<typeof variants> {}
-
-const variants = cva(
-  "relative top-0 z-50 mx-auto flex h-(--header-height) items-center justify-between gap-8 border-b border-transparent px-(--header-px) py-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-background sticky w-full",
-        floating: [
-          "w-[calc(100%-2*var(--gutter,24px))] max-w-(--header-width)",
-          "top-2 mt-2 h-[calc(var(--header-height)-var(--spacing)*2)] overflow-hidden rounded-xl",
-          "bg-background border-border sticky border",
-        ],
-      },
-    },
-    defaultVariants: {
-      variant: "default",
+type Props = HTMLAttributes<"header"> & VariantProps<typeof variants>
+
+const variants = cva("relative z-50 flex w-full items-center gap-4 py-2", {
+  variants: {
+    variant: {
+      default: "",
+      floating:
+        "bg-background mx-auto my-2 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-lg border shadow-sm",
     },
-  }
-)
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
 
 const { class: className, variant, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <header
-      class={cn(variants({ variant }), className)}
-      data-slot="header"
-      data-variant={variant}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </header>
-  )
-}
-
-<style is:global>
-  [data-slot="header"] {
-    --header-width: var(--container, var(--breakpoint-xl));
-    --header-px: max(
-      var(--gutter, 24px),
-      calc((100cqw - var(--header-width)) / 2)
-    );
-  }
-
-  [data-slot="header"][data-variant="floating"] {
-    --header-px: calc(var(--spacing) * 6);
-  }
-
-  :root:has([data-slot="header"]) {
-    --header-height: calc(var(--spacing) * 16);
-  }
-
-  @media (min-width: 1024px) {
-    [data-slot="header"][data-variant="floating"] {
-      --header-px: calc(var(--spacing) * 16);
-    }
-  }
-</style>
+<header
+  class={cn(variants({ variant }), className)}
+  data-slot="header"
+  data-variant={variant}
+  {...props}
+>
+  <slot />
+</header>

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

@@ -1,3 +1,3 @@
 export { default as Header } from "./header.astro"
-export { default as HeaderActions } from "./header-actions.astro"
-export { default as HeaderContent } from "./header-content.astro"
+export { default as HeaderContainer } from "./header-container.astro"
+export { default as HeaderGroup } from "./header-group.astro"

package/src/components/ui/hover-card/hover-card-content.astro

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  side?: "top" | "right" | "bottom" | "left"
+  align?: "start" | "center" | "end"
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+}
+
+const {
+  class: className,
+  hidden = true,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 4,
+  avoidCollisions,
+  collisionPadding,
+  ...props
+} = Astro.props
+---
+
+<div data-slot="hover-card-portal">
+  <div
+    data-slot="hover-card-positioner"
+    data-side={side}
+    data-align={align}
+    data-side-offset={sideOffset}
+    data-align-offset={alignOffset}
+    data-avoid-collisions={avoidCollisions}
+    data-collision-padding={collisionPadding}
+    class="isolate z-50"
+  >
+    <div
+      data-slot="hover-card-content"
+      hidden={hidden}
+      class={cn(
+        "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 w-64 origin-(--transform-origin) rounded-lg p-4 text-sm shadow-md ring-1 outline-hidden duration-100",
+        className
+      )}
+      {...props}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

package/src/components/ui/hover-card/hover-card-trigger.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"button"> &
+  HTMLAttributes<"a"> &
+  HTMLAttributes<"div"> &
+  HTMLAttributes<"span"> & {
+    as?: "a" | "button" | "div" | "span"
+    href?: string
+  }
+
+const { as: explicitTag, class: className, type, ...props } = Astro.props
+
+const Tag = explicitTag || ("href" in Astro.props ? "a" : "button")
+---
+
+<Tag
+  data-slot="hover-card-trigger"
+  type={Tag === "button" ? type || "button" : undefined}
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</Tag>

package/src/components/ui/hover-card/hover-card.astro

@@ -0,0 +1,69 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  delay?: number
+  skipDelayDuration?: number
+  closeDelay?: number
+  side?: "top" | "right" | "bottom" | "left"
+  align?: "start" | "center" | "end"
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+  portal?: boolean
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+}
+
+const {
+  class: className,
+  defaultOpen,
+  open,
+  delay = 300,
+  skipDelayDuration = 300,
+  closeDelay = 300,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 4,
+  avoidCollisions = true,
+  collisionPadding = 8,
+  portal = true,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="hover-card"
+  data-default-open={defaultOpen}
+  data-open={open}
+  data-delay={delay}
+  data-skip-delay-duration={skipDelayDuration}
+  data-close-delay={closeDelay}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  data-avoid-collisions={avoidCollisions}
+  data-collision-padding={collisionPadding}
+  data-portal={portal}
+  data-close-on-click-outside={closeOnClickOutside}
+  data-close-on-escape={closeOnEscape}
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/hover-card"
+
+  create()
+</script>

package/src/components/ui/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./hover-card.astro"
+export { default as HoverCardContent } from "./hover-card-content.astro"
+export { default as HoverCardTrigger } from "./hover-card-trigger.astro"