@starwind-ui/core 0.0.1 → 0.1.1

package/dist/index.js

@@ -4,16 +4,100 @@ 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: "0.0.11",
+    version: "1.0.0",
     dependencies: []
   },
   {
     name: "button",
     type: "component",
-    version: "0.0.11",
+    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: []
   }
 ];

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\": \"badge\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"0.0.11\",\n\t\t\"dependencies\": []\n\t},\n\t{\n\t\t\"name\": \"button\",\n\t\t\"type\": \"component\",\n\t\t\"version\": \"0.0.11\",\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;AACD;;;ADQA,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.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":[]}

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

@@ -0,0 +1,248 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div"> & {
+	/**
+	 * The type of accordion.  If "single", only one item can be open at a time.
+	 */
+	type?: "single" | "multiple";
+	/**
+	 * The value of the item that should be open by default
+	 */
+	defaultValue?: string;
+};
+
+const { type = "single", defaultValue, class: className, ...rest } = Astro.props;
+---
+
+<div
+	class:list={["starwind-accordion", className]}
+	data-type={type}
+	data-value={defaultValue}
+	{...rest}
+>
+	<slot />
+</div>
+
+<script>
+	type AccordionType = "single" | "multiple";
+	type AccordionState = "open" | "closed";
+
+	/** Represents a single accordion item with its associated elements */
+	interface AccordionItem {
+		element: HTMLElement;
+		trigger: HTMLElement;
+		content: HTMLElement;
+		value: string;
+	}
+
+	/**
+	 * Handles the functionality of an accordion component.
+	 * Supports single and multiple open items, keyboard navigation,
+	 * and maintains ARIA accessibility standards.
+	 */
+	class AccordionHandler {
+		private accordion: HTMLElement;
+		private type: AccordionType;
+		private items: AccordionItem[];
+		private itemsByValue: Map<string, AccordionItem>;
+		private accordionId: string;
+
+		/**
+		 * Creates a new AccordionHandler instance
+		 * @param accordion - The root accordion element
+		 * @param idx - Unique index for this accordion instance
+		 */
+		constructor(accordion: HTMLElement, idx: number) {
+			this.accordion = accordion;
+			this.type = (accordion.dataset.type || "single") as AccordionType;
+			this.accordionId = `starwind-accordion${idx}`;
+
+			// Cache all items and create lookup maps
+			this.items = this.initializeItems();
+			this.itemsByValue = new Map(this.items.map((item) => [item.value, item]));
+
+			this.setupItems();
+			this.setInitialState();
+		}
+
+		/**
+		 * Initializes accordion items by querying the DOM and setting up data structures
+		 * @returns Array of AccordionItem objects
+		 */
+		private initializeItems(): AccordionItem[] {
+			return Array.from(this.accordion.querySelectorAll<HTMLElement>(".starwind-accordion-item"))
+				.map((element, idx) => {
+					const trigger = element.querySelector<HTMLElement>(".starwind-accordion-trigger");
+					const content = element.querySelector<HTMLElement>(".starwind-accordion-content");
+					const value = element.getAttribute("data-value") || String(idx);
+
+					if (!trigger || !content) return null;
+
+					return {
+						element,
+						trigger,
+						content,
+						value,
+					};
+				})
+				.filter((item): item is AccordionItem => item !== null);
+		}
+
+		/**
+		 * Sets up initial state and event listeners for all accordion items
+		 */
+		private setupItems(): void {
+			this.items.forEach((item, idx) => {
+				this.setupAccessibility(item, idx);
+				this.setContentHeight(item.content);
+				this.setupEventListeners(item);
+			});
+		}
+
+		/**
+		 * Sets up ARIA attributes and IDs for accessibility
+		 * @param item - The accordion item to setup
+		 * @param idx - Index of the item
+		 */
+		private setupAccessibility(item: AccordionItem, idx: number): void {
+			const triggerId = `${this.accordionId}-t${idx}`;
+			const contentId = `${this.accordionId}-c${idx}`;
+
+			item.trigger.id = triggerId;
+			item.trigger.setAttribute("aria-controls", contentId);
+			item.trigger.setAttribute("aria-expanded", "false");
+
+			item.content.id = contentId;
+			item.content.setAttribute("aria-labelledby", triggerId);
+			item.content.setAttribute("role", "region");
+		}
+
+		/**
+		 * Calculates and sets the content height CSS variable for animations
+		 * @param content - The content element to measure
+		 */
+		private setContentHeight(content: HTMLElement): void {
+			const contentInner = content.firstElementChild as HTMLElement;
+			if (contentInner) {
+				const height = contentInner.getBoundingClientRect().height;
+				content.style.setProperty("--starwind-accordion-content-height", `${height}px`);
+			}
+		}
+
+		/**
+		 * Sets the initial state based on the default value attribute
+		 */
+		private setInitialState(): void {
+			const defaultValue = this.accordion.dataset.value;
+			if (defaultValue) {
+				const item = this.itemsByValue.get(defaultValue);
+				if (item) {
+					this.setItemState(item, true);
+				}
+			}
+		}
+
+		/**
+		 * Sets up click and keyboard event listeners for an accordion item
+		 * @param item - The accordion item to setup listeners for
+		 */
+		private setupEventListeners(item: AccordionItem): void {
+			item.trigger.addEventListener("click", () => this.handleClick(item));
+			item.trigger.addEventListener("keydown", (e) => this.handleKeyDown(e, item));
+		}
+
+		/**
+		 * Handles click events on accordion triggers
+		 * @param item - The clicked accordion item
+		 */
+		private handleClick(item: AccordionItem): void {
+			const isOpen = item.element.getAttribute("data-state") === "open";
+			this.toggleItem(item, !isOpen);
+		}
+
+		/**
+		 * Handles keyboard navigation events
+		 * @param event - The keyboard event
+		 * @param item - The current accordion item
+		 */
+		private handleKeyDown(event: KeyboardEvent, item: AccordionItem): void {
+			const index = this.items.indexOf(item);
+
+			const keyActions: Record<string, () => void> = {
+				ArrowDown: () => this.focusItem(index + 1),
+				ArrowUp: () => this.focusItem(index - 1),
+				Home: () => this.focusItem(0),
+				End: () => this.focusItem(this.items.length - 1),
+			};
+
+			const action = keyActions[event.key];
+			if (action) {
+				event.preventDefault();
+				action();
+			}
+		}
+
+		/**
+		 * Focuses an accordion item by index with wrapping
+		 * @param index - The target index to focus
+		 */
+		private focusItem(index: number): void {
+			const targetIndex = (index + this.items.length) % this.items.length;
+			this.items[targetIndex].trigger.focus();
+		}
+
+		/**
+		 * Toggles an accordion item's state
+		 * @param item - The item to toggle
+		 * @param shouldOpen - Whether the item should be opened
+		 */
+		private toggleItem(item: AccordionItem, shouldOpen: boolean): void {
+			if (this.type === "single" && shouldOpen) {
+				// Close other items if in single mode
+				this.items.forEach((otherItem) => {
+					if (otherItem !== item && otherItem.element.getAttribute("data-state") === "open") {
+						this.setItemState(otherItem, false);
+					}
+				});
+			}
+
+			this.setItemState(item, shouldOpen);
+		}
+
+		/**
+		 * Sets the state of an accordion item
+		 * @param item - The item to update
+		 * @param isOpen - Whether the item should be open
+		 */
+		private setItemState(item: AccordionItem, isOpen: boolean): void {
+			const state: AccordionState = isOpen ? "open" : "closed";
+
+			if (isOpen) {
+				item.content.style.removeProperty("animation");
+			}
+
+			// Set content height variable for animations
+			this.setContentHeight(item.content);
+
+			item.element.setAttribute("data-state", state);
+			item.content.setAttribute("data-state", state);
+			item.trigger.setAttribute("data-state", state);
+			item.trigger.setAttribute("aria-expanded", isOpen.toString());
+		}
+	}
+
+	// Store instances in a WeakMap to avoid memory leaks
+	const accordionInstances = new WeakMap<HTMLElement, AccordionHandler>();
+
+	const setupAccordions = () => {
+		document.querySelectorAll<HTMLElement>(".starwind-accordion").forEach((accordion, idx) => {
+			if (!accordionInstances.has(accordion)) {
+				accordionInstances.set(accordion, new AccordionHandler(accordion, idx));
+			}
+		});
+	};
+
+	setupAccordions();
+	document.addEventListener("astro:after-swap", setupAccordions);
+</script>

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

@@ -0,0 +1,28 @@
+---
+/**
+ * NOTE: style="animation: none;" makes it so the close animation doesn't run on page load
+ * It is later removed in the Accordion.astro script
+ */
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+	class:list={[
+		"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,
+	]}
+	data-state="closed"
+	style="animation: none;"
+	{...rest}
+>
+	<div class="overflow-hidden px-5 pt-0 pb-4">
+		<slot />
+	</div>
+</div>

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

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div"> & {
+	/**
+	 * The value of the item
+	 */
+	value: string;
+};
+
+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}
+>
+	<slot />
+</div>

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

@@ -0,0 +1,26 @@
+---
+import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
+
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"button">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+	type="button"
+	class:list={[
+		"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,
+	]}
+	aria-expanded="false"
+	{...rest}
+>
+	<slot />
+	<ChevronDown class="size-5 shrink-0 transition-transform duration-200" />
+</button>

package/dist/src/components/accordion/index.ts

@@ -0,0 +1,13 @@
+import Accordion from "./Accordion.astro";
+import AccordionContent from "./AccordionContent.astro";
+import AccordionItem from "./AccordionItem.astro";
+import AccordionTrigger from "./AccordionTrigger.astro";
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+
+export default {
+	Root: Accordion,
+	Content: AccordionContent,
+	Item: AccordionItem,
+	Trigger: AccordionTrigger,
+};

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

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div"> & {
+	/**
+	 * Sets the variant of the alert
+	 * @default "default"
+	 */
+	variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
+};
+
+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}
+>
+	<slot />
+</div>

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

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

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+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}
+>
+	<slot />
+</h5>

package/dist/src/components/alert/index.ts

@@ -0,0 +1,11 @@
+import Alert from "./Alert.astro";
+import AlertDescription from "./AlertDescription.astro";
+import AlertTitle from "./AlertTitle.astro";
+
+export { Alert, AlertDescription, AlertTitle };
+
+export default {
+	Root: Alert,
+	Description: AlertDescription,
+	Title: AlertTitle,
+};

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

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+	/**
+	 * Sets the variant of the avatar
+	 * @default "default"
+	 */
+	variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
+	/**
+	 * Sets the size of the avatar
+	 * @default "md"
+	 */
+	size?: "sm" | "md" | "lg";
+}
+
+const { variant = "default", size = "md", class: className, ...rest } = Astro.props;
+
+const sizeClasses = {
+	sm: "h-8 w-8 text-xs",
+	md: "h-10 w-10 text-sm",
+	lg: "h-12 w-12 text-base",
+}[size];
+---
+
+<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}
+>
+	<slot />
+</figure>

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

@@ -0,0 +1,16 @@
+---
+interface Props {
+	class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<div
+	class:list={[
+		"absolute inset-0.5 flex items-center justify-center rounded-full font-medium",
+		className,
+	]}
+>
+	<slot />
+</div>

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

@@ -0,0 +1,48 @@
+---
+import { Image } from "astro:assets";
+
+type BaseProps = {
+	alt: string;
+};
+
+type WithSrc = BaseProps & {
+	src: string;
+	image?: never;
+};
+
+type WithImage = BaseProps & {
+	src?: never;
+	image: ImageMetadata;
+};
+
+type Props = WithSrc | WithImage;
+
+const { src, image, alt } = Astro.props;
+
+if (!src && !image) {
+	throw new Error("Either 'src' or 'image' is required for an avatar image.");
+}
+---
+
+{
+	src && (
+		<img
+			src={src}
+			alt={alt}
+			class="relative z-1 h-full w-full rounded-full object-cover"
+			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}
+		/>
+	)
+}

package/dist/src/components/avatar/index.ts

@@ -0,0 +1,11 @@
+import Avatar from "./Avatar.astro";
+import AvatarImage from "./AvatarImage.astro";
+import AvatarFallback from "./AvatarFallback.astro";
+
+export { Avatar, AvatarImage, AvatarFallback };
+
+export default {
+	Root: Avatar,
+	Image: AvatarImage,
+	Fallback: AvatarFallback,
+};