@starwind-ui/core 1.0.0 → 1.3.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,28 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
-type Props = HTMLAttributes<"textarea"> & {
-	size?: "sm" | "md" | "lg";
-};
+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,8 @@ type Props = HTMLAttributes<"div"> & {
 	disableHoverableContent?: boolean;
 };
 
+const tooltip = tv({ base: "starwind-tooltip relative inline-block" });
+
 const {
 	openDelay = 200,
 	closeDelay = 200,
@@ -25,7 +28,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,48 @@ 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 +83,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/dist/src/components/tooltip/TooltipTrigger.astro

@@ -3,9 +3,7 @@
  * This component is used to trigger the tooltip
  * All it does is require a slot
  */
-type Props = {
-	children: any;
-};
+type Props = { children: any };
 ---
 
 <slot />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "description": "Starwind UI core components and registry",
   "type": "module",
   "main": "./dist/index.js",
@@ -30,7 +30,6 @@
     "dev": "tsup --watch",
     "core:link": "pnpm link --global",
     "core:unlink": "pnpm rm --global @starwind-ui/core",
-    "sync:docs": "pnpm exec starwind sync src/components ../../apps/docs/src/components/starwind",
     "sync:demo": "pnpm exec starwind sync src/components ../../apps/demo/src/components/starwind",
     "publish:beta": "pnpm publish --tag beta --access public",
     "publish:next": "pnpm publish --tag next --access public",