@rimelight/ui 0.0.4 → 0.0.6

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

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

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

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

@@ -1,50 +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<"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

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

package/src/components/item/Item.astro

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

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

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

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

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

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

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

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

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

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