@starwind-ui/core 1.8.0 → 1.10.0

package/dist/src/components/card/Card.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const card = tv({ base: "bg-card text-card-foreground rounded-2xl border shadow-sm" });
+export const card = tv({ base: "bg-card text-card-foreground rounded-2xl border shadow-sm" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={card({ class: className })} {...rest}>
+<div class={card({ class: className })} data-slot="card" {...rest}>
   <slot />
 </div>

package/dist/src/components/card/CardContent.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const cardContent = tv({ base: "p-8 pt-0" });
+export const cardContent = tv({ base: "p-8 pt-0" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={cardContent({ class: className })} {...rest}>
+<div class={cardContent({ class: className })} data-slot="card-content" {...rest}>
   <slot />
 </div>

package/dist/src/components/card/CardDescription.astro

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

package/dist/src/components/card/CardFooter.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const cardFooter = tv({ base: "flex items-center p-8 pt-0" });
+export const cardFooter = tv({ base: "flex items-center p-8 pt-0" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={cardFooter({ class: className })} {...rest}>
+<div class={cardFooter({ class: className })} data-slot="card-footer" {...rest}>
   <slot />
 </div>

package/dist/src/components/card/CardHeader.astro

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

package/dist/src/components/card/CardTitle.astro

@@ -4,11 +4,11 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const cardTitle = tv({ base: "text-3xl leading-none font-semibold tracking-tight" });
+export const cardTitle = tv({ base: "text-xl leading-none font-semibold tracking-tight" });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={cardTitle({ class: className })} {...rest}>
+<div class={cardTitle({ class: className })} data-slot="card-title" {...rest}>
   <slot />
 </div>

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

@@ -1,11 +1,20 @@
-import Card from "./Card.astro";
-import CardContent from "./CardContent.astro";
-import CardDescription from "./CardDescription.astro";
-import CardFooter from "./CardFooter.astro";
-import CardHeader from "./CardHeader.astro";
-import CardTitle from "./CardTitle.astro";
+import Card, { card } from "./Card.astro";
+import CardContent, { cardContent } from "./CardContent.astro";
+import CardDescription, { cardDescription } from "./CardDescription.astro";
+import CardFooter, { cardFooter } from "./CardFooter.astro";
+import CardHeader, { cardHeader } from "./CardHeader.astro";
+import CardTitle, { cardTitle } from "./CardTitle.astro";
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+const CardVariants = {
+  card,
+  cardContent,
+  cardDescription,
+  cardFooter,
+  cardHeader,
+  cardTitle,
+};
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardVariants };
 
 export default {
   Root: Card,

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,12 +11,12 @@ 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: [
-      "peer border-input bg-background starwind-transition-colors shrink-0 transform-gpu rounded-sm border",
-      "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:transition-none",
+      "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",
     ],
@@ -35,28 +35,37 @@ const checkbox = tv({
     },
     variant: {
       default: {
-        input: "checked:bg-foreground focus-visible:outline-outline",
+        input: "checked:bg-foreground focus-visible:ring-outline/50 focus-visible:border-outline",
         icon: "text-background",
       },
       primary: {
-        input: "checked:bg-primary focus-visible:outline-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 focus-visible:outline-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 focus-visible:outline-info", icon: "text-info-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 focus-visible:outline-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 focus-visible:outline-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 focus-visible:outline-error",
+        input:
+          "checked:bg-error checked:border-error focus-visible:ring-error/50 focus-visible:border-error",
         icon: "text-error-foreground",
       },
     },
@@ -70,11 +79,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;