@starwind-ui/core 1.6.2 → 1.7.1

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

@@ -3,8 +3,8 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"div"> {
-	defaultValue?: string;
-	syncKey?: string;
+  defaultValue?: string;
+  syncKey?: string;
 }
 
 const tabs = tv({ base: "starwind-tabs" });
@@ -13,256 +13,256 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 ---
 
 <div
-	class={tabs({ class: className })}
-	data-default-value={defaultValue}
-	data-sync-key={syncKey}
-	{...rest}
+  class={tabs({ class: className })}
+  data-default-value={defaultValue}
+  data-sync-key={syncKey}
+  {...rest}
 >
-	<slot />
+  <slot />
 </div>
 
 <script>
-	type TabValue = string;
-
-	interface TabsSyncEventDetail {
-		value: TabValue;
-	}
-
-	interface TabsSyncEvent extends CustomEvent<TabsSyncEventDetail> {
-		type: `starwind-tabs-sync:${string}`;
-	}
-
-	class TabsHandler {
-		private tabs: HTMLElement;
-		private triggers: HTMLButtonElement[];
-		private contents: HTMLElement[];
-		private currentTabIndex: number = 0;
-		private tabsId: string;
-		private syncKey?: string;
-		private storageKey: string;
-		private valueToTriggerMap: Map<string, HTMLButtonElement>;
-		private valueToContentMap: Map<string, HTMLElement>;
-		private parentHandler: TabsHandler | null = null;
-
-		constructor(tabs: HTMLElement, idx: number, parentHandler: TabsHandler | null = null) {
-			this.tabs = tabs;
-			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
-				? `starwind-tabs-${this.syncKey}`
-				: `starwind-tabs-${this.tabsId}`;
-
-			// Create maps for faster lookups
-			this.valueToTriggerMap = new Map(
-				this.triggers.map((trigger) => [trigger.getAttribute("data-value") ?? "", trigger]),
-			);
-			this.valueToContentMap = new Map(
-				this.contents.map((content) => [content.getAttribute("data-value") ?? "", content]),
-			);
-
-			this.setupIds();
-			this.initializeTab();
-			this.addEventListeners();
-
-			if (this.syncKey) {
-				this.setupSyncListener();
-			}
-		}
-
-		private initializeTab(): void {
-			const value = this.syncKey
-				? (localStorage.getItem(this.storageKey) ?? this.tabs.dataset.defaultValue)
-				: this.tabs.dataset.defaultValue;
-
-			if (value) {
-				this.showTab(value);
-				this.currentTabIndex = this.triggers.findIndex(
-					(trigger) => trigger.getAttribute("data-value") === value,
-				);
-				this.setTabIndex();
-			}
-		}
-
-		private setupSyncListener(): void {
-			document.addEventListener(`starwind-tabs-sync:${this.syncKey}`, ((e: TabsSyncEvent) => {
-				const value = e.detail.value;
-				const trigger = this.valueToTriggerMap.get(value);
-				const index = trigger ? this.triggers.indexOf(trigger) : -1;
-
-				if (index !== -1) {
-					this.showTab(value);
-					this.currentTabIndex = index;
-					this.setTabIndex();
-				}
-			}) as EventListener);
-		}
-
-		private setupIds(): void {
-			this.triggers.forEach((trigger, idx) => {
-				const triggerId = `${this.tabsId}-t${idx}`;
-				const contentId = `${this.tabsId}-c${idx}`;
-				const value = trigger.getAttribute("data-value");
-
-				trigger.id = triggerId;
-
-				if (value) {
-					trigger.setAttribute("aria-controls", contentId);
-					const content = this.valueToContentMap.get(value);
-					if (content) {
-						content.id = contentId;
-						content.setAttribute("aria-labelledby", triggerId);
-					}
-				}
-			});
-		}
-
-		private setTabIndex(): void {
-			this.triggers.forEach((trigger, index) => {
-				trigger.setAttribute("tabindex", index === this.currentTabIndex ? "0" : "-1");
-			});
-		}
-
-		private dispatchSyncEvent(value: TabValue): void {
-			if (!this.syncKey) return;
-
-			document.dispatchEvent(
-				new CustomEvent(`starwind-tabs-sync:${this.syncKey}`, { detail: { value } }),
-			);
-
-			localStorage.setItem(this.storageKey, value);
-		}
-
-		private handleKeyNavigation = (e: KeyboardEvent): void => {
-			const key = e.key;
-			let newIndex = this.currentTabIndex;
-
-			switch (key) {
-				case "ArrowRight": {
-					for (let i = 1; i < this.triggers.length; i++) {
-						const index = (this.currentTabIndex + i) % this.triggers.length;
-						if (!this.triggers[index].disabled) {
-							newIndex = index;
-							break;
-						}
-					}
-					break;
-				}
-				case "ArrowLeft": {
-					for (let i = 1; i < this.triggers.length; i++) {
-						const index = (this.currentTabIndex - i + this.triggers.length) % this.triggers.length;
-						if (!this.triggers[index].disabled) {
-							newIndex = index;
-							break;
-						}
-					}
-					break;
-				}
-				case "Home": {
-					for (let i = 0; i < this.triggers.length; i++) {
-						if (!this.triggers[i].disabled) {
-							newIndex = i;
-							break;
-						}
-					}
-					break;
-				}
-				case "End": {
-					for (let i = this.triggers.length - 1; i >= 0; i--) {
-						if (!this.triggers[i].disabled) {
-							newIndex = i;
-							break;
-						}
-					}
-					break;
-				}
-				default:
-					return;
-			}
-
-			e.preventDefault();
-			const newTrigger = this.triggers[newIndex];
-			const value = newTrigger.getAttribute("data-value");
-			if (value) {
-				this.showTab(value);
-				this.currentTabIndex = newIndex;
-				this.setTabIndex();
-				newTrigger.focus();
-				this.dispatchSyncEvent(value);
-			}
-		};
-
-		private handleClick = (trigger: HTMLElement, index: number): void => {
-			const value = trigger.getAttribute("data-value");
-			if (value) {
-				this.showTab(value);
-				this.currentTabIndex = index;
-				this.setTabIndex();
-				trigger.focus();
-				this.dispatchSyncEvent(value);
-			}
-		};
-
-		private addEventListeners(): void {
-			this.triggers.forEach((trigger, index) => {
-				trigger.addEventListener("click", () => this.handleClick(trigger, index));
-				trigger.addEventListener("keydown", (e) => this.handleKeyNavigation(e));
-			});
-		}
-
-		private showTab(value: TabValue): void {
-			const trigger = this.valueToTriggerMap.get(value);
-			const content = this.valueToContentMap.get(value);
-
-			if (!trigger || !content) return;
-
-			// Update all triggers and contents
-			this.triggers.forEach((t) => {
-				const isActive = t === trigger;
-				t.setAttribute("data-state", isActive ? "active" : "inactive");
-				t.setAttribute("aria-selected", isActive.toString());
-			});
-
-			this.contents.forEach((c) => {
-				const isActive = c === content;
-				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);
-					}
-				});
-			}
-		}
-	}
-
-	// Store instances in a WeakMap to avoid memory leaks
-	const tabInstances = new WeakMap<HTMLElement, TabsHandler>();
-
-	const setupTabs = () => {
-		// First handle top-level tabs
-		document.querySelectorAll<HTMLElement>(".starwind-tabs").forEach((tabs, idx) => {
-			// 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));
-			}
-		});
-	};
-
-	setupTabs();
-	document.addEventListener("astro:after-swap", setupTabs);
+  type TabValue = string;
+
+  interface TabsSyncEventDetail {
+    value: TabValue;
+  }
+
+  interface TabsSyncEvent extends CustomEvent<TabsSyncEventDetail> {
+    type: `starwind-tabs-sync:${string}`;
+  }
+
+  class TabsHandler {
+    private tabs: HTMLElement;
+    private triggers: HTMLButtonElement[];
+    private contents: HTMLElement[];
+    private currentTabIndex: number = 0;
+    private tabsId: string;
+    private syncKey?: string;
+    private storageKey: string;
+    private valueToTriggerMap: Map<string, HTMLButtonElement>;
+    private valueToContentMap: Map<string, HTMLElement>;
+    private parentHandler: TabsHandler | null = null;
+
+    constructor(tabs: HTMLElement, idx: number, parentHandler: TabsHandler | null = null) {
+      this.tabs = tabs;
+      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
+        ? `starwind-tabs-${this.syncKey}`
+        : `starwind-tabs-${this.tabsId}`;
+
+      // Create maps for faster lookups
+      this.valueToTriggerMap = new Map(
+        this.triggers.map((trigger) => [trigger.getAttribute("data-value") ?? "", trigger]),
+      );
+      this.valueToContentMap = new Map(
+        this.contents.map((content) => [content.getAttribute("data-value") ?? "", content]),
+      );
+
+      this.setupIds();
+      this.initializeTab();
+      this.addEventListeners();
+
+      if (this.syncKey) {
+        this.setupSyncListener();
+      }
+    }
+
+    private initializeTab(): void {
+      const value = this.syncKey
+        ? (localStorage.getItem(this.storageKey) ?? this.tabs.dataset.defaultValue)
+        : this.tabs.dataset.defaultValue;
+
+      if (value) {
+        this.showTab(value);
+        this.currentTabIndex = this.triggers.findIndex(
+          (trigger) => trigger.getAttribute("data-value") === value,
+        );
+        this.setTabIndex();
+      }
+    }
+
+    private setupSyncListener(): void {
+      document.addEventListener(`starwind-tabs-sync:${this.syncKey}`, ((e: TabsSyncEvent) => {
+        const value = e.detail.value;
+        const trigger = this.valueToTriggerMap.get(value);
+        const index = trigger ? this.triggers.indexOf(trigger) : -1;
+
+        if (index !== -1) {
+          this.showTab(value);
+          this.currentTabIndex = index;
+          this.setTabIndex();
+        }
+      }) as EventListener);
+    }
+
+    private setupIds(): void {
+      this.triggers.forEach((trigger, idx) => {
+        const triggerId = `${this.tabsId}-t${idx}`;
+        const contentId = `${this.tabsId}-c${idx}`;
+        const value = trigger.getAttribute("data-value");
+
+        trigger.id = triggerId;
+
+        if (value) {
+          trigger.setAttribute("aria-controls", contentId);
+          const content = this.valueToContentMap.get(value);
+          if (content) {
+            content.id = contentId;
+            content.setAttribute("aria-labelledby", triggerId);
+          }
+        }
+      });
+    }
+
+    private setTabIndex(): void {
+      this.triggers.forEach((trigger, index) => {
+        trigger.setAttribute("tabindex", index === this.currentTabIndex ? "0" : "-1");
+      });
+    }
+
+    private dispatchSyncEvent(value: TabValue): void {
+      if (!this.syncKey) return;
+
+      document.dispatchEvent(
+        new CustomEvent(`starwind-tabs-sync:${this.syncKey}`, { detail: { value } }),
+      );
+
+      localStorage.setItem(this.storageKey, value);
+    }
+
+    private handleKeyNavigation = (e: KeyboardEvent): void => {
+      const key = e.key;
+      let newIndex = this.currentTabIndex;
+
+      switch (key) {
+        case "ArrowRight": {
+          for (let i = 1; i < this.triggers.length; i++) {
+            const index = (this.currentTabIndex + i) % this.triggers.length;
+            if (!this.triggers[index].disabled) {
+              newIndex = index;
+              break;
+            }
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          for (let i = 1; i < this.triggers.length; i++) {
+            const index = (this.currentTabIndex - i + this.triggers.length) % this.triggers.length;
+            if (!this.triggers[index].disabled) {
+              newIndex = index;
+              break;
+            }
+          }
+          break;
+        }
+        case "Home": {
+          for (let i = 0; i < this.triggers.length; i++) {
+            if (!this.triggers[i].disabled) {
+              newIndex = i;
+              break;
+            }
+          }
+          break;
+        }
+        case "End": {
+          for (let i = this.triggers.length - 1; i >= 0; i--) {
+            if (!this.triggers[i].disabled) {
+              newIndex = i;
+              break;
+            }
+          }
+          break;
+        }
+        default:
+          return;
+      }
+
+      e.preventDefault();
+      const newTrigger = this.triggers[newIndex];
+      const value = newTrigger.getAttribute("data-value");
+      if (value) {
+        this.showTab(value);
+        this.currentTabIndex = newIndex;
+        this.setTabIndex();
+        newTrigger.focus();
+        this.dispatchSyncEvent(value);
+      }
+    };
+
+    private handleClick = (trigger: HTMLElement, index: number): void => {
+      const value = trigger.getAttribute("data-value");
+      if (value) {
+        this.showTab(value);
+        this.currentTabIndex = index;
+        this.setTabIndex();
+        trigger.focus();
+        this.dispatchSyncEvent(value);
+      }
+    };
+
+    private addEventListeners(): void {
+      this.triggers.forEach((trigger, index) => {
+        trigger.addEventListener("click", () => this.handleClick(trigger, index));
+        trigger.addEventListener("keydown", (e) => this.handleKeyNavigation(e));
+      });
+    }
+
+    private showTab(value: TabValue): void {
+      const trigger = this.valueToTriggerMap.get(value);
+      const content = this.valueToContentMap.get(value);
+
+      if (!trigger || !content) return;
+
+      // Update all triggers and contents
+      this.triggers.forEach((t) => {
+        const isActive = t === trigger;
+        t.setAttribute("data-state", isActive ? "active" : "inactive");
+        t.setAttribute("aria-selected", isActive.toString());
+      });
+
+      this.contents.forEach((c) => {
+        const isActive = c === content;
+        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);
+          }
+        });
+      }
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const tabInstances = new WeakMap<HTMLElement, TabsHandler>();
+
+  const setupTabs = () => {
+    // First handle top-level tabs
+    document.querySelectorAll<HTMLElement>(".starwind-tabs").forEach((tabs, idx) => {
+      // 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));
+      }
+    });
+  };
+
+  setupTabs();
+  document.addEventListener("astro:after-swap", setupTabs);
 </script>

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 interface Props extends Omit<HTMLAttributes<"div">, "id" | "role" | "tabindex" | "hidden"> {
-	value: string;
+  value: string;
 }
 
 const tabsContent = tv({ base: "mt-2 focus-visible:outline-2 focus-visible:outline-offset-2" });
@@ -12,14 +12,14 @@ const { value, class: className, ...rest } = Astro.props;
 ---
 
 <div
-	class={tabsContent({ class: className })}
-	data-tabs-content
-	data-value={value}
-	data-state="inactive"
-	role="tabpanel"
-	tabindex="0"
-	hidden
-	{...rest}
+  class={tabsContent({ class: className })}
+  data-tabs-content
+  data-value={value}
+  data-state="inactive"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+  {...rest}
 >
-	<slot />
+  <slot />
 </div>

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

@@ -5,12 +5,12 @@ import { tv } from "tailwind-variants";
 type Props = Omit<HTMLAttributes<"div">, "role">;
 
 const tabsList = tv({
-	base: "bg-muted text-muted-foreground inline-flex w-full items-center justify-center rounded-md p-1",
+  base: "bg-muted text-muted-foreground inline-flex w-full items-center justify-center rounded-md p-1",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
 <div class={tabsList({ class: className })} data-tabs-list role="tablist" {...rest}>
-	<slot />
+  <slot />
 </div>

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

@@ -3,29 +3,29 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 interface Props extends Omit<HTMLAttributes<"button">, "type" | "id" | "role"> {
-	value: string;
+  value: string;
 }
 
 const tabsTrigger = tv({
-	base: [
-		"starwind-transition-colors inline-flex grow items-center justify-center rounded-sm px-3 py-1.5 font-medium whitespace-nowrap",
-		"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-		"focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-2",
-		"disabled:pointer-events-none disabled:opacity-50",
-	],
+  base: [
+    "starwind-transition-colors inline-flex grow items-center justify-center rounded-sm px-3 py-1.5 font-medium whitespace-nowrap",
+    "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+    "focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+  ],
 });
 
 const { value, class: className, ...rest } = Astro.props;
 ---
 
 <button
-	class={tabsTrigger({ class: className })}
-	data-tabs-trigger
-	data-value={value}
-	data-state="inactive"
-	role="tab"
-	aria-selected="false"
-	{...rest}
+  class={tabsTrigger({ class: className })}
+  data-tabs-trigger
+  data-value={value}
+  data-state="inactive"
+  role="tab"
+  aria-selected="false"
+  {...rest}
 >
-	<slot />
+  <slot />
 </button>

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

@@ -6,8 +6,8 @@ import TabsTrigger from "./TabsTrigger.astro";
 export { Tabs, TabsContent, TabsList, TabsTrigger };
 
 export default {
-	Root: Tabs,
-	Content: TabsContent,
-	List: TabsList,
-	Trigger: TabsTrigger,
+  Root: Tabs,
+  Content: TabsContent,
+  List: TabsList,
+  Trigger: TabsTrigger,
 };