fulldev-ui 0.7.0-beta.9 → 0.7.0

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

@@ -1,2 +1,2 @@
-export { default as RadioGroup } from './RadioGroup.vue'
-export { default as RadioGroupItem } from './RadioGroupItem.vue'
+export { default as RadioGroup } from "./radio-group.astro"
+export { default as RadioGroupItem } from "./radio-group-item.astro"

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends Omit<HTMLAttributes<"input">, "type"> {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<input
+  type="radio"
+  data-slot="radio-group-item"
+  class={cn(
+    "border-input text-primary 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:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+    "accent-primary",
+    className
+  )}
+  {...props}
+/>

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

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  role="radiogroup"
+  data-slot="radio-group"
+  class={cn("grid gap-3", className)}
+  {...props}
+>
+  <slot />
+</div>

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

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

package/src/components/ui/rating/rating.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import Star from "lucide-static/icons/star.svg"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {
+  rating?: number
+}
+
+const { rating, class: className, ...props } = Astro.props
+---
+
+{
+  rating && (
+    <div class={cn("flex gap-1 text-base", className)} {...props}>
+      {Array.from({ length: 5 }).map((_, index) => {
+        const fillPercentage =
+          index < Math.floor(rating)
+            ? 100
+            : index === Math.floor(rating)
+              ? (rating % 1) * 100
+              : 0
+        return (
+          <Star
+            class="!text-primary size-[1em]"
+            fill="currentColor"
+            style={{
+              maskImage: `linear-gradient(to right, black ${fillPercentage}%, rgba(0,0,0,0.15) ${fillPercentage}%)`,
+            }}
+          />
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,10 @@
+export { default as Section } from "./section.astro"
+export { default as SectionActions } from "./section-actions.astro"
+export { default as SectionContent } from "./section-content.astro"
+export { default as SectionGrid } from "./section-grid.astro"
+export { default as SectionMasonry } from "./section-masonry.astro"
+export { default as SectionMedia } from "./section-media.astro"
+export { default as SectionProse } from "./section-prose.astro"
+export { default as SectionProvider } from "./section-provider.astro"
+export { default as SectionSplit } from "./section-split.astro"
+export { default as SectionSpread } from "./section-spread.astro"

package/src/components/ui/section/section-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("relative z-10 flex flex-wrap gap-2", className)} {...props}>
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/section/section-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("relative z-10 flex flex-col gap-y-8", className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/section/section-grid.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<"div">, VariantProps<typeof variants> {}
+
+const variants = cva("grid w-full gap-6", {
+  variants: {
+    frame: {
+      default: "",
+    },
+    size: {
+      sm: "grid-cols-[repeat(auto-fit,minmax(200px,1fr))]",
+      default: "grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(260px,1fr))]",
+      lg: "grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))]",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    frame: "default",
+  },
+})
+
+const { class: className, size, frame, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div class={cn(variants({ size, frame }), className)} {...props}>
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/section/section-masonry.astro

@@ -0,0 +1,33 @@
+---
+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("w-full gap-6 space-y-6 *:break-inside-avoid", {
+  variants: {
+    size: {
+      sm: "columns-3xs",
+      default: "columns-2xs",
+      lg: "columns-xs",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+const { class: className, size, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div class={cn(variants({ size }), className)} {...props}>
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/section/section-media.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="section-media"
+      class={cn(
+        "relative flex items-center justify-center overflow-hidden rounded-lg *:size-full *:object-cover",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/section/section-prose.astro

@@ -0,0 +1,49 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const variants = cva(
+  [
+    "text-foreground w-full space-y-4 text-pretty",
+    "[&_p]:leading-[1.8] [&_p]:not-first:mt-4",
+    "[&_ul]:ml-5 [&_ul]:list-disc [&_ul]:space-y-2 [&_ul]:not-first:mt-4",
+    "[&_ol]:ml-5 [&_ol]:list-decimal [&_ol]:space-y-2 [&_ol]:not-first:mt-4",
+    "[&_li_p]:inline",
+    "[&_a]:text-primary [&_a]:hover:underline",
+    "@max-sm:[&_:is(h1,h2,h3,h4,h5,h6)]:break-words @max-sm:[&_:is(h1,h2,h3,h4,h5,h6)]:wrap-break-word @max-sm:[&_:is(h1,h2,h3,h4,h5,h6)]:hyphens-auto",
+    "[&_:is(h1,h2,h3,h4,h5,h6)]:scroll-mt-20 [&_:is(h1,h2,h3,h4,h5,h6)]:leading-[1.1] [&_:is(h1,h2,h3,h4,h5,h6)]:font-semibold [&_:is(h1,h2,h3,h4,h5,h6)]:not-first:mt-12",
+    "[&_img]:rounded-lg [&_img]:not-first:mt-12",
+    "[&_p:first-child:has(~:is(h1,h2,h3,h4,h5,h6))]:text-accent-foreground [&_p:first-child+:is(h1,h2,h3,h4,h5,h6)]:mt-4 [&_p:first-child:has(~:is(h1,h2,h3,h4,h5,h6))]:text-sm [&_p:first-child:has(~:is(h1,h2,h3,h4,h5,h6))]:font-medium",
+    "[&_pre]:bg-muted [&_pre]:mt-6 [&_pre]:rounded-lg [&_pre]:rounded-md [&_pre]:border [&_pre]:p-4 [&_pre]:text-sm",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-2xl text-sm [&_h1]:text-3xl [&_h2]:text-2xl [&_h3]:text-xl [&_h4]:text-lg [&_h5]:text-base [&_h6]:text-sm",
+        default:
+          "max-w-3xl text-base [&_h1]:text-4xl [&_h2]:text-3xl [&_h3]:text-2xl [&_h4]:text-xl [&_h5]:text-lg [&_h6]:text-base",
+        lg: "max-w-4xl text-lg [&_h1]:text-4xl @5xl:[&_h1]:text-5xl [&_h2]:text-4xl [&_h3]:text-3xl [&_h4]:text-2xl [&_h5]:text-xl [&_h6]:text-lg",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+interface Props extends HTMLAttributes<"div">, VariantProps<typeof variants> {}
+
+const { class: className, size, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div class={cn(variants({ size }), className)} {...props}>
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/section/section-provider.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"main"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <main
+      role="list"
+      data-slot="section-provider"
+      class={cn(
+        "group/section-provider @container/section-provider flex flex-col",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </main>
+  )
+}

package/src/components/ui/section/section-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 @5xl:grid-cols-2",
+        className
+      )}
+      data-slot="section-split"
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

package/src/components/ui/section/section-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/section/section.astro

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

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,31 @@
+---
+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> {
+  orientation?: "horizontal" | "vertical"
+}
+
+const variants = cva("bg-border block shrink-0", {
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "h-full w-px",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+})
+
+const { class: className, orientation = "horizontal", ...props } = Astro.props
+---
+
+<div
+  data-slot="separator"
+  class={cn(variants({ orientation }), 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,21 @@
+---
+import type { ComponentProps } from "astro/types"
+import X from "lucide-static/icons/x.svg"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+interface Props extends ComponentProps<typeof Button> {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<Button
+  class={cn("ml-auto", className)}
+  size="icon-sm"
+  variant="ghost"
+  data-slot="sheet-close"
+  {...props}
+>
+  <X />
+</Button>

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

@@ -0,0 +1,82 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+import XIcon from "lucide-static/icons/x.svg"
+
+import { cn } from "@/lib/utils"
+
+const dialogVariants = cva(
+  [
+    "fixed inset-0 z-50 m-0 max-h-none max-w-none border-0 bg-transparent p-0",
+    "backdrop:bg-black/50",
+    // Added for quick fix over horizontal scroll issue
+    "overflow-x-hidden",
+  ],
+  {
+    variants: {
+      side: {
+        right: "ml-auto h-full w-3/4 sm:max-w-sm",
+        left: "mr-auto h-full w-3/4 sm:max-w-sm",
+        top: "mb-auto h-auto w-full",
+        bottom: "mt-auto h-auto w-full",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+const contentVariants = cva(
+  "bg-background flex h-full flex-col gap-4 shadow-lg transition-transform duration-500 ease-in-out",
+  {
+    variants: {
+      side: {
+        right: "translate-x-full border-l",
+        left: "-translate-x-full border-r",
+        top: "-translate-y-full border-b",
+        bottom: "translate-y-full border-t",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+type Props = VariantProps<typeof contentVariants> &
+  HTMLAttributes<"div"> & {
+    showClose?: boolean
+  }
+
+const { class: className, side, showClose = true, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+<dialog
+  data-slot="sheet-dialog"
+  data-side={side}
+  class={cn(dialogVariants({ side }))}
+>
+  <div
+    data-slot="sheet-content"
+    data-side={side}
+    class={cn(contentVariants({ side }), className)}
+    {...props}
+  >
+    {
+      showClose && (
+        <button
+          type="button"
+          data-slot="sheet-close"
+          class="focus-visible:outline-ring text-foreground absolute top-4 right-4 cursor-pointer rounded-sm border-0 bg-transparent opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2"
+          aria-label="Close"
+        >
+          <XIcon class="size-4" />
+        </button>
+      )
+    }
+    <Fragment set:html={slot} />
+  </div>
+</dialog>

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

@@ -0,0 +1,23 @@
+---
+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="sheet-description"
+      class={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </p>
+  )
+}

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

@@ -0,0 +1,23 @@
+---
+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="sheet-footer"
+      class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}