@rimelight/ui 0.0.5 → 0.0.6

package/src/components/dialog/Dialog.astro

@@ -1,389 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-
-type Props = HTMLAttributes<"div">;
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class:list={["starwind-dialog", className]} {...rest} data-slot="dialog">
-  <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/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]}
-      {...rest}
-      data-slot="dialog-close"
-    >
-      <slot>Demo close button</slot>
-    </button>
-  )
-}

package/src/components/dialog/DialogContent.astro

@@ -1,78 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-import IconX from "~icons/lucide/x";
-
-type Props = HTMLAttributes<"dialog"> & {
-  /**
-   * Open and close animation duration in milliseconds
-   */
-  animationDuration?: number;
-};
-
-export const dialogBackdrop = cv({
-  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 = cv({
-  base: [
-    "starwind-dialog-content",
-    "fixed top-2xl left-[50%] z-50 translate-x-[-50%] sm:top-[50%] sm:translate-y-[-50%]",
-    "bg-background w-full max-w-md rounded-lg b p-8 shadow-lg",
-    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards transition-[translate,scale,opacity]",
-    "fade-in zoom-in-95 slide-in-from-bottom-2",
-    "fade-out zoom-out-95 slide-out-to-bottom-2",
-    "data-[state=open]:data-[nested-dialog-open]:-translate-y-[calc(50%-var(--nested-offset)*var(--nested-dialogs,1))]",
-    "data-[state=open]:data-[nested-dialog-open]:scale-[calc(1-var(--nested-scale)*var(--nested-dialogs,1))]",
-    "max-sm:data-[state=open]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-offset)*var(--nested-dialogs,1))]",
-  ],
-});
-
-export const dialogCloseButton = cv({
-  base: [
-    "starwind-dialog-close text-muted-foreground",
-    "absolute top-5.5 right-5.5 rounded-sm [&>svg]:op-70 hover:[&>svg]:op-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:list={[dialogContent(), className]}
-  data-state="closed"
-  style={{ animationDuration: `${animationDuration}ms` }}
-  {...rest}
-  data-slot="dialog-content"
->
-  <slot />
-  <button type="button" class={dialogCloseButton()} data-dialog-close aria-label="Close dialog">
-    <slot name="icon">
-      <IconX class="size-5 transition-opacity" />
-    </slot>
-    <span class="sr-only">Close</span>
-  </button>
-</dialog>
-
-<style>
-  .starwind-dialog-content {
-    --nested-offset: var(--spacing-md);
-    --nested-scale: 0.05;
-  }
-</style>

package/src/components/dialog/DialogDescription.astro

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

package/src/components/dialog/DialogFooter.astro

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

package/src/components/dialog/DialogHeader.astro

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

package/src/components/dialog/DialogTitle.astro

@@ -1,18 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type Props = Omit<HTMLAttributes<"h2">, "id"> & {
-  id?: string;
-};
-
-export const dialogTitle = cv({
-  base: "text-lg font-semibold leading-none tracking-tight",
-});
-
-const { class: className, id, ...rest } = Astro.props;
----
-
-<h2 class:list={[dialogTitle(), className]} id={id} {...rest} data-slot="dialog-title">
-  <slot />
-</h2>

package/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-dialog-for={dialogFor}
-      {...rest}
-      data-slot="dialog-trigger"
-    >
-      <slot />
-    </button>
-  )
-}