@starwind-ui/core 1.12.0 → 1.12.1

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

@@ -1,269 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-interface Props extends HTMLAttributes<"div"> {
-  defaultValue?: string;
-  syncKey?: string;
-}
-
-export const tabs = tv({ base: "starwind-tabs" });
-
-const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
----
-
-<div
-  class={tabs({ class: className })}
-  data-default-value={defaultValue}
-  data-sync-key={syncKey}
-  data-slot="tabs"
-  {...rest}
->
-  <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);
-</script>

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

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

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

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

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

@@ -1,34 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-interface Props extends Omit<HTMLAttributes<"button">, "type" | "id" | "role"> {
-  value: string;
-}
-
-export const tabsTrigger = tv({
-  base: [
-    "inline-flex grow items-center justify-center gap-2 rounded-sm border border-transparent px-3 py-1.5 font-medium whitespace-nowrap transition-[color,box-shadow]",
-    "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-    "dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:text-muted-foreground",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    "focus-visible:border-outline focus-visible:ring-outline/50 focus-visible:outline-outline focus-visible:ring-3 focus-visible:outline-1",
-    "disabled:pointer-events-none disabled:opacity-50",
-  ],
-});
-
-const { value, class: className, ...rest } = Astro.props;
----
-
-<button
-  class={tabsTrigger({ class: className })}
-  data-slot="tabs-trigger"
-  data-tabs-trigger
-  data-value={value}
-  data-state="inactive"
-  role="tab"
-  aria-selected="false"
-  {...rest}
->
-  <slot />
-</button>

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

@@ -1,20 +0,0 @@
-import Tabs, { tabs } from "./Tabs.astro";
-import TabsContent, { tabsContent } from "./TabsContent.astro";
-import TabsList, { tabsList } from "./TabsList.astro";
-import TabsTrigger, { tabsTrigger } from "./TabsTrigger.astro";
-
-const TabsVariants = {
-  tabs,
-  tabsContent,
-  tabsList,
-  tabsTrigger,
-};
-
-export { Tabs, TabsContent, TabsList, TabsTrigger, TabsVariants };
-
-export default {
-  Root: Tabs,
-  Content: TabsContent,
-  List: TabsList,
-  Trigger: TabsTrigger,
-};

package/dist/src/components/textarea/Textarea.astro

@@ -1,28 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = HTMLAttributes<"textarea"> & VariantProps<typeof textarea>;
-
-export const textarea = tv({
-  base: [
-    "border-input dark:bg-input/30 text-foreground ring-offset-background min-h-10 w-full rounded-md border bg-transparent shadow-xs",
-    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] focus-visible:ring-3",
-    "file:text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "peer placeholder:text-muted-foreground",
-  ],
-  variants: {
-    size: {
-      sm: "min-h-9 px-2 py-1 text-sm",
-      md: "min-h-10 px-3 py-2 text-base",
-      lg: "min-h-12 px-4 py-3 text-lg",
-    },
-  },
-  defaultVariants: { size: "md" },
-});
-
-const { size, class: className, ...rest } = Astro.props;
----
-
-<textarea class={textarea({ size, class: className })} data-slot="textarea" {...rest}></textarea>

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

@@ -1,9 +0,0 @@
-import Textarea, { textarea } from "./Textarea.astro";
-
-const TextareaVariants = {
-  textarea,
-};
-
-export { Textarea, TextareaVariants };
-
-export default Textarea;

package/dist/src/components/toggle/Toggle.astro

@@ -1,172 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-export const toggle = tv({
-  base: [
-    "inline-flex items-center justify-center gap-2 rounded-md font-medium whitespace-nowrap",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    "focus-visible:border-outline focus-visible:ring-outline/50 focus-visible:ring-3",
-    "transition-colors outline-none",
-    "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error",
-  ],
-  variants: {
-    variant: {
-      default: "hover:bg-muted hover:text-muted-foreground bg-transparent",
-      outline:
-        "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
-    },
-    size: {
-      sm: "h-9 min-w-9 px-2 text-sm",
-      md: "h-11 min-w-11 px-2.5 text-base",
-      lg: "h-12 min-w-12 px-3 text-lg",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "md",
-  },
-});
-
-type Props = VariantProps<typeof toggle> &
-  HTMLAttributes<"button"> & {
-    /**
-     * The pressed state of the toggle when initially rendered
-     */
-    defaultPressed?: boolean;
-    /**
-     * Optional sync group name. When set, all toggles with the same sync group will mirror each other's state
-     */
-    syncGroup?: string;
-  };
-
-const { class: className, defaultPressed = false, syncGroup, variant, size, ...rest } = Astro.props;
-
-const dataState = defaultPressed ? "on" : "off";
----
-
-<button
-  type="button"
-  class={toggle({ variant, size, class: `starwind-toggle ${className || ""}` })}
-  data-slot="toggle"
-  data-state={dataState}
-  data-sync-group={syncGroup}
-  aria-pressed={defaultPressed}
-  {...rest}
->
-  <slot />
-</button>
-
-<script>
-  import type { ToggleChangeEvent, ToggleSyncEvent } from "./ToggleTypes";
-
-  class ToggleHandler {
-    private toggle: HTMLButtonElement;
-    private syncGroup?: string;
-
-    constructor(toggle: HTMLButtonElement, idx: number) {
-      this.toggle = toggle;
-      this.syncGroup = toggle.dataset.syncGroup;
-
-      if (!this.toggle.id) {
-        this.toggle.id = `starwind-toggle${idx}`;
-      }
-
-      this.setupEventListeners();
-
-      if (this.syncGroup) {
-        this.setupSyncListener();
-      }
-    }
-
-    private setupEventListeners(): void {
-      this.toggle.addEventListener("click", () => this.handleToggle());
-      this.toggle.addEventListener("keydown", (event) => this.handleKeyDown(event));
-    }
-
-    private setupSyncListener(): void {
-      if (!this.syncGroup) return;
-
-      document.addEventListener(`starwind-toggle-sync:${this.syncGroup}`, ((e: ToggleSyncEvent) => {
-        // Don't sync if this toggle triggered the event
-        if (e.detail.sourceId === this.toggle.id) return;
-
-        const newPressed = e.detail.pressed;
-        this.updateState(newPressed, false); // false = don't dispatch sync event
-      }) as EventListener);
-    }
-
-    private handleToggle(): void {
-      if (this.isDisabled()) return;
-
-      const isPressed = this.toggle.getAttribute("aria-pressed") === "true";
-      const newPressed = !isPressed;
-
-      this.updateState(newPressed, true);
-    }
-
-    private handleKeyDown(event: KeyboardEvent): void {
-      if (this.isDisabled()) return;
-
-      if (event.key === " " || event.key === "Enter") {
-        event.preventDefault();
-        this.handleToggle();
-      }
-    }
-
-    private isDisabled(): boolean {
-      return this.toggle.disabled;
-    }
-
-    private updateState(pressed: boolean, dispatchSync: boolean): void {
-      const newState = pressed ? "on" : "off";
-
-      this.toggle.setAttribute("aria-pressed", pressed.toString());
-      this.toggle.setAttribute("data-state", newState);
-
-      // Dispatch change event (always fired for user to listen to)
-      const changeEvent = new CustomEvent<ToggleChangeEvent["detail"]>("starwind-toggle:change", {
-        detail: {
-          pressed,
-          toggleId: this.toggle.id,
-          syncGroup: this.syncGroup,
-        },
-        bubbles: true,
-        cancelable: true,
-      });
-
-      this.toggle.dispatchEvent(changeEvent);
-
-      // Dispatch sync event if in a sync group and requested
-      if (this.syncGroup && dispatchSync) {
-        const syncEvent = new CustomEvent<ToggleSyncEvent["detail"]>(
-          `starwind-toggle-sync:${this.syncGroup}`,
-          {
-            detail: {
-              pressed,
-              sourceId: this.toggle.id,
-            },
-          },
-        );
-
-        document.dispatchEvent(syncEvent);
-      }
-    }
-  }
-
-  // Store instances in a WeakMap to avoid memory leaks
-  const toggleInstances = new WeakMap<HTMLElement, ToggleHandler>();
-
-  const setupToggles = () => {
-    document.querySelectorAll<HTMLButtonElement>(".starwind-toggle").forEach((toggle, idx) => {
-      if (!toggleInstances.has(toggle)) {
-        toggleInstances.set(toggle, new ToggleHandler(toggle, idx));
-      }
-    });
-  };
-
-  setupToggles();
-  document.addEventListener("astro:after-swap", setupToggles);
-</script>

package/dist/src/components/toggle/ToggleTypes.ts

@@ -1,14 +0,0 @@
-export interface ToggleChangeEvent extends CustomEvent {
-  detail: {
-    pressed: boolean;
-    toggleId: string;
-    syncGroup?: string;
-  };
-}
-
-export interface ToggleSyncEvent extends CustomEvent {
-  detail: {
-    pressed: boolean;
-    sourceId: string;
-  };
-}

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

@@ -1,8 +0,0 @@
-import Toggle, { toggle } from "./Toggle.astro";
-import type { ToggleChangeEvent, ToggleSyncEvent } from "./ToggleTypes";
-
-const ToggleVariants = { toggle };
-
-export { Toggle, type ToggleChangeEvent, type ToggleSyncEvent, ToggleVariants };
-
-export default Toggle;