@starwind-ui/core 1.8.0 → 1.10.0

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

@@ -6,16 +6,16 @@ type Props = HTMLAttributes<"div">;
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class:list={["starwind-dialog", className]} {...rest}>
+<div class:list={["starwind-dialog", className]} data-slot="dialog" {...rest}>
   <slot />
 </div>
 
 <script>
   class DialogHandler {
     private triggers: HTMLButtonElement[] = [];
-    private dialog: HTMLDialogElement;
+    private dialog: HTMLDialogElement | null = null;
     private closeButtons: HTMLButtonElement[] = [];
-    private backdrop: HTMLElement;
+    private backdrop: HTMLElement | null = null;
     private dialogId: string;
     /**
      * The duration of the animation in milliseconds. This is used to calculate the
@@ -24,8 +24,11 @@ const { class: className, ...rest } = Astro.props;
     private animationDuration: number;
 
     constructor(dialogWrapper: HTMLElement, dialogNumber: number) {
-      this.dialog = dialogWrapper.querySelector("dialog")!;
-      this.backdrop = dialogWrapper.querySelector(".starwind-dialog-backdrop")!;
+      this.dialog = dialogWrapper.querySelector("dialog");
+      this.backdrop = dialogWrapper.querySelector(".starwind-dialog-backdrop");
+      if (!this.dialog || !this.backdrop) {
+        throw new Error("Dialog: dialog or backdrop not found");
+      }
 
       // if no ID was provided for the wrapper, generate one
       if (dialogWrapper.id) {
@@ -36,6 +39,7 @@ const { class: className, ...rest } = Astro.props;
       }
 
       // animationDuration is set with inline styles through passed prop to DialogContent
+      // if no animationDuration, check data-close-duration
       const animationDurationString = this.dialog.style.animationDuration;
       if (animationDurationString.endsWith("ms")) {
         this.animationDuration = parseFloat(animationDurationString);
@@ -43,7 +47,9 @@ const { class: className, ...rest } = Astro.props;
         // using something like @playform/compress might optimize to use "s" instead of "ms"
         this.animationDuration = parseFloat(animationDurationString) * 1000;
       } else {
-        this.animationDuration = 200;
+        this.animationDuration = this.dialog.dataset.closeDuration
+          ? parseFloat(this.dialog.dataset.closeDuration)
+          : 200;
       }
 
       // Find internal triggers and handle them
@@ -95,12 +101,12 @@ const { class: className, ...rest } = Astro.props;
 
     private setupAccessibility(dialogNumber: number): void {
       // get the first heading element in the dialog
-      const firstHeading = this.dialog.querySelector("h1, h2, h3, h4, h5, h6");
+      const firstHeading = this.dialog?.querySelector("h1, h2, h3, h4, h5, h6");
       if (firstHeading) {
         // create a unique ID for the heading
         firstHeading.id = `starwind-dialog${dialogNumber}-heading`;
         // set the aria-labelledby attribute to the first heading element
-        this.dialog.setAttribute("aria-labelledby", firstHeading.id);
+        this.dialog?.setAttribute("aria-labelledby", firstHeading.id);
       }
     }
 
@@ -133,6 +139,7 @@ const { class: className, ...rest } = Astro.props;
     }
 
     private setupEvents(): void {
+      if (!this.dialog) return;
       // Add click listeners to all triggers
       this.triggers.forEach((trigger) => {
         trigger.addEventListener("click", () => {
@@ -153,6 +160,7 @@ const { class: className, ...rest } = Astro.props;
 
       // Close on click outside
       this.dialog.addEventListener("click", (e) => {
+        if (!this.dialog) return;
         const dialogDimensions = this.dialog.getBoundingClientRect();
         const clickedInDialog =
           e.clientX >= dialogDimensions.left &&
@@ -206,6 +214,7 @@ const { class: className, ...rest } = Astro.props;
     }
 
     private open(): void {
+      if (!this.dialog || !this.backdrop) return;
       this.dialog.showModal();
       document.body.classList.add("overflow-hidden");
       this.backdrop.classList.remove("hidden");
@@ -214,14 +223,18 @@ const { class: className, ...rest } = Astro.props;
     }
 
     private close(): void {
-      document.body.classList.remove("overflow-hidden");
+      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();
+        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);
     }
   }

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

@@ -19,11 +19,16 @@ if (Astro.slots.has("default")) {
 
 {
   asChild && hasChildren ? (
-    <div class="starwind-dialog-close" data-as-child>
+    <div class="starwind-dialog-close" data-slot="dialog-close" data-as-child>
       <slot />
     </div>
   ) : (
-    <button type="button" class:list={["starwind-dialog-close", className]} {...rest}>
+    <button
+      type="button"
+      class:list={["starwind-dialog-close", className]}
+      data-slot="dialog-close"
+      {...rest}
+    >
       <slot>Demo close button</slot>
     </button>
   )

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

@@ -10,7 +10,7 @@ type Props = HTMLAttributes<"dialog"> & {
   animationDuration?: number;
 };
 
-const dialogBackdrop = tv({
+export 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",
@@ -18,7 +18,7 @@ const dialogBackdrop = tv({
   ],
 });
 
-const dialogContent = tv({
+export 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",
@@ -28,11 +28,11 @@ const dialogContent = tv({
   ],
 });
 
-const dialogCloseButton = tv({
+export 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",
+    "absolute top-5.5 right-5.5 rounded-sm [&>svg]:opacity-70 hover:[&>svg]:opacity-100",
+    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
   ],
 });
 
@@ -43,6 +43,7 @@ const { class: className, animationDuration = 200, ...rest } = Astro.props;
 <div
   class={dialogBackdrop()}
   data-state="closed"
+  data-slot="dialog-backdrop"
   style={{ animationDuration: `${animationDuration}ms` }}
 >
 </div>
@@ -50,11 +51,13 @@ const { class: className, animationDuration = 200, ...rest } = Astro.props;
 <dialog
   class={dialogContent({ class: className })}
   data-state="closed"
+  data-slot="dialog-content"
   {...rest}
   style={{ animationDuration: `${animationDuration}ms` }}
 >
   <slot />
   <button type="button" class={dialogCloseButton()} data-dialog-close aria-label="Close dialog">
-    <X class="size-5" />
+    <X class="size-5 transition-opacity" />
+    <span class="sr-only">Close</span>
   </button>
 </dialog>

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

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

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

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const dialogFooter = tv({ base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end" });
+export const dialogFooter = tv({ base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={dialogFooter({ class: className })} {...rest}>
+<div class={dialogFooter({ class: className })} data-slot="dialog-footer" {...rest}>
   <slot />
 </div>

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

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

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

@@ -10,11 +10,11 @@ type Props = Omit<HTMLAttributes<"h2">, "id"> & {
   children: any;
 };
 
-const dialogTitle = tv({ base: "text-2xl leading-none font-semibold tracking-tight" });
+export const dialogTitle = tv({ base: "text-xl leading-none font-semibold tracking-tight" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<h2 class={dialogTitle({ class: className })} {...rest}>
+<h2 class={dialogTitle({ class: className })} data-slot="dialog-title" {...rest}>
   <slot />
 </h2>

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

@@ -24,7 +24,12 @@ if (Astro.slots.has("default")) {
 
 {
   asChild && hasChildren ? (
-    <div class="starwind-dialog-trigger" data-as-child data-dialog-for={dialogFor}>
+    <div
+      class:list={["starwind-dialog-trigger", className]}
+      data-slot="dialog-trigger"
+      data-as-child
+      data-dialog-for={dialogFor}
+    >
       <slot />
     </div>
   ) : (
@@ -32,6 +37,7 @@ if (Astro.slots.has("default")) {
       type="button"
       aria-haspopup="dialog"
       class:list={["starwind-dialog-trigger", className]}
+      data-slot="dialog-trigger"
       data-dialog-for={dialogFor}
       {...rest}
     >

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

@@ -1,12 +1,26 @@
 import Dialog from "./Dialog.astro";
 import DialogClose from "./DialogClose.astro";
-import DialogContent from "./DialogContent.astro";
-import DialogDescription from "./DialogDescription.astro";
-import DialogFooter from "./DialogFooter.astro";
-import DialogHeader from "./DialogHeader.astro";
-import DialogTitle from "./DialogTitle.astro";
+import DialogContent, {
+  dialogBackdrop,
+  dialogCloseButton,
+  dialogContent,
+} from "./DialogContent.astro";
+import DialogDescription, { dialogDescription } from "./DialogDescription.astro";
+import DialogFooter, { dialogFooter } from "./DialogFooter.astro";
+import DialogHeader, { dialogHeader } from "./DialogHeader.astro";
+import DialogTitle, { dialogTitle } from "./DialogTitle.astro";
 import DialogTrigger from "./DialogTrigger.astro";
 
+const DialogVariants = {
+  dialogBackdrop,
+  dialogContent,
+  dialogCloseButton,
+  dialogDescription,
+  dialogFooter,
+  dialogHeader,
+  dialogTitle,
+};
+
 export {
   Dialog,
   DialogClose,
@@ -16,6 +30,7 @@ export {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DialogVariants,
 };
 
 export default {

package/dist/src/components/dropdown/Dropdown.astro

@@ -22,6 +22,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
   class:list={["starwind-dropdown", "relative", className]}
   data-open-on-hover={openOnHover ? "true" : undefined}
   data-close-delay={closeDelay}
+  data-slot="dropdown"
   {...rest}
 >
   <slot />

package/dist/src/components/dropdown/DropdownContent.astro

@@ -25,7 +25,7 @@ type Props = HTMLAttributes<"div"> & {
   animationDuration?: number;
 };
 
-const dropdownContent = tv({
+export const dropdownContent = tv({
   base: [
     "starwind-dropdown-content",
     "bg-popover text-popover-foreground z-50 min-w-[9rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
@@ -66,6 +66,7 @@ const {
   data-side={side}
   data-align={align}
   data-state="closed"
+  data-slot="dropdown-content"
   tabindex="-1"
   aria-orientation="vertical"
   style={{

package/dist/src/components/dropdown/DropdownItem.astro

@@ -13,7 +13,7 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
   disabled?: boolean;
 };
 
-const dropdownItem = tv({
+export const dropdownItem = tv({
   base: [
     "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 transition-colors outline-none select-none",
     "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -41,6 +41,7 @@ const { class: className, inset = false, disabled = false, as: Tag = "div", ...r
   role="menuitem"
   tabindex={disabled ? "-1" : "0"}
   data-disabled={disabled ? "true" : undefined}
+  data-slot="dropdown-item"
   {...rest}
 >
   <slot />

package/dist/src/components/dropdown/DropdownLabel.astro

@@ -9,7 +9,7 @@ type Props = HTMLAttributes<"div"> & {
   inset?: boolean;
 };
 
-const dropdownLabel = tv({
+export const dropdownLabel = tv({
   base: ["px-2 py-1.5 font-semibold"],
   variants: {
     inset: {
@@ -24,6 +24,6 @@ const dropdownLabel = tv({
 const { class: className, inset = false, ...rest } = Astro.props;
 ---
 
-<div class={dropdownLabel({ inset, class: className })} {...rest}>
+<div class={dropdownLabel({ inset, class: className })} data-slot="dropdown-label" {...rest}>
   <slot />
 </div>

package/dist/src/components/dropdown/DropdownSeparator.astro

@@ -4,8 +4,8 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const dropdownSeparator = tv({
-  base: "bg-muted -mx-1 my-1 h-px",
+export const dropdownSeparator = tv({
+  base: "bg-border -mx-1 my-1 h-px",
 });
 
 const { class: className, ...rest } = Astro.props;
@@ -15,6 +15,7 @@ const { class: className, ...rest } = Astro.props;
   class={dropdownSeparator({ class: className })}
   role="separator"
   aria-orientation="horizontal"
+  data-slot="dropdown-separator"
   {...rest}
 >
 </div>

package/dist/src/components/dropdown/DropdownTrigger.astro

@@ -9,11 +9,12 @@ type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
   asChild?: boolean;
 };
 
-const dropdownTrigger = tv({
+export const dropdownTrigger = tv({
   base: [
     "starwind-dropdown-trigger",
     "inline-flex items-center justify-center",
-    "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none",
   ],
 });
 
@@ -28,7 +29,11 @@ if (Astro.slots.has("default")) {
 
 {
   asChild && hasChildren ? (
-    <div class={`starwind-dropdown-trigger ${className}`} data-as-child>
+    <div
+      class={`starwind-dropdown-trigger ${className}`}
+      data-slot="dropdown-trigger"
+      data-as-child
+    >
       <slot />
     </div>
   ) : (
@@ -38,6 +43,7 @@ if (Astro.slots.has("default")) {
       aria-haspopup="true"
       aria-expanded="false"
       data-state="closed"
+      data-slot="dropdown-trigger"
       {...rest}
     >
       <slot />

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

@@ -1,9 +1,17 @@
 import Dropdown from "./Dropdown.astro";
-import DropdownContent from "./DropdownContent.astro";
-import DropdownItem from "./DropdownItem.astro";
-import DropdownLabel from "./DropdownLabel.astro";
-import DropdownSeparator from "./DropdownSeparator.astro";
-import DropdownTrigger from "./DropdownTrigger.astro";
+import DropdownContent, { dropdownContent } from "./DropdownContent.astro";
+import DropdownItem, { dropdownItem } from "./DropdownItem.astro";
+import DropdownLabel, { dropdownLabel } from "./DropdownLabel.astro";
+import DropdownSeparator, { dropdownSeparator } from "./DropdownSeparator.astro";
+import DropdownTrigger, { dropdownTrigger } from "./DropdownTrigger.astro";
+
+const DropdownVariants = {
+  dropdownContent,
+  dropdownItem,
+  dropdownLabel,
+  dropdownSeparator,
+  dropdownTrigger,
+};
 
 export {
   Dropdown,
@@ -12,6 +20,7 @@ export {
   DropdownLabel,
   DropdownSeparator,
   DropdownTrigger,
+  DropdownVariants,
 };
 
 export default {

package/dist/src/components/dropzone/Dropzone.astro

@@ -16,13 +16,13 @@ type Props = HTMLAttributes<"input"> & {
 // extract id separately so it can be used in the label. The input will get the same id with "-input" suffix.
 const { class: className, id, isUploading = false, ...rest } = Astro.props as Props;
 
-const root = tv({
+export const dropzone = tv({
   base: [
     "starwind-dropzone",
-    "relative flex w-full flex-col items-center justify-center gap-1 rounded-lg px-6 py-12",
-    "bg-background text-muted-foreground border-input cursor-pointer border border-dashed text-center text-sm",
-    "starwind-transition-colors data-[is-uploading=false]:hover:bg-muted/50 data-[drag-active=true]:bg-muted/50",
-    "focus-visible:outline-outline focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2",
+    "relative flex w-full flex-col items-center justify-center gap-1 rounded-lg px-6 py-12 shadow-xs",
+    "bg-background dark:bg-input/30 text-muted-foreground border-input cursor-pointer border border-dashed text-center text-sm",
+    "data-[is-uploading=false]:hover:bg-muted/50 data-[drag-active=true]:bg-muted/50 transition",
+    "focus-visible:border-outline focus-visible:ring-outline/50 outline-none focus-visible:ring-3",
   ],
 });
 ---
@@ -30,7 +30,8 @@ const root = tv({
 <label
   id={id}
   tabindex="0"
-  class={root({ class: className })}
+  class={dropzone({ class: className })}
+  data-slot="dropzone"
   data-drag-active="false"
   data-has-files="false"
   data-is-uploading={String(isUploading)}

package/dist/src/components/dropzone/DropzoneFilesList.astro

@@ -6,7 +6,7 @@ type Props = HTMLAttributes<"div">;
 
 const { class: className, ...rest } = Astro.props;
 
-const filesList = tv({
+export const dropzoneFilesList = tv({
   base: [
     "starwind-files-list",
     "mt-1 -mb-8 min-h-8",
@@ -17,9 +17,10 @@ const filesList = tv({
 ---
 
 <div
-  class={filesList({ class: className })}
+  class={dropzoneFilesList({ class: className })}
   aria-live="polite"
   aria-label="Uploaded files"
+  data-slot="dropzone-files-list"
   {...rest}
 >
 </div>

package/dist/src/components/dropzone/DropzoneLoadingIndicator.astro

@@ -2,7 +2,7 @@
 import LoaderIcon from "@tabler/icons/outline/loader-2.svg";
 ---
 
-<div class="starwind-loading-indicator hidden">
+<div class="starwind-loading-indicator hidden" data-slot="dropzone-loading-indicator">
   <slot>
     <LoaderIcon class="mx-auto size-10 animate-spin" aria-hidden="true" />
     <p class="mt-1 text-sm">Uploading file(s)...</p>

package/dist/src/components/dropzone/DropzoneUploadIndicator.astro

@@ -2,7 +2,7 @@
 import CloudUploadIcon from "@tabler/icons/outline/cloud-upload.svg";
 ---
 
-<div class="starwind-upload-indicator">
+<div class="starwind-upload-indicator" data-slot="dropzone-upload-indicator">
   <slot>
     <CloudUploadIcon class="mx-auto size-10" aria-hidden="true" />
     <p class="mt-1 text-sm">Click to upload or drag and drop</p>

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

@@ -1,9 +1,20 @@
-import Dropzone from "./Dropzone.astro";
-import DropzoneFilesList from "./DropzoneFilesList.astro";
+import Dropzone, { dropzone } from "./Dropzone.astro";
+import DropzoneFilesList, { dropzoneFilesList } from "./DropzoneFilesList.astro";
 import DropzoneLoadingIndicator from "./DropzoneLoadingIndicator.astro";
 import DropzoneUploadIndicator from "./DropzoneUploadIndicator.astro";
 
-export { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator };
+const DropzoneVariants = {
+  dropzone,
+  dropzoneFilesList,
+};
+
+export {
+  Dropzone,
+  DropzoneFilesList,
+  DropzoneLoadingIndicator,
+  DropzoneUploadIndicator,
+  DropzoneVariants,
+};
 
 export default {
   Root: Dropzone,

package/dist/src/components/input/Input.astro

@@ -4,10 +4,10 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"input"> & VariantProps<typeof input>;
 
-const input = tv({
+export const input = tv({
   base: [
-    "border-input bg-background text-foreground w-full rounded-md border",
-    "focus:outline-outline focus:ring-0 focus:outline-2 focus:outline-offset-2",
+    "border-input dark:bg-input/30 text-foreground w-full rounded-md border bg-transparent shadow-xs",
+    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] focus-visible:ring-3",
     "file:text-foreground file:my-auto file:mr-4 file:h-full file:border-0 file:bg-transparent file:text-sm file:font-medium",
     "disabled:cursor-not-allowed disabled:opacity-50",
     "peer placeholder:text-muted-foreground",
@@ -21,4 +21,4 @@ const input = tv({
 const { size, class: className, ...rest } = Astro.props;
 ---
 
-<input class={input({ size, class: className })} {...rest} />
+<input class={input({ size, class: className })} data-slot="input" {...rest} />

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

@@ -1,5 +1,7 @@
-import Input from "./Input.astro";
+import Input, { input } from "./Input.astro";
 
-export { Input };
+const InputVariants = { input };
+
+export { Input, InputVariants };
 
 export default Input;

package/dist/src/components/item/Item.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+  /**
+   * Variant of the item
+   * @default "default"
+   */
+  variant?: "default" | "outline" | "muted";
+  /**
+   * Size of the item
+   * @default "default"
+   */
+  size?: "default" | "sm";
+};
+
+export const item = tv({
+  base: [
+    "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors",
+    "[a]:hover:bg-accent/50 [a]:transition-colors",
+    "focus-visible:border-ring focus-visible:ring-outline/50 outline-none focus-visible:ring-[3px]",
+  ],
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline: "border-border",
+      muted: "bg-muted/50",
+    },
+    size: {
+      default: "gap-4 p-4",
+      sm: "gap-2.5 px-4 py-3",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+const {
+  variant = "default",
+  size = "default",
+  class: className,
+  as: Tag = "div",
+  ...rest
+} = Astro.props;
+---
+
+<Tag class={item({ variant, size, class: className })} data-slot="item" {...rest}>
+  <slot />
+</Tag>

package/dist/src/components/item/ItemActions.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const itemActions = tv({
+  base: "flex items-center gap-2",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={itemActions({ class: className })} data-slot="item-actions" {...rest}>
+  <slot />
+</div>