@starwind-ui/core 1.7.3 → 1.9.0

package/dist/src/components/carousel/Carousel.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type EmblaOptionsType } from "embla-carousel";
+import { tv } from "tailwind-variants";
+
+const carousel = tv({
+  base: "starwind-carousel group/carousel relative",
+});
+
+export interface Props extends HTMLAttributes<"div"> {
+  orientation?: "horizontal" | "vertical";
+  opts?: EmblaOptionsType;
+  autoInit?: boolean;
+}
+
+const {
+  class: className,
+  orientation = "horizontal",
+  opts = {},
+  autoInit = true,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={carousel({ class: className })}
+  role="region"
+  aria-roledescription="carousel"
+  data-slot="carousel"
+  data-axis={orientation === "horizontal" ? "x" : "y"}
+  data-opts={JSON.stringify(opts)}
+  data-auto-init={autoInit}
+  {...rest}
+>
+  <slot />
+</div>
+
+<script>
+  import { initCarousel } from "./index";
+
+  const setupCarousels = () => {
+    const carousels = document.querySelectorAll(".starwind-carousel") as NodeListOf<HTMLElement>;
+    carousels.forEach((carousel) => {
+      if (carousel.dataset.autoInit === "false") {
+        return;
+      }
+      initCarousel(carousel);
+    });
+  };
+
+  document.addEventListener("DOMContentLoaded", setupCarousels);
+
+  // Re-initialize after Astro page transitions
+  document.addEventListener("astro:after-swap", setupCarousels);
+</script>

package/dist/src/components/carousel/CarouselContent.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+const carouselContent = tv({
+  base: "overflow-hidden",
+});
+
+const carouselContainer = tv({
+  base: [
+    "flex group-data-[axis=y]/carousel:flex-col",
+    "group-data-[axis=x]/carousel:-ml-4",
+    "group-data-[axis=y]/carousel:-mt-4",
+  ],
+});
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className = "", ...rest } = Astro.props;
+---
+
+<div class={carouselContent()} data-slot="carousel-content" {...rest}>
+  <div class={carouselContainer({ class: className })} data-slot="carousel-container">
+    <slot />
+  </div>
+</div>

package/dist/src/components/carousel/CarouselItem.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+const carouselItem = tv({
+  base: [
+    "min-w-0 shrink-0 grow-0 basis-full",
+    "group-data-[axis=x]/carousel:pl-4",
+    "group-data-[axis=y]/carousel:pt-4",
+  ],
+});
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className = "", ...rest } = Astro.props;
+---
+
+<div
+  role="group"
+  aria-roledescription="slide"
+  data-slot="carousel-item"
+  class={carouselItem({ class: className })}
+  {...rest}
+>
+  <slot />
+</div>

package/dist/src/components/carousel/CarouselNext.astro

@@ -0,0 +1,33 @@
+---
+import ArrowRight from "@tabler/icons/outline/arrow-right.svg";
+import type { ComponentProps } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Button } from "@/components/starwind/button";
+
+export const carouselNext = tv({
+  base: [
+    "starwind-carousel-next absolute size-8 rounded-full",
+    // Horizontal positioning
+    "group-data-[axis=x]/carousel:top-1/2 group-data-[axis=x]/carousel:-right-12 group-data-[axis=x]/carousel:-translate-y-1/2",
+    // Vertical positioning
+    "group-data-[axis=y]/carousel:-bottom-12 group-data-[axis=y]/carousel:left-1/2 group-data-[axis=y]/carousel:-translate-x-1/2 group-data-[axis=y]/carousel:rotate-90",
+  ],
+});
+
+type Props = ComponentProps<typeof Button>;
+
+const { class: className = "", variant = "outline", size = "icon", ...rest } = Astro.props;
+---
+
+<Button
+  data-slot="carousel-next"
+  variant={variant}
+  size={size}
+  class={carouselNext({ class: className })}
+  aria-label="Next slide"
+  {...rest}
+>
+  <ArrowRight />
+  <span class="sr-only">Next slide</span>
+</Button>

package/dist/src/components/carousel/CarouselPrevious.astro

@@ -0,0 +1,33 @@
+---
+import ArrowLeft from "@tabler/icons/outline/arrow-left.svg";
+import type { ComponentProps } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Button } from "@/components/starwind/button";
+
+export const carouselPrevious = tv({
+  base: [
+    "starwind-carousel-previous absolute size-8 rounded-full",
+    // Horizontal positioning
+    "group-data-[axis=x]/carousel:top-1/2 group-data-[axis=x]/carousel:-left-12 group-data-[axis=x]/carousel:-translate-y-1/2",
+    // Vertical positioning
+    "group-data-[axis=y]/carousel:-top-12 group-data-[axis=y]/carousel:left-1/2 group-data-[axis=y]/carousel:-translate-x-1/2 group-data-[axis=y]/carousel:rotate-90",
+  ],
+});
+
+type Props = ComponentProps<typeof Button>;
+
+const { class: className = "", variant = "outline", size = "icon", ...rest } = Astro.props;
+---
+
+<Button
+  data-slot="carousel-previous"
+  variant={variant}
+  size={size}
+  class={carouselPrevious({ class: className })}
+  aria-label="Previous slide"
+  {...rest}
+>
+  <ArrowLeft />
+  <span class="sr-only">Previous slide</span>
+</Button>

package/dist/src/components/carousel/carousel-script.ts

@@ -0,0 +1,191 @@
+import EmblaCarousel, {
+  type EmblaCarouselType,
+  type EmblaEventType,
+  type EmblaOptionsType,
+  type EmblaPluginType,
+} from "embla-carousel";
+
+export type CarouselApi = EmblaCarouselType;
+
+export interface CarouselOptions {
+  opts?: EmblaOptionsType;
+  plugins?: EmblaPluginType[];
+  setApi?: (api: CarouselApi) => void;
+}
+
+export interface CarouselManager {
+  api: CarouselApi;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: () => boolean;
+  canScrollNext: () => boolean;
+  destroy: () => void;
+}
+
+export function initCarousel(
+  carouselElement: HTMLElement,
+  options: CarouselOptions = {},
+): CarouselManager | null {
+  // don't re-initialize if already initialized
+  if (carouselElement.dataset.initialized === "true") return null;
+  carouselElement.dataset.initialized = "true";
+
+  if (!carouselElement) {
+    console.warn("Carousel element not found");
+    return null;
+  }
+
+  // Find content element - Embla expects the viewport element, not the container
+  const viewportElement = carouselElement.querySelector(
+    '[data-slot="carousel-content"]',
+  ) as HTMLElement;
+  if (!viewportElement) {
+    console.warn("Carousel content element not found");
+    return null;
+  }
+
+  // Get configuration from data attributes
+  const axisData = carouselElement.dataset.axis;
+  const axis: EmblaOptionsType["axis"] = axisData === "y" ? "y" : "x";
+
+  // Safely parse data options
+  let dataOpts = {};
+  try {
+    const optsString = carouselElement.dataset.opts;
+    if (optsString && optsString !== "undefined" && optsString !== "null") {
+      dataOpts = JSON.parse(optsString);
+    }
+  } catch (e) {
+    console.warn("Failed to parse carousel opts:", e);
+    dataOpts = {};
+  }
+
+  // Ensure dataOpts is a valid object
+  if (!dataOpts || typeof dataOpts !== "object") {
+    dataOpts = {};
+  }
+
+  // Merge options - ensure we always have a valid object
+  const emblaOptions: EmblaOptionsType = {
+    axis,
+    ...dataOpts,
+    ...(options.opts || {}),
+  };
+
+  // Handle plugins - EmblaCarousel expects undefined when no plugins, not empty array
+  const plugins = options.plugins && options.plugins.length > 0 ? options.plugins : undefined;
+
+  // console.log("ID:", carouselElement.id);
+  // console.log("Plugins:", plugins);
+  // console.log("Options:", emblaOptions);
+
+  // Find navigation buttons
+  const prevButton = carouselElement.querySelector(
+    '[data-slot="carousel-previous"]',
+  ) as HTMLButtonElement;
+  const nextButton = carouselElement.querySelector(
+    '[data-slot="carousel-next"]',
+  ) as HTMLButtonElement;
+
+  // Initialize Embla
+  let emblaApi: EmblaCarouselType;
+  if (plugins) {
+    emblaApi = EmblaCarousel(viewportElement, emblaOptions, plugins);
+  } else {
+    emblaApi = EmblaCarousel(viewportElement, emblaOptions);
+  }
+
+  // Update button states
+  const updateButtons = () => {
+    const canScrollPrev = emblaApi.canScrollPrev();
+    const canScrollNext = emblaApi.canScrollNext();
+
+    if (prevButton) {
+      prevButton.disabled = !canScrollPrev;
+      prevButton.setAttribute("aria-disabled", (!canScrollPrev).toString());
+    }
+
+    if (nextButton) {
+      nextButton.disabled = !canScrollNext;
+      nextButton.setAttribute("aria-disabled", (!canScrollNext).toString());
+    }
+  };
+
+  // Event handlers for cleanup
+  const prevClickHandler = () => emblaApi.scrollPrev();
+  const nextClickHandler = () => emblaApi.scrollNext();
+  const keydownHandler = (event: KeyboardEvent) => {
+    if (axis === "y") {
+      // Vertical axis: ArrowUp = previous, ArrowDown = next
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        emblaApi.scrollPrev();
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        emblaApi.scrollNext();
+      }
+    } else {
+      // Horizontal axis (default): ArrowLeft = previous, ArrowRight = next
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        emblaApi.scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        emblaApi.scrollNext();
+      }
+    }
+  };
+
+  // Setup event listeners
+  const setupEventListeners = () => {
+    // Navigation button listeners
+    prevButton?.addEventListener("click", prevClickHandler);
+    nextButton?.addEventListener("click", nextClickHandler);
+
+    // Keyboard navigation
+    carouselElement.addEventListener("keydown", keydownHandler);
+  };
+
+  // Setup user API callback
+  const setupUserCallbacks = () => {
+    if (options.setApi) {
+      options.setApi(emblaApi);
+    }
+  };
+
+  // Initialize everything
+  updateButtons();
+  setupEventListeners();
+  setupUserCallbacks();
+
+  // Setup internal event listeners
+  emblaApi.on("select", updateButtons);
+  emblaApi.on("init", () => {
+    updateButtons();
+  });
+  emblaApi.on("reInit", () => {
+    updateButtons();
+  });
+
+  // Return manager interface
+  return {
+    api: emblaApi,
+    scrollPrev: () => emblaApi.scrollPrev(),
+    scrollNext: () => emblaApi.scrollNext(),
+    canScrollPrev: () => emblaApi.canScrollPrev(),
+    canScrollNext: () => emblaApi.canScrollNext(),
+    destroy: () => {
+      // Remove event listeners to prevent memory leaks
+      if (prevButton) {
+        prevButton.removeEventListener("click", prevClickHandler);
+      }
+      if (nextButton) {
+        nextButton.removeEventListener("click", nextClickHandler);
+      }
+      carouselElement.removeEventListener("keydown", keydownHandler);
+
+      // Destroy the Embla instance
+      emblaApi.destroy();
+    },
+  };
+}

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

@@ -0,0 +1,32 @@
+import Carousel from "./Carousel.astro";
+import {
+  type CarouselApi,
+  type CarouselManager,
+  type CarouselOptions,
+  initCarousel,
+} from "./carousel-script";
+import CarouselContent from "./CarouselContent.astro";
+import CarouselItem from "./CarouselItem.astro";
+import CarouselNext from "./CarouselNext.astro";
+import CarouselPrevious from "./CarouselPrevious.astro";
+
+export {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+  type CarouselManager,
+  CarouselNext,
+  type CarouselOptions,
+  CarouselPrevious,
+  initCarousel,
+};
+
+export default {
+  Root: Carousel,
+  Content: CarouselContent,
+  Item: CarouselItem,
+  Next: CarouselNext,
+  Previous: CarouselPrevious,
+  init: initCarousel,
+};

package/dist/src/components/checkbox/Checkbox.astro

@@ -11,7 +11,7 @@ type Props = Omit<HTMLAttributes<"input">, "type"> &
     label?: string;
   };
 
-const checkbox = tv({
+export const checkbox = tv({
   slots: {
     base: "starwind-checkbox relative flex items-center space-x-2",
     input: [
@@ -70,11 +70,18 @@ const { base, input, icon, label: labelClass } = checkbox({ size, variant });
 ---
 
 <div class={base()}>
-  <input type="checkbox" id={id} class={input({ class: className })} {checked} {...rest} />
+  <input
+    type="checkbox"
+    id={id}
+    class={input({ class: className })}
+    data-slot="checkbox-input"
+    {checked}
+    {...rest}
+  />
   <Check class={icon()} />
   {
     label && (
-      <label for={id} class={labelClass()}>
+      <label for={id} class={labelClass()} data-slot="checkbox-label">
         {label}
       </label>
     )

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

@@ -1,5 +1,7 @@
-import Checkbox from "./Checkbox.astro";
+import Checkbox, { checkbox } from "./Checkbox.astro";
 
-export { Checkbox };
+const CheckboxVariants = { checkbox };
+
+export { Checkbox, CheckboxVariants };
 
 export default Checkbox;

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,7 +28,7 @@ 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",
@@ -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" />
+    <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-2xl 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>