@rimelight/ui 0.0.4 → 0.0.6

package/src/components/slider/Slider.astro

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

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

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

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

package/src/components/table/Table.astro

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

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