@rimelight/ui 0.0.1

package/src/components/slider/Slider.astro

@@ -0,0 +1,425 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { scv } from "css-variants";
+
+export const slider = scv({
+  slots: ["root", "control", "track", "range", "thumb"],
+  base: {
+    root: "starwind-slider relative flex w-full touch-none items-center select-none data-[disabled]:op-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto",
+    control:
+      "starwind-slider-control relative w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto",
+    track:
+      "starwind-slider-track bg-muted relative overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+    range:
+      "starwind-slider-range absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+    thumb:
+      "starwind-slider-thumb absolute block size-4 shrink-0 rounded-full b bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:op-50 data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:translate-y-1/2",
+  },
+  variants: {
+    variant: {
+      default: {
+        range: "bg-foreground",
+        thumb: "border-foreground ring-outline/50",
+      },
+      primary: {
+        range: "bg-primary",
+        thumb: "border-primary ring-primary/50",
+      },
+      secondary: {
+        range: "bg-secondary",
+        thumb: "border-secondary ring-secondary/50",
+      },
+      info: {
+        range: "bg-info",
+        thumb: "border-info ring-info/50",
+      },
+      success: {
+        range: "bg-success",
+        thumb: "border-success ring-success/50",
+      },
+      warning: {
+        range: "bg-warning",
+        thumb: "border-warning ring-warning/50",
+      },
+      error: {
+        range: "bg-error",
+        thumb: "border-error ring-error/50",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type Variant = "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
+
+type Props = HTMLAttributes<"div"> & {
+  defaultValue?: number | number[];
+  value?: number | number[];
+  min?: number;
+  max?: number;
+  step?: number;
+  largeStep?: number;
+  orientation?: "horizontal" | "vertical";
+  disabled?: boolean;
+  name?: string;
+  variant?: Variant;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+};
+
+const {
+  class: className,
+  defaultValue = 0,
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  largeStep = 10,
+  orientation = "horizontal",
+  disabled = false,
+  name,
+  variant = "default",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...rest
+} = Astro.props;
+
+const { root, control, track, range, thumb } = slider({ variant });
+
+const initialValue = value ?? defaultValue ?? min;
+const values = Array.isArray(initialValue) ? initialValue : [initialValue];
+const isRange = values.length > 1;
+
+function getPercentage(val: number): number {
+  return ((val - min) / (max - min)) * 100;
+}
+
+const rangeStart = isRange ? getPercentage(Math.min(...(values as number[]))) : 0;
+const rangeEnd = isRange
+  ? getPercentage(Math.max(...(values as number[])))
+  : getPercentage((values[0] as number) ?? min);
+---
+
+<div
+  class:list={[root, className]}
+  data-orientation={orientation}
+  data-disabled={disabled ? "" : undefined}
+  role="group"
+  aria-labelledby={ariaLabelledby}
+  data-min={min}
+  data-max={max}
+  data-step={step}
+  data-large-step={largeStep}
+  {...rest}
+  data-slot="slider"
+>
+  <div class={control} data-slot="slider-control" data-orientation={orientation}>
+    <div class={track} data-slot="slider-track" data-orientation={orientation}>
+      <div
+        class={range}
+        data-slot="slider-range"
+        data-orientation={orientation}
+        style={orientation === "horizontal"
+          ? `left: ${rangeStart}%; width: ${rangeEnd - rangeStart}%`
+          : `bottom: ${rangeStart}%; height: ${rangeEnd - rangeStart}%`}
+      >
+      </div>
+    </div>
+    {
+      values.map((val, index) => (
+        <div
+          class={thumb}
+          data-slot="slider-thumb"
+          data-index={index}
+          data-orientation={orientation}
+          style={
+            orientation === "horizontal"
+              ? `left: ${getPercentage(val)}%`
+              : `bottom: ${getPercentage(val)}%`
+          }
+          tabindex={disabled ? -1 : 0}
+          role="slider"
+          aria-label={ariaLabel}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={val}
+          aria-orientation={orientation}
+          aria-disabled={disabled}
+        >
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={val}
+            name={name ? (isRange ? `${name}[${index}]` : name) : undefined}
+            disabled={disabled}
+            tabindex={-1}
+            aria-hidden="true"
+            class="sr-only"
+          />
+        </div>
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  class StarwindSlider {
+    private root: HTMLElement;
+    private track: HTMLElement;
+    private range: HTMLElement;
+    private thumbs: HTMLElement[];
+    private inputs: HTMLInputElement[];
+    private min: number;
+    private max: number;
+    private step: number;
+    private largeStep: number;
+    private orientation: "horizontal" | "vertical";
+    private disabled: boolean;
+    private values: number[];
+    private activeThumbIndex: number = -1;
+    private dragging: boolean = false;
+
+    constructor(root: HTMLElement) {
+      this.root = root;
+      this.track = root.querySelector('[data-slot="slider-track"]')!;
+      this.range = root.querySelector('[data-slot="slider-range"]')!;
+      this.thumbs = Array.from(root.querySelectorAll('[data-slot="slider-thumb"]'));
+      this.inputs = Array.from(root.querySelectorAll('input[type="range"]'));
+
+      this.min = Number(root.dataset.min) || 0;
+      this.max = Number(root.dataset.max) || 100;
+      this.step = Number(root.dataset.step) || 1;
+      this.largeStep = Number(root.dataset.largeStep) || 10;
+      this.orientation = (root.dataset.orientation as "horizontal" | "vertical") || "horizontal";
+      this.disabled = root.hasAttribute("data-disabled");
+
+      this.values = this.inputs.map((input) => Number(input.value));
+
+      this.init();
+    }
+
+    private init(): void {
+      if (this.disabled) return;
+
+      this.thumbs.forEach((thumb, index) => {
+        thumb.addEventListener("pointerdown", (e) => this.handleThumbPointerDown(e, index));
+        thumb.addEventListener("keydown", (e) => this.handleKeyDown(e, index));
+        thumb.addEventListener("focus", () => this.handleFocus(index));
+        thumb.addEventListener("blur", () => this.handleBlur());
+      });
+
+      this.track.addEventListener("pointerdown", (e) => this.handleTrackClick(e));
+
+      document.addEventListener("pointermove", (e) => this.handlePointerMove(e));
+      document.addEventListener("pointerup", () => this.handlePointerUp());
+    }
+
+    private getPercentage(val: number): number {
+      return ((val - this.min) / (this.max - this.min)) * 100;
+    }
+
+    private getValueFromPosition(clientX: number, clientY: number): number {
+      const rect = this.track.getBoundingClientRect();
+      let percentage: number;
+
+      if (this.orientation === "horizontal") {
+        percentage = (clientX - rect.left) / rect.width;
+      } else {
+        percentage = 1 - (clientY - rect.top) / rect.height;
+      }
+
+      percentage = Math.max(0, Math.min(1, percentage));
+      const rawValue = this.min + percentage * (this.max - this.min);
+      return this.snapToStep(rawValue);
+    }
+
+    private snapToStep(value: number): number {
+      const snapped = Math.round((value - this.min) / this.step) * this.step + this.min;
+      return Math.max(this.min, Math.min(this.max, snapped));
+    }
+
+    private updateValue(index: number, newValue: number): void {
+      const isRange = this.values.length > 1;
+
+      if (isRange) {
+        if (index === 0 && newValue > this.values[1]!) {
+          newValue = this.values[1]!;
+        } else if (index === 1 && newValue < this.values[0]!) {
+          newValue = this.values[0]!;
+        }
+      }
+
+      this.values[index] = newValue;
+      if (this.inputs[index]) {
+        this.inputs[index]!.value = String(newValue);
+      }
+
+      this.updateVisuals();
+      this.dispatchChangeEvent();
+    }
+
+    private updateVisuals(): void {
+      const isRange = this.values.length > 1;
+      const rangeStart = isRange ? this.getPercentage(Math.min(...this.values)) : 0;
+      const rangeEnd = isRange
+        ? this.getPercentage(Math.max(...this.values))
+        : this.getPercentage(this.values[0]!);
+
+      if (this.orientation === "horizontal") {
+        this.range.style.left = `${rangeStart}%`;
+        this.range.style.width = `${rangeEnd - rangeStart}%`;
+      } else {
+        this.range.style.bottom = `${rangeStart}%`;
+        this.range.style.height = `${rangeEnd - rangeStart}%`;
+      }
+
+      this.thumbs.forEach((thumb, index) => {
+        const val = this.values[index];
+        if (val === undefined) return;
+        const percentage = this.getPercentage(val);
+        if (this.orientation === "horizontal") {
+          thumb.style.left = `${percentage}%`;
+        } else {
+          thumb.style.bottom = `${percentage}%`;
+        }
+        thumb.setAttribute("aria-valuenow", String(this.values[index]));
+      });
+    }
+
+    private dispatchChangeEvent(): void {
+      const value = this.values.length === 1 ? this.values[0] : [...this.values];
+      this.root.dispatchEvent(
+        new CustomEvent("slider-change", {
+          detail: { value },
+          bubbles: true,
+        }),
+      );
+    }
+
+    private handleThumbPointerDown(e: PointerEvent, index: number): void {
+      if (this.disabled) return;
+      e.preventDefault();
+      this.activeThumbIndex = index;
+      this.dragging = true;
+      this.root.setAttribute("data-dragging", "");
+      if (this.thumbs[index]) {
+        this.thumbs[index]!.setAttribute("data-dragging", "");
+        this.thumbs[index]!.focus();
+      }
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    }
+
+    private handlePointerMove(e: PointerEvent): void {
+      if (!this.dragging || this.activeThumbIndex === -1) return;
+      const newValue = this.getValueFromPosition(e.clientX, e.clientY);
+      this.updateValue(this.activeThumbIndex, newValue);
+    }
+
+    private handlePointerUp(): void {
+      if (!this.dragging) return;
+      this.dragging = false;
+      this.root.removeAttribute("data-dragging");
+      this.thumbs.forEach((thumb) => thumb.removeAttribute("data-dragging"));
+
+      const value = this.values.length === 1 ? this.values[0] : [...this.values];
+      this.root.dispatchEvent(
+        new CustomEvent("slider-commit", {
+          detail: { value },
+          bubbles: true,
+        }),
+      );
+
+      this.activeThumbIndex = -1;
+    }
+
+    private handleTrackClick(e: PointerEvent): void {
+      if (this.disabled) return;
+      const newValue = this.getValueFromPosition(e.clientX, e.clientY);
+
+      let closestIndex = 0;
+      if (this.values.length > 1) {
+        const distances = this.values.map((v) => Math.abs(v - newValue));
+        closestIndex = distances.indexOf(Math.min(...distances));
+      }
+
+      this.updateValue(closestIndex, newValue);
+      this.thumbs[closestIndex]?.focus();
+    }
+
+    private handleKeyDown(e: KeyboardEvent, index: number): void {
+      if (this.disabled) return;
+
+      const val = this.values[index]!;
+      if (val === undefined) return;
+      let newValue = val;
+      const isHorizontal = this.orientation === "horizontal";
+
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          e.preventDefault();
+          newValue += isHorizontal === (e.key === "ArrowRight") ? this.step : -this.step;
+          if (e.shiftKey) newValue = val + this.largeStep;
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          e.preventDefault();
+          newValue -= isHorizontal === (e.key === "ArrowLeft") ? this.step : -this.step;
+          if (e.shiftKey) newValue = val - this.largeStep;
+          break;
+        case "PageUp":
+          e.preventDefault();
+          if (newValue === undefined) break;
+          newValue += this.largeStep;
+          break;
+        case "PageDown":
+          e.preventDefault();
+          if (newValue === undefined) break;
+          newValue -= this.largeStep;
+          break;
+        case "Home":
+          e.preventDefault();
+          newValue = this.min;
+          break;
+        case "End":
+          e.preventDefault();
+          newValue = this.max;
+          break;
+        default:
+          return;
+      }
+
+      if (newValue === undefined) return;
+      newValue = this.snapToStep(newValue);
+      this.updateValue(index, newValue);
+    }
+
+    private handleFocus(index: number): void {
+      this.root.setAttribute("data-focused", "");
+      this.thumbs[index]?.setAttribute("data-focused", "");
+    }
+
+    private handleBlur(): void {
+      this.root.removeAttribute("data-focused");
+      this.thumbs.forEach((thumb) => thumb.removeAttribute("data-focused"));
+    }
+  }
+
+  const sliderInstances = new WeakMap<HTMLElement, StarwindSlider>();
+
+  function initSliders(): void {
+    document.querySelectorAll<HTMLElement>('[data-slot="slider"]').forEach((slider) => {
+      if (!sliderInstances.has(slider)) {
+        sliderInstances.set(slider, new StarwindSlider(slider));
+      }
+    });
+  }
+
+  initSliders();
+  document.addEventListener("astro:after-swap", initSliders);
+  document.addEventListener("starwind:init", initSliders);
+</script>

package/src/components/spinner/Spinner.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconLoader from "~icons/lucide/loader";
+
+type Props = Omit<HTMLAttributes<"svg">, "role" | "aria-label">;
+
+export const spinner = cv({
+  base: "size-4 animate-spin",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span
+  role="status"
+  aria-label="Loading"
+  class:list={[spinner(), className]}
+  {...rest}
+  data-slot="spinner"
+>
+  <IconLoader />
+</span>

package/src/components/switch/Switch.astro

@@ -0,0 +1,192 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = Omit<HTMLAttributes<"button">, "role" | "type" | "aria-checked"> & {
+  /**
+   * Unique identifier for the switch component.
+   */
+  id: string;
+  /**
+   * Optional text label to display alongside the switch.
+   */
+  label?: string;
+  /**
+   * Controls the checked state of the switch.
+   */
+  checked?: boolean;
+  /**
+   * Custom padding in pixels to apply around the switch.
+   */
+  padding?: number;
+  /**
+   * Size variant of the switch component.
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Visual style variant of the switch.
+   * @default "default"
+   */
+  variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
+};
+
+const {
+  id,
+  label,
+  checked = false,
+  padding,
+  size = "md",
+  variant = "default",
+  class: className,
+  ...rest
+} = Astro.props;
+
+// if no specific padding is set, base it off of size
+let newPadding = padding;
+if (!padding) {
+  newPadding = size === "sm" ? 2.5 : size === "lg" ? 4 : 3;
+}
+
+const sizeMultiplier = size === "sm" ? 4 : size === "lg" ? 6 : 5;
+
+let ariaLabel;
+if (rest["aria-label"]) {
+  ariaLabel = rest["aria-label"];
+  delete rest["aria-label"];
+} else if (label) {
+  ariaLabel = label;
+} else {
+  ariaLabel = "switch";
+}
+
+export const switchButton = cv({
+  base: [
+    "border-input bg-muted inline-flex h-(--height) w-(--width) items-center rounded-full border",
+    "group peer ring-offset-background transition outline-none focus-visible:ring-3",
+    "not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:op-50",
+  ],
+  variants: {
+    variant: {
+      primary: "aria-checked:border-primary focus-visible:border-primary/70 focus:ring-primary/50",
+      secondary:
+        "aria-checked:border-secondary focus-visible:border-secondary/70 focus:ring-secondary/50",
+      default: "aria-checked:border-foreground focus-visible:border-outline focus:ring-outline/50",
+      info: "aria-checked:border-info focus-visible:border-info/70 focus:ring-info/50",
+      success: "aria-checked:border-success focus-visible:border-success/70 focus:ring-success/50",
+      warning: "aria-checked:border-warning focus-visible:border-warning/70 focus:ring-warning/50",
+      error: "aria-checked:border-error focus-visible:border-error/70 focus:ring-error/50",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export const switchToggle = cv({
+  base: [
+    "bg-foreground i-block transform rounded-full transition-transform",
+    "group-aria-checked:translate-x-(--translation) group-aria-[checked=false]:translate-x-[calc(var(--padding)-var(--border-offset))]",
+  ],
+  variants: { size: { sm: "size-4", md: "size-5", lg: "size-6" } },
+  defaultVariants: { size: "md" },
+});
+
+export const switchLabel = cv({
+  base: "text-foreground ml-3xs font-medium peer-disabled:cursor-not-allowed peer-disabled:op-70",
+  variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg" } },
+  defaultVariants: { size: "md" },
+});
+---
+
+<div class="starwind-switch flex items-center">
+  <button
+    type="button"
+    id={id}
+    role="switch"
+    aria-checked={checked ? "true" : "false"}
+    aria-label={ariaLabel}
+    class:list={[switchButton({ variant }), className]}
+    style={{
+      "--padding": `${newPadding}px`,
+      "--height": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2))`,
+      "--width": `calc((var(--spacing) * ${sizeMultiplier} * 2) + (var(--padding) * 3))`,
+      "--border-offset": "1px",
+    }}
+    {...rest}
+    data-slot="switch-button"
+  >
+    <span
+      class={switchToggle({ size })}
+      data-slot="switch-toggle"
+      style={{
+        "--translation": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2) - var(--border-offset))`,
+      }}></span>
+  </button>
+  {
+    label && (
+      <label for={id} class={switchLabel({ size })} data-slot="switch-label">
+        {label}
+      </label>
+    )
+  }
+</div>
+
+<script>
+  import type { SwitchChangeEvent } from "./SwitchTypes";
+
+  class SwitchHandler {
+    private switchButton: HTMLButtonElement;
+
+    constructor(switchButton: HTMLButtonElement) {
+      this.switchButton = switchButton;
+      this.setupEventListeners();
+    }
+
+    private setupEventListeners(): void {
+      this.switchButton.addEventListener("click", () => this.handleStateChange());
+      this.switchButton.addEventListener("keydown", (event) => this.handleKeyDown(event));
+    }
+
+    private handleStateChange(): void {
+      if (this.switchButton.disabled) return;
+
+      const isChecked = this.switchButton.getAttribute("aria-checked") === "true";
+      const newState = !isChecked;
+
+      this.switchButton.setAttribute("aria-checked", newState.toString());
+
+      // Dispatch custom event with the new state
+      const event = new CustomEvent<SwitchChangeEvent["detail"]>("starwind-switch:change", {
+        detail: { checked: newState, switchId: this.switchButton.id },
+        bubbles: true,
+        cancelable: true,
+      });
+
+      this.switchButton.dispatchEvent(event);
+    }
+
+    private handleKeyDown(event: KeyboardEvent): void {
+      if (this.switchButton.disabled) return;
+
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        this.handleStateChange();
+      }
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const switchInstances = new WeakMap<HTMLButtonElement, SwitchHandler>();
+
+  const setupSwitches = () => {
+    document
+      .querySelectorAll<HTMLButtonElement>('.starwind-switch button[role="switch"]')
+      .forEach((switchButton) => {
+        if (!switchInstances.has(switchButton)) {
+          switchInstances.set(switchButton, new SwitchHandler(switchButton));
+        }
+      });
+  };
+
+  setupSwitches();
+  document.addEventListener("astro:after-swap", setupSwitches);
+  document.addEventListener("starwind:init", setupSwitches);
+</script>

package/src/components/switch/SwitchTypes.ts

@@ -0,0 +1,6 @@
+export interface SwitchChangeEvent extends CustomEvent {
+  detail: {
+    checked: boolean
+    switchId: string
+  }
+}

package/src/components/table/Table.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"table"> & VariantProps<typeof table>;
+
+export const table = cv({
+  base: "w-full caption-bottom text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+  <table class:list={[table(), className]} {...rest} data-slot="table">
+    <slot />
+  </table>
+</div>

package/src/components/table/TableBody.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"tbody"> & VariantProps<typeof tableBody>;
+
+export const tableBody = cv({
+  base: "[&_tr:last-child]:border-0",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tbody class:list={[tableBody(), className]} {...rest} data-slot="table-body">
+  <slot />
+</tbody>