@rimelight/ui 0.0.1

package/src/components/dialog/DialogContent.astro

@@ -0,0 +1,78 @@
+---
+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

@@ -0,0 +1,14 @@
+---
+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

@@ -0,0 +1,14 @@
+---
+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

@@ -0,0 +1,14 @@
+---
+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

@@ -0,0 +1,18 @@
+---
+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

@@ -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-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>
+  )
+}