fulldev-ui 0.7.0-beta.8 → 0.7.0

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends 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>
+  )
+}

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

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"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>
+  )
+}

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

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends 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>
+  )
+}

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

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

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

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends 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>
+  )
+}

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends 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>
+  )
+}

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

@@ -0,0 +1,50 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div">, VariantProps<typeof variants> {}
+
+const variants = cva(
+  "group/field data-[invalid=true]:text-destructive 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",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+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>
+  )
+}

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

@@ -0,0 +1,9 @@
+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 FieldGroup } from "./field-group.astro"
+export { default as FieldLabel } from "./field-label.astro"
+export { default as FieldLegend } from "./field-legend.astro"
+export { default as FieldSeparator } from "./field-separator.astro"
+export { default as FieldSet } from "./field-set.astro"
+export { default as FieldTitle } from "./field-title.astro"

package/src/components/ui/footer/footer-actions.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div class={cn("flex flex-wrap gap-2", className)} {...props}>
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div class={cn("relative z-10 flex flex-col gap-4", className)} {...props}>
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/footer/footer-copyright.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+import { cn } from "@/lib/utils";
+
+interface Props extends HTMLAttributes<"p"> {}
+
+const { class: className, ...props } = Astro.props;
+
+const slot = await Astro.slots.render("default");
+---
+
+{
+  slot?.trim().length > 0 && (
+    <p
+      data-slot="footer-copyright"
+      class={cn("text-muted-foreground text-xs", className)}
+      {...props}
+    >
+      &copy; {`${new Date().getFullYear()} `}
+      <Fragment set:html={slot} />
+    </p>
+  )
+}

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

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"p">, VariantProps<typeof variants> {}
+
+const variants = cva("text-muted-foreground text-sm", {
+  variants: {
+    size: {
+      lg: "text-base",
+      default: "text-sm",
+      sm: "text-xs",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+const { class: className, size, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <p
+      data-slot="footer-description"
+      class={cn(variants({ size }), className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </p>
+  )
+}

package/src/components/ui/footer/footer-grid.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      class={cn(
+        "grid grid-cols-[repeat(auto-fit,minmax(200px,250px))] gap-8",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/footer/footer-group-label.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"h3"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <h3 class={cn("text-sm leading-none font-semibold", className)} {...props}>
+      <Fragment set:html={slot} />
+    </h3>
+  )
+}

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

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div class={cn("flex w-full flex-col gap-4", className)} {...props}>
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"li"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <li class={cn("", className)} {...props}>
+      <Fragment set:html={slot} />
+    </li>
+  )
+}

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

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"a"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <a
+      class={cn(
+        "text-muted-foreground hover:text-foreground focus-visible:outline-ring inline-flex cursor-pointer items-center gap-2 text-sm leading-5 outline-hidden transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </a>
+  )
+}

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

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"menu">, VariantProps<typeof variants> {}
+
+const variants = cva("flex w-max gap-x-4 gap-y-2", {
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const { class: className, orientation, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <menu class={cn(variants({ orientation }), className)} {...props}>
+      <Fragment set:html={slot} />
+    </menu>
+  )
+}

package/src/components/ui/footer/footer-split.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      class={cn(
+        "grid size-full grid-cols-1 gap-16 *:w-full @5xl:grid-cols-[1fr_3fr]",
+        className
+      )}
+      data-slot="footer-split"
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/footer/footer-spread.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      class={cn(
+        "flex w-full flex-col items-start gap-8 @5xl:flex-row @5xl:justify-between",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/footer/footer.astro

@@ -0,0 +1,71 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+interface Props
+  extends HTMLAttributes<"footer">,
+    VariantProps<typeof variants> {}
+
+const variants = cva(
+  "relative mx-auto flex scroll-m-(--footer-py) flex-col gap-16 px-(--footer-px) py-(--footer-py)",
+  {
+    variants: {
+      variant: {
+        default: "bg-background w-full",
+        floating: [
+          "bg-background rounded-lg border shadow-sm",
+          "w-[calc(100%-2*var(--gutter,24px))] max-w-(--footer-width)",
+          "my-(--footer-py) overflow-hidden rounded-xl first:mt-2",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const { class: className, variant, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <footer
+      class={cn(variants({ variant }), className)}
+      data-slot="footer"
+      data-variant={variant}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </footer>
+  )
+}
+
+<style is:global>
+  [data-slot="footer"] {
+    --footer-width: var(--container, var(--breakpoint-xl));
+    --footer-py: calc(var(--spacing) * 12);
+    --footer-px: max(
+      var(--gutter, 24px),
+      calc((100cqw - var(--footer-width)) / 2)
+    );
+  }
+
+  [data-slot="footer"][data-variant="floating"] {
+    --footer-px: calc(var(--spacing) * 6);
+  }
+
+  @media (min-width: 1024px) {
+    [data-slot="footer"] {
+      --footer-py: calc(var(--spacing) * 16);
+    }
+
+    [data-slot="footer"][data-variant="floating"] {
+      --footer-px: calc(var(--spacing) * 16);
+    }
+  }
+</style>

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

@@ -0,0 +1,12 @@
+export { default as Footer } from "./footer.astro"
+export { default as FooterContent } from "./footer-content.astro"
+export { default as FooterDescription } from "./footer-description.astro"
+export { default as FooterGrid } from "./footer-grid.astro"
+export { default as FooterGroup } from "./footer-group.astro"
+export { default as FooterGroupLabel } from "./footer-group-label.astro"
+export { default as FooterMenu } from "./footer-menu.astro"
+export { default as FooterMenuItem } from "./footer-menu-item.astro"
+export { default as FooterMenuLink } from "./footer-menu-link.astro"
+export { default as FooterSplit } from "./footer-split.astro"
+export { default as FooterSpread } from "./footer-spread.astro"
+export { default as FooterCopyright } from "./footer-copyright.astro"

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

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div class={cn("flex items-center gap-2", className)} {...props}>
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      class={cn("mx-auto flex w-full max-w-screen-xl gap-8 py-3", className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}