@starwind-ui/core 1.14.0 → 1.15.1

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

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

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

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

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

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,128 +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",
-      "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
-    ],
-    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;