@rimelight/ui 0.0.1

package/src/components/input-otp/InputOtp.astro

@@ -0,0 +1,352 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  maxLength?: number;
+  value?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  pattern?: RegExp | string;
+  name?: string;
+  id?: string;
+  required?: boolean;
+};
+
+export const inputOtp = cv({
+  base: "starwind-input-otp flex items-center gap-md outline-none has-disabled:op-50",
+});
+
+const {
+  maxLength = 6,
+  value,
+  defaultValue,
+  disabled = false,
+  pattern,
+  name,
+  id,
+  required,
+  class: className,
+  ...rest
+} = Astro.props;
+
+let patternStr = "\\d";
+if (pattern) {
+  const stripAnchorsRegex = /^\^|\$$/g;
+  if (pattern instanceof RegExp) {
+    patternStr = pattern.source.replace(stripAnchorsRegex, "");
+  } else {
+    patternStr = pattern.replace(stripAnchorsRegex, "");
+  }
+}
+
+const numericPatterns = ["\\d", "[0-9]", "\\d+", "[0-9]+"];
+const isNumericOnly = numericPatterns.includes(patternStr);
+const inputMode = isNumericOnly ? "numeric" : "text";
+---
+
+<div
+  class:list={[inputOtp(), className]}
+  data-max-length={maxLength}
+  data-value={value || defaultValue || ""}
+  data-disabled={disabled}
+  data-pattern={patternStr}
+  tabindex={disabled ? "-1" : "0"}
+  {...rest}
+  data-slot="input-otp"
+>
+  <input
+    autocomplete="one-time-code"
+    inputmode={inputMode}
+    tabindex="-1"
+    name={name}
+    id={id}
+    class="sr-only"
+    required={required}
+    maxlength={maxLength.toString()}
+    value={value || defaultValue || ""}
+    disabled={disabled}
+    data-otp-hidden-input
+  />
+  <slot />
+</div>
+
+<script>
+  import type { InputOtpChangeEvent } from "./InputOtpTypes";
+
+  class InputOtpHandler {
+    private container: HTMLElement;
+    private slots: HTMLElement[];
+    private hiddenInput: HTMLInputElement | null;
+    private maxLength: number;
+    private containerId: string;
+    private pattern: RegExp;
+    private observer: MutationObserver | null = null;
+    private currentIndex: number = 0;
+    private values: string[] = [];
+
+    constructor(container: HTMLElement, idx: number) {
+      this.container = container;
+      this.containerId = container.id || `starwind-input-otp-${idx}`;
+      if (!container.id) {
+        container.id = this.containerId;
+      }
+      this.maxLength = parseInt(container.dataset.maxLength || "6", 10);
+      const patternStr = container.dataset.pattern || "\\d";
+      this.pattern = new RegExp(`^${patternStr}$`);
+      this.slots = Array.from(container.querySelectorAll<HTMLElement>("[data-otp-slot]"));
+      this.hiddenInput = container.querySelector<HTMLInputElement>("input[data-otp-hidden-input]");
+      this.values = Array.from({ length: this.slots.length }, () => "");
+      this.init();
+    }
+
+    private init() {
+      if (this.slots.length === 0) return;
+
+      const isDisabled = this.container.dataset.disabled === "true";
+      if (isDisabled) {
+        this.container.setAttribute("tabindex", "-1");
+        return;
+      }
+
+      const initialValue = this.container.dataset.value || "";
+      if (initialValue) {
+        this.setValue(initialValue);
+      }
+
+      this.setupEventListeners();
+      this.setupValueSync();
+      this.updateSlots();
+    }
+
+    private setupValueSync() {
+      this.observer = new MutationObserver(() => {
+        const containerValue = this.container.dataset.value || "";
+        const currentValue = this.getValue();
+        if (containerValue !== currentValue) {
+          this.setValue(containerValue);
+        }
+      });
+
+      this.observer.observe(this.container, {
+        attributes: true,
+        attributeFilter: ["data-value"],
+      });
+    }
+
+    private setupEventListeners() {
+      this.container.addEventListener("keydown", (e) => this.handleKeyDown(e));
+      this.container.addEventListener("focus", () => this.handleContainerFocus());
+      this.container.addEventListener("blur", () => this.handleContainerBlur());
+      this.container.addEventListener("paste", (e) => this.handlePaste(e));
+      this.container.addEventListener("click", (e) => this.handleClick(e));
+
+      if (this.hiddenInput) {
+        this.hiddenInput.addEventListener("input", (e) => this.handleHiddenInput(e));
+        this.hiddenInput.addEventListener("focus", () => this.updateSlots());
+        this.hiddenInput.addEventListener("blur", () => this.updateSlots());
+      }
+    }
+
+    private handleKeyDown(e: KeyboardEvent) {
+      const isDisabled = this.container.dataset.disabled === "true";
+      if (isDisabled) return;
+
+      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        e.preventDefault();
+        const char = e.key;
+        if (this.pattern.test(char)) {
+          this.setSlotValue(this.currentIndex, char);
+          if (this.currentIndex < this.slots.length - 1) {
+            this.currentIndex++;
+          }
+          this.updateSlots();
+          this.updateValue();
+        }
+      } else if (e.key === "Backspace") {
+        e.preventDefault();
+        if (this.values[this.currentIndex]) {
+          this.setSlotValue(this.currentIndex, "");
+        } else if (this.currentIndex > 0) {
+          this.currentIndex--;
+          this.setSlotValue(this.currentIndex, "");
+        }
+        this.updateSlots();
+        this.updateValue();
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (this.currentIndex > 0) {
+          this.currentIndex--;
+          this.updateSlots();
+        }
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (this.currentIndex < this.slots.length - 1) {
+          this.currentIndex++;
+          this.updateSlots();
+        }
+      } else if (e.key === "Delete") {
+        e.preventDefault();
+        this.setSlotValue(this.currentIndex, "");
+        this.updateSlots();
+        this.updateValue();
+      }
+    }
+
+    private handlePaste(e: ClipboardEvent) {
+      const isDisabled = this.container.dataset.disabled === "true";
+      if (isDisabled) return;
+
+      e.preventDefault();
+      const pastedData = e.clipboardData?.getData("text") || "";
+      const matchedChars = this.filterByPattern(pastedData).slice(0, this.maxLength);
+
+      if (matchedChars.length === 0) return;
+
+      for (let i = 0; i < matchedChars.length && this.currentIndex + i < this.slots.length; i++) {
+        this.setSlotValue(this.currentIndex + i, matchedChars[i]!);
+      }
+
+      this.currentIndex = Math.min(this.currentIndex + matchedChars.length, this.slots.length - 1);
+      this.updateSlots();
+      this.updateValue();
+    }
+
+    private handleClick(_e: MouseEvent) {
+      const isDisabled = this.container.dataset.disabled === "true";
+      if (isDisabled) return;
+
+      this.currentIndex = this.getNextEmptyIndex();
+      this.updateSlots();
+      this.focusHiddenInput();
+    }
+
+    private getNextEmptyIndex(): number {
+      const firstEmptyIndex = this.values.findIndex((v) => !v);
+      if (firstEmptyIndex !== -1) {
+        return firstEmptyIndex;
+      }
+      return this.slots.length - 1;
+    }
+
+    private handleHiddenInput(e: Event) {
+      const input = e.target as HTMLInputElement;
+      const newValue = input.value;
+      const matchedChars = this.filterByPattern(newValue).slice(0, this.maxLength);
+
+      for (let i = 0; i < this.slots.length; i++) {
+        this.values[i] = matchedChars[i] || "";
+      }
+
+      this.currentIndex = Math.min(matchedChars.length, this.slots.length - 1);
+      if (matchedChars.length === this.slots.length) {
+        this.currentIndex = this.slots.length - 1;
+      }
+
+      this.updateSlots();
+      this.updateValue();
+    }
+
+    private focusHiddenInput() {
+      if (this.hiddenInput) {
+        this.hiddenInput.focus();
+      }
+    }
+
+    private handleContainerFocus() {
+      this.focusHiddenInput();
+    }
+
+    private handleContainerBlur() {
+      this.updateSlots();
+    }
+
+    private setSlotValue(index: number, value: string) {
+      if (index >= 0 && index < this.values.length) {
+        this.values[index] = value;
+      }
+    }
+
+    private updateSlots() {
+      const isFocused =
+        document.activeElement === this.container || document.activeElement === this.hiddenInput;
+
+      this.slots.forEach((slot, index) => {
+        const charElement = slot.querySelector("[data-otp-char]");
+        const caretElement = slot.querySelector("[data-otp-caret]");
+        const char = this.values[index] || "";
+
+        if (charElement) {
+          charElement.textContent = char;
+        }
+
+        const isActive = isFocused && index === this.currentIndex;
+        slot.setAttribute("data-active", isActive ? "true" : "false");
+
+        if (caretElement) {
+          if (isActive && !char) {
+            caretElement.classList.remove("hidden");
+            caretElement.classList.add("flex");
+          } else {
+            caretElement.classList.add("hidden");
+            caretElement.classList.remove("flex");
+          }
+        }
+      });
+    }
+
+    private filterByPattern(value: string): string[] {
+      return value.split("").filter((char) => this.pattern.test(char));
+    }
+
+    private setValue(value: string) {
+      const matchedChars = this.filterByPattern(value).slice(0, this.maxLength);
+      for (let i = 0; i < this.slots.length; i++) {
+        this.values[i] = matchedChars[i] || "";
+      }
+      this.currentIndex = Math.min(matchedChars.length, this.slots.length - 1);
+      this.updateSlots();
+    }
+
+    private updateValue() {
+      const value = this.values.join("");
+      this.container.dataset.value = value;
+
+      if (this.hiddenInput) {
+        this.hiddenInput.value = value;
+      }
+
+      this.dispatchChangeEvent(value);
+    }
+
+    public getValue(): string {
+      return this.values.join("");
+    }
+
+    private dispatchChangeEvent(value: string) {
+      const event = new CustomEvent<InputOtpChangeEvent["detail"]>("starwind-input-otp:change", {
+        bubbles: true,
+        detail: {
+          value,
+          inputOtpId: this.containerId,
+        },
+      });
+      this.container.dispatchEvent(event);
+    }
+  }
+
+  const inputOtpInstances = new WeakMap<HTMLElement, InputOtpHandler>();
+  let inputOtpCounter = 0;
+
+  const setupInputOtps = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-input-otp").forEach((container) => {
+      if (!inputOtpInstances.has(container)) {
+        inputOtpInstances.set(container, new InputOtpHandler(container, inputOtpCounter++));
+      }
+    });
+  };
+
+  setupInputOtps();
+  document.addEventListener("astro:after-swap", setupInputOtps);
+  document.addEventListener("starwind:init", setupInputOtps);
+</script>

package/src/components/input-otp/InputOtpGroup.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const inputOtpGroup = cv({
+  base: "flex items-center",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[inputOtpGroup(), className]} {...rest} data-slot="input-otp-group">
+  <slot />
+</div>

package/src/components/input-otp/InputOtpSeparator.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconMinus from "~icons/lucide/minus";
+
+type Props = HTMLAttributes<"div">;
+
+export const inputOtpSeparator = cv({
+  base: "text-muted-foreground",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  aria-hidden="true"
+  class:list={[inputOtpSeparator(), className]}
+  role="separator"
+  {...rest}
+  data-slot="input-otp-separator"
+>
+  <slot name="icon">
+    <IconMinus class="size-6" />
+  </slot>
+</div>

package/src/components/input-otp/InputOtpSlot.astro

@@ -0,0 +1,50 @@
+---
+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<"div"> &
+  VariantProps<typeof inputOtpSlot> & {
+    index?: number;
+  };
+
+export const inputOtpSlot = cv({
+  base: [
+    "border-input dark:bg-input/30 text-foreground b bg-transparent text-center shadow-xs",
+    "relative flex items-center justify-center border-y border-r text-sm transition-all outline-none",
+    "first:rounded-l-md first:border-l last:rounded-r-md disabled:cursor-not-allowed disabled:op-50",
+    "data-[active=true]:border-outline data-[active=true]:ring-outline/50 data-[active=true]:z-10 data-[active=true]:ring-3",
+    "data-[active=true]:aria-invalid:ring-error/40",
+    "aria-invalid:border-error data-[active=true]:aria-invalid:border-error",
+  ],
+  variants: {
+    size: {
+      sm: "size-9 text-sm",
+      md: "size-11 text-base",
+      lg: "size-12 text-lg",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+const { size, index, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[inputOtpSlot({ size }), className]}
+  data-otp-slot
+  data-index={index}
+  {...rest}
+  data-slot="input-otp-slot"
+>
+  <span data-otp-char></span>
+  <div
+    class="pointer-events-none absolute inset-0 hidden items-center justify-center"
+    data-otp-caret
+  >
+    <slot name="caret">
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+    </slot>
+  </div>
+</div>

package/src/components/input-otp/InputOtpTypes.ts

@@ -0,0 +1,6 @@
+export interface InputOtpChangeEvent extends CustomEvent {
+  detail: {
+    value: string
+    inputOtpId?: string
+  }
+}

package/src/components/item/Item.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types";
+import { cv } from "css-variants";
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+  /**
+   * Variant of the item
+   * @default "default"
+   */
+  variant?: "default" | "outline" | "muted";
+  /**
+   * Size of the item
+   * @default "default"
+   */
+  size?: "default" | "sm";
+};
+
+export const item = cv({
+  base: [
+    "group/item flex flex-wrap items-center rounded-md b border-transparent text-sm transition-colors",
+    "[a]:hover:bg-accent/50 [a]:transition-colors",
+    "focus-visible:border-ring focus-visible:ring-outline/50 outline-none focus-visible:ring-4xs",
+  ],
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline: "border-border",
+      muted: "bg-muted/50",
+    },
+    size: {
+      default: "gap-3xs p-3xs",
+      sm: "gap-2xs px-4 py-3",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+const {
+  variant = "default",
+  size = "default",
+  class: className,
+  as: Tag = "div",
+  ...rest
+} = Astro.props;
+---
+
+<Tag class:list={[item({ variant, size }), className]} data-slot="item" {...rest}>
+  <slot />
+</Tag>

package/src/components/item/ItemActions.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const itemActions = cv({
+  base: "flex items-center gap-3xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[itemActions(), className]} {...rest} data-slot="item-actions">
+  <slot />
+</div>

package/src/components/item/ItemContent.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const itemContent = cv({
+  base: "flex flex-1 flex-col gap-1.5 [&+[data-slot=item-content]]:flex-none",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[itemContent(), className]} {...rest} data-slot="item-content">
+  <slot />
+</div>

package/src/components/item/ItemDescription.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"p">;
+
+export const itemDescription = cv({
+  base: [
+    "text-muted-foreground line-clamp-2 leading-snug font-normal text-balance",
+    "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<p class:list={[itemDescription(), className]} {...rest} data-slot="item-description">
+  <slot />
+</p>

package/src/components/item/ItemFooter.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const itemFooter = cv({
+  base: "flex basis-full items-center justify-between gap-3xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[itemFooter(), className]} {...rest} data-slot="item-footer">
+  <slot />
+</div>

package/src/components/item/ItemGroup.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const itemGroup = cv({
+  base: "group/item-group flex flex-col",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div role="list" class:list={[itemGroup(), className]} {...rest} data-slot="item-group">
+  <slot />
+</div>

package/src/components/item/ItemHeader.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const itemHeader = cv({
+  base: "flex basis-full items-center justify-between gap-3xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[itemHeader(), className]} {...rest} data-slot="item-header">
+  <slot />
+</div>

package/src/components/item/ItemMedia.astro

@@ -0,0 +1,40 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Variant of the item media
+   * @default "default"
+   */
+  variant?: "default" | "icon" | "image";
+};
+
+export const itemMedia = cv({
+  base: [
+    "flex shrink-0 items-center justify-center gap-md [&_svg]:pointer-events-none",
+    "group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start",
+  ],
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      icon: "bg-muted size-8 rounded-sm b [&_svg:not([class*='size-'])]:size-4",
+      image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const { variant = "default", class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[itemMedia({ variant }), className]}
+  data-variant={variant}
+  {...rest}
+  data-slot="item-media"
+>
+  <slot />
+</div>

package/src/components/item/ItemSeparator.astro

@@ -0,0 +1,23 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Separator from "../separator/Separator.astro";
+
+type Props = ComponentProps<typeof Separator>;
+
+export const itemSeparator = cv({
+  base: "my-0",
+});
+
+const { class: className, orientation = "horizontal", ...rest } = Astro.props;
+---
+
+<Separator
+  orientation={orientation}
+  class:list={[itemSeparator(), className]}
+  {...rest}
+  data-slot="item-separator"
+/>
+

package/src/components/item/ItemTitle.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const itemTitle = cv({
+  base: "flex w-fit items-center gap-md leading-snug font-medium",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[itemTitle(), className]} {...rest} data-slot="item-title">
+  <slot />
+</div>