@starwind-ui/core 0.1.1 → 1.1.0

package/dist/src/components/button/Button.astro

@@ -1,10 +1,11 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"button">, Omit<HTMLAttributes<"a">, "type"> {
 	/**
 	 * Sets the variant of the button
-	 * @default "primary"
+	 * @default "default"
 	 */
 	variant?:
 		| "default"
@@ -21,63 +22,52 @@ interface Props extends HTMLAttributes<"button">, Omit<HTMLAttributes<"a">, "typ
 	 * @default "md"
 	 */
 	size?: "sm" | "md" | "lg" | "icon";
-	/**
-	 * Sets the border radius of the button
-	 * @default "md"
-	 */
-	radius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
 }
 
-const { variant = "default", size = "md", radius = "md", class: className, ...rest } = Astro.props;
-
-const Tag = Astro.props.href ? "a" : "button";
----
+const { variant = "default", size = "md", class: className, ...rest } = Astro.props;
 
-<Tag
-	class:list={[
-		"inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap",
+const button = tv({
+	base: [
+		"inline-flex items-center justify-center gap-1.5 rounded-md font-medium whitespace-nowrap",
 		"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		"starwind-transition-colors",
 		"focus-visible:outline-2 focus-visible:outline-offset-2",
 		"disabled:pointer-events-none disabled:opacity-50",
-		{
-			"bg-foreground text-background hover:bg-foreground/90 focus-visible:outline-outline":
-				variant === "default",
-			"bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:outline-primary":
-				variant === "primary",
-			"bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:outline-secondary":
-				variant === "secondary",
-			"border-border hover:bg-border hover:text-foreground focus-visible:outline-outline border":
-				variant === "outline",
-			"hover:bg-foreground/10 hover:text-foreground focus-visible:outline-outline bg-transparent":
-				variant === "ghost",
-			"bg-info text-info-foreground hover:bg-info/90 focus-visible:outline-info":
-				variant === "info",
-			"bg-success text-success-foreground hover:bg-success/90 focus-visible:outline-success":
-				variant === "success",
-			"bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:outline-warning":
-				variant === "warning",
-			"bg-error text-error-foreground hover:bg-error/90 focus-visible:outline-error":
-				variant === "error",
+	],
+	variants: {
+		variant: {
+			default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:outline-outline",
+			primary:
+				"bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:outline-primary",
+			secondary:
+				"bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:outline-secondary",
+			outline:
+				"border-border hover:bg-border hover:text-foreground focus-visible:outline-outline border",
+			ghost:
+				"hover:bg-foreground/10 hover:text-foreground focus-visible:outline-outline bg-transparent",
+			info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:outline-info",
+			success:
+				"bg-success text-success-foreground hover:bg-success/90 focus-visible:outline-success",
+			warning:
+				"bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:outline-warning",
+			error: "bg-error text-error-foreground hover:bg-error/90 focus-visible:outline-error",
 		},
-		{
-			"h-9 px-3 py-2 text-sm": size === "sm",
-			"h-11 px-4 py-2 text-base": size === "md",
-			"h-12 px-8 py-2 text-lg": size === "lg",
-			"h-11 w-11": size === "icon",
+		size: {
+			sm: "h-9 px-3 py-2 text-sm",
+			md: "h-11 px-4 py-2 text-base",
+			lg: "h-12 px-8 py-2 text-lg",
+			icon: "h-11 w-11",
 		},
-		{
-			"rounded-none": radius === "none",
-			"rounded-xs": radius === "xs",
-			"rounded-sm": radius === "sm",
-			"rounded-md": radius === "md",
-			"rounded-lg": radius === "lg",
-			"rounded-xl": radius === "xl",
-			"rounded-full": radius === "full",
-		},
-		className,
-	]}
-	{...rest}
->
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+	},
+});
+
+const Tag = Astro.props.href ? "a" : "button";
+---
+
+<Tag class={button({ variant, size, class: className })} {...rest}>
 	<slot />
 </Tag>

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 ---
 import Check from "@tabler/icons/outline/check.svg";
 import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"input">, "type"> & {
 	/**
@@ -23,6 +24,77 @@ type Props = Omit<HTMLAttributes<"input">, "type"> & {
 	variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
 };
 
+const checkbox = tv({
+	slots: {
+		base: "starwind-checkbox relative flex items-center space-x-2",
+		input: [
+			"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",
+		],
+		icon: [
+			"pointer-events-none absolute stroke-3 p-0.5 opacity-0 transition-opacity peer-checked:opacity-100",
+			"starwind-check-icon",
+		],
+		label:
+			"font-medium peer-not-disabled:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+	},
+	variants: {
+		size: {
+			sm: {
+				input: "size-4",
+				icon: "size-4",
+				label: "text-sm",
+			},
+			md: {
+				input: "size-5",
+				icon: "size-5",
+				label: "text-base",
+			},
+			lg: {
+				input: "size-6",
+				icon: "size-6",
+				label: "text-lg",
+			},
+		},
+		variant: {
+			default: {
+				input: "checked:bg-foreground focus-visible:outline-outline",
+				icon: "text-background",
+			},
+			primary: {
+				input: "checked:bg-primary focus-visible:outline-primary",
+				icon: "text-primary-foreground",
+			},
+			secondary: {
+				input: "checked:bg-secondary focus-visible:outline-secondary",
+				icon: "text-secondary-foreground",
+			},
+			info: {
+				input: "checked:bg-info focus-visible:outline-info",
+				icon: "text-info-foreground",
+			},
+			success: {
+				input: "checked:bg-success focus-visible:outline-success",
+				icon: "text-success-foreground",
+			},
+			warning: {
+				input: "checked:bg-warning focus-visible:outline-warning",
+				icon: "text-warning-foreground",
+			},
+			error: {
+				input: "checked:bg-error focus-visible:outline-error",
+				icon: "text-error-foreground",
+			},
+		},
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default",
+	},
+});
+
 const {
 	id,
 	label,
@@ -34,64 +106,15 @@ const {
 	...rest
 } = Astro.props;
 
-const sizeClass = {
-	sm: "size-4",
-	md: "size-5",
-	lg: "size-6",
-};
+const { base, input, icon, label: labelClass } = checkbox({ size, variant });
 ---
 
-<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",
-			},
-		]}
-	/>
+<div class={base()}>
+	<input type="checkbox" id={id} class={input({ class: className })} {checked} {...rest} />
+	<Check class={icon()} />
 	{
 		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 for={id} class={labelClass()}>
 				{label}
 			</label>
 		)
@@ -102,4 +125,27 @@ const sizeClass = {
 	.starwind-checkbox input[type="checkbox"]:checked {
 		background-image: none;
 	}
+
+	/* Check drawing animation */
+	.starwind-check-icon {
+		stroke-dasharray: 65;
+		stroke-dashoffset: 65;
+		opacity: 0;
+	}
+
+	.starwind-checkbox input[type="checkbox"]:checked + .starwind-check-icon {
+		animation: draw-check 0.3s ease forwards;
+		animation-delay: 0.15s;
+	}
+
+	@keyframes draw-check {
+		0% {
+			stroke-dashoffset: 65;
+			opacity: 1;
+		}
+		100% {
+			stroke-dashoffset: 0;
+			opacity: 1;
+		}
+	}
 </style>

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

@@ -1,6 +1,7 @@
 ---
 import X from "@tabler/icons/outline/x.svg";
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"dialog"> & {
 	/**
@@ -9,16 +10,38 @@ type Props = HTMLAttributes<"dialog"> & {
 	animationDuration?: number;
 };
 
+const dialogBackdrop = tv({
+	base: [
+		"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",
+	],
+});
+
+const dialogContent = tv({
+	base: [
+		"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",
+	],
+});
+
+const dialogCloseButton = tv({
+	base: [
+		"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",
+	],
+});
+
 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",
-	]}
+	class={dialogBackdrop()}
 	data-state="closed"
 	style={{
 		animationDuration: `${animationDuration}ms`,
@@ -27,14 +50,7 @@ const { class: className, animationDuration = 200, ...rest } = Astro.props;
 </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,
-	]}
+	class={dialogContent({ class: className })}
 	data-state="closed"
 	{...rest}
 	style={{
@@ -44,11 +60,7 @@ const { class: className, animationDuration = 200, ...rest } = Astro.props;
 	<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",
-		]}
+		class={dialogCloseButton()}
 		data-dialog-close
 		aria-label="Close dialog"
 	>

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"h2">, "id"> & {
 	/**
@@ -8,9 +9,13 @@ type Props = Omit<HTMLAttributes<"h2">, "id"> & {
 	children: any;
 };
 
+const dialogTitle = tv({
+	base: "text-2xl leading-none font-semibold tracking-tight",
+});
+
 const { class: className, ...rest } = Astro.props;
 ---
 
-<h2 class:list={["text-2xl leading-none font-semibold tracking-tight", className]} {...rest}>
+<h2 class={dialogTitle({ class: className })} {...rest}>
 	<slot />
 </h2>

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

@@ -1,26 +1,32 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"input"> & {
 	size?: "sm" | "md" | "lg";
 };
 
-const { size = "md", class: className, ...rest } = Astro.props;
----
-
-<input
-	class:list={[
+const input = tv({
+	base: [
 		"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",
+	],
+	variants: {
+		size: {
+			sm: "h-9 px-2 text-sm",
+			md: "h-11 px-3 text-base",
+			lg: "h-12 px-4 text-lg",
 		},
-		className,
-	]}
-	{...rest}
-/>
+	},
+	defaultVariants: {
+		size: "md",
+	},
+});
+
+const { size = "md", class: className, ...rest } = Astro.props;
+---
+
+<input class={input({ size, class: className })} {...rest} />

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

@@ -1,25 +1,31 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"label"> & {
 	size?: "sm" | "md" | "lg";
 };
 
-const { size = "md", class: className = "", ...rest } = Astro.props;
----
-
-<label
-	class:list={[
+const label = tv({
+	base: [
 		"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",
+	],
+	variants: {
+		size: {
+			sm: "text-sm",
+			md: "text-base",
+			lg: "text-lg",
 		},
-		className,
-	]}
-	{...rest}
->
+	},
+	defaultVariants: {
+		size: "md",
+	},
+});
+
+const { size = "md", class: className = "", ...rest } = Astro.props;
+---
+
+<label class={label({ size, class: className })} {...rest}>
 	<slot />
 </label>