@rimelight/ui 0.0.30 → 0.0.32

package/src/components/astro/RLAInputMenu.astro

@@ -0,0 +1,131 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputMenuProps } from "../../types"
+import inputMenuThemeDefault, { createInputMenuTheme } from "../../themes/input-menu.theme"
+
+const inputMenuTheme = inputMenuThemeDefault
+const inputMenu = scv(inputMenuTheme)
+
+const {
+  items = [],
+  value = "",
+  placeholder = "Select item...",
+  disabled = false,
+  name,
+  label,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputMenuProps
+
+const classes = resolveClasses(inputMenu, {
+  size
+}, useUi("inputMenu", uiProp), className);
+
+const normalizedItems = items.map(item => {
+  if (typeof item === "string") {
+    return { label: item, value: item }
+  }
+  return item
+})
+
+const selectedItem = normalizedItems.find(item => item.value === value)
+const initialLabel = selectedItem ? selectedItem.label : ""
+---
+<div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
+  {label && <label class={classes.label} data-slot="label">{label}</label>}
+  
+  <div class="relative w-full" data-inputMenu-wrapper>
+    <button
+      type="button"
+      class={classes.trigger}
+      data-slot="trigger"
+      disabled={disabled}
+      data-inputMenu-trigger
+      {...rest}
+    >
+      <span data-inputMenu-value>{initialLabel || placeholder}</span>
+      <span class="i-lucide-chevrons-up-down opacity-50" />
+    </button>
+
+    <div class={classes.content + " hidden"} data-inputMenu-dropdown data-slot="content">
+      <input
+        type="text"
+        class={classes.input}
+        placeholder="Search..."
+        data-inputMenu-search
+      />
+      <div class="py-1" data-inputMenu-items>
+        {normalizedItems.map(item => (
+          <div
+            class={classes.item}
+            data-slot="item"
+            data-value={item.value}
+            data-label={item.label}
+            data-inputMenu-item
+          >
+            <span class={classes.itemText}>{item.label}</span>
+            <span class={classes.itemIcon + " hidden i-lucide-check"} data-check-icon />
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+  <input type="hidden" name={name} value={value} data-inputMenu-hidden-input />
+</div>
+
+<script>
+  document.querySelectorAll("[data-inputMenu-wrapper]").forEach(wrapper => {
+    const trigger = wrapper.querySelector("[data-inputMenu-trigger]") as HTMLButtonElement;
+    const dropdown = wrapper.querySelector("[data-inputMenu-dropdown]") as HTMLDivElement;
+    const search = wrapper.querySelector("[data-inputMenu-search]") as HTMLInputElement;
+    const items = wrapper.querySelectorAll("[data-inputMenu-item]");
+    const valueSpan = wrapper.querySelector("[data-inputMenu-value]");
+    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-inputMenu-hidden-input]") as HTMLInputElement;
+
+    if (!trigger || !dropdown) return;
+
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      dropdown.classList.toggle("hidden");
+      if (!dropdown.classList.contains("hidden")) {
+        search?.focus();
+      }
+    });
+
+    search?.addEventListener("input", (e) => {
+      const q = (e.target as HTMLInputElement).value.toLowerCase();
+      items.forEach(item => {
+        const label = (item as HTMLElement).dataset.label?.toLowerCase() || "";
+        if (label.includes(q)) {
+          (item as HTMLElement).classList.remove("hidden");
+        } else {
+          (item as HTMLElement).classList.add("hidden");
+        }
+      });
+    });
+
+    items.forEach(item => {
+      item.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const val = (item as HTMLElement).dataset.value || "";
+        const label = (item as HTMLElement).dataset.label || "";
+        
+        if (hiddenInput) hiddenInput.value = val;
+        if (valueSpan) valueSpan.textContent = label;
+        
+        items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
+        item.querySelector("[data-check-icon]")?.classList.remove("hidden");
+        
+        dropdown.classList.add("hidden");
+      });
+    });
+
+    document.addEventListener("click", () => {
+      dropdown.classList.add("hidden");
+    });
+  });
+</script>

package/src/components/astro/RLAInputNumber.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputNumberProps } from "../../types"
+import inputNumberThemeDefault from "../../themes/input-number.theme"
+
+const inputNumber = scv(inputNumberThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputNumberProps
+
+const classes = resolveClasses(inputNumber, {}, useUi("inputNumber", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAInputPin.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputPinProps } from "../../types"
+import inputPinThemeDefault from "../../themes/input-pin.theme"
+
+const inputPin = scv(inputPinThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputPinProps
+
+const classes = resolveClasses(inputPin, {}, useUi("inputPin", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAInputTags.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputTagsProps } from "../../types"
+import inputTagsThemeDefault from "../../themes/input-tags.theme"
+
+const inputTags = scv(inputTagsThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputTagsProps
+
+const classes = resolveClasses(inputTags, {}, useUi("inputTags", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAInputTime.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputTimeProps } from "../../types"
+import inputTimeThemeDefault from "../../themes/input-time.theme"
+
+const inputTime = scv(inputTimeThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputTimeProps
+
+const classes = resolveClasses(inputTime, {}, useUi("inputTime", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAKbd.astro

@@ -0,0 +1,22 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { KbdProps } from "../../types"
+import kbdTheme from "../../themes/kbd.theme"
+
+const kbd = scv(kbdTheme)
+
+const {
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as KbdProps
+
+const classes = resolveClasses(kbd, {
+  size
+}, useUi("kbd", uiProp), className)
+---
+<kbd class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</kbd>

package/src/components/astro/RLAKnob.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { KnobProps } from "../../types"
+import knobThemeDefault from "../../themes/knob.theme"
+
+const knob = scv(knobThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as KnobProps
+
+const classes = resolveClasses(knob, {}, useUi("knob", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLALabel.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LabelProps } from "../../types"
+import labelTheme from "../../themes/label.theme"
+
+const label = scv(labelTheme)
+
+const {
+  for: htmlFor,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LabelProps
+
+const classes = resolveClasses(label, {
+  size
+}, useUi("label", uiProp), className)
+---
+<label class={classes.root} data-slot="root" for={htmlFor} {...rest}>
+  <slot />
+</label>

package/src/components/astro/RLALink.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LinkProps } from "../../types"
+import linkThemeDefault from "../../themes/link.theme"
+
+const link = scv(linkThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LinkProps
+
+const classes = resolveClasses(link, {}, useUi("link", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLALinkGroup.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LinkGroupProps } from "../../types"
+import linkGroupThemeDefault from "../../themes/link-group.theme"
+
+const linkGroup = scv(linkGroupThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LinkGroupProps
+
+const classes = resolveClasses(linkGroup, {}, useUi("linkGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAListbox.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ListboxProps } from "../../types"
+import listboxThemeDefault from "../../themes/listbox.theme"
+
+const listbox = scv(listboxThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ListboxProps
+
+const classes = resolveClasses(listbox, {}, useUi("listbox", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLALocaleSelector.astro

@@ -0,0 +1,110 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LocaleSelectorProps } from "../../types"
+import localeSelectorTheme from "../../themes/locale-selector.theme"
+import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n";
+
+const localeSelector = scv(localeSelectorTheme)
+
+const {
+    locales,
+    variant = "default",
+    size = "md",
+    ui: uiProp,
+    class: className,
+    ...rest
+} = Astro.props as LocaleSelectorProps;
+
+const classes = resolveClasses(localeSelector, {
+    variant,
+    size
+}, useUi("localeSelector", uiProp), className);
+
+const currentLocale = Astro.currentLocale ?? 'en';
+const localeUrls = [...new Map(getRelativeLocaleUrlList().map(url => {
+    const locale = url.split('/')[1] || 'en';
+    return [locale, url];
+})).values()];
+
+const processedLocales = locales && locales.length > 0
+    ? locales.map(item => typeof item === 'string' ? { code: item, label: item } : item)
+    : [...new Map(getRelativeLocaleUrlList().map(url => {
+        const locale = url.split('/')[1] || 'en';
+        return [locale, { code: locale, label: locale }];
+    })).values()];
+
+function getLocaleDisplayName(localeCode: string): string {
+    try {
+        const formatter = new Intl.DisplayNames([localeCode], { type: 'language' });
+        const nativeName = formatter.of(localeCode);
+
+        return nativeName
+            ? nativeName.charAt(0).toUpperCase() + nativeName.slice(1)
+            : localeCode.toUpperCase();
+    } catch (e) {
+        return localeCode.toUpperCase();
+    }
+}
+---
+
+<div class:list={[classes.root]} {...rest}>
+    {Astro.slots.has("label") && (
+            <label for="language-picker" class:list={[classes.label]}>
+                <slot name="label" />
+            </label>
+    )}
+
+    <div class:list={[classes.wrapper]}>
+        <select
+                id="language-picker"
+                class:list={[classes.select]}
+                aria-label="Select language"
+                data-variant={variant}
+                data-size={size}
+        >
+            {processedLocales.map((item) => {
+                const targetUrl = getRelativeLocaleUrl(item.code, Astro.url.pathname.replace(/^\/[^/]+/, ''));
+                return (
+                        <option
+                                value={targetUrl}
+                                selected={currentLocale === item.code}
+                                class:list={[classes.option]}
+                        >
+                            {item.label !== item.code ? item.label : getLocaleDisplayName(item.code)}
+                        </option>
+                );
+            })}
+        </select>
+
+        <div class:list={[classes.iconWrapper]}>
+            <slot name="icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 opacity-70">
+                    <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+                </svg>
+            </slot>
+        </div>
+    </div>
+</div>
+
+<script>
+    const initializeLanguagePicker = () => {
+        const languagePickers = document.querySelectorAll('#language-picker');
+
+        languagePickers.forEach(picker => {
+            if (picker.hasAttribute('data-initialized')) return;
+            picker.setAttribute('data-initialized', 'true');
+
+            picker.addEventListener('change', (event) => {
+                const target = event.target as HTMLSelectElement;
+                const targetUrl = target.value;
+                if (targetUrl) {
+                    window.location.href = targetUrl;
+                }
+            });
+        });
+    };
+
+    document.addEventListener('DOMContentLoaded', initializeLanguagePicker);
+    document.addEventListener('astro:page-load', initializeLanguagePicker);
+</script>

package/src/components/astro/RLAMarquee.astro

@@ -0,0 +1,32 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { MarqueeProps } from "../../types"
+import marqueeTheme from "../../themes/marquee.theme"
+
+const marquee = scv(marqueeTheme)
+
+const {
+  direction = "left",
+  speed = 40,
+  pauseOnHover = true,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as MarqueeProps
+
+const classes = resolveClasses(marquee, {
+  direction,
+  pauseOnHover
+}, useUi("marquee", uiProp), className)
+
+const duration = `${speed}s`
+---
+<div class={classes.root} data-slot="marquee-root" {...rest}>
+  <div class={classes.track} data-slot="track" style={{ animationDuration: duration }}>
+    <slot />
+  </div>
+  <div class={classes.track} data-slot="track" aria-hidden="true" style={{ animationDuration: duration }}>
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAMegamenu.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { MegamenuProps } from "../../types"
+import megamenuThemeDefault from "../../themes/megamenu.theme"
+
+const megamenu = scv(megamenuThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as MegamenuProps
+
+const classes = resolveClasses(megamenu, {}, useUi("megamenu", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAMeter.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { MeterProps } from "../../types"
+import meterThemeDefault from "../../themes/meter.theme"
+
+const meter = scv(meterThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as MeterProps
+
+const classes = resolveClasses(meter, {}, useUi("meter", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAModal.astro

@@ -0,0 +1,95 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ModalProps } from "../../types"
+import modalTheme from "../../themes/modal.theme"
+
+const modal = scv(modalTheme)
+
+const {
+  open = false,
+  triggerLabel,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  lockScroll = true,
+  title,
+  description,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ModalProps
+
+const classes = resolveClasses(modal, {
+  size
+}, useUi("modal", uiProp), className)
+
+const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="modal-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${modalId}').showmodal()`}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span onclick={`document.getElementById('${modalId}').showmodal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={modalId}
+    class={classes.content}
+    data-slot="content"
+    data-lock-scroll={lockScroll ? "true" : "false"}
+    data-close-on-escape={closeOnEscape ? "true" : "false"}
+    data-close-on-click-outside={closeOnClickOutside ? "true" : "false"}
+    {...rest}
+  >
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      onclick={`document.getElementById('${modalId}').close()`}
+      aria-label="Close modal"
+    >
+      <span class="i-lucide-x size-4" aria-hidden="true" />
+    </button>
+
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</div>
+
+<script is:inline>
+  document.addEventListener('click', (e) => {
+    if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
+      const rect = e.target.getBoundingClientRect();
+      const isInModal = (
+        rect.top <= e.clientY &&
+        e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX &&
+        e.clientX <= rect.left + rect.width
+      );
+      if (!isInModal) {
+        e.target.close();
+      }
+    }
+  });
+</script>