@rimelight/ui 0.0.5 → 0.0.7

package/src/components/accordion/AccordionTrigger.astro

@@ -1,33 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-import IconChevronDown from "~icons/lucide/chevron-down";
-
-export interface AccordionTriggerProps extends HTMLAttributes<"button"> {}
-type Props = AccordionTriggerProps;
-
-export const accordionTrigger = cv({
-  base: [
-    "starwind-accordion-trigger",
-    "flex w-full items-center justify-between gap-2xl rounded-md py-2xl",
-    "hover:text-muted-foreground text-left font-medium transition-all",
-    "[&[data-state=open]>svg]:rotate-180",
-    "focus-visible:border-outline focus-visible:ring-outline/50 outline-none focus-visible:ring-3",
-  ],
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<button
-  type="button"
-  class:list={[accordionTrigger(), className]}
-  aria-expanded="false"
-  {...rest}
-  data-slot="accordion-trigger"
->
-  <slot />
-  <slot name="icon">
-    <IconChevronDown class="size-5 shrink-0 transition-transform duration-200" />
-  </slot>
-</button>

package/src/components/alert/Alert.astro

@@ -1,34 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
-
-export interface AlertProps extends HTMLAttributes<"div">, VariantProps<typeof alert> {}
-type Props = AlertProps;
-
-export const alert = cv({
-  base: "text-foreground relative w-full rounded-lg b p-2xs",
-  variants: {
-    variant: {
-      default: "bg-background dark:bg-input/30 [&>h5>svg]:text-foreground",
-      primary: "border-primary bg-primary/7 [&>h5>svg]:text-primary",
-      secondary: "border-secondary bg-secondary/7 [&>h5>svg]:text-secondary",
-      info: "border-info bg-info/7 [&>h5>svg]:text-info",
-      success: "border-success bg-success/7 [&>h5>svg]:text-success",
-      warning: "border-warning bg-warning/7 [&>h5>svg]:text-warning",
-      error: "border-error bg-error/7 [&>h5>svg]:text-error",
-    },
-  },
-  defaultVariants: { variant: "default" },
-});
-
-const { variant, class: className, ...rest } = Astro.props;
-
-const inferredRole =
-  rest.role ?? (variant === "error" || variant === "warning" ? "alert" : "status");
----
-
-<div class:list={[alert({ variant }), className]} role={inferredRole} {...rest} data-slot="alert">
-  <slot />
-</div>

package/src/components/alert/AlertDescription.astro

@@ -1,15 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export const alertDescription = cv({ base: "leading-relaxed" });
-
-export interface AlertDescriptionProps extends HTMLAttributes<"p"> {}
-type Props = AlertDescriptionProps;
-
-const { class: className, ...rest } = Astro.props;
----
-
-<p class:list={[alertDescription(), className]} {...rest} data-slot="alert-description">
-  <slot />
-</p>

package/src/components/alert/AlertTitle.astro

@@ -1,17 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export const alertTitle = cv({
-  base: "font-heading mb-3xs flex items-center gap-3xs text-lg leading-none font-medium tracking-tight",
-});
-
-export interface AlertTitleProps extends HTMLAttributes<"h5"> {}
-type Props = AlertTitleProps;
-
-const { class: className, ...rest } = Astro.props;
----
-
-<h5 class:list={[alertTitle(), className]} {...rest} data-slot="alert-title">
-  <slot />
-</h5>

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

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

@@ -1,46 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-
-import { button } from "../button/Button.astro";
-
-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:list={[
-        button({ variant: "default" }),
-        "starwind-alert-dialog-action",
-        className,
-      ]}
-      {...rest}
-      data-slot="alert-dialog-action"
-    >
-      <slot />
-    </button>
-  )
-}
-

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

@@ -1,46 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-
-import { button } from "../button/Button.astro";
-
-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:list={[
-        button({ variant: "outline" }),
-        "starwind-alert-dialog-close",
-        className,
-      ]}
-      {...rest}
-      data-slot="alert-dialog-cancel"
-    >
-      <slot />
-    </button>
-  )
-}
-

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

@@ -1,52 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type Props = HTMLAttributes<"dialog"> & {
-  /**
-   * Open and close animation duration in milliseconds
-   */
-  animationDuration?: number;
-};
-
-export const alertDialogBackdrop = cv({
-  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 = cv({
-  base: [
-    "bg-background space-y-4 rounded-lg b p-xl 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"
-    style={{ animationDuration: `${animationDuration}ms` }}
-    data-slot="alert-dialog-backdrop"
-  >
-  </div>
-</slot>
-
-<dialog
-  class:list={[alertDialogContent(), className]}
-  data-state="closed"
-  role="alertdialog"
-  style={{ animationDuration: `${animationDuration}ms` }}
-  {...rest}
-  data-slot="alert-dialog-content"
->
-  <slot />
-</dialog>

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

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

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

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

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

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

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

@@ -1,20 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type Props = Omit<HTMLAttributes<"h2">, "id"> & {
-  /**
-   * The content to be rendered inside the dialog title
-   */
-
-  children: any;
-};
-
-export const alertDialogTitle = cv({ base: "font-heading text-xl font-semibold" });
-
-const { class: className, ...rest } = Astro.props;
----
-
-<h2 class:list={[alertDialogTitle(), className]} {...rest} data-slot="alert-dialog-title">
-  <slot />
-</h2>

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

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

@@ -1,32 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from "astro/types";
-import { cv } from "css-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 = cv({
-  base: "relative w-full",
-});
-
-export const aspectRatio = cv({
-  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:list={[aspectRatio(), className]} data-slot="aspect-ratio" {...rest}>
-    <slot />
-  </Tag>
-</div>