@starwind-ui/core 1.6.1 → 1.7.0

package/dist/index.js

@@ -16,10 +16,14 @@ var registry_default = {
     { name: "checkbox", type: "component", version: "1.2.0", dependencies: [] },
     { name: "dialog", type: "component", version: "1.1.3", dependencies: [] },
     { name: "dropdown", type: "component", version: "1.0.3", dependencies: [] },
+    { name: "dropzone", type: "component", version: "1.0.0", dependencies: [] },
     { name: "input", type: "component", version: "1.1.1", dependencies: [] },
     { name: "label", type: "component", version: "1.1.1", dependencies: [] },
     { name: "pagination", type: "component", version: "2.0.1", dependencies: [] },
-    { name: "select", type: "component", version: "1.3.1", dependencies: [] },
+    { name: "progress", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "radio-group", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "select", type: "component", version: "1.3.2", dependencies: [] },
+    { name: "skeleton", type: "component", version: "1.0.0", dependencies: [] },
     { name: "switch", type: "component", version: "1.1.0", dependencies: [] },
     { name: "table", type: "component", version: "1.0.0", dependencies: [] },
     { name: "tabs", type: "component", version: "1.2.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\" 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.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.3\", \"dependencies\": [] },\n\t\t{ \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.3\", \"dependencies\": [] },\n\t\t{ \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"select\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"table\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.2\", \"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,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,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,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,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,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,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;;;ADFA,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":[]}
+{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n  name: string;\n  version: string;\n  type: \"component\";\n  dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n  components: 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  // In production (when installed as a dependency), the components will be in dist/src/components\n  // In development, they will be in src/components\n  const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n  return 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  \"$schema\": \"https://starwind.dev/registry-schema.json\",\n  \"components\": [\n    { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n    { \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.3\", \"dependencies\": [] },\n    { \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.3\", \"dependencies\": [] },\n    { \"name\": \"dropzone\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n    { \"name\": \"progress\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"radio-group\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"select\", \"type\": \"component\", \"version\": \"1.3.2\", \"dependencies\": [] },\n    { \"name\": \"skeleton\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"table\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.2\", \"dependencies\": [] }\n  ]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACE,SAAW;AAAA,EACX,YAAc;AAAA,IACZ,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,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,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,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,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,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,eAAe,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACrF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,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,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,EACnF;AACF;;;ADLA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGnF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC/D;AAKO,IAAM,WAAW,iBAAkB;","names":[]}

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

@@ -3,14 +3,14 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 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;
+  /**
+   * 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 accordion = tv({ base: "starwind-accordion" });
@@ -19,223 +19,223 @@ const { type = "single", defaultValue, class: className, ...rest } = Astro.props
 ---
 
 <div class={accordion({ class: className })} data-type={type} data-value={defaultValue} {...rest}>
-	<slot />
+  <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);
+  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

@@ -9,24 +9,24 @@ import { tv } from "tailwind-variants";
 type Props = HTMLAttributes<"div">;
 
 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",
-	],
+  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",
+  ],
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
 <div
-	class={accordionContent({ class: className })}
-	data-state="closed"
-	style="animation: none;"
-	{...rest}
+  class={accordionContent({ class: className })}
+  data-state="closed"
+  style="animation: none;"
+  {...rest}
 >
-	<div class="overflow-hidden px-5 pt-0 pb-4">
-		<slot />
-	</div>
+  <div class="overflow-hidden px-5 pt-0 pb-4">
+    <slot />
+  </div>
 </div>

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

@@ -3,19 +3,19 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
-	/**
-	 * The value of the item
-	 */
-	value: string;
+  /**
+   * The value of the item
+   */
+  value: string;
 };
 
 const accordionItem = tv({
-	base: "starwind-accordion-item border-x border-b first:rounded-t-lg first:border-t last:rounded-b-lg",
+  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={accordionItem({ class: className })} data-value={value} data-state="closed" {...rest}>
-	<slot />
+  <slot />
 </div>

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

@@ -6,24 +6,24 @@ import { tv } from "tailwind-variants";
 type Props = HTMLAttributes<"button">;
 
 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",
-	],
+  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",
+  ],
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
 <button
-	type="button"
-	class={accordionTrigger({ class: className })}
-	aria-expanded="false"
-	{...rest}
+  type="button"
+  class={accordionTrigger({ class: className })}
+  aria-expanded="false"
+  {...rest}
 >
-	<slot />
-	<ChevronDown class="size-5 shrink-0 transition-transform duration-200" />
+  <slot />
+  <ChevronDown class="size-5 shrink-0 transition-transform duration-200" />
 </button>

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

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