@starwind-ui/core 1.0.0 → 1.3.0

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

@@ -1,15 +1,16 @@
 ---
-import type { HTMLAttributes } from "astro/types";
 import Dots from "@tabler/icons/outline/dots.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"span"> & { children?: any };
 
-type Props = HTMLAttributes<"span"> & {
-	children?: any;
-};
+const paginationEllipsis = tv({ base: "flex h-9 w-9 items-center justify-center" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<span aria-hidden class:list={["flex h-9 w-9 items-center justify-center", className]} {...rest}>
+<span aria-hidden class={paginationEllipsis({ class: className })} {...rest}>
 	<Dots class="size-4" />
 	<span class="sr-only">More pages</span>
 </span>

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

@@ -1,13 +1,14 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
-type Props = HTMLAttributes<"li"> & {
-	children: any;
-};
+type Props = HTMLAttributes<"li"> & { children: any };
+
+const paginationItem = tv({ base: "" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<li class:list={[className]} {...rest}>
+<li class={paginationItem({ class: className })} {...rest}>
 	<slot />
 </li>

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

@@ -1,49 +1,42 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"a"> {
 	isActive?: boolean;
 	size?: "sm" | "md" | "lg" | "icon";
-	radius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
 }
 
-const { class: className, isActive, size = "icon", radius = "md", ...rest } = Astro.props;
----
-
-<a
-	aria-current={isActive ? "page" : undefined}
-	class:list={[
-		// default starwind button styles
-		"inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap",
+const paginationLink = 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",
-		{
-			// default starwind button variant="outline" styles
-			"border-border hover:bg-border hover:text-foreground focus-visible:outline-outline border":
-				isActive,
-			// default starwind button variant="ghost" styles
-			"hover:bg-foreground/10 hover:text-foreground focus-visible:outline-outline bg-transparent":
-				!isActive,
-		},
-		{
-			"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",
+	],
+	variants: {
+		isActive: {
+			true: "border-border hover:bg-border hover:text-foreground focus-visible:outline-outline border",
+			false:
+				"hover:bg-foreground/10 hover:text-foreground focus-visible:outline-outline bg-transparent",
 		},
-		{
-			"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",
+		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",
 		},
-		className,
-	]}
+	},
+	defaultVariants: { isActive: false, size: "icon" },
+});
+
+const { class: className, isActive, size = "icon", ...rest } = Astro.props;
+---
+
+<a
+	aria-current={isActive ? "page" : undefined}
+	class={paginationLink({ isActive, size, class: className })}
 	{...rest}
 >
 	<slot />

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

@@ -1,21 +1,20 @@
 ---
-import type { HTMLAttributes } from "astro/types";
 import ChevronRight from "@tabler/icons/outline/chevron-right.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 import PaginationLink from "./PaginationLink.astro";
 
-type Props = HTMLAttributes<"a"> & {
-	size?: "sm" | "md" | "lg" | "icon";
-	radius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-};
+type Props = HTMLAttributes<"a"> & { size?: "sm" | "md" | "lg" | "icon" };
+
+const paginationNext = tv({ base: "group gap-1" });
 
-const { class: className, size = "md", radius = "md", ...rest } = Astro.props;
+const { class: className, size = "md", ...rest } = Astro.props;
 ---
 
 <PaginationLink
 	aria-label="Go to next page"
 	size={size}
-	radius={radius}
-	class:list={["group gap-1", className]}
+	class={paginationNext({ class: className })}
 	{...rest}
 >
 	<slot />

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

@@ -1,21 +1,20 @@
 ---
-import type { HTMLAttributes } from "astro/types";
 import ChevronLeft from "@tabler/icons/outline/chevron-left.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 import PaginationLink from "./PaginationLink.astro";
 
-type Props = HTMLAttributes<"a"> & {
-	size?: "sm" | "md" | "lg" | "icon";
-	radius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-};
+type Props = HTMLAttributes<"a"> & { size?: "sm" | "md" | "lg" | "icon" };
+
+const paginationPrevious = tv({ base: "group gap-1" });
 
-const { class: className, size = "md", radius = "md", ...rest } = Astro.props;
+const { class: className, size = "md", ...rest } = Astro.props;
 ---
 
 <PaginationLink
 	aria-label="Go to previous page"
 	size={size}
-	radius={radius}
-	class:list={["group gap-1", className]}
+	class={paginationPrevious({ class: className })}
 	{...rest}
 >
 	<ChevronLeft class="size-4 transition-transform group-hover:-translate-x-1" />

package/dist/src/components/select/Select.astro

@@ -1,9 +1,7 @@
 ---
 import type { HTMLAttributes } from "astro/types";
 
-type Props = HTMLAttributes<"div"> & {
-	children: any;
-};
+type Props = HTMLAttributes<"div"> & { children: any };
 
 const { class: className, ...rest } = Astro.props;
 ---
@@ -210,10 +208,8 @@ const { class: className, ...rest } = Astro.props;
 				}
 			});
 
-			// passive resize listener to call setSize() on window resize
-			window.addEventListener("resize", () => this.setSize(), {
-				passive: true,
-			});
+			// passive resize listener to call setSize()
+			window.addEventListener("resize", () => this.setSize(), { passive: true });
 		}
 
 		private handleNavigationKeys(e: KeyboardEvent) {
@@ -225,7 +221,7 @@ const { class: className, ...rest } = Astro.props;
 			const currentIndex = Array.from(items).indexOf(activeElement as HTMLElement);
 			if (e.key === "Home") {
 				const firstEnabledItem = Array.from(items).find(
-					(item) => item.getAttribute("data-disabled") !== "true"
+					(item) => item.getAttribute("data-disabled") !== "true",
 				) as HTMLElement;
 				if (firstEnabledItem) {
 					firstEnabledItem.focus();
@@ -366,11 +362,7 @@ const { class: className, ...rest } = Astro.props;
 
 				// Dispatch custom event with the new value
 				const event = new CustomEvent<SelectChangeEvent["detail"]>("starwind-select:change", {
-					detail: {
-						value: newValue,
-						selectId: this.select.id,
-						label: item.textContent || "",
-					},
+					detail: { value: newValue, selectId: this.select.id, label: item.textContent || "" },
 					bubbles: true,
 					cancelable: true,
 				});

package/dist/src/components/select/SelectContent.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
 	/**
@@ -19,6 +20,28 @@ type Props = HTMLAttributes<"div"> & {
 	animationDuration?: number;
 };
 
+const selectContent = tv({
+	base: [
+		"starwind-select-content",
+		"bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border shadow-md",
+		"fade-in-0 zoom-in-95 animate-in overflow-hidden will-change-transform",
+		"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out",
+		"left-0",
+	],
+	variants: {
+		side: {
+			bottom:
+				"data-[side=bottom]:slide-in-from-top-4 data-[side=bottom]:top-(--select-content-offset)",
+			top: "data-[side=top]:slide-in-from-bottom-4 data-[side=top]:bottom-(--select-content-offset)",
+		},
+	},
+	defaultVariants: { side: "bottom" },
+});
+
+const selectContentInner = tv({
+	base: "max-h-96 w-full min-w-(--select-trigger-width) overflow-y-auto p-1",
+});
+
 const {
 	class: className,
 	side = "bottom",
@@ -29,16 +52,7 @@ const {
 ---
 
 <div
-	class:list={[
-		"starwind-select-content",
-		"bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border shadow-md",
-		"fade-in-0 zoom-in-95 animate-in overflow-hidden will-change-transform",
-		"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out",
-		"data-[side=bottom]:slide-in-from-top-4 data-[side=bottom]:top-(--select-content-offset)",
-		"data-[side=top]:slide-in-from-bottom-4 data-[side=top]:bottom-(--select-content-offset)",
-		"left-0",
-		className,
-	]}
+	class={selectContent({ side, class: className })}
 	role="listbox"
 	data-side={side}
 	data-state="closed"
@@ -51,7 +65,7 @@ const {
 	}}
 	{...rest}
 >
-	<div class:list={["max-h-96 w-full min-w-(--select-trigger-width) overflow-y-auto p-1"]}>
+	<div class={selectContentInner()}>
 		<slot />
 	</div>
 </div>

package/dist/src/components/select/SelectGroup.astro

@@ -2,9 +2,7 @@
 /**
  * This current doesn't do anything
  */
-type Props = {
-	children: any;
-};
+type Props = { children: any };
 ---
 
 <slot />

package/dist/src/components/select/SelectItem.astro

@@ -1,7 +1,7 @@
 ---
 import Check from "@tabler/icons/outline/check.svg";
-
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
 	/**
@@ -14,17 +14,22 @@ type Props = HTMLAttributes<"div"> & {
 	disabled?: boolean;
 };
 
-const { class: className, value, disabled, ...rest } = Astro.props;
----
-
-<div
-	class:list={[
+const selectItem = tv({
+	base: [
 		"relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 outline-none select-none",
 		"focus:bg-accent focus:text-accent-foreground",
 		"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		"not-aria-selected:[&_svg]:hidden aria-selected:[&_svg]:flex",
-		className,
-	]}
+	],
+});
+
+const selectItemIcon = tv({ base: "absolute left-2 size-3.5 items-center justify-center" });
+
+const { class: className, value, disabled, ...rest } = Astro.props;
+---
+
+<div
+	class={selectItem({ class: className })}
 	data-value={value}
 	data-disabled={disabled}
 	aria-selected="false"
@@ -32,7 +37,7 @@ const { class: className, value, disabled, ...rest } = Astro.props;
 	tabindex="0"
 	{...rest}
 >
-	<span class="absolute left-2 size-3.5 items-center justify-center">
+	<span class={selectItemIcon()}>
 		<Check class="size-4" />
 	</span>
 	<span>

package/dist/src/components/select/SelectLabel.astro

@@ -1,11 +1,14 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
+const selectLabel = tv({ base: "py-1.5 pr-2 pl-8 font-semibold" });
+
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class:list={["py-1.5 pr-2 pl-8 font-semibold", className]} {...rest}>
+<div class={selectLabel({ class: className })} {...rest}>
 	<slot />
 </div>

package/dist/src/components/select/SelectSeparator.astro

@@ -1,9 +1,12 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
+const selectSeparator = tv({ base: "bg-muted -mx-1 my-1 h-px" });
+
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class:list={["bg-muted -mx-1 my-1 h-px", className]} {...rest}></div>
+<div class={selectSeparator({ class: className })} {...rest}></div>

package/dist/src/components/select/SelectTrigger.astro

@@ -1,7 +1,7 @@
 ---
-import type { HTMLAttributes } from "astro/types";
-
 import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
 	/**
@@ -14,17 +14,20 @@ type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
 	required?: boolean;
 };
 
-const { class: className, required = false, ...rest } = Astro.props;
----
-
-<button
-	class:list={[
+const selectTrigger = tv({
+	base: [
 		"starwind-select-trigger",
 		"border-input bg-background text-foreground ring-offset-background flex h-11 items-center justify-between rounded-md border px-3 py-2",
 		"focus:outline-outline focus:outline-2 focus:outline-offset-2",
 		"disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-		className,
-	]}
+	],
+});
+
+const { class: className, required = false, ...rest } = Astro.props;
+---
+
+<button
+	class={selectTrigger({ class: className })}
 	type="button"
 	role="combobox"
 	aria-label="Select field"

package/dist/src/components/select/SelectValue.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"span"> & {
 	/**
@@ -8,9 +9,11 @@ type Props = HTMLAttributes<"span"> & {
 	placeholder?: string;
 };
 
-const { placeholder = "select", ...rest } = Astro.props;
+const selectValue = tv({ base: "pointer-events-none" });
+
+const { placeholder = "select", class: className, ...rest } = Astro.props;
 ---
 
-<span class="pointer-events-none" {...rest}>
+<span class={selectValue({ class: className })} {...rest}>
 	{placeholder}
 </span>

package/dist/src/components/switch/Switch.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"button">, "role" | "type" | "aria-checked"> & {
 	/**
@@ -48,12 +49,6 @@ if (!padding) {
 
 const sizeMultiplier = size === "sm" ? 4 : size === "lg" ? 6 : 5;
 
-const toggleSizeClass = {
-	sm: "size-4",
-	md: "size-5",
-	lg: "size-6",
-};
-
 let ariaLabel;
 if (rest["aria-label"]) {
 	ariaLabel = rest["aria-label"];
@@ -63,6 +58,41 @@ if (rest["aria-label"]) {
 } else {
 	ariaLabel = "switch";
 }
+
+const switchButton = tv({
+	base: [
+		"starwind-transition-colors border-input bg-muted inline-flex h-(--height) w-(--width) items-center rounded-full border",
+		"group peer ring-offset-background focus-visible:outline-2 focus-visible:outline-offset-2",
+		"not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+	],
+	variants: {
+		variant: {
+			primary: "aria-checked:border-primary focus:outline-primary",
+			secondary: "aria-checked:border-secondary focus:outline-secondary",
+			default: "aria-checked:border-foreground focus:outline-outline",
+			info: "aria-checked:border-info focus:outline-info",
+			success: "aria-checked:border-success focus:outline-success",
+			warning: "aria-checked:border-warning focus:outline-warning",
+			error: "aria-checked:border-error focus:outline-error",
+		},
+	},
+	defaultVariants: { variant: "default" },
+});
+
+const switchToggle = tv({
+	base: [
+		"bg-foreground inline-block transform rounded-full transition-transform",
+		"group-aria-checked:translate-x-(--translation) group-aria-[checked=false]:translate-x-[calc(var(--padding)-var(--border-offset))]",
+	],
+	variants: { size: { sm: "size-4", md: "size-5", lg: "size-6" } },
+	defaultVariants: { size: "md" },
+});
+
+const switchLabel = tv({
+	base: "text-foreground ml-2 font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+	variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg" } },
+	defaultVariants: { size: "md" },
+});
 ---
 
 <div class="starwind-switch flex items-center">
@@ -72,21 +102,7 @@ if (rest["aria-label"]) {
 		role="switch"
 		aria-checked={checked ? "true" : "false"}
 		aria-label={ariaLabel}
-		class:list={[
-			"starwind-transition-colors border-input bg-muted inline-flex h-(--height) w-(--width) items-center rounded-full border",
-			"group peer ring-offset-background focus-visible:outline-2 focus-visible:outline-offset-2",
-			"not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
-			{
-				"aria-checked:border-primary focus:outline-primary": variant === "primary",
-				"aria-checked:border-secondary focus:outline-secondary": variant === "secondary",
-				"aria-checked:border-foreground focus:outline-outline": variant === "default",
-				"aria-checked:border-info focus:outline-info": variant === "info",
-				"aria-checked:border-success focus:outline-success": variant === "success",
-				"aria-checked:border-warning focus:outline-warning": variant === "warning",
-				"aria-checked:border-error focus:outline-error": variant === "error",
-			},
-			className,
-		]}
+		class={switchButton({ variant, class: className })}
 		style={{
 			"--padding": `${newPadding}px`,
 			"--height": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2))`,
@@ -96,28 +112,14 @@ if (rest["aria-label"]) {
 		{...rest}
 	>
 		<span
-			class:list={[
-				"bg-foreground inline-block transform rounded-full transition-transform",
-				"group-aria-checked:translate-x-(--translation) group-aria-[checked=false]:translate-x-[calc(var(--padding)-var(--border-offset))]",
-				toggleSizeClass[size],
-			]}
+			class={switchToggle({ size })}
 			style={{
 				"--translation": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2) - var(--border-offset))`,
 			}}></span>
 	</button>
 	{
 		label && (
-			<label
-				for={id}
-				class:list={[
-					"text-foreground ml-2 font-medium 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={switchLabel({ size })}>
 				{label}
 			</label>
 		)
@@ -150,10 +152,7 @@ if (rest["aria-label"]) {
 
 			// Dispatch custom event with the new state
 			const event = new CustomEvent<SwitchChangeEvent["detail"]>("starwind-switch:change", {
-				detail: {
-					checked: newState,
-					switchId: this.switchButton.id,
-				},
+				detail: { checked: newState, switchId: this.switchButton.id },
 				bubbles: true,
 				cancelable: true,
 			});

package/dist/src/components/tabs/Tabs.astro

@@ -1,16 +1,19 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"div"> {
 	defaultValue?: string;
 	syncKey?: string;
 }
 
+const tabs = tv({ base: "starwind-tabs" });
+
 const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 ---
 
 <div
-	class:list={["starwind-tabs", className]}
+	class={tabs({ class: className })}
 	data-default-value={defaultValue}
 	data-sync-key={syncKey}
 	{...rest}
@@ -124,9 +127,7 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 			if (!this.syncKey) return;
 
 			document.dispatchEvent(
-				new CustomEvent(`starwind-tabs-sync:${this.syncKey}`, {
-					detail: { value },
-				}),
+				new CustomEvent(`starwind-tabs-sync:${this.syncKey}`, { detail: { value } }),
 			);
 
 			localStorage.setItem(this.storageKey, value);

package/dist/src/components/tabs/TabsContent.astro

@@ -1,15 +1,18 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 interface Props extends Omit<HTMLAttributes<"div">, "id" | "role" | "tabindex" | "hidden"> {
 	value: string;
 }
 
+const tabsContent = tv({ base: "mt-2 focus-visible:outline-2 focus-visible:outline-offset-2" });
+
 const { value, class: className, ...rest } = Astro.props;
 ---
 
 <div
-	class:list={["mt-2 focus-visible:outline-2 focus-visible:outline-offset-2", className]}
+	class={tabsContent({ class: className })}
 	data-tabs-content
 	data-value={value}
 	data-state="inactive"

package/dist/src/components/tabs/TabsList.astro

@@ -1,19 +1,16 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"div">, "role">;
 
+const tabsList = tv({
+	base: "bg-muted text-muted-foreground inline-flex w-full items-center justify-center rounded-md p-1",
+});
+
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div
-	class:list={[
-		"bg-muted text-muted-foreground inline-flex w-full items-center justify-center rounded-md p-1",
-		className,
-	]}
-	data-tabs-list
-	role="tablist"
-	{...rest}
->
+<div class={tabsList({ class: className })} data-tabs-list role="tablist" {...rest}>
 	<slot />
 </div>