@starwind-ui/core 0.1.1 → 1.1.0

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

@@ -1,21 +1,25 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 interface Props extends Omit<HTMLAttributes<"button">, "type" | "id" | "role"> {
 	value: string;
 }
 
-const { value, class: className, ...rest } = Astro.props;
----
-
-<button
-	class:list={[
+const tabsTrigger = tv({
+	base: [
 		"starwind-transition-colors inline-flex grow items-center justify-center rounded-sm px-3 py-1.5 font-medium whitespace-nowrap",
 		"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
 		"focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-2",
 		"disabled:pointer-events-none disabled:opacity-50",
-		className,
-	]}
+	],
+});
+
+const { value, class: className, ...rest } = Astro.props;
+---
+
+<button
+	class={tabsTrigger({ class: className })}
 	data-tabs-trigger
 	data-value={value}
 	data-state="inactive"

package/dist/src/components/textarea/Textarea.astro

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

package/dist/src/components/tooltip/Tooltip.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
 	/**
@@ -16,6 +17,10 @@ type Props = HTMLAttributes<"div"> & {
 	disableHoverableContent?: boolean;
 };
 
+const tooltip = tv({
+	base: "starwind-tooltip relative inline-block",
+});
+
 const {
 	openDelay = 200,
 	closeDelay = 200,
@@ -25,7 +30,7 @@ const {
 ---
 
 <div
-	class:list={["starwind-tooltip relative inline-block", className]}
+	class={tooltip({ class: className })}
 	data-state="closed"
 	data-open-delay={openDelay}
 	data-close-delay={closeDelay}

package/dist/src/components/tooltip/TooltipContent.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
 	/**
@@ -29,6 +30,79 @@ type Props = HTMLAttributes<"div"> & {
 	animationDuration?: number;
 };
 
+const tooltipContent = tv({
+	base: [
+		"starwind-tooltip-content",
+		"absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-sm",
+		"bg-popover text-popover-foreground rounded-md border",
+		"animate-in fade-in-0 zoom-in-95",
+		"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+	],
+	variants: {
+		side: {
+			left: "slide-in-from-right-2 right-(--tooltip-offset)",
+			right: "slide-in-from-left-2 left-(--tooltip-offset)",
+			bottom: "slide-in-from-top-2 top-(--tooltip-offset)",
+			top: "slide-in-from-bottom-2 bottom-(--tooltip-offset)",
+		},
+		align: {
+			center: "",
+			start: "",
+			end: "",
+		},
+		sideAlign: {
+			"top-center": "left-[50%] translate-x-[-50%]",
+			"bottom-center": "left-[50%] translate-x-[-50%]",
+			"left-center": "top-[50%] translate-y-[-50%]",
+			"right-center": "top-[50%] translate-y-[-50%]",
+			"top-start": "left-0",
+			"bottom-start": "left-0",
+			"top-end": "right-0",
+			"bottom-end": "right-0",
+			"left-start": "top-0",
+			"right-start": "top-0",
+			"left-end": "bottom-0",
+			"right-end": "bottom-0",
+		},
+	},
+	defaultVariants: {
+		side: "top",
+		align: "center",
+	},
+	compoundVariants: [
+		{
+			side: ["top", "bottom"],
+			align: "center",
+			class: "left-[50%] translate-x-[-50%]",
+		},
+		{
+			side: ["left", "right"],
+			align: "center",
+			class: "top-[50%] translate-y-[-50%]",
+		},
+		{
+			side: ["top", "bottom"],
+			align: "start",
+			class: "left-0",
+		},
+		{
+			side: ["top", "bottom"],
+			align: "end",
+			class: "right-0",
+		},
+		{
+			side: ["left", "right"],
+			align: "start",
+			class: "top-0",
+		},
+		{
+			side: ["left", "right"],
+			align: "end",
+			class: "bottom-0",
+		},
+	],
+});
+
 const {
 	side = "top",
 	align = "center",
@@ -40,28 +114,7 @@ const {
 ---
 
 <div
-	class:list={[
-		"starwind-tooltip-content",
-		"absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-sm",
-		"bg-popover text-popover-foreground rounded-md border",
-		"animate-in fade-in-0 zoom-in-95",
-		"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-		{
-			"slide-in-from-right-2 right-(--tooltip-offset)": side === "left",
-			"slide-in-from-left-2 left-(--tooltip-offset)": side === "right",
-			"slide-in-from-top-2 top-(--tooltip-offset)": side === "bottom",
-			"slide-in-from-bottom-2 bottom-(--tooltip-offset)": side === "top",
-		},
-		{
-			"left-[50%] translate-x-[-50%]": align === "center" && (side === "top" || side === "bottom"),
-			"top-[50%] translate-y-[-50%]": align === "center" && (side === "left" || side === "right"),
-			"left-0": align === "start" && (side === "top" || side === "bottom"),
-			"right-0": align === "end" && (side === "top" || side === "bottom"),
-			"top-0": align === "start" && (side === "left" || side === "right"),
-			"bottom-0": align === "end" && (side === "left" || side === "right"),
-		},
-		className,
-	]}
+	class={tooltipContent({ side, align, class: className })}
 	data-state="closed"
 	data-side={side}
 	data-align={align}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "0.1.1",
+  "version": "1.1.0",
   "description": "Starwind UI core components and registry",
   "type": "module",
   "main": "./dist/index.js",