@starwind-ui/core 1.0.0 → 1.3.0

package/dist/index.js

@@ -3,104 +3,27 @@ import { join } from "node:path";
 import { fileURLToPath } from "node:url";
 
 // src/registry.json
-var registry_default = [
-  {
-    name: "accordion",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "alert",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "avatar",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "badge",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "button",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "card",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "checkbox",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "dialog",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "input",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "label",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "pagination",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "select",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "switch",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "tabs",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "textarea",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  },
-  {
-    name: "tooltip",
-    type: "component",
-    version: "1.0.0",
-    dependencies: []
-  }
-];
+var registry_default = {
+  $schema: "https://starwind.dev/registry-schema.json",
+  components: [
+    { name: "accordion", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "alert", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "avatar", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "badge", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "button", type: "component", version: "2.0.0", dependencies: [] },
+    { name: "card", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "checkbox", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "dialog", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "input", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "label", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "pagination", type: "component", version: "2.0.0", dependencies: [] },
+    { name: "select", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "switch", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "tabs", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "textarea", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "tooltip", type: "component", version: "1.1.0", dependencies: [] }
+  ]
+};
 
 // src/index.ts
 var __dirname = fileURLToPath(new URL(".", import.meta.url));
@@ -108,7 +31,7 @@ var getComponentPath = (componentName, fileName) => {
   const componentsDir = __dirname.includes("dist") ? "src/components" : "src/components";
   return join(__dirname, componentsDir, componentName, fileName);
 };
-var registry = registry_default;
+var registry = registry_default.components;
 export {
   getComponentPath,
   registry

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\" with { 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.components as ComponentMeta[];\n","{\n\t\"$schema\": \"https://starwind.dev/registry-schema.json\",\n\t\"components\": [\n\t\t{ \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"select\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] }\n\t]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACC,SAAW;AAAA,EACX,YAAc;AAAA,IACb,EAAE,MAAQ,aAAa,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACnF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,WAAW,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,EAClF;AACD;;;ADCA,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,iBAAkB;","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,12 @@ 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>
 
@@ -79,12 +77,7 @@ const { type = "single", defaultValue, class: className, ...rest } = Astro.props
 
 					if (!trigger || !content) return null;
 
-					return {
-						element,
-						trigger,
-						content,
-						value,
-					};
+					return { element, trigger, content, value };
 				})
 				.filter((item): item is AccordionItem => item !== null);
 		}

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,22 @@
 ---
 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 +29,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,14 @@
 ---
 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 } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"div"> {
 	/**
@@ -14,31 +15,26 @@ 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,23 +1,18 @@
 ---
 import { Image } from "astro:assets";
+import { tv } from "tailwind-variants";
 
-type BaseProps = {
-	alt: string;
-};
+const avatarImage = tv({ base: "relative z-1 h-full w-full object-cover" });
 
-type WithSrc = BaseProps & {
-	src: string;
-	image?: never;
-};
+type BaseProps = { alt: string; class?: string };
 
-type WithImage = BaseProps & {
-	src?: never;
-	image: ImageMetadata;
-};
+type WithSrc = BaseProps & { src: string; image?: never };
+
+type WithImage = BaseProps & { src?: never; image: ImageMetadata };
 
 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 +24,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/avatar/index.ts

@@ -1,6 +1,6 @@
 import Avatar from "./Avatar.astro";
-import AvatarImage from "./AvatarImage.astro";
 import AvatarFallback from "./AvatarFallback.astro";
+import AvatarImage from "./AvatarImage.astro";
 
 export { Avatar, AvatarImage, AvatarFallback };
 

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

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"div">, Omit<HTMLAttributes<"a">, "type"> {
 	/**
@@ -21,44 +22,48 @@ 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 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" },
+		{ isLink: true, variant: "primary", className: "hover:bg-primary/80" },
+		{ isLink: true, variant: "secondary", className: "hover:bg-secondary/80" },
+		{ 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 Tag = Astro.props.href ? "a" : "div";
+const { variant = "default", size = "md", class: className, href, ...rest } = Astro.props;
+const isLink = !!href;
+const Tag = isLink ? "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",
-		{
-			"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",
-		},
-		{
-			"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",
-		},
-		className,
-	]}
-	{...rest}
->
+<Tag class={badgeVariants({ variant, size, isLink, class: className })} href={href} {...rest}>
 	<slot />
 </Tag>