@rimelight/ui 0.0.1

package/src/components/card/CardFooter.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardFooter = cv({
+  base: "bg-muted/50 flex items-center rounded-b-xl border-t p-xl group-data-[size=sm]/card:p-2xl",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[cardFooter(), className]} {...rest} data-slot="card-footer">
+  <slot />
+</div>

package/src/components/card/CardHeader.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardHeader = cv({
+  base: [
+    "@container/card-header grid auto-rows-min items-start gap-1 px-xl group-data-[size=sm]/card:px-2xl",
+    "has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[cardHeader(), className]} {...rest} data-slot="card-header">
+  <slot />
+</div>

package/src/components/card/CardTitle.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const cardTitle = cv({
+  base: "font-heading text-xl leading-snug font-medium group-data-[size=sm]/card:text-base",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[cardTitle(), className]} {...rest} data-slot="card-title">
+  <slot />
+</div>

package/src/components/carousel/Carousel.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { type EmblaOptionsType } from "embla-carousel";
+import { cv } from "css-variants";
+
+export const carousel = cv({
+  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:list={[carousel(), className]}
+  role="region"
+  aria-roledescription="carousel"
+  data-axis={orientation === "horizontal" ? "x" : "y"}
+  data-opts={JSON.stringify(opts)}
+  data-auto-init={autoInit}
+  {...rest}
+  data-slot="carousel"
+>
+  <slot />
+</div>
+
+<script>
+  import { initCarousel } from "./carousel-script";
+
+  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/src/components/carousel/CarouselContent.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export const carouselContent = cv({
+  base: "overflow-hidden",
+});
+
+const carouselContainer = cv({
+  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()} {...rest} data-slot="carousel-content">
+  <div class:list={[carouselContainer(), className]} data-slot="carousel-container">
+    <slot />
+  </div>
+</div>

package/src/components/carousel/CarouselItem.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export const carouselItem = cv({
+  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"
+  class:list={[carouselItem(), className]}
+  {...rest}
+  data-slot="carousel-item"
+>
+  <slot />
+</div>

package/src/components/carousel/CarouselNext.astro

@@ -0,0 +1,39 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+import IconArrowRight from "~icons/lucide/arrow-right";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Button from "../button/Button.astro";
+
+export const carouselNext = cv({
+  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> & { orientation?: "horizontal" | "vertical" };
+
+const { class: className = "", variant = "outline", size = "icon", orientation = "horizontal", ...rest } = Astro.props;
+---
+
+<Button
+  variant={variant}
+  size={size}
+  class:list={[carouselNext({ orientation }), className]}
+  aria-label="Next slide"
+  {...rest}
+  data-slot="carousel-next"
+>
+  <slot name="icon">
+    <IconArrowRight />
+  </slot>
+  <slot>
+    <span class="sr-only">Next slide</span>
+  </slot>
+</Button>
+

package/src/components/carousel/CarouselPrevious.astro

@@ -0,0 +1,41 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+import IconArrowLeft from "~icons/lucide/arrow-left";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Button from "../button/Button.astro";
+
+export const carouselPrevious = cv({
+  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> & {
+  orientation?: "horizontal" | "vertical";
+};
+
+const { class: className = "", variant = "outline", size = "icon", orientation = "horizontal", ...rest } = Astro.props;
+---
+
+<Button
+  variant={variant}
+  size={size}
+  class:list={[carouselPrevious({ orientation }), className]}
+  aria-label="Previous slide"
+  {...rest}
+  data-slot="carousel-previous"
+>
+  <slot name="icon">
+    <IconArrowLeft />
+  </slot>
+  <slot>
+    <span class="sr-only">Previous slide</span>
+  </slot>
+</Button>
+

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

@@ -0,0 +1,188 @@
+import EmblaCarousel, {
+  type EmblaCarouselType,
+  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"]')
+
+  if (!(viewportElement instanceof HTMLElement)) {
+    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(".starwind-carousel-previous")
+  const nextButton = carouselElement.querySelector(".starwind-carousel-next")
+
+  const prevButtonEl = prevButton instanceof HTMLButtonElement ? prevButton : null
+  const nextButtonEl = nextButton instanceof HTMLButtonElement ? nextButton : null
+
+  // 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 (prevButtonEl) {
+      prevButtonEl.disabled = !canScrollPrev
+      prevButtonEl.setAttribute("aria-disabled", (!canScrollPrev).toString())
+    }
+
+    if (nextButtonEl) {
+      nextButtonEl.disabled = !canScrollNext
+      nextButtonEl.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
+    prevButtonEl?.addEventListener("click", prevClickHandler)
+    nextButtonEl?.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 (prevButtonEl) {
+        prevButtonEl.removeEventListener("click", prevClickHandler)
+      }
+      if (nextButtonEl) {
+        nextButtonEl.removeEventListener("click", nextClickHandler)
+      }
+      carouselElement.removeEventListener("keydown", keydownHandler)
+
+      // Destroy the Embla instance
+      emblaApi.destroy()
+    }
+  }
+}

package/src/components/carousel/index.ts

@@ -0,0 +1 @@
+export * from "./carousel-script"

package/src/components/checkbox/Checkbox.astro

@@ -0,0 +1,133 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { scv } from "css-variants";
+import IconCheck from "~icons/lucide/check";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = Omit<HTMLAttributes<"input">, "type"> &
+  VariantProps<typeof checkbox> & {
+    /**
+     * Optional label text to display next to the checkbox
+     */
+    label?: string;
+  };
+
+export const checkbox = scv({
+  slots: ["base", "input", "icon", "label"],
+  base: {
+    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:op-50",
+      "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+    ],
+    icon: [
+      "pointer-events-none absolute stroke-3 p-0.5 op-0 transition-op peer-checked:op-100",
+      "starwind-check-icon",
+    ],
+    label:
+      "font-medium peer-not-disabled:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:op-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:list={[input, className]}
+    {checked}
+    {...rest}
+    data-slot="checkbox-input"
+  />
+  <span class={icon}>
+    <IconCheck />
+  </span>
+  {
+    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>