@starwind-ui/core 1.15.1 → 1.15.2

package/dist/src/components/collapsible/Collapsible.astro

@@ -0,0 +1,161 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Whether the collapsible panel is initially open
+   */
+  defaultOpen?: boolean;
+  /**
+   * Whether the component should ignore user interaction
+   */
+  disabled?: boolean;
+};
+
+export const collapsible = tv({ base: "starwind-collapsible" });
+
+const { defaultOpen = false, disabled = false, class: className, ...rest } = Astro.props;
+
+// Keys owned by the runtime that should not be spread from rest
+const runtimeOwnedKeys = ["id", "data-state", "data-disabled", "class"] as const;
+const sanitizedRest = Object.fromEntries(
+  Object.entries(rest).filter(
+    ([key]) => !runtimeOwnedKeys.includes(key as (typeof runtimeOwnedKeys)[number]),
+  ),
+);
+
+// Compute final values, preferring consumer-provided values
+const finalDataState =
+  (rest as Record<string, unknown>)["data-state"] ?? (defaultOpen ? "open" : "closed");
+const finalDataDisabled =
+  (rest as Record<string, unknown>)["data-disabled"] ?? (disabled ? "" : undefined);
+const finalId = (rest as Record<string, unknown>)["id"] as string | undefined;
+---
+
+<div
+  {...sanitizedRest}
+  id={finalId}
+  class={collapsible({ class: className })}
+  data-state={finalDataState}
+  data-disabled={finalDataDisabled}
+  data-slot="collapsible"
+>
+  <slot />
+</div>
+
+<script>
+  type CollapsibleState = "open" | "closed";
+
+  /**
+   * Handles the functionality of a collapsible component.
+   * Manages open/close state and accessibility attributes.
+   */
+  class CollapsibleHandler {
+    private root: HTMLElement;
+    private trigger: HTMLElement | null;
+    private content: HTMLElement | null;
+    private collapsibleId: string;
+
+    constructor(root: HTMLElement, idx: number) {
+      this.root = root;
+      this.collapsibleId = `starwind-collapsible-${idx}`;
+
+      this.trigger = root.querySelector<HTMLElement>(".starwind-collapsible-trigger");
+      this.content = root.querySelector<HTMLElement>(".starwind-collapsible-content");
+
+      if (this.trigger && this.content) {
+        this.setupAccessibility();
+        this.setupEventListeners();
+        this.setInitialState();
+      }
+    }
+
+    private setupAccessibility(): void {
+      if (!this.trigger || !this.content) return;
+
+      const triggerId = `${this.collapsibleId}-trigger`;
+      const contentId = `${this.collapsibleId}-content`;
+
+      // Use "set if missing" semantics for IDs
+      if (!this.trigger.id) this.trigger.id = triggerId;
+      if (!this.content.id) this.content.id = contentId;
+
+      // Use actual IDs (consumer-provided or generated) for ARIA
+      this.trigger.setAttribute("aria-controls", this.content.id);
+      this.content.setAttribute("aria-labelledby", this.trigger.id);
+      this.content.setAttribute("role", "region");
+
+      this.updateAriaExpanded();
+    }
+
+    private setInitialState(): void {
+      const isOpen = this.root.dataset.state === "open";
+      this.setState(isOpen);
+    }
+
+    private setupEventListeners(): void {
+      if (!this.trigger) return;
+
+      this.trigger.addEventListener("click", () => {
+        if (this.root.dataset.disabled !== undefined) return;
+        this.toggle();
+      });
+    }
+
+    private toggle(): void {
+      const isOpen = this.root.dataset.state === "open";
+      this.setState(!isOpen);
+    }
+
+    private setState(isOpen: boolean): void {
+      const state: CollapsibleState = isOpen ? "open" : "closed";
+
+      this.root.dataset.state = state;
+
+      if (this.trigger) {
+        this.trigger.dataset.state = state;
+        if (isOpen) {
+          this.trigger.dataset.panelOpen = "";
+        } else {
+          delete this.trigger.dataset.panelOpen;
+        }
+      }
+
+      if (this.content) {
+        this.content.dataset.state = state;
+        if (isOpen) {
+          this.content.hidden = false;
+        } else {
+          this.content.hidden = true;
+        }
+      }
+
+      this.updateAriaExpanded();
+    }
+
+    private updateAriaExpanded(): void {
+      if (!this.trigger) return;
+      const isOpen = this.root.dataset.state === "open";
+      this.trigger.setAttribute("aria-expanded", isOpen.toString());
+    }
+  }
+
+  const collapsibleInstances = new WeakMap<HTMLElement, CollapsibleHandler>();
+  let collapsibleCounter = 0;
+
+  const setupCollapsibles = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-collapsible").forEach((collapsible) => {
+      if (!collapsibleInstances.has(collapsible)) {
+        collapsibleInstances.set(
+          collapsible,
+          new CollapsibleHandler(collapsible, collapsibleCounter++),
+        );
+      }
+    });
+  };
+
+  setupCollapsibles();
+  document.addEventListener("astro:after-swap", setupCollapsibles);
+  document.addEventListener("starwind:init", setupCollapsibles);
+</script>

package/dist/src/components/collapsible/CollapsibleContent.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const collapsibleContent = tv({
+  base: "starwind-collapsible-content",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={collapsibleContent({ class: className })}
+  data-state="closed"
+  data-slot="collapsible-content"
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/dist/src/components/collapsible/CollapsibleTrigger.astro

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"button"> & {
+  /**
+   * When true, renders as a wrapper div instead of a button,
+   * allowing a custom trigger element as a child
+   */
+  asChild?: boolean;
+};
+
+export const collapsibleTrigger = tv({
+  base: "starwind-collapsible-trigger",
+});
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+  hasChildren = true;
+}
+---
+
+{
+  asChild && hasChildren ? (
+    <div
+      class={collapsibleTrigger({ class: className })}
+      data-slot="collapsible-trigger"
+      data-as-child
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      type="button"
+      class={collapsibleTrigger({ class: className })}
+      data-slot="collapsible-trigger"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

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

@@ -0,0 +1,13 @@
+import Collapsible, { collapsible } from "./Collapsible.astro";
+import CollapsibleContent, { collapsibleContent } from "./CollapsibleContent.astro";
+import CollapsibleTrigger, { collapsibleTrigger } from "./CollapsibleTrigger.astro";
+
+const CollapsibleVariants = { collapsible, collapsibleContent, collapsibleTrigger };
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleVariants };
+
+export default {
+  Root: Collapsible,
+  Content: CollapsibleContent,
+  Trigger: CollapsibleTrigger,
+};

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

@@ -0,0 +1,389 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["starwind-dialog", className]} data-slot="dialog" {...rest}>
+  <slot />
+</div>
+
+<script>
+  // Store instances in a WeakMap to avoid memory leaks
+  const dialogInstances = new WeakMap<HTMLElement, DialogHandler>();
+  let dialogCounter = 0;
+
+  class DialogHandler {
+    private triggers: HTMLButtonElement[] = [];
+    private dialog: HTMLDialogElement | null = null;
+    private closeButtons: HTMLButtonElement[] = [];
+    private backdrop: HTMLElement | null = null;
+    private dialogWrapper: HTMLElement;
+    private dialogId: string;
+    /**
+     * The duration of the animation in milliseconds. This is used to calculate the
+     * duration of close animation before hiding the dialog and backdrop
+     */
+    private animationDuration: number;
+    private parentDialog: DialogHandler | null = null;
+    private nestedOpenCount: number = 0;
+    private isNested: boolean = false;
+    private _closeTimeout: number | null = null;
+    private _isClosing: boolean = false;
+
+    constructor(dialogWrapper: HTMLElement, dialogNumber: number) {
+      this.dialogWrapper = dialogWrapper;
+      this.dialog = dialogWrapper.querySelector("dialog");
+      this.backdrop = dialogWrapper.querySelector(".starwind-dialog-backdrop");
+      if (!this.dialog || !this.backdrop) {
+        throw new Error("Dialog: dialog or backdrop not found");
+      }
+
+      // if no ID was provided for the wrapper, generate one
+      if (dialogWrapper.id) {
+        this.dialogId = dialogWrapper.id;
+      } else {
+        this.dialogId = `starwind-dialog${dialogNumber}`;
+        dialogWrapper.id = this.dialogId;
+      }
+
+      // animationDuration is set with inline styles through passed prop to DialogContent
+      // if no animationDuration, check data-close-duration
+      const animationDurationString = this.dialog.style.animationDuration;
+      if (animationDurationString.endsWith("ms")) {
+        this.animationDuration = parseFloat(animationDurationString);
+      } else if (animationDurationString.endsWith("s")) {
+        // using something like @playform/compress might optimize to use "s" instead of "ms"
+        this.animationDuration = parseFloat(animationDurationString) * 1000;
+      } else {
+        this.animationDuration = this.dialog.dataset.closeDuration
+          ? parseFloat(this.dialog.dataset.closeDuration)
+          : 200;
+      }
+
+      // Find internal triggers and handle them
+      const internalTriggers = dialogWrapper.querySelectorAll(".starwind-dialog-trigger");
+      internalTriggers.forEach((triggerElement) => {
+        const tempTrigger = triggerElement as HTMLElement;
+        let trigger: HTMLButtonElement;
+
+        if (tempTrigger?.hasAttribute("data-as-child")) {
+          trigger = tempTrigger.firstElementChild as HTMLButtonElement;
+        } else {
+          trigger = tempTrigger as HTMLButtonElement;
+        }
+
+        if (trigger) {
+          this.triggers.push(trigger);
+        }
+      });
+
+      // Find external triggers that target this dialog
+      this.findExternalTriggers();
+
+      // if closeButtons are set with asChild, swap the wrapper with its first child
+      const tempCloseButtons = dialogWrapper.querySelectorAll(
+        ".starwind-dialog-close",
+      ) as NodeListOf<HTMLElement>;
+      tempCloseButtons.forEach((button: HTMLElement) => {
+        if (button.hasAttribute("data-as-child")) {
+          const childElement = button.firstElementChild;
+          if (childElement) {
+            childElement.classList.add("starwind-dialog-close");
+            button.parentNode?.replaceChild(childElement, button);
+          }
+        }
+        return button;
+      });
+
+      // Convert NodeList to Array for consistency with triggers
+      this.closeButtons = Array.from(
+        dialogWrapper.querySelectorAll(".starwind-dialog-close"),
+      ) as HTMLButtonElement[];
+
+      // if essential elements are not there, exit
+      if (!this.dialog || !this.backdrop) return;
+
+      this.setupAccessibility(dialogNumber);
+      this.setupEvents();
+    }
+
+    private setupAccessibility(dialogNumber: number): void {
+      // get the first heading element in the dialog
+      const firstHeading = this.dialog?.querySelector("h1, h2, h3, h4, h5, h6");
+      if (firstHeading) {
+        // create a unique ID for the heading
+        firstHeading.id = `starwind-dialog${dialogNumber}-heading`;
+        // set the aria-labelledby attribute to the first heading element
+        this.dialog?.setAttribute("aria-labelledby", firstHeading.id);
+      }
+    }
+
+    /**
+     * Find all external triggers that target this dialog
+     */
+    private findExternalTriggers(): void {
+      const externalTriggers = document.querySelectorAll(
+        `.starwind-dialog-trigger[data-dialog-for="${this.dialogId}"]`,
+      );
+
+      externalTriggers.forEach((triggerElement) => {
+        // Skip if this is an internal trigger we already processed
+        const dialogWrapper = triggerElement.closest(".starwind-dialog");
+        if (dialogWrapper && dialogWrapper.id === this.dialogId) {
+          return;
+        }
+
+        let trigger: HTMLButtonElement;
+        if (triggerElement.hasAttribute("data-as-child")) {
+          trigger = triggerElement.firstElementChild as HTMLButtonElement;
+        } else {
+          trigger = triggerElement as HTMLButtonElement;
+        }
+
+        if (trigger && !this.triggers.includes(trigger)) {
+          this.triggers.push(trigger);
+        }
+      });
+    }
+
+    private setupEvents(): void {
+      if (!this.dialog) return;
+
+      // Add programmatic open/close via custom events on the wrapper
+      this.dialogWrapper.addEventListener("dialog:open", () => this.open());
+      this.dialogWrapper.addEventListener("dialog:close", () => this.close());
+      this.dialogWrapper.addEventListener("dialog:toggle", () => {
+        if (this.dialog?.open) {
+          this.close();
+        } else {
+          this.open();
+        }
+      });
+
+      // Add click listeners to all triggers
+      this.triggers.forEach((trigger) => {
+        trigger.addEventListener("click", () => {
+          this.open();
+        });
+      });
+
+      // Add click handlers to all close buttons
+      this.closeButtons?.forEach((button) => {
+        button.addEventListener("click", () => {
+          // 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();
+          }
+        });
+      });
+
+      // Close on click outside
+      this.dialog.addEventListener("click", (e) => {
+        if (!this.dialog) return;
+        const dialogDimensions = this.dialog.getBoundingClientRect();
+        const clickedInDialog =
+          e.clientX >= dialogDimensions.left &&
+          e.clientX <= dialogDimensions.right &&
+          e.clientY >= dialogDimensions.top &&
+          e.clientY <= dialogDimensions.bottom;
+
+        if (!clickedInDialog) {
+          // 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();
+          }
+        }
+      });
+
+      // Handle escape key
+      this.dialog.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          // prevent default dialog closing behavior so we can add closing animation
+          e.preventDefault();
+          // 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();
+          }
+        }
+      });
+
+      // Intercept form submissions to handle dialog close
+      const forms = this.dialog.querySelectorAll("form");
+      forms.forEach((form) => {
+        form.addEventListener("submit", (e) => {
+          /**
+           * Default form.method = "dialog" submissions cause the dialog to close
+           * Default form.method = "post" submissions do not close the dialog
+           * Here we intercept the form submission and manage the dialog closing if method = "dialog"
+           * so we can add closing animation
+           * Normal form event listeners for "submit" will still get the form data
+           */
+          if (form.method === "dialog") {
+            e.preventDefault();
+            // 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();
+            }
+          }
+        });
+      });
+    }
+
+    private open(): void {
+      if (!this.dialog || !this.backdrop) return;
+      // Return early if already open
+      if (this.dialog.open && !this._isClosing) return;
+
+      // Cancel any pending close
+      if (this._closeTimeout !== null) {
+        clearTimeout(this._closeTimeout);
+        this._closeTimeout = null;
+      }
+      this._isClosing = false;
+
+      // Reset nested count when opening (in case it wasn't properly reset)
+      this.nestedOpenCount = 0;
+      this.updateNestedState();
+
+      this.dialog.showModal();
+      document.body.classList.add("overflow-hidden");
+
+      // For nested dialogs, hide the backdrop and notify parent
+      if (this.isNested && this.parentDialog) {
+        this.backdrop.classList.add("hidden");
+        this.parentDialog.onNestedDialogOpen();
+      } else {
+        this.backdrop.classList.remove("hidden");
+        this.backdrop.dataset.state = "open";
+      }
+
+      this.dialog.dataset.state = "open";
+    }
+
+    private close(): void {
+      if (!this.dialog || !this.backdrop) return;
+      // Return early if already closed or closing
+      if (!this.dialog.open || this._isClosing) return;
+
+      // Clear any existing close timeout
+      if (this._closeTimeout !== null) {
+        clearTimeout(this._closeTimeout);
+        this._closeTimeout = null;
+      }
+
+      this._isClosing = true;
+      this.dialog.dataset.state = "closed";
+
+      // Notify parent dialog that nested dialog is closing
+      if (this.isNested && this.parentDialog) {
+        this.parentDialog.onNestedDialogClose();
+      } else {
+        this.backdrop.dataset.state = "closed";
+      }
+
+      // Wait for animation to finish before hiding backdrop
+      this._closeTimeout = window.setTimeout(() => {
+        if (!this.isNested) {
+          this.backdrop?.classList.add("hidden");
+        }
+        this.dialog?.close();
+        this._isClosing = false;
+        this._closeTimeout = null;
+        const stillOpen = document.querySelectorAll("dialog[open]").length;
+        if (stillOpen === 0) {
+          document.body.classList.remove("overflow-hidden");
+        }
+      }, this.animationDuration);
+    }
+
+    /**
+     * Called by child dialogs when they open
+     */
+    public onNestedDialogOpen(): void {
+      this.nestedOpenCount++;
+      this.updateNestedState();
+      // Propagate up the chain to grandparent dialogs
+      if (this.parentDialog) {
+        this.parentDialog.onNestedDialogOpen();
+      }
+    }
+
+    /**
+     * Called by child dialogs when they close
+     */
+    public onNestedDialogClose(): void {
+      this.nestedOpenCount = Math.max(0, this.nestedOpenCount - 1);
+      this.updateNestedState();
+      // Propagate up the chain to grandparent dialogs
+      if (this.parentDialog) {
+        this.parentDialog.onNestedDialogClose();
+      }
+    }
+
+    /**
+     * Updates the nested dialog state attributes
+     */
+    private updateNestedState(): void {
+      if (!this.dialog) return;
+
+      if (this.nestedOpenCount > 0) {
+        this.dialog.setAttribute("data-nested-dialog-open", "");
+        this.dialog.style.setProperty("--nested-dialogs", String(this.nestedOpenCount));
+      } else {
+        this.dialog.removeAttribute("data-nested-dialog-open");
+        this.dialog.style.removeProperty("--nested-dialogs");
+      }
+    }
+
+    /**
+     * Links this dialog to its parent dialog (called after all dialogs are initialized)
+     */
+    public linkParentDialog(): void {
+      const parentDialogWrapper = this.dialogWrapper.parentElement?.closest(".starwind-dialog");
+      if (parentDialogWrapper) {
+        this.isNested = true;
+        const parentInstance = dialogInstances.get(parentDialogWrapper as HTMLElement);
+        if (parentInstance) {
+          this.parentDialog = parentInstance;
+        }
+      }
+    }
+  }
+
+  // Initialize all dialogs
+  const setupDialogs = () => {
+    // First pass: create all dialog instances
+    document.querySelectorAll(".starwind-dialog").forEach((dialogWrapper) => {
+      const wrapper = dialogWrapper as HTMLElement;
+      if (!dialogInstances.has(wrapper)) {
+        dialogInstances.set(wrapper, new DialogHandler(wrapper, dialogCounter++));
+      }
+    });
+
+    // Second pass: link parent dialogs (now that all instances exist)
+    document.querySelectorAll(".starwind-dialog").forEach((dialogWrapper) => {
+      const wrapper = dialogWrapper as HTMLElement;
+      const instance = dialogInstances.get(wrapper);
+      if (instance) {
+        instance.linkParentDialog();
+      }
+    });
+  };
+
+  setupDialogs();
+  document.addEventListener("astro:after-swap", setupDialogs);
+  document.addEventListener("starwind:init", setupDialogs);
+</script>
+
+<style>
+  .overflow-hidden {
+    overflow: hidden;
+  }
+</style>

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

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"button"> & {
+  /**
+   * When true, the component will render its child element instead of a button
+   */
+  asChild?: boolean;
+};
+
+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-dialog-close" data-slot="dialog-close" data-as-child>
+      <slot />
+    </div>
+  ) : (
+    <button
+      type="button"
+      class:list={["starwind-dialog-close", className]}
+      data-slot="dialog-close"
+      {...rest}
+    >
+      <slot>Demo close button</slot>
+    </button>
+  )
+}