@rimelight/ui 0.0.4 → 0.0.6

package/src/components/carousel/CarouselContent.astro

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

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

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

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

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

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

package/src/components/checkbox/Checkbox.astro

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

package/src/components/collapsible/Collapsible.astro

@@ -1,161 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type Props = HTMLAttributes<"div"> & {
-  /**
-   * Whether the collapsible panel is initially open
-   */
-  defaultOpen?: boolean;
-  /**
-   * Whether the component should ignore user interaction
-   */
-  disabled?: boolean;
-};
-
-export const collapsible = cv({ base: "starwind-collapsible" });
-
-const { defaultOpen = false, disabled = false, class: className, ...rest } = Astro.props;
-
-// Keys owned by the runtime that should not be spread from rest
-const runtimeOwnedKeys = ["id", "data-state", "data-disabled", "class"] as const;
-const sanitizedRest = Object.fromEntries(
-  Object.entries(rest).filter(
-    ([key]) => !runtimeOwnedKeys.includes(key as (typeof runtimeOwnedKeys)[number]),
-  ),
-);
-
-// Compute final values, preferring consumer-provided values
-const finalDataState =
-  (rest as Record<string, unknown>)["data-state"] ?? (defaultOpen ? "open" : "closed");
-const finalDataDisabled =
-  (rest as Record<string, unknown>)["data-disabled"] ?? (disabled ? "" : undefined);
-const finalId = (rest as Record<string, unknown>)["id"] as string | undefined;
----
-
-<div
-  id={finalId}
-  class:list={[collapsible(), className]}
-  data-state={finalDataState}
-  data-disabled={finalDataDisabled}
-  {...sanitizedRest}
-  data-slot="collapsible"
->
-  <slot />
-</div>
-
-<script>
-  type CollapsibleState = "open" | "closed";
-
-  /**
-   * Handles the functionality of a collapsible component.
-   * Manages open/close state and accessibility attributes.
-   */
-  class CollapsibleHandler {
-    private root: HTMLElement;
-    private trigger: HTMLElement | null;
-    private content: HTMLElement | null;
-    private collapsibleId: string;
-
-    constructor(root: HTMLElement, idx: number) {
-      this.root = root;
-      this.collapsibleId = `starwind-collapsible-${idx}`;
-
-      this.trigger = root.querySelector<HTMLElement>(".starwind-collapsible-trigger");
-      this.content = root.querySelector<HTMLElement>(".starwind-collapsible-content");
-
-      if (this.trigger && this.content) {
-        this.setupAccessibility();
-        this.setupEventListeners();
-        this.setInitialState();
-      }
-    }
-
-    private setupAccessibility(): void {
-      if (!this.trigger || !this.content) return;
-
-      const triggerId = `${this.collapsibleId}-trigger`;
-      const contentId = `${this.collapsibleId}-content`;
-
-      // Use "set if missing" semantics for IDs
-      if (!this.trigger.id) this.trigger.id = triggerId;
-      if (!this.content.id) this.content.id = contentId;
-
-      // Use actual IDs (consumer-provided or generated) for ARIA
-      this.trigger.setAttribute("aria-controls", this.content.id);
-      this.content.setAttribute("aria-labelledby", this.trigger.id);
-      this.content.setAttribute("role", "region");
-
-      this.updateAriaExpanded();
-    }
-
-    private setInitialState(): void {
-      const isOpen = this.root.dataset.state === "open";
-      this.setState(isOpen);
-    }
-
-    private setupEventListeners(): void {
-      if (!this.trigger) return;
-
-      this.trigger.addEventListener("click", () => {
-        if (this.root.dataset.disabled !== undefined) return;
-        this.toggle();
-      });
-    }
-
-    private toggle(): void {
-      const isOpen = this.root.dataset.state === "open";
-      this.setState(!isOpen);
-    }
-
-    private setState(isOpen: boolean): void {
-      const state: CollapsibleState = isOpen ? "open" : "closed";
-
-      this.root.dataset.state = state;
-
-      if (this.trigger) {
-        this.trigger.dataset.state = state;
-        if (isOpen) {
-          this.trigger.dataset.panelOpen = "";
-        } else {
-          delete this.trigger.dataset.panelOpen;
-        }
-      }
-
-      if (this.content) {
-        this.content.dataset.state = state;
-        if (isOpen) {
-          this.content.hidden = false;
-        } else {
-          this.content.hidden = true;
-        }
-      }
-
-      this.updateAriaExpanded();
-    }
-
-    private updateAriaExpanded(): void {
-      if (!this.trigger) return;
-      const isOpen = this.root.dataset.state === "open";
-      this.trigger.setAttribute("aria-expanded", isOpen.toString());
-    }
-  }
-
-  const collapsibleInstances = new WeakMap<HTMLElement, CollapsibleHandler>();
-  let collapsibleCounter = 0;
-
-  const setupCollapsibles = () => {
-    document.querySelectorAll<HTMLElement>(".starwind-collapsible").forEach((collapsible) => {
-      if (!collapsibleInstances.has(collapsible)) {
-        collapsibleInstances.set(
-          collapsible,
-          new CollapsibleHandler(collapsible, collapsibleCounter++),
-        );
-      }
-    });
-  };
-
-  setupCollapsibles();
-  document.addEventListener("astro:after-swap", setupCollapsibles);
-  document.addEventListener("starwind:init", setupCollapsibles);
-</script>

package/src/components/collapsible/CollapsibleContent.astro

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type Props = HTMLAttributes<"div">;
-
-export const collapsibleContent = cv({
-  base: "starwind-collapsible-content",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div
-  class:list={[collapsibleContent(), className]}
-  data-state="closed"
-  hidden
-  {...rest}
-  data-slot="collapsible-content"
->
-  <slot />
-</div>

package/src/components/collapsible/CollapsibleTrigger.astro

@@ -1,44 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type Props = HTMLAttributes<"button"> & {
-  /**
-   * When true, renders as a wrapper div instead of a button,
-   * allowing a custom trigger element as a child
-   */
-  asChild?: boolean;
-};
-
-export const collapsibleTrigger = cv({
-  base: "starwind-collapsible-trigger",
-});
-
-const { class: className, asChild = false, ...rest } = Astro.props;
-
-let hasChildren = false;
-if (Astro.slots.has("default")) {
-  hasChildren = true;
-}
----
-
-{
-  asChild && hasChildren ? (
-    <div
-      class:list={[collapsibleTrigger(), className]}
-      data-slot="collapsible-trigger"
-      data-as-child
-    >
-      <slot />
-    </div>
-  ) : (
-    <button
-      type="button"
-      class:list={[collapsibleTrigger(), className]}
-      {...rest}
-      data-slot="collapsible-trigger"
-    >
-      <slot />
-    </button>
-  )
-}