@starwind-ui/core 1.5.1 → 1.6.0

package/dist/index.js

@@ -14,14 +14,15 @@ var registry_default = {
     { 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.1", dependencies: [] },
+    { name: "dialog", type: "component", version: "1.1.2", dependencies: [] },
+    { name: "dropdown", type: "component", version: "1.0.2", 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.2.0", dependencies: [] },
+    { name: "select", type: "component", version: "1.3.0", dependencies: [] },
     { name: "switch", type: "component", version: "1.1.0", dependencies: [] },
-    { name: "tabs", type: "component", version: "1.1.1", dependencies: [] },
+    { name: "table", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "tabs", type: "component", version: "1.2.0", dependencies: [] },
     { name: "textarea", type: "component", version: "1.1.1", dependencies: [] },
     { name: "tooltip", type: "component", version: "1.1.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\": \"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.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,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":[]}
+{"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.2\", \"dependencies\": [] },\n\t\t{ \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.2\", \"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.0\", \"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.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,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":[]}

package/dist/src/components/dialog/Dialog.astro

@@ -90,7 +90,11 @@ const { class: className, ...rest } = Astro.props;
 			// Add click handlers to all close buttons
 			this.closeButtons?.forEach((button) => {
 				button.addEventListener("click", () => {
-					this.close();
+					// Only close if this is the topmost dialog
+					const openDialogs = document.querySelectorAll("dialog[open]");
+					if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+						this.close();
+					}
 				});
 			});
 
@@ -104,7 +108,11 @@ const { class: className, ...rest } = Astro.props;
 					e.clientY <= dialogDimensions.bottom;
 
 				if (!clickedInDialog) {
-					this.close();
+					// Only close if this is the topmost dialog
+					const openDialogs = document.querySelectorAll("dialog[open]");
+					if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+						this.close();
+					}
 				}
 			});
 
@@ -113,7 +121,11 @@ const { class: className, ...rest } = Astro.props;
 				if (e.key === "Escape") {
 					// prevent default dialog closing behavior so we can add closing animation
 					e.preventDefault();
-					this.close();
+					// Only close if this is the topmost dialog
+					const openDialogs = document.querySelectorAll("dialog[open]");
+					if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+						this.close();
+					}
 				}
 			});
 
@@ -130,7 +142,11 @@ const { class: className, ...rest } = Astro.props;
 					 */
 					if (form.method === "dialog") {
 						e.preventDefault();
-						this.close();
+						// Only close if this is the topmost dialog
+						const openDialogs = document.querySelectorAll("dialog[open]");
+						if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+							this.close();
+						}
 					}
 				});
 			});

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

@@ -35,6 +35,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 		private items: HTMLElement[] = [];
 		private currentFocusIndex: number = -1;
 		private isOpen: boolean = false;
+		private isClosing: boolean = false;
 		private animationDuration = 150;
 		private openOnHover: boolean;
 		private closeDelay: number;
@@ -178,6 +179,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 			if (this.openOnHover) {
 				this.trigger.addEventListener("pointerenter", (e) => {
 					if (e.pointerType !== "mouse") return;
+					if (this.isClosing) return;
 					if (!this.isOpen) {
 						this.openDropdown();
 					} else {
@@ -264,6 +266,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 		}
 
 		private openDropdown() {
+			if (this.isClosing) return;
 			if (!this.content || !this.trigger || this.trigger.disabled) return;
 
 			this.isOpen = true;
@@ -283,6 +286,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 		private closeDropdown() {
 			if (!this.content || !this.trigger) return;
 
+			this.isClosing = true;
 			this.isOpen = false;
 			this.content.setAttribute("data-state", "closed");
 
@@ -296,6 +300,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
 			setTimeout(() => {
 				if (!this.content) return;
 				this.content.style.display = "none";
+				this.isClosing = false;
 			}, this.animationDuration - 10);
 
 			this.trigger.setAttribute("aria-expanded", "false");

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

@@ -13,7 +13,7 @@ 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",
+		"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
 	],
 });
 
@@ -28,14 +28,13 @@ if (Astro.slots.has("default")) {
 
 {
 	asChild && hasChildren ? (
-		<div class="starwind-dropdown-trigger" data-as-child>
+		<div class={`starwind-dropdown-trigger ${className}`} data-as-child>
 			<slot />
 		</div>
 	) : (
 		<button
 			class={dropdownTrigger({ class: className })}
 			type="button"
-			role="button"
 			aria-haspopup="true"
 			aria-expanded="false"
 			data-state="closed"

package/dist/src/components/select/Select.astro

@@ -2,15 +2,27 @@
 import type { HTMLAttributes } from "astro/types";
 
 type Props = HTMLAttributes<"div"> & {
+	/**
+	 * The name of the select field for form handling
+	 */
 	name?: string;
+	/**
+	 * The value of the item that should be selected by default
+	 */
+	defaultValue?: string;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	children: any;
 };
 
-const { class: className, name, ...rest } = Astro.props;
+const { class: className, name, defaultValue, ...rest } = Astro.props;
 ---
 
-<div class:list={["starwind-select", "relative", className]} data-name={name} {...rest}>
+<div
+	class:list={["starwind-select", "relative", className]}
+	data-name={name}
+	data-value={defaultValue}
+	{...rest}
+>
 	<slot />
 </div>
 
@@ -50,6 +62,7 @@ const { class: className, name, ...rest } = Astro.props;
 			this.setupAccessibility(selectIdx);
 			this.setupEvents();
 			this.setupSelectField();
+			this.setInitialState();
 		}
 
 		private setupSelectField() {
@@ -398,6 +411,21 @@ const { class: className, name, ...rest } = Astro.props;
 			this.closeSelect();
 		}
 
+		/**
+		 * Sets the initial state based on the default value attribute
+		 */
+		private setInitialState(): void {
+			const defaultValue = this.select.dataset.value;
+			if (defaultValue) {
+				const item = this.content?.querySelector(`[data-value="${defaultValue}"]`);
+
+				if (item && item instanceof HTMLElement) {
+					this.handleSelection(item);
+					this.selectedItem = item;
+				}
+			}
+		}
+
 		/**
 		 * TODO: add position logic to avoid collisions with window boundary
 		 * It will need to switch to top or bottom depending on space available

package/dist/src/components/select/SelectContent.astro

@@ -8,6 +8,11 @@ type Props = HTMLAttributes<"div"> & {
 	 * @default bottom
 	 */
 	side?: "top" | "bottom";
+	/**
+	 * Alignment of the dropdown
+	 * @default start
+	 */
+	align?: "start" | "center" | "end";
 	/**
 	 * Offset distance in pixels
 	 * @default 4
@@ -25,17 +30,20 @@ const selectContent = tv({
 		"starwind-select-content",
 		"bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border shadow-md",
 		"fade-in-0 zoom-in-95 animate-in overflow-hidden will-change-transform",
-		"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out",
-		"left-0",
+		"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
 	],
 	variants: {
 		side: {
-			bottom:
-				"data-[side=bottom]:slide-in-from-top-4 data-[side=bottom]:top-(--select-content-offset)",
-			top: "data-[side=top]:slide-in-from-bottom-4 data-[side=top]:bottom-(--select-content-offset)",
+			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" },
+	defaultVariants: { side: "bottom", align: "start" },
 });
 
 const selectContentInner = tv({
@@ -45,6 +53,7 @@ const selectContentInner = tv({
 const {
 	class: className,
 	side = "bottom",
+	align = "start",
 	sideOffset = 4,
 	animationDuration = 150,
 	...rest
@@ -52,16 +61,18 @@ const {
 ---
 
 <div
-	class={selectContent({ side, class: className })}
+	class={selectContent({ side, align, class: className })}
 	role="listbox"
 	data-side={side}
+	data-align={align}
 	data-state="closed"
 	tabindex="-1"
 	style={{
-		"--select-content-offset": `calc(100% + ${sideOffset}px)`,
 		// hide the content initially. Script will remove this
 		display: "none",
 		animationDuration: `${animationDuration}ms`,
+		marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
+		marginBottom: side === "top" ? `${sideOffset}px` : undefined,
 	}}
 	{...rest}
 >

package/dist/src/components/table/Table.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"table"> & VariantProps<typeof table>;
+
+const table = tv({
+	base: "w-full caption-bottom text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div data-table-container class="relative w-full overflow-x-auto">
+	<table data-table class={table({ class: className })} {...rest} role="table">
+		<slot />
+	</table>
+</div>

package/dist/src/components/table/TableBody.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"tbody"> & VariantProps<typeof tableBody>;
+
+const tableBody = tv({
+	base: "[&_tr:last-child]:border-0",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tbody data-table-body class={tableBody({ class: className })} {...rest}>
+	<slot />
+</tbody>

package/dist/src/components/table/TableCaption.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"caption"> & VariantProps<typeof tableCaption>;
+
+const tableCaption = tv({
+	base: "text-muted-foreground mt-4 text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<caption data-table-caption class={tableCaption({ class: className })} {...rest}>
+	<slot />
+</caption>

package/dist/src/components/table/TableCell.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"td"> & VariantProps<typeof tableCell>;
+
+const tableCell = tv({
+	base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<td data-table-cell class={tableCell({ class: className })} {...rest}>
+	<slot />
+</td>

package/dist/src/components/table/TableFoot.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"tfoot"> & VariantProps<typeof tableFoot>;
+
+const tableFoot = tv({
+	base: "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tfoot data-table-foot class={tableFoot({ class: className })} {...rest}>
+	<slot />
+</tfoot>

package/dist/src/components/table/TableHead.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"th"> & VariantProps<typeof tableHead>;
+
+const tableHead = tv({
+	base: "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<th data-table-head class={tableHead({ class: className })} {...rest} role="columnheader">
+	<slot />
+</th>

package/dist/src/components/table/TableHeader.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"thead"> & VariantProps<typeof tableHeader>;
+
+const tableHeader = tv({
+	base: "[&_tr]:border-b",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<thead data-table-header class={tableHeader({ class: className })} {...rest}>
+	<slot />
+</thead>

package/dist/src/components/table/TableRow.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"tr"> & VariantProps<typeof tableRow>;
+
+const tableRow = tv({
+	base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tr data-table-row class={tableRow({ class: className })} {...rest} role="row">
+	<slot />
+</tr>

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

@@ -0,0 +1,21 @@
+import Table from "./Table.astro";
+import TableBody from "./TableBody.astro";
+import TableCaption from "./TableCaption.astro";
+import TableCell from "./TableCell.astro";
+import TableFoot from "./TableFoot.astro";
+import TableHeader from "./TableHeader.astro";
+import TableHead from "./TableHead.astro";
+import TableRow from "./TableRow.astro";
+
+export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow };
+
+export default {
+	Root: Table,
+	Body: TableBody,
+	Caption: TableCaption,
+	Cell: TableCell,
+	Foot: TableFoot,
+	Head: TableHead,
+	Header: TableHeader,
+	Row: TableRow,
+};

package/dist/src/components/tabs/Tabs.astro

@@ -42,11 +42,13 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 		private storageKey: string;
 		private valueToTriggerMap: Map<string, HTMLButtonElement>;
 		private valueToContentMap: Map<string, HTMLElement>;
+		private parentHandler: TabsHandler | null = null;
 
-		constructor(tabs: HTMLElement, idx: number) {
+		constructor(tabs: HTMLElement, idx: number, parentHandler: TabsHandler | null = null) {
 			this.tabs = tabs;
-			this.triggers = Array.from(tabs.querySelectorAll("[data-tabs-trigger]"));
-			this.contents = Array.from(tabs.querySelectorAll("[data-tabs-content]"));
+			this.parentHandler = parentHandler;
+			this.triggers = Array.from(tabs.querySelectorAll(":scope > [data-tabs-list] > [data-tabs-trigger]"));
+			this.contents = Array.from(tabs.querySelectorAll(":scope > [data-tabs-content]"));
 			this.tabsId = `starwind-tabs${idx}`;
 			this.syncKey = tabs.dataset.syncKey;
 			this.storageKey = this.syncKey
@@ -228,6 +230,20 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 				c.setAttribute("data-state", isActive ? "active" : "inactive");
 				c.hidden = !isActive;
 			});
+
+			// Initialize any nested tabs in the active content
+			if (content.hasAttribute("data-state") && content.getAttribute("data-state") === "active") {
+				const nestedTabs = content.querySelectorAll<HTMLElement>(".starwind-tabs");
+				
+				nestedTabs.forEach((nestedTab, nestedIdx) => {
+					// Skip tabs that already have instances
+					if (!tabInstances.has(nestedTab)) {
+						const uniqueIdx = 1000 + nestedIdx;
+						const handler = new TabsHandler(nestedTab, uniqueIdx, this);
+						tabInstances.set(nestedTab, handler);
+					}
+				});
+			}
 		}
 	}
 
@@ -235,8 +251,11 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 	const tabInstances = new WeakMap<HTMLElement, TabsHandler>();
 
 	const setupTabs = () => {
+		// First handle top-level tabs
 		document.querySelectorAll<HTMLElement>(".starwind-tabs").forEach((tabs, idx) => {
-			if (!tabInstances.has(tabs)) {
+			// Skip tabs that are nested within other tab contents
+			const isNested = !!tabs.closest("[data-tabs-content]");
+			if (!isNested && !tabInstances.has(tabs)) {
 				tabInstances.set(tabs, new TabsHandler(tabs, idx));
 			}
 		});

package/package.json

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