@starwind-ui/core 1.15.1 → 1.15.2

package/dist/src/components/alert-dialog/AlertDialog.astro

@@ -0,0 +1,275 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["starwind-alert-dialog", className]} data-slot="alert-dialog" {...rest}>
+  <slot />
+</div>
+
+<script>
+  class AlertDialogHandler {
+    private triggers: HTMLButtonElement[] = [];
+    private dialog: HTMLDialogElement | null = null;
+    private closeButtons: HTMLButtonElement[] = [];
+    private actionButtons: 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-alert-dialog-backdrop");
+      if (!this.dialog || !this.backdrop) {
+        throw new Error("AlertDialog: 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-alert-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-alert-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-alert-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-alert-dialog-close");
+            button.parentNode?.replaceChild(childElement, button);
+          }
+        }
+        return button;
+      });
+
+      // Convert NodeList to Array for consistency with triggers
+      this.closeButtons = Array.from(
+        dialogWrapper.querySelectorAll(".starwind-alert-dialog-close"),
+      ) as HTMLButtonElement[];
+
+      // if actionButtons are set with asChild, swap the wrapper with its first child
+      const tempActionButtons = dialogWrapper.querySelectorAll(
+        ".starwind-alert-dialog-action",
+      ) as NodeListOf<HTMLElement>;
+      tempActionButtons.forEach((button: HTMLElement) => {
+        if (button.hasAttribute("data-as-child")) {
+          const childElement = button.firstElementChild;
+          if (childElement) {
+            childElement.classList.add("starwind-alert-dialog-action");
+            button.parentNode?.replaceChild(childElement, button);
+          }
+        }
+        return button;
+      });
+
+      // Convert NodeList to Array for consistency with triggers
+      this.actionButtons = Array.from(
+        dialogWrapper.querySelectorAll(".starwind-alert-dialog-action"),
+      ) 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-alert-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-alert-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-alert-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();
+          }
+        });
+      });
+
+      // Add click handlers to all action buttons
+      this.actionButtons.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();
+          }
+        });
+      });
+
+      // 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 alertDialogInstances = new WeakMap<HTMLElement, AlertDialogHandler>();
+  let alertDialogCounter = 0;
+
+  // Initialize all dialogs
+  const setupAlertDialogs = () => {
+    document.querySelectorAll(".starwind-alert-dialog").forEach((dialogWrapper) => {
+      const wrapper = dialogWrapper as HTMLElement;
+      if (!alertDialogInstances.has(wrapper)) {
+        alertDialogInstances.set(wrapper, new AlertDialogHandler(wrapper, alertDialogCounter++));
+      }
+    });
+  };
+
+  setupAlertDialogs();
+  document.addEventListener("astro:after-swap", setupAlertDialogs);
+  document.addEventListener("starwind:init", setupAlertDialogs);
+</script>
+
+<style>
+  .overflow-hidden {
+    overflow: hidden;
+  }
+</style>

package/dist/src/components/alert-dialog/AlertDialogAction.astro

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+import { ButtonVariants } from "@/components/starwind/button";
+
+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:list={["starwind-alert-dialog-action", className]}
+      data-slot="alert-dialog-action"
+      data-as-child
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      type="button"
+      class={ButtonVariants.button({
+        variant: "default",
+        class: `starwind-alert-dialog-action ${className || ""}`,
+      })}
+      data-slot="alert-dialog-action"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/dist/src/components/alert-dialog/AlertDialogCancel.astro

@@ -0,0 +1,45 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { ButtonVariants } from "@/components/starwind/button";
+
+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:list={["starwind-alert-dialog-close", className]}
+      data-slot="alert-dialog-cancel"
+      data-as-child
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      type="button"
+      class={ButtonVariants.button({
+        variant: "outline",
+        class: `starwind-alert-dialog-close ${className || ""}`,
+      })}
+      data-slot="alert-dialog-cancel"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/dist/src/components/alert-dialog/AlertDialogContent.astro

@@ -0,0 +1,52 @@
+---
+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 alertDialogBackdrop = tv({
+  base: [
+    "starwind-alert-dialog-backdrop fixed inset-0 z-50 hidden bg-black/50",
+    "data-[state=open]:animate-in fade-in",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out",
+  ],
+});
+
+export const alertDialogContent = tv({
+  base: [
+    "bg-background space-y-4 rounded-lg border p-6 shadow-lg sm:max-w-lg",
+    "fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+    "data-[state=open]:animate-in fade-in zoom-in-95 will-change-transform",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+  ],
+});
+
+const { class: className, animationDuration = 200, ...rest } = Astro.props;
+---
+
+<!-- dialog overlay -->
+<slot name="backdrop">
+  <div
+    class={alertDialogBackdrop()}
+    data-state="closed"
+    data-slot="alert-dialog-backdrop"
+    style={{ animationDuration: `${animationDuration}ms` }}
+  >
+  </div>
+</slot>
+
+<dialog
+  class={alertDialogContent({ class: className })}
+  data-state="closed"
+  data-slot="alert-dialog-content"
+  role="alertdialog"
+  {...rest}
+  style={{ animationDuration: `${animationDuration}ms` }}
+>
+  <slot />
+</dialog>

package/dist/src/components/alert-dialog/AlertDialogDescription.astro

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

package/dist/src/components/alert-dialog/AlertDialogFooter.astro

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

package/dist/src/components/alert-dialog/AlertDialogHeader.astro

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

package/dist/src/components/alert-dialog/AlertDialogTitle.astro

@@ -0,0 +1,20 @@
+---
+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 alertDialogTitle = tv({ base: "font-heading text-xl font-semibold" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<h2 class={alertDialogTitle({ class: className })} data-slot="alert-dialog-title" {...rest}>
+  <slot />
+</h2>

package/dist/src/components/alert-dialog/AlertDialogTrigger.astro

@@ -0,0 +1,47 @@
+---
+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-alert-dialog-trigger", className]}
+      data-slot="alert-dialog-trigger"
+      data-as-child
+      data-dialog-for={dialogFor}
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      type="button"
+      aria-haspopup="dialog"
+      class:list={["starwind-alert-dialog-trigger", className]}
+      data-slot="alert-dialog-trigger"
+      data-dialog-for={dialogFor}
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

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

@@ -0,0 +1,46 @@
+import AlertDialog from "./AlertDialog.astro";
+import AlertDialogAction from "./AlertDialogAction.astro";
+import AlertDialogCancel from "./AlertDialogCancel.astro";
+import AlertDialogContent, {
+  alertDialogBackdrop,
+  alertDialogContent,
+} from "./AlertDialogContent.astro";
+import AlertDialogDescription, { alertDialogDescription } from "./AlertDialogDescription.astro";
+import AlertDialogFooter, { alertDialogFooter } from "./AlertDialogFooter.astro";
+import AlertDialogHeader, { alertDialogHeader } from "./AlertDialogHeader.astro";
+import AlertDialogTitle, { alertDialogTitle } from "./AlertDialogTitle.astro";
+import AlertDialogTrigger from "./AlertDialogTrigger.astro";
+
+const AlertDialogVariants = {
+  alertDialogBackdrop,
+  alertDialogContent,
+  alertDialogDescription,
+  alertDialogFooter,
+  alertDialogHeader,
+  alertDialogTitle,
+};
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertDialogVariants,
+};
+
+export default {
+  Root: AlertDialog,
+  Trigger: AlertDialogTrigger,
+  Content: AlertDialogContent,
+  Header: AlertDialogHeader,
+  Footer: AlertDialogFooter,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Action: AlertDialogAction,
+  Cancel: AlertDialogCancel,
+};

package/dist/src/components/aspect-ratio/AspectRatio.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+  /**
+   * The aspect ratio of the container (e.g., 16/9, 4/3, 1)
+   * @default 1
+   */
+  ratio?: number;
+};
+
+export const aspectRatioWrapper = tv({
+  base: "relative w-full",
+});
+
+export const aspectRatio = tv({
+  base: "absolute inset-0",
+});
+
+const { ratio = 1, class: className, as: Tag = "div", ...rest } = Astro.props;
+---
+
+<div
+  class={aspectRatioWrapper()}
+  style={`padding-bottom: ${100 / ratio}%`}
+  data-slot="aspect-ratio-wrapper"
+>
+  <Tag class={aspectRatio({ class: className })} data-slot="aspect-ratio" {...rest}>
+    <slot />
+  </Tag>
+</div>

package/dist/src/components/aspect-ratio/index.ts

@@ -0,0 +1,7 @@
+import AspectRatio, { aspectRatio, aspectRatioWrapper } from "./AspectRatio.astro";
+
+const AspectRatioVariants = { aspectRatio, aspectRatioWrapper };
+
+export { AspectRatio, AspectRatioVariants };
+
+export default AspectRatio;

package/dist/src/components/avatar/Avatar.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+interface Props extends HTMLAttributes<"div">, VariantProps<typeof avatar> {}
+
+export const avatar = tv({
+  base: "text-foreground bg-muted relative overflow-hidden rounded-full border-2",
+  variants: {
+    variant: {
+      default: "border-border",
+      primary: "border-primary",
+      secondary: "border-secondary",
+      info: "border-info",
+      success: "border-success",
+      warning: "border-warning",
+      error: "border-error",
+    },
+    size: { sm: "h-8 w-8 text-xs", md: "h-10 w-10 text-sm", lg: "h-12 w-12 text-base" },
+  },
+  defaultVariants: { variant: "default", size: "md" },
+});
+
+const { variant, size, class: className, ...rest } = Astro.props;
+---
+
+<figure class={avatar({ variant, size, class: className })} data-slot="avatar" {...rest}>
+  <slot />
+</figure>

package/dist/src/components/avatar/AvatarFallback.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+export const avatarFallback = tv({
+  base: "absolute inset-0.5 flex items-center justify-center rounded-full font-medium",
+});
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={avatarFallback({ class: className })} data-slot="avatar-fallback" {...rest}>
+  <slot />
+</div>