@starwind-ui/core 1.4.1 → 1.5.0

package/dist/index.js

@@ -10,10 +10,12 @@ var registry_default = {
     { name: "alert", type: "component", version: "1.1.1", dependencies: [] },
     { name: "avatar", type: "component", version: "1.1.1", dependencies: [] },
     { name: "badge", type: "component", version: "1.1.1", dependencies: [] },
+    { name: "breadcrumb", type: "component", version: "1.0.0", dependencies: [] },
     { name: "button", type: "component", version: "2.0.1", dependencies: [] },
     { name: "card", type: "component", version: "1.1.0", dependencies: [] },
     { name: "checkbox", type: "component", version: "1.2.0", dependencies: [] },
     { name: "dialog", type: "component", version: "1.1.1", dependencies: [] },
+    { name: "dropdown", 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: [] },

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\": \"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.1\", \"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.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.1\", \"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":[]}
+{"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.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.0\", \"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.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.1\", \"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,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;;;ADDA,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/breadcrumb/Breadcrumb.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"nav">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<nav aria-label="breadcrumb" class={className} {...rest}>
+	<slot />
+</nav>

package/dist/src/components/breadcrumb/BreadcrumbEllipsis.astro

@@ -0,0 +1,21 @@
+---
+import Dots from "@tabler/icons/outline/dots.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"span">;
+
+const breadcrumbEllipsis = tv({ base: "flex size-6 items-center justify-center [&>svg]:size-4" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span
+	role="presentation"
+	aria-hidden="true"
+	class={breadcrumbEllipsis({ class: className })}
+	{...rest}
+>
+	<Dots />
+	<span class="sr-only">More</span>
+</span>

package/dist/src/components/breadcrumb/BreadcrumbItem.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"li">;
+
+const breadcrumbItem = tv({ base: "inline-flex items-center gap-1.5" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li class={breadcrumbItem({ class: className })} {...rest}>
+	<slot />
+</li>

package/dist/src/components/breadcrumb/BreadcrumbLink.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"a"> & {
+  asChild?: boolean;
+};
+
+const breadcrumbLink = tv({ base: "hover:text-foreground transition-colors" });
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+---
+
+{asChild ? (
+  <slot />
+) : (
+  <a class={breadcrumbLink({ class: className })} {...rest}>
+    <slot />
+  </a>
+)}

package/dist/src/components/breadcrumb/BreadcrumbList.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"ol">;
+
+const breadcrumbList = tv({
+	base: "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words sm:gap-2",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ol class={breadcrumbList({ class: className })} {...rest}>
+	<slot />
+</ol>

package/dist/src/components/breadcrumb/BreadcrumbPage.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"span">;
+
+const breadcrumbPage = tv({ base: "text-foreground font-normal" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span 
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  class={breadcrumbPage({ class: className })} 
+  {...rest}
+>
+  <slot />
+</span>

package/dist/src/components/breadcrumb/BreadcrumbSeparator.astro

@@ -0,0 +1,22 @@
+---
+import ChevronRight from "@tabler/icons/outline/chevron-right.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"li">;
+
+const breadcrumbSeparator = tv({ base: "[&>svg]:size-4" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li
+	role="presentation"
+	aria-hidden="true"
+	class={breadcrumbSeparator({ class: className })}
+	{...rest}
+>
+	<slot>
+		<ChevronRight />
+	</slot>
+</li>

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

@@ -0,0 +1,27 @@
+import Breadcrumb from "./Breadcrumb.astro";
+import BreadcrumbList from "./BreadcrumbList.astro";
+import BreadcrumbEllipsis from "./BreadcrumbEllipsis.astro";
+import BreadcrumbItem from "./BreadcrumbItem.astro";
+import BreadcrumbLink from "./BreadcrumbLink.astro";
+import BreadcrumbSeparator from "./BreadcrumbSeparator.astro";
+import BreadcrumbPage from "./BreadcrumbPage.astro";
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbEllipsis,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbSeparator,
+	BreadcrumbPage,
+};
+
+export default {
+	Root: Breadcrumb,
+	List: BreadcrumbList,
+	Ellipsis: BreadcrumbEllipsis,
+	Item: BreadcrumbItem,
+	Link: BreadcrumbLink,
+	Separator: BreadcrumbSeparator,
+	Page: BreadcrumbPage,
+};

package/dist/src/components/dropdown/Dropdown.astro

@@ -0,0 +1,343 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div"> & {
+	name?: string;
+	/**
+	 * When true, the dropdown will open on hover in addition to click
+	 */
+	openOnHover?: boolean;
+	/**
+	 * Time in milliseconds to wait before closing when hover open is enabled
+	 * @default 200
+	 */
+	closeDelay?: number;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	children: any;
+};
+
+const { class: className, name, openOnHover = false, closeDelay = 200, ...rest } = Astro.props;
+---
+
+<div
+	class:list={["starwind-dropdown", "relative", className]}
+	data-name={name}
+	data-open-on-hover={openOnHover ? "true" : undefined}
+	data-close-delay={closeDelay}
+	{...rest}
+>
+	<slot />
+</div>
+
+<script>
+	class DropdownHandler {
+		private dropdown: HTMLElement;
+		private trigger: HTMLButtonElement | null;
+		private content: HTMLElement | null;
+		private items: HTMLElement[] = [];
+		private currentFocusIndex: number = -1;
+		private isOpen: boolean = false;
+		private animationDuration = 150;
+		private openOnHover: boolean;
+		private closeDelay: number;
+		private closeTimerRef: number | null = null;
+
+		constructor(dropdown: HTMLElement, dropdownIdx: number) {
+			this.dropdown = dropdown;
+			this.openOnHover = dropdown.getAttribute("data-open-on-hover") === "true";
+			this.closeDelay = parseInt(dropdown.getAttribute("data-close-delay") || "200");
+
+			// Get the temporary trigger element
+			const tempTrigger = dropdown.querySelector(".starwind-dropdown-trigger") as HTMLElement;
+
+			// if trigger is set with asChild, use the first child element for trigger button
+			if (tempTrigger?.hasAttribute("data-as-child")) {
+				this.trigger = tempTrigger.firstElementChild as HTMLButtonElement;
+			} else {
+				this.trigger = tempTrigger as HTMLButtonElement;
+			}
+
+			this.content = dropdown.querySelector(".starwind-dropdown-content");
+
+			if (!this.trigger || !this.content) return;
+
+			// Get animation duration from inline styles if available
+			const animationDurationString = this.content.style.animationDuration;
+			if (animationDurationString.endsWith("ms")) {
+				this.animationDuration = parseFloat(animationDurationString);
+			} else if (animationDurationString.endsWith("s")) {
+				this.animationDuration = parseFloat(animationDurationString) * 1000;
+			}
+
+			this.init(dropdownIdx);
+		}
+
+		private init(dropdownIdx: number) {
+			this.setupAccessibility(dropdownIdx);
+			this.setupEvents();
+		}
+
+		private setupAccessibility(dropdownIdx: number) {
+			if (!this.trigger || !this.content) return;
+
+			// Generate unique IDs for accessibility
+			this.trigger.id = `starwind-dropdown${dropdownIdx}-trigger`;
+			this.content.id = `starwind-dropdown${dropdownIdx}-content`;
+
+			// Set up additional ARIA attributes
+			this.trigger.setAttribute("aria-controls", this.content.id);
+			this.content.setAttribute("aria-labelledby", this.trigger.id);
+		}
+
+		private setupEvents() {
+			if (!this.trigger || !this.content) return;
+
+			// Handle trigger click
+			this.trigger.addEventListener("click", (e) => {
+				e.preventDefault();
+				this.toggleDropdown();
+			});
+
+			// Handle keyboard navigation
+			this.trigger.addEventListener("keydown", (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					this.toggleDropdown();
+				} else if (e.key === "Escape" && this.isOpen) {
+					e.preventDefault();
+					this.closeDropdown();
+				} else if (this.isOpen && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+					e.preventDefault();
+					this.updateDropdownItems();
+					if (e.key === "ArrowDown") {
+						this.focusItem(0); // Focus first item when opening with arrow down
+					} else {
+						this.focusItem(this.items.length - 1); // Focus last item when opening with arrow up
+					}
+				}
+			});
+
+			// Close dropdown when clicking outside
+			document.addEventListener("pointerdown", (e) => {
+				if (this.isOpen && !this.dropdown.contains(e.target as Node)) {
+					this.closeDropdown();
+				}
+			});
+
+			// Handle keyboard navigation and item selection within dropdown
+			this.content.addEventListener("keydown", (e) => {
+				if (e.key === "Escape") {
+					e.preventDefault();
+					this.closeDropdown();
+					this.trigger?.focus();
+				} else if (this.isOpen) {
+					this.handleMenuKeydown(e);
+				}
+			});
+
+			// Handle item selection
+			this.content.addEventListener("click", (e) => {
+				const target = e.target as HTMLElement;
+				const item = target.closest('[role="menuitem"]');
+				if (item && !(item as HTMLElement).hasAttribute("data-disabled")) {
+					// Close the dropdown after item selection
+					this.closeDropdown();
+				}
+			});
+
+			// Handle hover on dropdown items
+			this.content.addEventListener("mouseover", (e) => {
+				const target = e.target as HTMLElement;
+				const menuItem = target.closest('[role="menuitem"]');
+				if (menuItem && menuItem instanceof HTMLElement && this.isOpen === true) {
+					// Update items list before focusing to ensure the index is correct
+					this.updateDropdownItems();
+
+					// Focus the item when hovering
+					menuItem.focus();
+
+					// Update the current focus index
+					this.currentFocusIndex = this.items.indexOf(menuItem);
+				}
+			});
+
+			if (this.openOnHover) {
+				// Use mouseenter instead of mouseover to avoid flickering when moving between child elements
+				this.trigger.addEventListener("mouseenter", () => {
+					if (!this.isOpen) {
+						this.openDropdown();
+					} else {
+						// If the dropdown is already open, make sure to clear any close timer
+						this.clearCloseTimer();
+					}
+				});
+
+				// Use mouseleave instead of mouseout to only trigger when leaving the entire dropdown
+				this.dropdown.addEventListener("mouseleave", () => {
+					if (this.isOpen) {
+						this.closeDropdownDelayed();
+					}
+				});
+
+				// When content is available, also add mouseenter to it to cancel close timer
+				if (this.content) {
+					this.content.addEventListener("mouseenter", () => {
+						// If the user moves the mouse to the content, cancel the close timer
+						this.clearCloseTimer();
+					});
+				}
+			}
+		}
+
+		private handleMenuKeydown(e: KeyboardEvent) {
+			// Make sure we've got an updated list of menu items
+			this.updateDropdownItems();
+
+			// Skip if no items
+			if (this.items.length === 0) return;
+
+			const currentIdx = this.currentFocusIndex;
+
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					this.focusItem(currentIdx === -1 ? 0 : currentIdx + 1);
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					this.focusItem(currentIdx === -1 ? this.items.length - 1 : currentIdx - 1);
+					break;
+				case "Home":
+					e.preventDefault();
+					this.focusItem(0);
+					break;
+				case "End":
+					e.preventDefault();
+					this.focusItem(this.items.length - 1);
+					break;
+				case "Enter":
+				case " ":
+					if (currentIdx !== -1) {
+						e.preventDefault();
+						this.items[currentIdx].click();
+					}
+					break;
+			}
+		}
+
+		private updateDropdownItems() {
+			if (!this.content) return;
+			// Get all interactive menuitem elements
+			this.items = Array.from(
+				this.content.querySelectorAll('[role="menuitem"]:not([data-disabled="true"])'),
+			) as HTMLElement[];
+		}
+
+		private focusItem(idx: number) {
+			// Ensure the index wraps around properly
+			const targetIdx = (idx + this.items.length) % this.items.length;
+
+			if (this.items[targetIdx]) {
+				this.items[targetIdx].focus();
+				this.currentFocusIndex = targetIdx;
+			}
+		}
+
+		private toggleDropdown() {
+			if (this.isOpen) {
+				this.closeDropdown();
+			} else {
+				this.openDropdown();
+			}
+		}
+
+		private openDropdown() {
+			if (!this.content || !this.trigger || this.trigger.disabled) return;
+
+			this.isOpen = true;
+			this.content.setAttribute("data-state", "open");
+			this.trigger.setAttribute("aria-expanded", "true");
+			this.content.style.removeProperty("display");
+
+			// Update the list of dropdown items
+			this.updateDropdownItems();
+
+			// Reset focus index when opening
+			this.currentFocusIndex = -1;
+
+			this.positionContent();
+		}
+
+		private closeDropdown() {
+			if (!this.content || !this.trigger) return;
+
+			this.isOpen = false;
+			this.content.setAttribute("data-state", "closed");
+
+			// Set focus back on trigger
+			requestAnimationFrame(() => {
+				if (!this.trigger) return;
+				this.trigger.focus();
+			});
+
+			// Give the content time to animate before hiding
+			setTimeout(() => {
+				if (!this.content) return;
+				this.content.style.display = "none";
+			}, this.animationDuration - 10);
+
+			this.trigger.setAttribute("aria-expanded", "false");
+
+			// Reset focus index when closing
+			this.currentFocusIndex = -1;
+		}
+
+		private closeDropdownDelayed() {
+			if (!this.content || !this.trigger) return;
+
+			// Clear any existing close timer
+			this.clearCloseTimer();
+
+			// Set a new timer to close the dropdown after the delay
+			this.closeTimerRef = window.setTimeout(() => {
+				if (this.isOpen) {
+					this.closeDropdown();
+				}
+				this.closeTimerRef = null;
+			}, this.closeDelay);
+		}
+
+		private clearCloseTimer() {
+			if (this.closeTimerRef !== null) {
+				window.clearTimeout(this.closeTimerRef);
+				this.closeTimerRef = null;
+			}
+		}
+
+		private positionContent() {
+			if (!this.content || !this.trigger) return;
+
+			// Set content width to match trigger width
+			this.content.style.width = "var(--starwind-dropdown-trigger-width)";
+			this.content.style.setProperty(
+				"--starwind-dropdown-trigger-width",
+				`${this.trigger.offsetWidth}px`,
+			);
+		}
+	}
+
+	// Store instances in a WeakMap to avoid memory leaks
+	const dropdownInstances = new WeakMap<HTMLElement, DropdownHandler>();
+
+	// Initialize dropdowns
+	const initDropdowns = () => {
+		document.querySelectorAll(".starwind-dropdown").forEach((dropdown, idx) => {
+			if (dropdown instanceof HTMLElement && !dropdownInstances.has(dropdown)) {
+				dropdownInstances.set(dropdown, new DropdownHandler(dropdown, idx));
+			}
+		});
+	};
+
+	initDropdowns();
+	document.addEventListener("astro:after-swap", initDropdowns);
+</script>

package/dist/src/components/dropdown/DropdownContent.astro

@@ -0,0 +1,80 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+	/**
+	 * Side of the dropdown
+	 * @default bottom
+	 */
+	side?: "top" | "bottom";
+	/**
+	 * Alignment of the dropdown
+	 * @default start
+	 */
+	align?: "start" | "center" | "end";
+	/**
+	 * Offset distance in pixels
+	 * @default 4
+	 */
+	sideOffset?: number;
+	/**
+	 * Open and close animation duration in milliseconds
+	 * @default 150
+	 */
+	animationDuration?: number;
+};
+
+const dropdownContent = tv({
+	base: [
+		"starwind-dropdown-content",
+		"bg-popover text-popover-foreground z-50 min-w-[9rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+		"animate-in fade-in-0 zoom-in-95",
+		"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+		"absolute will-change-transform",
+	],
+	variants: {
+		side: {
+			bottom: "slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2 top-full",
+			top: "slide-in-from-bottom-2 data-[state=closed]:slide-out-to-bottom-2 bottom-full",
+		},
+		align: {
+			start: "slide-in-from-left-1 data-[state=closed]:slide-out-to-left-1 left-0",
+			center: "left-1/2 -translate-x-1/2",
+			end: "slide-in-from-right-1 data-[state=closed]:slide-out-to-right-1 right-0",
+		},
+	},
+	defaultVariants: {
+		side: "bottom",
+		align: "start",
+	},
+});
+
+const {
+	class: className,
+	side = "bottom",
+	align = "start",
+	sideOffset = 4,
+	animationDuration = 150,
+	...rest
+} = Astro.props;
+---
+
+<div
+	class={dropdownContent({ side, align, class: className })}
+	role="menu"
+	data-side={side}
+	data-align={align}
+	data-state="closed"
+	tabindex="-1"
+	aria-orientation="vertical"
+	style={{
+		display: "none",
+		animationDuration: `${animationDuration}ms`,
+		marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
+		marginBottom: side === "top" ? `${sideOffset}px` : undefined,
+	}}
+	{...rest}
+>
+	<slot />
+</div>

package/dist/src/components/dropdown/DropdownItem.astro

@@ -0,0 +1,47 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+	/**
+	 * Whether the item is inset (has left padding)
+	 */
+	inset?: boolean;
+	/**
+	 * Whether the item is disabled
+	 */
+	disabled?: boolean;
+};
+
+const dropdownItem = tv({
+	base: [
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 transition-colors outline-none select-none",
+		"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"[&>svg]:size-4 [&>svg]:shrink-0",
+	],
+	variants: {
+		inset: {
+			true: "pl-8",
+		},
+		disabled: {
+			true: "pointer-events-none opacity-50",
+		},
+	},
+	defaultVariants: {
+		inset: false,
+		disabled: false,
+	},
+});
+
+const { class: className, inset = false, disabled = false, as: Tag = "div", ...rest } = Astro.props;
+---
+
+<Tag
+	class={dropdownItem({ inset, disabled, class: className })}
+	role="menuitem"
+	tabindex={disabled ? "-1" : "0"}
+	data-disabled={disabled ? "true" : undefined}
+	{...rest}
+>
+	<slot />
+</Tag>

package/dist/src/components/dropdown/DropdownLabel.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+	/**
+	 * Whether the label is inset (has left padding)
+	 */
+	inset?: boolean;
+};
+
+const dropdownLabel = tv({
+	base: ["px-2 py-1.5 font-semibold"],
+	variants: {
+		inset: {
+			true: "pl-8",
+		},
+	},
+	defaultVariants: {
+		inset: false,
+	},
+});
+
+const { class: className, inset = false, ...rest } = Astro.props;
+---
+
+<div class={dropdownLabel({ inset, class: className })} {...rest}>
+	<slot />
+</div>

package/dist/src/components/dropdown/DropdownSeparator.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+const dropdownSeparator = tv({
+	base: "bg-muted -mx-1 my-1 h-px",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+	class={dropdownSeparator({ class: className })}
+	role="separator"
+	aria-orientation="horizontal"
+	{...rest}
+>
+</div>

package/dist/src/components/dropdown/DropdownTrigger.astro

@@ -0,0 +1,47 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
+	/**
+	 * When true, the component will render its child element with a simple wrapper instead of a button component
+	 */
+	asChild?: boolean;
+};
+
+const dropdownTrigger = tv({
+	base: [
+		"starwind-dropdown-trigger",
+		"inline-flex items-center justify-center",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+	],
+});
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+
+// Get the first child element if asChild is true
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+	hasChildren = true;
+}
+---
+
+{
+	asChild && hasChildren ? (
+		<div class="starwind-dropdown-trigger" data-as-child>
+			<slot />
+		</div>
+	) : (
+		<button
+			class={dropdownTrigger({ class: className })}
+			type="button"
+			role="button"
+			aria-haspopup="true"
+			aria-expanded="false"
+			data-state="closed"
+			{...rest}
+		>
+			<slot />
+		</button>
+	)
+}

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

@@ -0,0 +1,24 @@
+import Dropdown from "./Dropdown.astro";
+import DropdownTrigger from "./DropdownTrigger.astro";
+import DropdownContent from "./DropdownContent.astro";
+import DropdownItem from "./DropdownItem.astro";
+import DropdownLabel from "./DropdownLabel.astro";
+import DropdownSeparator from "./DropdownSeparator.astro";
+
+export {
+	Dropdown,
+	DropdownTrigger,
+	DropdownContent,
+	DropdownItem,
+	DropdownLabel,
+	DropdownSeparator,
+};
+
+export default {
+	Root: Dropdown,
+	Trigger: DropdownTrigger,
+	Content: DropdownContent,
+	Item: DropdownItem,
+	Label: DropdownLabel,
+	Separator: DropdownSeparator,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Starwind UI core components and registry",
   "license": "MIT",
   "author": {