@starwind-ui/core 1.6.2 → 1.7.1

package/dist/src/components/checkbox/Checkbox.astro

@@ -1,67 +1,67 @@
 ---
 import Check from "@tabler/icons/outline/check.svg";
 import type { HTMLAttributes } from "astro/types";
-import { type VariantProps, tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"input">, "type"> &
-	VariantProps<typeof checkbox> & {
-		/**
-		 * Optional label text to display next to the checkbox
-		 */
-		label?: string;
-	};
+  VariantProps<typeof checkbox> & {
+    /**
+     * Optional label text to display next to the checkbox
+     */
+    label?: string;
+  };
 
 const checkbox = tv({
-	slots: {
-		base: "starwind-checkbox relative flex items-center space-x-2",
-		input: [
-			"peer border-input bg-background starwind-transition-colors shrink-0 transform-gpu rounded-sm border",
-			"focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:transition-none",
-			"outline-0 focus:ring-0 focus:ring-offset-0",
-			"not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
-		],
-		icon: [
-			"pointer-events-none absolute stroke-3 p-0.5 opacity-0 transition-opacity peer-checked:opacity-100",
-			"starwind-check-icon",
-		],
-		label:
-			"font-medium peer-not-disabled:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-	},
-	variants: {
-		size: {
-			sm: { input: "size-4", icon: "size-4", label: "text-sm" },
-			md: { input: "size-5", icon: "size-5", label: "text-base" },
-			lg: { input: "size-6", icon: "size-6", label: "text-lg" },
-		},
-		variant: {
-			default: {
-				input: "checked:bg-foreground focus-visible:outline-outline",
-				icon: "text-background",
-			},
-			primary: {
-				input: "checked:bg-primary focus-visible:outline-primary",
-				icon: "text-primary-foreground",
-			},
-			secondary: {
-				input: "checked:bg-secondary focus-visible:outline-secondary",
-				icon: "text-secondary-foreground",
-			},
-			info: { input: "checked:bg-info focus-visible:outline-info", icon: "text-info-foreground" },
-			success: {
-				input: "checked:bg-success focus-visible:outline-success",
-				icon: "text-success-foreground",
-			},
-			warning: {
-				input: "checked:bg-warning focus-visible:outline-warning",
-				icon: "text-warning-foreground",
-			},
-			error: {
-				input: "checked:bg-error focus-visible:outline-error",
-				icon: "text-error-foreground",
-			},
-		},
-	},
-	defaultVariants: { size: "md", variant: "default" },
+  slots: {
+    base: "starwind-checkbox relative flex items-center space-x-2",
+    input: [
+      "peer border-input bg-background starwind-transition-colors shrink-0 transform-gpu rounded-sm border",
+      "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:transition-none",
+      "outline-0 focus:ring-0 focus:ring-offset-0",
+      "not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+    ],
+    icon: [
+      "pointer-events-none absolute stroke-3 p-0.5 opacity-0 transition-opacity peer-checked:opacity-100",
+      "starwind-check-icon",
+    ],
+    label:
+      "font-medium peer-not-disabled:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  },
+  variants: {
+    size: {
+      sm: { input: "size-4", icon: "size-4", label: "text-sm" },
+      md: { input: "size-5", icon: "size-5", label: "text-base" },
+      lg: { input: "size-6", icon: "size-6", label: "text-lg" },
+    },
+    variant: {
+      default: {
+        input: "checked:bg-foreground focus-visible:outline-outline",
+        icon: "text-background",
+      },
+      primary: {
+        input: "checked:bg-primary focus-visible:outline-primary",
+        icon: "text-primary-foreground",
+      },
+      secondary: {
+        input: "checked:bg-secondary focus-visible:outline-secondary",
+        icon: "text-secondary-foreground",
+      },
+      info: { input: "checked:bg-info focus-visible:outline-info", icon: "text-info-foreground" },
+      success: {
+        input: "checked:bg-success focus-visible:outline-success",
+        icon: "text-success-foreground",
+      },
+      warning: {
+        input: "checked:bg-warning focus-visible:outline-warning",
+        icon: "text-warning-foreground",
+      },
+      error: {
+        input: "checked:bg-error focus-visible:outline-error",
+        icon: "text-error-foreground",
+      },
+    },
+  },
+  defaultVariants: { size: "md", variant: "default" },
 });
 
 const { id, label, checked, size, variant, class: className, ...rest } = Astro.props;
@@ -70,42 +70,42 @@ const { base, input, icon, label: labelClass } = checkbox({ size, variant });
 ---
 
 <div class={base()}>
-	<input type="checkbox" id={id} class={input({ class: className })} {checked} {...rest} />
-	<Check class={icon()} />
-	{
-		label && (
-			<label for={id} class={labelClass()}>
-				{label}
-			</label>
-		)
-	}
+  <input type="checkbox" id={id} class={input({ class: className })} {checked} {...rest} />
+  <Check class={icon()} />
+  {
+    label && (
+      <label for={id} class={labelClass()}>
+        {label}
+      </label>
+    )
+  }
 </div>
 
 <style>
-	.starwind-checkbox input[type="checkbox"]:checked {
-		background-image: none;
-	}
+  .starwind-checkbox input[type="checkbox"]:checked {
+    background-image: none;
+  }
 
-	/* Check drawing animation */
-	.starwind-check-icon {
-		stroke-dasharray: 65;
-		stroke-dashoffset: 65;
-		opacity: 0;
-	}
+  /* Check drawing animation */
+  .starwind-check-icon {
+    stroke-dasharray: 65;
+    stroke-dashoffset: 65;
+    opacity: 0;
+  }
 
-	.starwind-checkbox input[type="checkbox"]:checked + .starwind-check-icon {
-		animation: draw-check 0.3s ease forwards;
-		animation-delay: 0.15s;
-	}
+  .starwind-checkbox input[type="checkbox"]:checked + .starwind-check-icon {
+    animation: draw-check 0.3s ease forwards;
+    animation-delay: 0.15s;
+  }
 
-	@keyframes draw-check {
-		0% {
-			stroke-dashoffset: 65;
-			opacity: 1;
-		}
-		100% {
-			stroke-dashoffset: 0;
-			opacity: 1;
-		}
-	}
+  @keyframes draw-check {
+    0% {
+      stroke-dashoffset: 65;
+      opacity: 1;
+    }
+    100% {
+      stroke-dashoffset: 0;
+      opacity: 1;
+    }
+  }
 </style>

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

@@ -7,185 +7,244 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <div class:list={["starwind-dialog", className]} {...rest}>
-	<slot />
+  <slot />
 </div>
 
 <script>
-	class DialogHandler {
-		private trigger: HTMLButtonElement;
-		private dialog: HTMLDialogElement;
-		private closeButtons: NodeListOf<HTMLButtonElement>;
-		private backdrop: HTMLElement;
-		/**
-		 * 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")!;
-
-			// animationDuration is set with inline styles through passed prop to DialogContent
-			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 = 200;
-			}
-
-			// if trigger is set with asChild, use the first child element for trigger button
-			const tempTrigger = dialogWrapper.querySelector(".starwind-dialog-trigger") as HTMLElement;
-			if (tempTrigger?.hasAttribute("data-as-child")) {
-				this.trigger = tempTrigger.firstElementChild as HTMLButtonElement;
-			} else {
-				this.trigger = tempTrigger as HTMLButtonElement;
-			}
-
-			// 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;
-			});
-
-			this.closeButtons = dialogWrapper.querySelectorAll(
-				".starwind-dialog-close",
-			) as NodeListOf<HTMLButtonElement>;
-
-			// if any elements are not there, exit
-			if (!this.trigger || !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);
-			}
-		}
-
-		private setupEvents(): void {
-			this.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) => {
-				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 {
-			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 {
-			document.body.classList.remove("overflow-hidden");
-			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();
-			}, 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);
+  class DialogHandler {
+    private triggers: HTMLButtonElement[] = [];
+    private dialog: HTMLDialogElement;
+    private closeButtons: HTMLButtonElement[] = [];
+    private backdrop: 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;
+
+    constructor(dialogWrapper: HTMLElement, dialogNumber: number) {
+      this.dialog = dialogWrapper.querySelector("dialog")!;
+      this.backdrop = dialogWrapper.querySelector(".starwind-dialog-backdrop")!;
+
+      // 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
+      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 = 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 {
+      // 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) => {
+        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 {
+      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 {
+      document.body.classList.remove("overflow-hidden");
+      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();
+      }, 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>