@starwind-ui/core 1.11.2 → 1.12.1

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

@@ -1,37 +0,0 @@
----
-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}
->
-  <slot name="icon">
-    <ArrowLeft />
-  </slot>
-  <slot>
-    <span class="sr-only">Previous slide</span>
-  </slot>
-</Button>

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

@@ -1,191 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,127 +0,0 @@
----
-import Check from "@tabler/icons/outline/check.svg";
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-type Props = Omit<HTMLAttributes<"input">, "type"> &
-  VariantProps<typeof checkbox> & {
-    /**
-     * Optional label text to display next to the checkbox
-     */
-    label?: string;
-  };
-
-export const checkbox = tv({
-  slots: {
-    base: "starwind-checkbox relative flex items-center space-x-2",
-    input: [
-      "peer border-input bg-background dark:bg-input/30 shrink-0 transform-gpu rounded-sm border",
-      "transition-all focus-visible:ring-3",
-      "outline-0 focus:ring-0 focus:ring-offset-0",
-      "not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
-    ],
-    icon: [
-      "pointer-events-none absolute stroke-3 p-0.5 opacity-0 transition-opacity peer-checked:opacity-100",
-      "starwind-check-icon",
-    ],
-    label:
-      "font-medium peer-not-disabled:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-  },
-  variants: {
-    size: {
-      sm: { input: "size-4", icon: "size-4", label: "text-sm" },
-      md: { input: "size-5", icon: "size-5", label: "text-base" },
-      lg: { input: "size-6", icon: "size-6", label: "text-lg" },
-    },
-    variant: {
-      default: {
-        input: "checked:bg-foreground focus-visible:ring-outline/50 focus-visible:border-outline",
-        icon: "text-background",
-      },
-      primary: {
-        input:
-          "checked:bg-primary checked:border-primary focus-visible:ring-primary/50 focus-visible:border-primary",
-        icon: "text-primary-foreground",
-      },
-      secondary: {
-        input:
-          "checked:bg-secondary checked:border-secondary focus-visible:ring-secondary/50 focus-visible:border-secondary",
-        icon: "text-secondary-foreground",
-      },
-      info: {
-        input:
-          "checked:bg-info checked:border-info focus-visible:ring-info/50 focus-visible:border-info",
-        icon: "text-info-foreground",
-      },
-      success: {
-        input:
-          "checked:bg-success checked:border-success focus-visible:ring-success/50 focus-visible:border-success",
-        icon: "text-success-foreground",
-      },
-      warning: {
-        input:
-          "checked:bg-warning checked:border-warning focus-visible:ring-warning/50 focus-visible:border-warning",
-        icon: "text-warning-foreground",
-      },
-      error: {
-        input:
-          "checked:bg-error checked:border-error focus-visible:ring-error/50 focus-visible:border-error",
-        icon: "text-error-foreground",
-      },
-    },
-  },
-  defaultVariants: { size: "md", variant: "default" },
-});
-
-const { id, label, checked, size, variant, class: className, ...rest } = Astro.props;
-
-const { base, input, icon, label: labelClass } = checkbox({ size, variant });
----
-
-<div class={base()}>
-  <input
-    type="checkbox"
-    id={id}
-    class={input({ class: className })}
-    data-slot="checkbox-input"
-    {checked}
-    {...rest}
-  />
-  <Check class={icon()} />
-  {
-    label && (
-      <label for={id} class={labelClass()} data-slot="checkbox-label">
-        {label}
-      </label>
-    )
-  }
-</div>
-
-<style>
-  .starwind-checkbox input[type="checkbox"]:checked {
-    background-image: none;
-  }
-
-  /* Check drawing animation */
-  .starwind-check-icon {
-    stroke-dasharray: 65;
-    stroke-dashoffset: 65;
-    opacity: 0;
-  }
-
-  .starwind-checkbox input[type="checkbox"]:checked + .starwind-check-icon {
-    animation: draw-check 0.3s ease forwards;
-    animation-delay: 0.15s;
-  }
-
-  @keyframes draw-check {
-    0% {
-      stroke-dashoffset: 65;
-      opacity: 1;
-    }
-    100% {
-      stroke-dashoffset: 0;
-      opacity: 1;
-    }
-  }
-</style>

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

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

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

@@ -1,263 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-
-type Props = HTMLAttributes<"div">;
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class:list={["starwind-dialog", className]} data-slot="dialog" {...rest}>
-  <slot />
-</div>
-
-<script>
-  class DialogHandler {
-    private triggers: HTMLButtonElement[] = [];
-    private dialog: HTMLDialogElement | null = null;
-    private closeButtons: HTMLButtonElement[] = [];
-    private backdrop: HTMLElement | null = null;
-    private dialogId: string;
-    /**
-     * The duration of the animation in milliseconds. This is used to calculate the
-     * duration of close animation before hiding the dialog and backdrop
-     */
-    private animationDuration: number;
-
-    constructor(dialogWrapper: HTMLElement, dialogNumber: number) {
-      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) {
-        this.dialogId = dialogWrapper.id;
-      } else {
-        this.dialogId = `starwind-dialog${dialogNumber}`;
-        dialogWrapper.id = this.dialogId;
-      }
-
-      // 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);
-      } else if (animationDurationString.endsWith("s")) {
-        // using something like @playform/compress might optimize to use "s" instead of "ms"
-        this.animationDuration = parseFloat(animationDurationString) * 1000;
-      } else {
-        this.animationDuration = this.dialog.dataset.closeDuration
-          ? parseFloat(this.dialog.dataset.closeDuration)
-          : 200;
-      }
-
-      // Find internal triggers and handle them
-      const internalTriggers = dialogWrapper.querySelectorAll(".starwind-dialog-trigger");
-      internalTriggers.forEach((triggerElement) => {
-        const tempTrigger = triggerElement as HTMLElement;
-        let trigger: HTMLButtonElement;
-
-        if (tempTrigger?.hasAttribute("data-as-child")) {
-          trigger = tempTrigger.firstElementChild as HTMLButtonElement;
-        } else {
-          trigger = tempTrigger as HTMLButtonElement;
-        }
-
-        if (trigger) {
-          this.triggers.push(trigger);
-        }
-      });
-
-      // Find external triggers that target this dialog
-      this.findExternalTriggers();
-
-      // if closeButtons are set with asChild, swap the wrapper with its first child
-      const tempCloseButtons = dialogWrapper.querySelectorAll(
-        ".starwind-dialog-close",
-      ) as NodeListOf<HTMLElement>;
-      tempCloseButtons.forEach((button: HTMLElement) => {
-        if (button.hasAttribute("data-as-child")) {
-          const childElement = button.firstElementChild;
-          if (childElement) {
-            childElement.classList.add("starwind-dialog-close");
-            button.parentNode?.replaceChild(childElement, button);
-          }
-        }
-        return button;
-      });
-
-      // Convert NodeList to Array for consistency with triggers
-      this.closeButtons = Array.from(
-        dialogWrapper.querySelectorAll(".starwind-dialog-close"),
-      ) as HTMLButtonElement[];
-
-      // if essential elements are not there, exit
-      if (!this.dialog || !this.backdrop) return;
-
-      this.setupAccessibility(dialogNumber);
-      this.setupEvents();
-    }
-
-    private setupAccessibility(dialogNumber: number): void {
-      // get the first heading element in the dialog
-      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);
-      }
-    }
-
-    /**
-     * Find all external triggers that target this dialog
-     */
-    private findExternalTriggers(): void {
-      const externalTriggers = document.querySelectorAll(
-        `.starwind-dialog-trigger[data-dialog-for="${this.dialogId}"]`,
-      );
-
-      externalTriggers.forEach((triggerElement) => {
-        // Skip if this is an internal trigger we already processed
-        const dialogWrapper = triggerElement.closest(".starwind-dialog");
-        if (dialogWrapper && dialogWrapper.id === this.dialogId) {
-          return;
-        }
-
-        let trigger: HTMLButtonElement;
-        if (triggerElement.hasAttribute("data-as-child")) {
-          trigger = triggerElement.firstElementChild as HTMLButtonElement;
-        } else {
-          trigger = triggerElement as HTMLButtonElement;
-        }
-
-        if (trigger && !this.triggers.includes(trigger)) {
-          this.triggers.push(trigger);
-        }
-      });
-    }
-
-    private setupEvents(): void {
-      if (!this.dialog) return;
-      // Add click listeners to all triggers
-      this.triggers.forEach((trigger) => {
-        trigger.addEventListener("click", () => {
-          this.open();
-        });
-      });
-
-      // Add click handlers to all close buttons
-      this.closeButtons?.forEach((button) => {
-        button.addEventListener("click", () => {
-          // Only close if this is the topmost dialog
-          const openDialogs = document.querySelectorAll("dialog[open]");
-          if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
-            this.close();
-          }
-        });
-      });
-
-      // Close on click outside
-      this.dialog.addEventListener("click", (e) => {
-        if (!this.dialog) return;
-        const dialogDimensions = this.dialog.getBoundingClientRect();
-        const clickedInDialog =
-          e.clientX >= dialogDimensions.left &&
-          e.clientX <= dialogDimensions.right &&
-          e.clientY >= dialogDimensions.top &&
-          e.clientY <= dialogDimensions.bottom;
-
-        if (!clickedInDialog) {
-          // Only close if this is the topmost dialog
-          const openDialogs = document.querySelectorAll("dialog[open]");
-          if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
-            this.close();
-          }
-        }
-      });
-
-      // Handle escape key
-      this.dialog.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") {
-          // prevent default dialog closing behavior so we can add closing animation
-          e.preventDefault();
-          // Only close if this is the topmost dialog
-          const openDialogs = document.querySelectorAll("dialog[open]");
-          if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
-            this.close();
-          }
-        }
-      });
-
-      // Intercept form submissions to handle dialog close
-      const forms = this.dialog.querySelectorAll("form");
-      forms.forEach((form) => {
-        form.addEventListener("submit", (e) => {
-          /**
-           * Default form.method = "dialog" submissions cause the dialog to close
-           * Default form.method = "post" submissions do not close the dialog
-           * Here we intercept the form submission and manage the dialog closing if method = "dialog"
-           * so we can add closing animation
-           * Normal form event listeners for "submit" will still get the form data
-           */
-          if (form.method === "dialog") {
-            e.preventDefault();
-            // Only close if this is the topmost dialog
-            const openDialogs = document.querySelectorAll("dialog[open]");
-            if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
-              this.close();
-            }
-          }
-        });
-      });
-    }
-
-    private open(): void {
-      if (!this.dialog || !this.backdrop) return;
-      this.dialog.showModal();
-      document.body.classList.add("overflow-hidden");
-      this.backdrop.classList.remove("hidden");
-      this.backdrop.dataset.state = "open";
-      this.dialog.dataset.state = "open";
-    }
-
-    private close(): void {
-      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();
-        const stillOpen = document.querySelectorAll("dialog[open]").length;
-        if (stillOpen === 0) {
-          document.body.classList.remove("overflow-hidden");
-        }
-      }, this.animationDuration);
-    }
-  }
-
-  // Store instances in a WeakMap to avoid memory leaks
-  const dialogInstances = new WeakMap<HTMLElement, DialogHandler>();
-
-  // Initialize all dialogs
-  const setupDialogs = () => {
-    document.querySelectorAll(".starwind-dialog").forEach((dialogWrapper, idx) => {
-      const wrapper = dialogWrapper as HTMLElement;
-      if (!dialogInstances.has(wrapper)) {
-        dialogInstances.set(wrapper, new DialogHandler(wrapper, idx));
-      }
-    });
-  };
-
-  setupDialogs();
-  document.addEventListener("astro:after-swap", setupDialogs);
-</script>
-
-<style>
-  .overflow-hidden {
-    overflow: hidden;
-  }
-</style>

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

@@ -1,35 +0,0 @@
----
-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;
-};
-
-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="starwind-dialog-close" data-slot="dialog-close" data-as-child>
-      <slot />
-    </div>
-  ) : (
-    <button
-      type="button"
-      class:list={["starwind-dialog-close", className]}
-      data-slot="dialog-close"
-      {...rest}
-    >
-      <slot>Demo close button</slot>
-    </button>
-  )
-}