@starwind-ui/core 1.6.2 → 1.7.1

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

@@ -2,10 +2,10 @@
 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;
+  /**
+   * When true, the component will render its child element instead of a button
+   */
+  asChild?: boolean;
 };
 
 const { class: className, asChild = false, ...rest } = Astro.props;
@@ -13,18 +13,18 @@ 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;
+  hasChildren = true;
 }
 ---
 
 {
-	asChild && hasChildren ? (
-		<div class="starwind-dialog-close" data-as-child>
-			<slot />
-		</div>
-	) : (
-		<button type="button" class:list={["starwind-dialog-close", className]} {...rest}>
-			<slot>Demo close button</slot>
-		</button>
-	)
+  asChild && hasChildren ? (
+    <div class="starwind-dialog-close" data-as-child>
+      <slot />
+    </div>
+  ) : (
+    <button type="button" class:list={["starwind-dialog-close", className]} {...rest}>
+      <slot>Demo close button</slot>
+    </button>
+  )
 }

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

@@ -4,36 +4,36 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"dialog"> & {
-	/**
-	 * Open and close animation duration in milliseconds
-	 */
-	animationDuration?: number;
+  /**
+   * Open and close animation duration in milliseconds
+   */
+  animationDuration?: number;
 };
 
 const dialogBackdrop = tv({
-	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",
-	],
+  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",
+  ],
 });
 
 const dialogContent = tv({
-	base: [
-		"fixed top-16 left-[50%] z-50 translate-x-[-50%] sm:top-[50%] sm:translate-y-[-50%]",
-		"bg-background w-full max-w-md border p-8 shadow-lg sm:rounded-lg",
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards",
-		"fade-in zoom-in-95 slide-in-from-bottom-2",
-		"fade-out zoom-out-95 slide-out-to-bottom-2",
-	],
+  base: [
+    "fixed top-16 left-[50%] z-50 translate-x-[-50%] sm:top-[50%] sm:translate-y-[-50%]",
+    "bg-background w-full max-w-md border p-8 shadow-lg sm:rounded-lg",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards",
+    "fade-in zoom-in-95 slide-in-from-bottom-2",
+    "fade-out zoom-out-95 slide-out-to-bottom-2",
+  ],
 });
 
 const dialogCloseButton = tv({
-	base: [
-		"starwind-dialog-close text-muted-foreground",
-		"absolute top-5.5 right-5.5 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none",
-		"focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-2",
-	],
+  base: [
+    "starwind-dialog-close text-muted-foreground",
+    "absolute top-5.5 right-5.5 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none",
+    "focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-2",
+  ],
 });
 
 const { class: className, animationDuration = 200, ...rest } = Astro.props;
@@ -41,20 +41,20 @@ const { class: className, animationDuration = 200, ...rest } = Astro.props;
 
 <!-- dialog overlay -->
 <div
-	class={dialogBackdrop()}
-	data-state="closed"
-	style={{ animationDuration: `${animationDuration}ms` }}
+  class={dialogBackdrop()}
+  data-state="closed"
+  style={{ animationDuration: `${animationDuration}ms` }}
 >
 </div>
 
 <dialog
-	class={dialogContent({ class: className })}
-	data-state="closed"
-	{...rest}
-	style={{ animationDuration: `${animationDuration}ms` }}
+  class={dialogContent({ class: className })}
+  data-state="closed"
+  {...rest}
+  style={{ animationDuration: `${animationDuration}ms` }}
 >
-	<slot />
-	<button type="button" class={dialogCloseButton()} data-dialog-close aria-label="Close dialog">
-		<X class="size-5" />
-	</button>
+  <slot />
+  <button type="button" class={dialogCloseButton()} data-dialog-close aria-label="Close dialog">
+    <X class="size-5" />
+  </button>
 </dialog>

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

@@ -10,5 +10,5 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <p class={dialogDescription({ class: className })} {...rest}>
-	<slot />
+  <slot />
 </p>

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

@@ -10,5 +10,5 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <div class={dialogFooter({ class: className })} {...rest}>
-	<slot />
+  <slot />
 </div>

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

@@ -10,5 +10,5 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <div class={dialogHeader({ class: className })} {...rest}>
-	<slot />
+  <slot />
 </div>

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

@@ -3,11 +3,11 @@ 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
-	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	children: any;
+  /**
+   * The content to be rendered inside the dialog title
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children: any;
 };
 
 const dialogTitle = tv({ base: "text-2xl leading-none font-semibold tracking-tight" });
@@ -16,5 +16,5 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <h2 class={dialogTitle({ class: className })} {...rest}>
-	<slot />
+  <slot />
 </h2>

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

@@ -2,34 +2,40 @@
 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;
+  /**
+   * 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, ...rest } = Astro.props;
+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;
+  hasChildren = true;
 }
 ---
 
 {
-	asChild && hasChildren ? (
-		<div class="starwind-dialog-trigger" data-as-child>
-			<slot />
-		</div>
-	) : (
-		<button
-			type="button"
-			aria-haspopup="dialog"
-			class:list={["starwind-dialog-trigger", className]}
-			{...rest}
-		>
-			<slot />
-		</button>
-	)
+  asChild && hasChildren ? (
+    <div class="starwind-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}
+    >
+      <slot />
+    </button>
+  )
 }

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

@@ -8,23 +8,23 @@ import DialogTitle from "./DialogTitle.astro";
 import DialogTrigger from "./DialogTrigger.astro";
 
 export {
-	Dialog,
-	DialogTrigger,
-	DialogContent,
-	DialogHeader,
-	DialogFooter,
-	DialogTitle,
-	DialogDescription,
-	DialogClose,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
 };
 
 export default {
-	Root: Dialog,
-	Trigger: DialogTrigger,
-	Content: DialogContent,
-	Header: DialogHeader,
-	Footer: DialogFooter,
-	Title: DialogTitle,
-	Description: DialogDescription,
-	Close: DialogClose,
+  Root: Dialog,
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Footer: DialogFooter,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
 };