@starwind-ui/core 1.8.0 → 1.10.0

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,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/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

@@ -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,19 +7,22 @@ interface Props
     Omit<HTMLAttributes<"a">, "type">,
     VariantProps<typeof badge> {}
 
-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",
+export const badge = tv({
+  base: [
+    "starwind-badge inline-flex items-center rounded-full font-semibold",
+    "transition-all outline-none focus-visible:ring-3",
+  ],
   variants: {
     variant: {
-      default: "bg-foreground text-background",
-      primary: "bg-primary text-primary-foreground focus-visible:outline-primary",
-      secondary: "bg-secondary text-secondary-foreground focus-visible:outline-secondary",
-      outline: "border-border focus-visible:outline-outline border",
-      ghost: "bg-foreground/10 text-foreground focus-visible:outline-outline",
-      info: "bg-info text-info-foreground focus-visible:outline-info",
-      success: "bg-success text-success-foreground focus-visible:outline-success",
-      warning: "bg-warning text-warning-foreground focus-visible:outline-warning",
-      error: "bg-error text-error-foreground focus-visible:outline-error",
+      default: "bg-foreground text-background focus-visible:ring-outline/50",
+      primary: "bg-primary text-primary-foreground focus-visible:ring-primary/50",
+      secondary: "bg-secondary text-secondary-foreground focus-visible:ring-secondary/50",
+      outline: "border-border focus-visible:border-outline focus-visible:ring-outline/50 border",
+      ghost: "bg-foreground/10 text-foreground focus-visible:ring-outline/50",
+      info: "bg-info text-info-foreground focus-visible:ring-info/50",
+      success: "bg-success text-success-foreground focus-visible:ring-success/50",
+      warning: "bg-warning text-warning-foreground focus-visible:ring-warning/50",
+      error: "bg-error text-error-foreground focus-visible:ring-error/50",
     },
     size: { sm: "px-2.5 py-0.5 text-xs", md: "px-3 py-0.5 text-sm", lg: "px-4 py-1 text-base" },
     isLink: { true: "cursor-pointer", false: "" },
@@ -43,6 +46,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,37 +9,37 @@ 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",
-    "starwind-transition-colors",
-    "focus-visible:outline-2 focus-visible:outline-offset-2",
+    "transition-all outline-none focus-visible:ring-3",
     "disabled:pointer-events-none disabled:opacity-50",
   ],
   variants: {
     variant: {
-      default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:outline-outline",
+      default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
       primary:
-        "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:outline-primary",
+        "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
       secondary:
-        "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:outline-secondary",
+        "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
       outline:
-        "border-border hover:bg-border hover:text-foreground focus-visible:outline-outline border",
-      ghost:
-        "hover:bg-foreground/10 hover:text-foreground focus-visible:outline-outline bg-transparent",
-      info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:outline-info",
+        "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground border shadow-xs",
+      ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
+      info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
       success:
-        "bg-success text-success-foreground hover:bg-success/90 focus-visible:outline-success",
+        "bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/50",
       warning:
-        "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:outline-warning",
-      error: "bg-error text-error-foreground hover:bg-error/90 focus-visible:outline-error",
+        "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/50",
+      error: "bg-error text-error-foreground hover:bg-error/90 focus-visible:ring-error/50",
     },
     size: {
       sm: "h-9 px-3 py-2 text-sm",
       md: "h-11 px-4 py-2 text-base",
       lg: "h-12 px-8 py-2 text-lg",
-      icon: "h-11 w-11",
+      icon: "size-11",
+      "icon-sm": "size-9",
+      "icon-lg": "size-12",
     },
   },
   defaultVariants: { variant: "default", size: "md" },
@@ -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;