@starwind-ui/core 1.7.3 → 1.9.0

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

@@ -0,0 +1,50 @@
+---
+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 -->
+<div
+  class={alertDialogBackdrop()}
+  data-state="closed"
+  data-slot="alert-dialog-backdrop"
+  style={{ animationDuration: `${animationDuration}ms` }}
+>
+</div>
+
+<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: "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/avatar/Avatar.astro

@@ -4,7 +4,7 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 interface Props extends HTMLAttributes<"div">, VariantProps<typeof avatar> {}
 
-const avatar = tv({
+export const avatar = tv({
   base: "text-foreground bg-muted relative overflow-hidden rounded-full border-2",
   variants: {
     variant: {
@@ -24,6 +24,6 @@ const avatar = tv({
 const { variant, size, class: className, ...rest } = Astro.props;
 ---
 
-<figure class={avatar({ variant, size, class: className })} {...rest}>
+<figure class={avatar({ variant, size, class: className })} data-slot="avatar" {...rest}>
   <slot />
 </figure>

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

@@ -1,7 +1,7 @@
 ---
 import { tv } from "tailwind-variants";
 
-const avatarFallback = tv({
+export const avatarFallback = tv({
   base: "absolute inset-0.5 flex items-center justify-center rounded-full font-medium",
 });
 
@@ -12,6 +12,6 @@ interface Props {
 const { class: className } = Astro.props;
 ---
 
-<div class={avatarFallback({ class: className })}>
+<div class={avatarFallback({ class: className })} data-slot="avatar-fallback">
   <slot />
 </div>

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

@@ -2,7 +2,7 @@
 import { Image } from "astro:assets";
 import { tv } from "tailwind-variants";
 
-const avatarImage = tv({ base: "relative z-1 h-full w-full object-cover" });
+export const avatarImage = tv({ base: "relative z-1 h-full w-full object-cover" });
 
 type BaseProps = { alt: string; class?: string };
 
@@ -29,7 +29,18 @@ if (!src && !image) {
       width={64}
       height={64}
       onerror="this.style.display='none'"
+      data-slot="avatar-image"
+    />
+  )
+}
+{
+  image && (
+    <Image
+      src={image}
+      alt={alt}
+      class={avatarImage({ class: className })}
+      width={64}
+      data-slot="avatar-image"
     />
   )
 }
-{image && <Image src={image} alt={alt} class={avatarImage({ class: className })} width={64} />}

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

@@ -1,8 +1,10 @@
-import Avatar from "./Avatar.astro";
-import AvatarFallback from "./AvatarFallback.astro";
-import AvatarImage from "./AvatarImage.astro";
+import Avatar, { avatar } from "./Avatar.astro";
+import AvatarFallback, { avatarFallback } from "./AvatarFallback.astro";
+import AvatarImage, { avatarImage } from "./AvatarImage.astro";
 
-export { Avatar, AvatarFallback, AvatarImage };
+const AvatarVariants = { avatar, avatarFallback, avatarImage };
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarVariants };
 
 export default {
   Root: Avatar,

package/dist/src/components/badge/Badge.astro

@@ -7,7 +7,7 @@ interface Props
     Omit<HTMLAttributes<"a">, "type">,
     VariantProps<typeof badge> {}
 
-const badge = tv({
+export const badge = tv({
   base: "starwind-badge starwind-transition-colors inline-flex items-center rounded-full font-semibold focus-visible:outline-2 focus-visible:outline-offset-2",
   variants: {
     variant: {
@@ -43,6 +43,6 @@ const isLink = Astro.props.href ? true : false;
 const Tag = Astro.props.href ? "a" : "div";
 ---
 
-<Tag class={badge({ variant, size, isLink, class: className })} {...rest}>
+<Tag class={badge({ variant, size, isLink, class: className })} data-slot="badge" {...rest}>
   <slot />
 </Tag>

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

@@ -1,5 +1,7 @@
-import Badge from "./Badge.astro";
+import Badge, { badge } from "./Badge.astro";
 
-export { Badge };
+const BadgeVariants = { badge };
+
+export { Badge, BadgeVariants };
 
 export default Badge;

package/dist/src/components/breadcrumb/Breadcrumb.astro

@@ -6,6 +6,6 @@ type Props = HTMLAttributes<"nav">;
 const { class: className, ...rest } = Astro.props;
 ---
 
-<nav aria-label="breadcrumb" class={className} {...rest}>
+<nav aria-label="breadcrumb" class={className} data-slot="breadcrumb" {...rest}>
   <slot />
 </nav>

package/dist/src/components/breadcrumb/BreadcrumbEllipsis.astro

@@ -5,7 +5,9 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"span">;
 
-const breadcrumbEllipsis = tv({ base: "flex size-6 items-center justify-center [&>svg]:size-4" });
+export const breadcrumbEllipsis = tv({
+  base: "flex size-6 items-center justify-center [&>svg]:size-4",
+});
 
 const { class: className, ...rest } = Astro.props;
 ---
@@ -14,6 +16,7 @@ const { class: className, ...rest } = Astro.props;
   role="presentation"
   aria-hidden="true"
   class={breadcrumbEllipsis({ class: className })}
+  data-slot="breadcrumb-ellipsis"
   {...rest}
 >
   <Dots />

package/dist/src/components/breadcrumb/BreadcrumbItem.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"li">;
 
-const breadcrumbItem = tv({ base: "inline-flex items-center gap-1.5" });
+export const breadcrumbItem = tv({ base: "inline-flex items-center gap-1.5" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<li class={breadcrumbItem({ class: className })} {...rest}>
+<li class={breadcrumbItem({ class: className })} data-slot="breadcrumb-item" {...rest}>
   <slot />
 </li>

package/dist/src/components/breadcrumb/BreadcrumbLink.astro

@@ -6,7 +6,7 @@ type Props = HTMLAttributes<"a"> & {
   asChild?: boolean;
 };
 
-const breadcrumbLink = tv({ base: "hover:text-foreground transition-colors" });
+export const breadcrumbLink = tv({ base: "hover:text-foreground transition-colors" });
 
 const { class: className, asChild = false, ...rest } = Astro.props;
 ---
@@ -15,7 +15,7 @@ const { class: className, asChild = false, ...rest } = Astro.props;
   asChild ? (
     <slot />
   ) : (
-    <a class={breadcrumbLink({ class: className })} {...rest}>
+    <a class={breadcrumbLink({ class: className })} data-slot="breadcrumb-link" {...rest}>
       <slot />
     </a>
   )

package/dist/src/components/breadcrumb/BreadcrumbList.astro

@@ -4,13 +4,13 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"ol">;
 
-const breadcrumbList = tv({
+export const breadcrumbList = tv({
   base: "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words sm:gap-2",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<ol class={breadcrumbList({ class: className })} {...rest}>
+<ol class={breadcrumbList({ class: className })} data-slot="breadcrumb-list" {...rest}>
   <slot />
 </ol>

package/dist/src/components/breadcrumb/BreadcrumbPage.astro

@@ -4,7 +4,7 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"span">;
 
-const breadcrumbPage = tv({ base: "text-foreground font-normal" });
+export const breadcrumbPage = tv({ base: "text-foreground font-normal" });
 
 const { class: className, ...rest } = Astro.props;
 ---
@@ -14,6 +14,7 @@ const { class: className, ...rest } = Astro.props;
   aria-disabled="true"
   aria-current="page"
   class={breadcrumbPage({ class: className })}
+  data-slot="breadcrumb-page"
   {...rest}
 >
   <slot />

package/dist/src/components/breadcrumb/BreadcrumbSeparator.astro

@@ -5,7 +5,7 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"li">;
 
-const breadcrumbSeparator = tv({ base: "[&>svg]:size-4" });
+export const breadcrumbSeparator = tv({ base: "[&>svg]:size-4" });
 
 const { class: className, ...rest } = Astro.props;
 ---
@@ -14,6 +14,7 @@ const { class: className, ...rest } = Astro.props;
   role="presentation"
   aria-hidden="true"
   class={breadcrumbSeparator({ class: className })}
+  data-slot="breadcrumb-separator"
   {...rest}
 >
   <slot>

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

@@ -1,10 +1,19 @@
 import Breadcrumb from "./Breadcrumb.astro";
-import BreadcrumbEllipsis from "./BreadcrumbEllipsis.astro";
-import BreadcrumbItem from "./BreadcrumbItem.astro";
-import BreadcrumbLink from "./BreadcrumbLink.astro";
-import BreadcrumbList from "./BreadcrumbList.astro";
-import BreadcrumbPage from "./BreadcrumbPage.astro";
-import BreadcrumbSeparator from "./BreadcrumbSeparator.astro";
+import BreadcrumbEllipsis, { breadcrumbEllipsis } from "./BreadcrumbEllipsis.astro";
+import BreadcrumbItem, { breadcrumbItem } from "./BreadcrumbItem.astro";
+import BreadcrumbLink, { breadcrumbLink } from "./BreadcrumbLink.astro";
+import BreadcrumbList, { breadcrumbList } from "./BreadcrumbList.astro";
+import BreadcrumbPage, { breadcrumbPage } from "./BreadcrumbPage.astro";
+import BreadcrumbSeparator, { breadcrumbSeparator } from "./BreadcrumbSeparator.astro";
+
+const BreadcrumbVariants = {
+  breadcrumbEllipsis,
+  breadcrumbItem,
+  breadcrumbLink,
+  breadcrumbList,
+  breadcrumbPage,
+  breadcrumbSeparator,
+};
 
 export {
   Breadcrumb,
@@ -14,6 +23,7 @@ export {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  BreadcrumbVariants,
 };
 
 export default {

package/dist/src/components/button/Button.astro

@@ -9,7 +9,7 @@ interface Props
 
 const { variant, size, class: className, ...rest } = Astro.props;
 
-const button = tv({
+export const button = tv({
   base: [
     "inline-flex items-center justify-center gap-1.5 rounded-md font-medium whitespace-nowrap",
     "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -48,6 +48,6 @@ const button = tv({
 const Tag = Astro.props.href ? "a" : "button";
 ---
 
-<Tag class={button({ variant, size, class: className })} {...rest}>
+<Tag class={button({ variant, size, class: className })} data-slot="button" {...rest}>
   <slot />
 </Tag>

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

@@ -1,5 +1,7 @@
-import Button from "./Button.astro";
+import Button, { button } from "./Button.astro";
 
-export { Button };
+const ButtonVariants = { button };
+
+export { Button, ButtonVariants };
 
 export default Button;

package/dist/src/components/card/Card.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const card = tv({ base: "bg-card text-card-foreground rounded-2xl border shadow-sm" });
+export const card = tv({ base: "bg-card text-card-foreground rounded-2xl border shadow-sm" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={card({ class: className })} {...rest}>
+<div class={card({ class: className })} data-slot="card" {...rest}>
   <slot />
 </div>

package/dist/src/components/card/CardContent.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const cardContent = tv({ base: "p-8 pt-0" });
+export const cardContent = tv({ base: "p-8 pt-0" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={cardContent({ class: className })} {...rest}>
+<div class={cardContent({ class: className })} data-slot="card-content" {...rest}>
   <slot />
 </div>

package/dist/src/components/card/CardDescription.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const cardDescription = tv({ base: "text-muted-foreground text-base" });
+export const cardDescription = tv({ base: "text-muted-foreground text-base" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={cardDescription({ class: className })} {...rest}>
+<div class={cardDescription({ class: className })} data-slot="card-description" {...rest}>
   <slot />
 </div>

package/dist/src/components/card/CardFooter.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const cardFooter = tv({ base: "flex items-center p-8 pt-0" });
+export const cardFooter = tv({ base: "flex items-center p-8 pt-0" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={cardFooter({ class: className })} {...rest}>
+<div class={cardFooter({ class: className })} data-slot="card-footer" {...rest}>
   <slot />
 </div>

package/dist/src/components/card/CardHeader.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const cardHeader = tv({ base: "flex flex-col space-y-2 p-8" });
+export const cardHeader = tv({ base: "flex flex-col space-y-2 p-8" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={cardHeader({ class: className })} {...rest}>
+<div class={cardHeader({ class: className })} data-slot="card-header" {...rest}>
   <slot />
 </div>

package/dist/src/components/card/CardTitle.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const cardTitle = tv({ base: "text-3xl leading-none font-semibold tracking-tight" });
+export const cardTitle = tv({ base: "text-3xl leading-none font-semibold tracking-tight" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={cardTitle({ class: className })} {...rest}>
+<div class={cardTitle({ class: className })} data-slot="card-title" {...rest}>
   <slot />
 </div>

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

@@ -1,11 +1,20 @@
-import Card from "./Card.astro";
-import CardContent from "./CardContent.astro";
-import CardDescription from "./CardDescription.astro";
-import CardFooter from "./CardFooter.astro";
-import CardHeader from "./CardHeader.astro";
-import CardTitle from "./CardTitle.astro";
+import Card, { card } from "./Card.astro";
+import CardContent, { cardContent } from "./CardContent.astro";
+import CardDescription, { cardDescription } from "./CardDescription.astro";
+import CardFooter, { cardFooter } from "./CardFooter.astro";
+import CardHeader, { cardHeader } from "./CardHeader.astro";
+import CardTitle, { cardTitle } from "./CardTitle.astro";
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+const CardVariants = {
+  card,
+  cardContent,
+  cardDescription,
+  cardFooter,
+  cardHeader,
+  cardTitle,
+};
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardVariants };
 
 export default {
   Root: Card,