@starwind-ui/core 0.0.1 → 0.1.0

package/dist/src/components/card/Card.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+	class:list={["bg-card text-card-foreground rounded-2xl border shadow-sm", className]}
+	{...rest}
+>
+	<slot />
+</div>

package/dist/src/components/card/CardContent.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["p-8 pt-0", className]} {...rest}>
+	<slot />
+</div>

package/dist/src/components/card/CardDescription.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["text-muted-foreground text-base", className]} {...rest}>
+	<slot />
+</div>

package/dist/src/components/card/CardFooter.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["flex items-center p-8 pt-0", className]} {...rest}>
+	<slot />
+</div>

package/dist/src/components/card/CardHeader.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["flex flex-col space-y-2 p-8", className]} {...rest}>
+	<slot />
+</div>

package/dist/src/components/card/CardTitle.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["text-3xl leading-none font-semibold tracking-tight", className]} {...rest}>
+	<slot />
+</div>

package/dist/src/components/card/index.ts

@@ -0,0 +1,17 @@
+import Card from "./Card.astro";
+import CardContent from "./CardContent.astro";
+import CardDescription from "./CardDescription.astro";
+import CardFooter from "./CardFooter.astro";
+import CardHeader from "./CardHeader.astro";
+import CardTitle from "./CardTitle.astro";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+
+export default {
+	Root: Card,
+	Header: CardHeader,
+	Footer: CardFooter,
+	Title: CardTitle,
+	Description: CardDescription,
+	Content: CardContent,
+};

package/dist/src/components/checkbox/Checkbox.astro

@@ -0,0 +1,105 @@
+---
+import Check from "@tabler/icons/outline/check.svg";
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"input">, "type"> & {
+	/**
+	 * Unique identifier for the checkbox input
+	 */
+	id: string;
+	/**
+	 * Optional label text to display next to the checkbox
+	 */
+	label?: string;
+	/**
+	 * Size variant of the checkbox
+	 * @default "md"
+	 */
+	size?: "sm" | "md" | "lg";
+	/**
+	 * Visual style variant of the checkbox
+	 * @default "default"
+	 */
+	variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
+};
+
+const {
+	id,
+	label,
+	value,
+	checked,
+	size = "md",
+	variant = "default",
+	class: className = "",
+	...rest
+} = Astro.props;
+
+const sizeClass = {
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6",
+};
+---
+
+<div class:list={["starwind-checkbox relative flex items-center space-x-2", className]}>
+	<input
+		type="checkbox"
+		id={id}
+		class:list={[
+			"peer border-input bg-background starwind-transition-colors shrink-0 transform-gpu rounded-sm border",
+			"focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:transition-none",
+			"outline-0 focus:ring-0 focus:ring-offset-0",
+			"not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+			sizeClass[size],
+			{
+				"checked:bg-foreground focus-visible:outline-outline": variant === "default",
+				"checked:bg-primary focus-visible:outline-primary": variant === "primary",
+				"checked:bg-secondary focus-visible:outline-secondary": variant === "secondary",
+				"checked:bg-info focus-visible:outline-info": variant === "info",
+				"checked:bg-success focus-visible:outline-success": variant === "success",
+				"checked:bg-warning focus-visible:outline-warning": variant === "warning",
+				"checked:bg-error focus-visible:outline-error": variant === "error",
+			},
+		]}
+		{checked}
+		{...rest}
+	/>
+	<Check
+		class:list={[
+			"pointer-events-none absolute stroke-3 p-0.5 opacity-0 transition-opacity peer-checked:opacity-100",
+			sizeClass[size],
+			{
+				"text-background": variant === "default",
+				"text-primary-foreground": variant === "primary",
+				"text-secondary-foreground": variant === "secondary",
+				"text-info-foreground": variant === "info",
+				"text-success-foreground": variant === "success",
+				"text-warning-foreground": variant === "warning",
+				"text-error-foreground": variant === "error",
+			},
+		]}
+	/>
+	{
+		label && (
+			<label
+				for={id}
+				class:list={[
+					"font-medium peer-not-disabled:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+					{
+						"text-sm": size === "sm",
+						"text-base": size === "md",
+						"text-lg": size === "lg",
+					},
+				]}
+			>
+				{label}
+			</label>
+		)
+	}
+</div>
+
+<style>
+	.starwind-checkbox input[type="checkbox"]:checked {
+		background-image: none;
+	}
+</style>

package/dist/src/components/checkbox/index.ts

@@ -0,0 +1,5 @@
+import Checkbox from "./Checkbox.astro";
+
+export { Checkbox };
+
+export default Checkbox;

package/dist/src/components/dialog/Dialog.astro

@@ -0,0 +1,175 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["starwind-dialog", className]} {...rest}>
+	<slot />
+</div>
+
+<script>
+	class DialogHandler {
+		private trigger: HTMLButtonElement;
+		private dialog: HTMLDialogElement;
+		private closeButtons: NodeListOf<HTMLButtonElement>;
+		private backdrop: HTMLElement;
+		/**
+		 * The duration of the animation in milliseconds. This is used to calculate the
+		 * duration of close animation before hiding the dialog and backdrop
+		 */
+		private animationDuration: number;
+
+		constructor(dialogWrapper: HTMLElement, dialogNumber: number) {
+			this.dialog = dialogWrapper.querySelector("dialog")!;
+			this.backdrop = dialogWrapper.querySelector(".starwind-dialog-backdrop")!;
+
+			// animationDuration is set with inline styles through passed prop to DialogContent
+			const animationDurationString = this.dialog.style.animationDuration;
+			if (animationDurationString.endsWith("ms")) {
+				this.animationDuration = parseFloat(animationDurationString);
+			} else if (animationDurationString.endsWith("s")) {
+				// using something like @playform/compress might optimize to use "s" instead of "ms"
+				this.animationDuration = parseFloat(animationDurationString) * 1000;
+			} else {
+				this.animationDuration = 200;
+			}
+
+			// if trigger is set with asChild, use the first child element for trigger button
+			const tempTrigger = dialogWrapper.querySelector(".starwind-dialog-trigger") as HTMLElement;
+			if (tempTrigger?.hasAttribute("data-as-child")) {
+				this.trigger = tempTrigger.firstElementChild as HTMLButtonElement;
+			} else {
+				this.trigger = tempTrigger as HTMLButtonElement;
+			}
+
+			// if closeButtons are set with asChild, swap the wrapper with its first child
+			const tempCloseButtons = dialogWrapper.querySelectorAll(
+				".starwind-dialog-close",
+			) as NodeListOf<HTMLElement>;
+			tempCloseButtons.forEach((button: HTMLElement) => {
+				if (button.hasAttribute("data-as-child")) {
+					const childElement = button.firstElementChild;
+					if (childElement) {
+						childElement.classList.add("starwind-dialog-close");
+						button.parentNode?.replaceChild(childElement, button);
+					}
+				}
+				return button;
+			});
+
+			this.closeButtons = dialogWrapper.querySelectorAll(
+				".starwind-dialog-close",
+			) as NodeListOf<HTMLButtonElement>;
+
+			// if any elements are not there, exit
+			if (!this.trigger || !this.dialog || !this.backdrop) return;
+
+			this.setupAccessibility(dialogNumber);
+			this.setupEvents();
+		}
+
+		private setupAccessibility(dialogNumber: number): void {
+			// get the first heading element in the dialog
+			const firstHeading = this.dialog.querySelector("h1, h2, h3, h4, h5, h6");
+			if (firstHeading) {
+				// create a unique ID for the heading
+				firstHeading.id = `starwind-dialog${dialogNumber}-heading`;
+				// set the aria-labelledby attribute to the first heading element
+				this.dialog.setAttribute("aria-labelledby", firstHeading.id);
+			}
+		}
+
+		private setupEvents(): void {
+			this.trigger?.addEventListener("click", () => {
+				this.open();
+			});
+
+			// Add click handlers to all close buttons
+			this.closeButtons?.forEach((button) => {
+				button.addEventListener("click", () => {
+					this.close();
+				});
+			});
+
+			// Close on click outside
+			this.dialog.addEventListener("click", (e) => {
+				const dialogDimensions = this.dialog.getBoundingClientRect();
+				const clickedInDialog =
+					e.clientX >= dialogDimensions.left &&
+					e.clientX <= dialogDimensions.right &&
+					e.clientY >= dialogDimensions.top &&
+					e.clientY <= dialogDimensions.bottom;
+
+				if (!clickedInDialog) {
+					this.close();
+				}
+			});
+
+			// Handle escape key
+			this.dialog.addEventListener("keydown", (e) => {
+				if (e.key === "Escape") {
+					// prevent default dialog closing behavior so we can add closing animation
+					e.preventDefault();
+					this.close();
+				}
+			});
+
+			// Intercept form submissions to handle dialog close
+			const forms = this.dialog.querySelectorAll("form");
+			forms.forEach((form) => {
+				form.addEventListener("submit", (e) => {
+					/**
+					 * Default form.method = "dialog" submissions cause the dialog to close
+					 * Default form.method = "post" submissions do not close the dialog
+					 * Here we intercept the form submission and manage the dialog closing if method = "dialog"
+					 * so we can add closing animation
+					 * Normal form event listeners for "submit" will still get the form data
+					 */
+					if (form.method === "dialog") {
+						e.preventDefault();
+						this.close();
+					}
+				});
+			});
+		}
+
+		private open(): void {
+			this.dialog.showModal();
+			document.body.classList.add("overflow-hidden");
+			this.backdrop.classList.remove("hidden");
+			this.backdrop.dataset.state = "open";
+			this.dialog.dataset.state = "open";
+		}
+
+		private close(): void {
+			document.body.classList.remove("overflow-hidden");
+			this.dialog.dataset.state = "closed";
+			this.backdrop.dataset.state = "closed";
+
+			// Wait for animation to finish before hiding backdrop
+			setTimeout(() => {
+				this.backdrop.classList.add("hidden");
+				this.dialog.close();
+			}, this.animationDuration - 10);
+		}
+	}
+
+	// Store instances in a WeakMap to avoid memory leaks
+	const dialogInstances = new WeakMap<HTMLElement, DialogHandler>();
+
+	// Initialize all dialogs
+	const setupDialogs = () => {
+		document.querySelectorAll(".starwind-dialog").forEach((dialogWrapper, idx) => {
+			const wrapper = dialogWrapper as HTMLElement;
+			if (!dialogInstances.has(wrapper)) {
+				dialogInstances.set(wrapper, new DialogHandler(wrapper, idx));
+			}
+		});
+	};
+
+	setupDialogs();
+	document.addEventListener("astro:after-swap", setupDialogs);
+</script>

package/dist/src/components/dialog/DialogClose.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"button"> & {
+	/**
+	 * When true, the component will render its child element instead of a button
+	 */
+	asChild?: boolean;
+};
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+
+// Get the first child element if asChild is true
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+	hasChildren = true;
+}
+---
+
+{
+	asChild && hasChildren ? (
+		<div class="starwind-dialog-close" data-as-child>
+			<slot />
+		</div>
+	) : (
+		<button type="button" class:list={["starwind-dialog-close", className]} {...rest}>
+			<slot>Demo close button</slot>
+		</button>
+	)
+}

package/dist/src/components/dialog/DialogContent.astro

@@ -0,0 +1,57 @@
+---
+import X from "@tabler/icons/outline/x.svg";
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"dialog"> & {
+	/**
+	 * Open and close animation duration in milliseconds
+	 */
+	animationDuration?: number;
+};
+
+const { class: className, animationDuration = 200, ...rest } = Astro.props;
+---
+
+<!-- dialog overlay -->
+<div
+	class:list={[
+		"starwind-dialog-backdrop fixed inset-0 top-0 left-0 z-50 hidden h-screen w-screen bg-black/80",
+		"data-[state=open]:animate-in data-[state=open]:fade-in-0",
+		"data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+	]}
+	data-state="closed"
+	style={{
+		animationDuration: `${animationDuration}ms`,
+	}}
+>
+</div>
+
+<dialog
+	class:list={[
+		"fixed top-16 left-[50%] z-50 translate-x-[-50%] sm:top-[50%] sm:translate-y-[-50%]",
+		"bg-background w-full max-w-md border p-8 shadow-lg sm:rounded-lg",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out",
+		"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2",
+		"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-bottom-2",
+		className,
+	]}
+	data-state="closed"
+	{...rest}
+	style={{
+		animationDuration: `${animationDuration}ms`,
+	}}
+>
+	<slot />
+	<button
+		type="button"
+		class:list={[
+			"starwind-dialog-close text-muted-foreground",
+			"absolute top-5.5 right-5.5 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none",
+			"focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-2",
+		]}
+		data-dialog-close
+		aria-label="Close dialog"
+	>
+		<X class="size-5" />
+	</button>
+</dialog>

package/dist/src/components/dialog/DialogDescription.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"p">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<p class:list={["text-muted-foreground", className]} {...rest}>
+	<slot />
+</p>

package/dist/src/components/dialog/DialogFooter.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className]} {...rest}>
+	<slot />
+</div>

package/dist/src/components/dialog/DialogHeader.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["flex flex-col space-y-2 text-center sm:text-left", className]} {...rest}>
+	<slot />
+</div>

package/dist/src/components/dialog/DialogTitle.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"h2">, "id"> & {
+	/**
+	 * The content to be rendered inside the dialog title
+	 */
+	children: any;
+};
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<h2 class:list={["text-2xl leading-none font-semibold tracking-tight", className]} {...rest}>
+	<slot />
+</h2>

package/dist/src/components/dialog/DialogTrigger.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"button"> & {
+	/**
+	 * When true, the component will render its child element with a simple wrapper instead of a button component
+	 */
+	asChild?: boolean;
+};
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+
+// Get the first child element if asChild is true
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+	hasChildren = true;
+}
+---
+
+{
+	asChild && hasChildren ? (
+		<div class="starwind-dialog-trigger" data-as-child>
+			<slot />
+		</div>
+	) : (
+		<button
+			type="button"
+			aria-haspopup="dialog"
+			class:list={["starwind-dialog-trigger", className]}
+			{...rest}
+		>
+			<slot />
+		</button>
+	)
+}

package/dist/src/components/dialog/index.ts

@@ -0,0 +1,30 @@
+import Dialog from "./Dialog.astro";
+import DialogClose from "./DialogClose.astro";
+import DialogContent from "./DialogContent.astro";
+import DialogDescription from "./DialogDescription.astro";
+import DialogFooter from "./DialogFooter.astro";
+import DialogHeader from "./DialogHeader.astro";
+import DialogTitle from "./DialogTitle.astro";
+import DialogTrigger from "./DialogTrigger.astro";
+
+export {
+	Dialog,
+	DialogTrigger,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
+	DialogClose,
+};
+
+export default {
+	Root: Dialog,
+	Trigger: DialogTrigger,
+	Content: DialogContent,
+	Header: DialogHeader,
+	Footer: DialogFooter,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Close: DialogClose,
+};

package/dist/src/components/input/Input.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"input"> & {
+	size?: "sm" | "md" | "lg";
+};
+
+const { size = "md", class: className, ...rest } = Astro.props;
+---
+
+<input
+	class:list={[
+		"border-input bg-background text-foreground w-full rounded-md border",
+		"focus:outline-outline focus:ring-0 focus:outline-2 focus:outline-offset-2",
+		"file:text-foreground file:my-auto file:mr-4 file:h-full file:border-0 file:bg-transparent file:text-sm file:font-medium",
+		"disabled:cursor-not-allowed disabled:opacity-50",
+		"peer placeholder:text-muted-foreground",
+		{
+			"h-9 px-2 text-sm": size === "sm",
+			"h-11 px-3 text-base": size === "md",
+			"h-12 px-4 text-lg": size === "lg",
+		},
+		className,
+	]}
+	{...rest}
+/>

package/dist/src/components/input/index.ts

@@ -0,0 +1,5 @@
+import Input from "./Input.astro";
+
+export { Input };
+
+export default Input;

package/dist/src/components/label/Label.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"label"> & {
+	size?: "sm" | "md" | "lg";
+};
+
+const { size = "md", class: className = "", ...rest } = Astro.props;
+---
+
+<label
+	class:list={[
+		"text-foreground leading-none font-medium",
+		"peer-disabled:cursor-not-allowed peer-disabled:opacity-70 has-[+:disabled]:cursor-not-allowed has-[+:disabled]:opacity-70",
+		{
+			"text-sm": size === "sm",
+			"text-base": size === "md",
+			"text-lg": size === "lg",
+		},
+		className,
+	]}
+	{...rest}
+>
+	<slot />
+</label>

package/dist/src/components/label/index.ts

@@ -0,0 +1,5 @@
+import Label from "./Label.astro";
+
+export { Label };
+
+export default Label;

package/dist/src/components/pagination/Pagination.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"nav"> & {
+	children: any;
+};
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<nav
+	role="navigation"
+	aria-label="pagination"
+	class:list={["mx-auto flex w-full justify-center", className]}
+	{...rest}
+>
+	<slot />
+</nav>