@starwind-ui/core 0.1.1 → 1.1.0

package/dist/index.js

@@ -7,97 +7,97 @@ var registry_default = [
   {
     name: "accordion",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "alert",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "avatar",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "badge",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "button",
     type: "component",
-    version: "1.0.0",
+    version: "2.0.0",
     dependencies: []
   },
   {
     name: "card",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "checkbox",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "dialog",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "input",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "label",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "pagination",
     type: "component",
-    version: "1.0.0",
+    version: "2.0.0",
     dependencies: []
   },
   {
     name: "select",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "switch",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "tabs",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "textarea",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   },
   {
     name: "tooltip",
     type: "component",
-    version: "1.0.0",
+    version: "1.1.0",
     dependencies: []
   }
 ];

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport componentRegistry from \"./registry.json\" assert { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n\tname: string;\n\tversion: string;\n\ttype: \"component\";\n\tdependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n\tcomponents: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n\t// In production (when installed as a dependency), the components will be in dist/src/components\n\t// In development, they will be in src/components\n\tconst componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n\treturn join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry as ComponentMeta[];\n","[\n\t{\n\t\t\"name\": \"accordion\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"alert\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"avatar\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"badge\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"button\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"card\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"checkbox\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"dialog\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"input\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"label\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"pagination\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"select\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"switch\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"tabs\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"textarea\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"tooltip\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.0.0\",\n\t\t\"dependencies\": []\n\t}\n]\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACC;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AACD;;;AD5EA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGpF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC9D;AAKO,IAAM,WAAW;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport componentRegistry from \"./registry.json\" assert { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n\tname: string;\n\tversion: string;\n\ttype: \"component\";\n\tdependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n\tcomponents: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n\t// In production (when installed as a dependency), the components will be in dist/src/components\n\t// In development, they will be in src/components\n\tconst componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n\treturn join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry as ComponentMeta[];\n","[\n\t{\n\t\t\"name\": \"accordion\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"alert\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"avatar\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"badge\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"button\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"2.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"card\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"checkbox\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"dialog\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"input\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"label\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"pagination\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"2.0.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"select\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"switch\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"tabs\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"textarea\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"tooltip\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"1.1.0\",\n\t\t\"dependencies\": []\n\t}\n]\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACC;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,IACC,MAAQ;AAAA,IACR,MAAQ;AAAA,IACR,SAAW;AAAA,IACX,cAAgB,CAAC;AAAA,EAClB;AACD;;;AD5EA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGpF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC9D;AAKO,IAAM,WAAW;","names":[]}

package/dist/src/components/accordion/Accordion.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
 	/**
@@ -12,15 +13,14 @@ type Props = HTMLAttributes<"div"> & {
 	defaultValue?: string;
 };
 
+const accordion = tv({
+	base: "starwind-accordion",
+});
+
 const { type = "single", defaultValue, class: className, ...rest } = Astro.props;
 ---
 
-<div
-	class:list={["starwind-accordion", className]}
-	data-type={type}
-	data-value={defaultValue}
-	{...rest}
->
+<div class={accordion({ class: className })} data-type={type} data-value={defaultValue} {...rest}>
 	<slot />
 </div>
 

package/dist/src/components/accordion/AccordionContent.astro

@@ -4,20 +4,24 @@
  * It is later removed in the Accordion.astro script
  */
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const { class: className, ...rest } = Astro.props;
----
-
-<div
-	class:list={[
+const accordionContent = tv({
+	base: [
 		"starwind-accordion-content",
 		"transform-gpu overflow-hidden",
 		"data-[state=closed]:animate-accordion-up data-[state=closed]:h-0",
 		"data-[state=open]:animate-accordion-down",
-		className,
-	]}
+	],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+	class={accordionContent({ class: className })}
 	data-state="closed"
 	style="animation: none;"
 	{...rest}

package/dist/src/components/accordion/AccordionItem.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
 	/**
@@ -8,18 +9,13 @@ type Props = HTMLAttributes<"div"> & {
 	value: string;
 };
 
+const accordionItem = tv({
+	base: "starwind-accordion-item border-x border-b first:rounded-t-lg first:border-t last:rounded-b-lg",
+});
+
 const { value, class: className, ...rest } = Astro.props;
 ---
 
-<div
-	class:list={[
-		"starwind-accordion-item",
-		"border-x border-b first:rounded-t-lg first:border-t last:rounded-b-lg",
-		className,
-	]}
-	data-value={value}
-	data-state="closed"
-	{...rest}
->
+<div class={accordionItem({ class: className })} data-value={value} data-state="closed" {...rest}>
 	<slot />
 </div>

package/dist/src/components/accordion/AccordionTrigger.astro

@@ -1,23 +1,26 @@
 ---
 import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
-
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"button">;
 
-const { class: className, ...rest } = Astro.props;
----
-
-<button
-	type="button"
-	class:list={[
+const accordionTrigger = tv({
+	base: [
 		"starwind-accordion-trigger",
 		"flex w-full items-center justify-between gap-4 rounded-md px-5 py-4",
 		"starwind-transition-colors hover:text-muted-foreground text-left font-medium",
 		"[&[data-state=open]>svg]:rotate-180",
 		"focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-0",
-		className,
-	]}
+	],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+	type="button"
+	class={accordionTrigger({ class: className })}
 	aria-expanded="false"
 	{...rest}
 >

package/dist/src/components/alert/Alert.astro

@@ -1,5 +1,24 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+const alert = tv({
+	base: "text-foreground relative w-full rounded-lg border p-4",
+	variants: {
+		variant: {
+			default: "bg-background [&>h5>svg]:text-foreground",
+			primary: "border-primary bg-primary/7 [&>h5>svg]:text-primary",
+			secondary: "border-secondary bg-secondary/7 [&>h5>svg]:text-secondary",
+			info: "border-info bg-info/7 [&>h5>svg]:text-info",
+			success: "border-success bg-success/7 [&>h5>svg]:text-success",
+			warning: "border-warning bg-warning/7 [&>h5>svg]:text-warning",
+			error: "border-error bg-error/7 [&>h5>svg]:text-error",
+		}
+	},
+	defaultVariants: {
+		variant: "default"
+	}
+});
 
 type Props = HTMLAttributes<"div"> & {
 	/**
@@ -12,33 +31,6 @@ type Props = HTMLAttributes<"div"> & {
 const { variant = "default", class: className, ...rest } = Astro.props;
 ---
 
-<div
-	class:list={[
-		"text-foreground relative w-full rounded-lg border p-4",
-		{
-			"bg-background [&>h5>svg]:text-foreground": variant === "default",
-		},
-		{
-			"border-primary bg-primary/7 [&>h5>svg]:text-primary": variant === "primary",
-		},
-		{
-			"border-secondary bg-secondary/7 [&>h5>svg]:text-secondary": variant === "secondary",
-		},
-		{
-			"border-info bg-info/7 [&>h5>svg]:text-info": variant === "info",
-		},
-		{
-			"border-success bg-success/7 [&>h5>svg]:text-success": variant === "success",
-		},
-		{
-			"border-warning bg-warning/7 [&>h5>svg]:text-warning": variant === "warning",
-		},
-		{
-			"border-error bg-error/7 [&>h5>svg]:text-error": variant === "error",
-		},
-		className,
-	]}
-	{...rest}
->
+<div class={alert({ variant, class: className })} {...rest}>
 	<slot />
 </div>

package/dist/src/components/alert/AlertDescription.astro

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

package/dist/src/components/alert/AlertTitle.astro

@@ -1,17 +1,16 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+const alertTitle = tv({
+	base: "mb-2 flex items-center gap-2 text-lg leading-none font-medium tracking-tight",
+});
 
 type Props = HTMLAttributes<"div">;
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<h5
-	class:list={[
-		"mb-2 flex items-center gap-2 text-lg leading-none font-medium tracking-tight",
-		className,
-	]}
-	{...rest}
->
+<h5 class={alertTitle({ class: className })} {...rest}>
 	<slot />
 </h5>

package/dist/src/components/avatar/Avatar.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"div"> {
 	/**
@@ -14,31 +15,33 @@ interface Props extends HTMLAttributes<"div"> {
 	size?: "sm" | "md" | "lg";
 }
 
-const { variant = "default", size = "md", class: className, ...rest } = Astro.props;
+const avatar = tv({
+	base: "text-foreground bg-muted relative overflow-hidden rounded-full border-2",
+	variants: {
+		variant: {
+			default: "border-border",
+			primary: "border-primary",
+			secondary: "border-secondary",
+			info: "border-info",
+			success: "border-success",
+			warning: "border-warning",
+			error: "border-error",
+		},
+		size: {
+			sm: "h-8 w-8 text-xs",
+			md: "h-10 w-10 text-sm",
+			lg: "h-12 w-12 text-base",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+	},
+});
 
-const sizeClasses = {
-	sm: "h-8 w-8 text-xs",
-	md: "h-10 w-10 text-sm",
-	lg: "h-12 w-12 text-base",
-}[size];
+const { variant, size, class: className, ...rest } = Astro.props;
 ---
 
-<figure
-	class:list={[
-		"text-foreground bg-muted relative overflow-hidden rounded-full border-2",
-		{
-			"border-border": variant === "default",
-			"border-primary": variant === "primary",
-			"border-secondary": variant === "secondary",
-			"border-info": variant === "info",
-			"border-success": variant === "success",
-			"border-warning": variant === "warning",
-			"border-error": variant === "error",
-		},
-		sizeClasses,
-		className,
-	]}
-	{...rest}
->
+<figure class={avatar({ variant, size, class: className })} {...rest}>
 	<slot />
 </figure>

package/dist/src/components/avatar/AvatarFallback.astro

@@ -1,4 +1,10 @@
 ---
+import { tv } from "tailwind-variants";
+
+const avatarFallback = tv({
+	base: "absolute inset-0.5 flex items-center justify-center rounded-full font-medium",
+});
+
 interface Props {
 	class?: string;
 }
@@ -6,11 +12,6 @@ interface Props {
 const { class: className } = Astro.props;
 ---
 
-<div
-	class:list={[
-		"absolute inset-0.5 flex items-center justify-center rounded-full font-medium",
-		className,
-	]}
->
+<div class={avatarFallback({ class: className })}>
 	<slot />
 </div>

package/dist/src/components/avatar/AvatarImage.astro

@@ -1,8 +1,14 @@
 ---
 import { Image } from "astro:assets";
+import { tv } from "tailwind-variants";
+
+const avatarImage = tv({
+	base: "relative z-1 h-full w-full object-cover",
+});
 
 type BaseProps = {
 	alt: string;
+	class?: string;
 };
 
 type WithSrc = BaseProps & {
@@ -17,7 +23,7 @@ type WithImage = BaseProps & {
 
 type Props = WithSrc | WithImage;
 
-const { src, image, alt } = Astro.props;
+const { src, image, alt, class: className } = Astro.props;
 
 if (!src && !image) {
 	throw new Error("Either 'src' or 'image' is required for an avatar image.");
@@ -29,20 +35,11 @@ if (!src && !image) {
 		<img
 			src={src}
 			alt={alt}
-			class="relative z-1 h-full w-full rounded-full object-cover"
+			class={avatarImage({ class: className })}
 			width={64}
 			height={64}
 			onerror="this.style.display='none'"
 		/>
 	)
 }
-{
-	image && (
-		<Image
-			src={image}
-			alt={alt}
-			class="relative z-1 h-full w-full rounded-full object-cover"
-			width={64}
-		/>
-	)
-}
+{image && <Image src={image} alt={alt} class={avatarImage({ class: className })} width={64} />}

package/dist/src/components/badge/Badge.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"div">, Omit<HTMLAttributes<"a">, "type"> {
 	/**
@@ -21,44 +22,95 @@ interface Props extends HTMLAttributes<"div">, Omit<HTMLAttributes<"a">, "type">
 	 * @default "md"
 	 */
 	size?: "sm" | "md" | "lg";
+	/**
+	 * URL to link to when badge is clicked
+	 */
+	href?: string;
 }
 
-const { variant = "default", size = "md", class: className, ...rest } = Astro.props;
-
-const Tag = Astro.props.href ? "a" : "div";
----
-
-<Tag
-	class:list={[
-		"starwind-badge starwind-transition-colors inline-flex items-center rounded-full font-semibold",
-		"focus-visible:outline-2 focus-visible:outline-offset-2",
+const badgeVariants = tv({
+	base: "starwind-badge starwind-transition-colors inline-flex items-center rounded-full font-semibold focus-visible:outline-2 focus-visible:outline-offset-2",
+	variants: {
+		variant: {
+			default: "bg-foreground text-background",
+			primary: "bg-primary text-primary-foreground focus-visible:outline-primary",
+			secondary: "bg-secondary text-secondary-foreground focus-visible:outline-secondary",
+			outline: "border-border focus-visible:outline-outline border",
+			ghost: "bg-foreground/10 text-foreground focus-visible:outline-outline",
+			info: "bg-info text-info-foreground focus-visible:outline-info",
+			success: "bg-success text-success-foreground focus-visible:outline-success",
+			warning: "bg-warning text-warning-foreground focus-visible:outline-warning",
+			error: "bg-error text-error-foreground focus-visible:outline-error",
+		},
+		size: {
+			sm: "px-2.5 py-0.5 text-xs",
+			md: "px-3 py-0.5 text-sm",
+			lg: "px-4 py-1 text-base",
+		},
+		isLink: {
+			true: "cursor-pointer",
+			false: "",
+		},
+	},
+	compoundVariants: [
+		{
+			isLink: true,
+			variant: "default",
+			className: "hover:bg-foreground/80",
+		},
 		{
-			"bg-foreground text-background hover:bg-foreground/80": variant === "default",
-			"bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:outline-primary":
-				variant === "primary",
-			"bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:outline-secondary":
-				variant === "secondary",
-			"border-border hover:border-border/80 focus-visible:outline-outline border":
-				variant === "outline",
-			"bg-info text-info-foreground hover:bg-info/80 focus-visible:outline-info":
-				variant === "info",
-			"bg-success text-success-foreground hover:bg-success/80 focus-visible:outline-success":
-				variant === "success",
-			"bg-warning text-warning-foreground hover:bg-warning/80 focus-visible:outline-warning":
-				variant === "warning",
-			"bg-error text-error-foreground hover:bg-error/80 focus-visible:outline-error":
-				variant === "error",
-			"bg-foreground/10 text-foreground hover:bg-foreground/7 focus-visible:outline-outline":
-				variant === "ghost",
+			isLink: true,
+			variant: "primary",
+			className: "hover:bg-primary/80",
 		},
 		{
-			"px-2.5 py-0.5 text-xs": size === "sm",
-			"px-3 py-0.5 text-sm": size === "md",
-			"px-4 py-1 text-base": size === "lg",
+			isLink: true,
+			variant: "secondary",
+			className: "hover:bg-secondary/80",
 		},
-		className,
-	]}
-	{...rest}
->
+		{
+			isLink: true,
+			variant: "outline",
+			className: "hover:border-border/80",
+		},
+		{
+			isLink: true,
+			variant: "ghost",
+			className: "hover:bg-foreground/7",
+		},
+		{
+			isLink: true,
+			variant: "info",
+			className: "hover:bg-info/80",
+		},
+		{
+			isLink: true,
+			variant: "success",
+			className: "hover:bg-success/80",
+		},
+		{
+			isLink: true,
+			variant: "warning",
+			className: "hover:bg-warning/80",
+		},
+		{
+			isLink: true,
+			variant: "error",
+			className: "hover:bg-error/80",
+		},
+	],
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+		isLink: false,
+	},
+});
+
+const { variant = "default", size = "md", class: className, href, ...rest } = Astro.props;
+const isLink = !!href;
+const Tag = isLink ? "a" : "div";
+---
+
+<Tag class={badgeVariants({ variant, size, isLink, class: className })} href={href} {...rest}>
 	<slot />
 </Tag>