@starwind-ui/core 1.12.0 → 1.12.1

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

@@ -1,263 +0,0 @@
----
-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>
-  class DialogHandler {
-    private triggers: HTMLButtonElement[] = [];
-    private dialog: HTMLDialogElement | null = null;
-    private closeButtons: HTMLButtonElement[] = [];
-    private backdrop: HTMLElement | null = null;
-    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;
-
-    constructor(dialogWrapper: HTMLElement, dialogNumber: number) {
-      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 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;
-      this.dialog.showModal();
-      document.body.classList.add("overflow-hidden");
-      this.backdrop.classList.remove("hidden");
-      this.backdrop.dataset.state = "open";
-      this.dialog.dataset.state = "open";
-    }
-
-    private close(): void {
-      if (!this.dialog || !this.backdrop) return;
-      this.dialog.dataset.state = "closed";
-      this.backdrop.dataset.state = "closed";
-
-      // Wait for animation to finish before hiding backdrop
-      setTimeout(() => {
-        this.backdrop?.classList.add("hidden");
-        this.dialog?.close();
-        const stillOpen = document.querySelectorAll("dialog[open]").length;
-        if (stillOpen === 0) {
-          document.body.classList.remove("overflow-hidden");
-        }
-      }, this.animationDuration);
-    }
-  }
-
-  // Store instances in a WeakMap to avoid memory leaks
-  const dialogInstances = new WeakMap<HTMLElement, DialogHandler>();
-
-  // Initialize all dialogs
-  const setupDialogs = () => {
-    document.querySelectorAll(".starwind-dialog").forEach((dialogWrapper, idx) => {
-      const wrapper = dialogWrapper as HTMLElement;
-      if (!dialogInstances.has(wrapper)) {
-        dialogInstances.set(wrapper, new DialogHandler(wrapper, idx));
-      }
-    });
-  };
-
-  setupDialogs();
-  document.addEventListener("astro:after-swap", setupDialogs);
-</script>
-
-<style>
-  .overflow-hidden {
-    overflow: hidden;
-  }
-</style>

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

@@ -1,35 +0,0 @@
----
-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>
-  )
-}

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

@@ -1,67 +0,0 @@
----
-import X from "@tabler/icons/outline/x.svg";
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"dialog"> & {
-  /**
-   * Open and close animation duration in milliseconds
-   */
-  animationDuration?: number;
-};
-
-export const dialogBackdrop = tv({
-  base: [
-    "starwind-dialog-backdrop fixed inset-0 top-0 left-0 z-50 hidden h-screen w-screen bg-black/80",
-    "data-[state=open]:animate-in fade-in",
-    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out",
-  ],
-});
-
-export const dialogContent = tv({
-  base: [
-    "fixed top-16 left-[50%] z-50 translate-x-[-50%] sm:top-[50%] sm:translate-y-[-50%]",
-    "bg-background w-full max-w-md border p-8 shadow-lg sm:rounded-lg",
-    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards",
-    "fade-in zoom-in-95 slide-in-from-bottom-2",
-    "fade-out zoom-out-95 slide-out-to-bottom-2",
-  ],
-});
-
-export const dialogCloseButton = tv({
-  base: [
-    "starwind-dialog-close text-muted-foreground",
-    "absolute top-5.5 right-5.5 rounded-sm [&>svg]:opacity-70 hover:[&>svg]:opacity-100",
-    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
-  ],
-});
-
-const { class: className, animationDuration = 200, ...rest } = Astro.props;
----
-
-<!-- dialog overlay -->
-<slot name="backdrop">
-  <div
-    class={dialogBackdrop()}
-    data-state="closed"
-    data-slot="dialog-backdrop"
-    style={{ animationDuration: `${animationDuration}ms` }}
-  >
-  </div>
-</slot>
-
-<dialog
-  class={dialogContent({ class: className })}
-  data-state="closed"
-  data-slot="dialog-content"
-  {...rest}
-  style={{ animationDuration: `${animationDuration}ms` }}
->
-  <slot />
-  <button type="button" class={dialogCloseButton()} data-dialog-close aria-label="Close dialog">
-    <slot name="icon">
-      <X class="size-5 transition-opacity" />
-    </slot>
-    <span class="sr-only">Close</span>
-  </button>
-</dialog>

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

@@ -1,14 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"p">;
-
-export const dialogDescription = tv({ base: "text-muted-foreground" });
-
-const { class: className, ...rest } = Astro.props;
----
-
-<p class={dialogDescription({ class: className })} data-slot="dialog-description" {...rest}>
-  <slot />
-</p>

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

@@ -1,14 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"div">;
-
-export const dialogFooter = tv({ base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end" });
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class={dialogFooter({ class: className })} data-slot="dialog-footer" {...rest}>
-  <slot />
-</div>

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

@@ -1,14 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = HTMLAttributes<"div">;
-
-export const dialogHeader = tv({ base: "flex flex-col space-y-2 text-center sm:text-left" });
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class={dialogHeader({ class: className })} data-slot="dialog-header" {...rest}>
-  <slot />
-</div>

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

@@ -1,20 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
-
-type Props = Omit<HTMLAttributes<"h2">, "id"> & {
-  /**
-   * The content to be rendered inside the dialog title
-   */
-
-  children: any;
-};
-
-export const dialogTitle = tv({ base: "text-xl leading-none font-semibold tracking-tight" });
-
-const { class: className, ...rest } = Astro.props;
----
-
-<h2 class={dialogTitle({ class: className })} data-slot="dialog-title" {...rest}>
-  <slot />
-</h2>

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

@@ -1,47 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-
-type Props = HTMLAttributes<"button"> & {
-  /**
-   * When true, the component will render its child element with a simple wrapper instead of a button component
-   */
-  asChild?: boolean;
-  /**
-   * Optional ID of the dialog to trigger. If not provided and the trigger is inside a Dialog component,
-   * it will automatically target that dialog. Required when used outside a Dialog component.
-   */
-  for?: string;
-};
-
-const { class: className, asChild = false, for: dialogFor, ...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:list={["starwind-dialog-trigger", className]}
-      data-slot="dialog-trigger"
-      data-as-child
-      data-dialog-for={dialogFor}
-    >
-      <slot />
-    </div>
-  ) : (
-    <button
-      type="button"
-      aria-haspopup="dialog"
-      class:list={["starwind-dialog-trigger", className]}
-      data-slot="dialog-trigger"
-      data-dialog-for={dialogFor}
-      {...rest}
-    >
-      <slot />
-    </button>
-  )
-}

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

@@ -1,45 +0,0 @@
-import Dialog from "./Dialog.astro";
-import DialogClose from "./DialogClose.astro";
-import DialogContent, {
-  dialogBackdrop,
-  dialogCloseButton,
-  dialogContent,
-} from "./DialogContent.astro";
-import DialogDescription, { dialogDescription } from "./DialogDescription.astro";
-import DialogFooter, { dialogFooter } from "./DialogFooter.astro";
-import DialogHeader, { dialogHeader } from "./DialogHeader.astro";
-import DialogTitle, { dialogTitle } from "./DialogTitle.astro";
-import DialogTrigger from "./DialogTrigger.astro";
-
-const DialogVariants = {
-  dialogBackdrop,
-  dialogContent,
-  dialogCloseButton,
-  dialogDescription,
-  dialogFooter,
-  dialogHeader,
-  dialogTitle,
-};
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogVariants,
-};
-
-export default {
-  Root: Dialog,
-  Trigger: DialogTrigger,
-  Content: DialogContent,
-  Header: DialogHeader,
-  Footer: DialogFooter,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Close: DialogClose,
-};