@rimelight/ui 0.0.29 → 0.0.31

package/src/components/astro/RLACheckbox.astro

@@ -0,0 +1,51 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CheckboxProps } from "../../types"
+import checkboxThemeDefault, { createCheckboxTheme } from "../../themes/checkbox.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const checkboxTheme = uiConfig.colors ? createCheckboxTheme(uiConfig.colors) : checkboxThemeDefault
+
+const checkbox = scv(checkboxTheme)
+
+const {
+  checked = false,
+  disabled = false,
+  name,
+  label,
+  color = "primary",
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CheckboxProps
+
+const classes = resolveClasses(checkbox, {
+  color,
+  size,
+  checked
+}, useUi("checkbox", uiProp), className);
+---
+<label class={classes.root} data-slot="root">
+  <input
+    type="checkbox"
+    class={classes.input}
+    checked={checked}
+    disabled={disabled}
+    name={name}
+    {...rest}
+  />
+  <div class={classes.box} data-slot="box">
+    <div class={classes.indicator} data-slot="indicator">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-3"><path d="M20 6 9 17l-5-5"/></svg>
+    </div>
+  </div>
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+</label>

package/src/components/astro/RLACollapsible.astro

@@ -0,0 +1,38 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CollapsibleProps } from "../../types"
+import collapsibleThemeDefault, { createCollapsibleTheme } from "../../themes/collapsible.theme"
+
+const collapsibleTheme = collapsibleThemeDefault
+const collapsible = scv(collapsibleTheme)
+
+const {
+  open = false,
+  label = "Toggle",
+  icon,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CollapsibleProps
+
+const classes = resolveClasses(collapsible, {
+  open
+}, useUi("collapsible", uiProp), className);
+---
+<details class={classes.root} open={open ? true : undefined} data-slot="root" {...rest}>
+  <summary class={classes.trigger} data-slot="trigger">
+    <slot name="trigger">
+      <span class="flex items-center gap-2">
+        {icon && <span class={icon} />}
+        {label}
+      </span>
+      <span class="i-lucide-chevron-down transition-transform duration-200 group-open:rotate-180" />
+    </slot>
+  </summary>
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</details>

package/src/components/astro/RLACombobox.astro

@@ -0,0 +1,131 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComboboxProps } from "../../types"
+import comboboxThemeDefault, { createComboboxTheme } from "../../themes/combobox.theme"
+
+const comboboxTheme = comboboxThemeDefault
+const combobox = scv(comboboxTheme)
+
+const {
+  items = [],
+  value = "",
+  placeholder = "Select item...",
+  disabled = false,
+  name,
+  label,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ComboboxProps
+
+const classes = resolveClasses(combobox, {
+  size
+}, useUi("combobox", 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-combobox-wrapper>
+    <button
+      type="button"
+      class={classes.trigger}
+      data-slot="trigger"
+      disabled={disabled}
+      data-combobox-trigger
+      {...rest}
+    >
+      <span data-combobox-value>{initialLabel || placeholder}</span>
+      <span class="i-lucide-chevrons-up-down opacity-50" />
+    </button>
+
+    <div class={classes.content + " hidden"} data-combobox-dropdown data-slot="content">
+      <input
+        type="text"
+        class={classes.input}
+        placeholder="Search..."
+        data-combobox-search
+      />
+      <div class="py-1" data-combobox-items>
+        {normalizedItems.map(item => (
+          <div
+            class={classes.item}
+            data-slot="item"
+            data-value={item.value}
+            data-label={item.label}
+            data-combobox-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-combobox-hidden-input />
+</div>
+
+<script>
+  document.querySelectorAll("[data-combobox-wrapper]").forEach(wrapper => {
+    const trigger = wrapper.querySelector("[data-combobox-trigger]") as HTMLButtonElement;
+    const dropdown = wrapper.querySelector("[data-combobox-dropdown]") as HTMLDivElement;
+    const search = wrapper.querySelector("[data-combobox-search]") as HTMLInputElement;
+    const items = wrapper.querySelectorAll("[data-combobox-item]");
+    const valueSpan = wrapper.querySelector("[data-combobox-value]");
+    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-combobox-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/RLADialog.astro

@@ -0,0 +1,95 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DialogProps } from "../../types"
+import dialogTheme from "../../themes/dialog.theme"
+
+const dialog = scv(dialogTheme)
+
+const {
+  open = false,
+  triggerLabel,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  lockScroll = true,
+  title,
+  description,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DialogProps
+
+const classes = resolveClasses(dialog, {
+  size
+}, useUi("dialog", uiProp), className)
+
+const dialogId = `rla-dialog-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="dialog-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').showModal()`}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    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('${dialogId}').close()`}
+      aria-label="Close dialog"
+    >
+      <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 isInDialog = (
+        rect.top <= e.clientY &&
+        e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX &&
+        e.clientX <= rect.left + rect.width
+      );
+      if (!isInDialog) {
+        e.target.close();
+      }
+    }
+  });
+</script>

package/src/components/astro/RLADrawer.astro

@@ -0,0 +1,74 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DrawerProps } from "../../types"
+import drawerTheme from "../../themes/drawer.theme"
+
+const drawer = scv(drawerTheme)
+
+const {
+  direction = "bottom",
+  title,
+  description,
+  triggerLabel,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DrawerProps
+
+const classes = resolveClasses(drawer, {
+  direction
+}, useUi("drawer", uiProp), className)
+
+const dialogId = `rla-drawer-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="drawer-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').showModal()`}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    class={classes.content}
+    data-slot="content"
+    data-close-on-click-outside="true"
+    {...rest}
+  >
+    <div class={classes.handle} data-slot="handle" />
+
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').close()`}
+      aria-label="Close drawer"
+    >
+      <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>

package/src/components/astro/RLADropdownMenu.astro

@@ -0,0 +1,82 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DropdownMenuProps } from "../../types"
+import dropdownMenuThemeDefault, { createDropdownMenuTheme } from "../../themes/dropdownMenu.theme"
+
+const dropdownMenuTheme = dropdownMenuThemeDefault
+const dropdownMenu = scv(dropdownMenuTheme)
+
+const {
+  items = [],
+  label = "Options",
+  icon,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DropdownMenuProps
+
+const classes = resolveClasses(dropdownMenu, {
+  size
+}, useUi("dropdownMenu", uiProp), className);
+---
+<div class={classes.root} data-slot="root" data-dropdown-menu>
+  <button
+    type="button"
+    class={classes.trigger}
+    data-slot="trigger"
+    data-dropdown-trigger
+    {...rest}
+  >
+    <slot name="trigger">
+      {icon && <span class={icon} />}
+      {label}
+      <span class="ml-2 i-lucide-chevron-down opacity-50" />
+    </slot>
+  </button>
+
+  <div class={classes.content + " hidden"} data-slot="content" data-dropdown-content>
+    <slot>
+      {items.map(item => {
+        if (item.type === "separator") {
+          return <div class={classes.separator} />
+        }
+        if (item.type === "label") {
+          return <div class={classes.label}>{item.label}</div>
+        }
+        return (
+          <button
+            type="button"
+            class={classes.item}
+            data-slot="item"
+            disabled={item.disabled}
+          >
+            {item.icon && <span class={item.icon + " mr-2 size-4 text-muted-foreground"} />}
+            <span>{item.label}</span>
+            {item.shortcut && <span class={classes.shortcut}>{item.shortcut}</span>}
+          </button>
+        )
+      })}
+    </slot>
+  </div>
+</div>
+
+<script>
+  document.querySelectorAll("[data-dropdown-menu]").forEach(menu => {
+    const trigger = menu.querySelector("[data-dropdown-trigger]");
+    const content = menu.querySelector("[data-dropdown-content]");
+
+    if (!trigger || !content) return;
+
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      content.classList.toggle("hidden");
+    });
+
+    document.addEventListener("click", () => {
+      content.classList.add("hidden");
+    });
+  });
+</script>

package/src/components/astro/RLADropzone.astro

@@ -0,0 +1,134 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DropzoneProps } from "../../types"
+import dropzoneThemeDefault, { createDropzoneTheme } from "../../themes/dropzone.theme"
+
+const dropzoneTheme = dropzoneThemeDefault
+const dropzone = scv(dropzoneTheme)
+
+const {
+  accept,
+  multiple = false,
+  disabled = false,
+  title = "Drop files here or click to upload",
+  description = "Supports any file type",
+  icon = "i-lucide-upload-cloud",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DropzoneProps
+
+const classes = resolveClasses(dropzone, {
+  disabled
+}, useUi("dropzone", uiProp), className)
+
+const inputId = `dropzone-${Math.random().toString(36).slice(2, 9)}`
+---
+
+<div
+  class={classes.root}
+  data-slot="root"
+  data-dropzone
+  data-disabled={disabled ? "true" : undefined}
+  role="button"
+  tabindex={disabled ? -1 : 0}
+  aria-label={title}
+  {...rest}
+>
+  <input
+    id={inputId}
+    type="file"
+    class={classes.input}
+    accept={accept}
+    multiple={multiple}
+    disabled={disabled}
+    data-dropzone-input
+    aria-hidden="true"
+    tabindex="-1"
+  />
+
+  <div class={classes.content} data-slot="content">
+    <slot name="icon">
+      <span class={classes.icon + " " + icon} aria-hidden="true" />
+    </slot>
+
+    <slot>
+      <p class={classes.title} data-slot="title">{title}</p>
+      {description && (
+        <p class={classes.description} data-slot="description">{description}</p>
+      )}
+      {accept && (
+        <p class="mt-1 text-[10px] text-muted-foreground/70">
+          Accepted: <span class="font-mono">{accept}</span>
+        </p>
+      )}
+    </slot>
+
+    <div
+      class="mt-3 hidden text-xs text-muted-foreground"
+      data-dropzone-filelist
+      aria-live="polite"
+    />
+  </div>
+</div>
+
+<script>
+  document.querySelectorAll("[data-dropzone]").forEach(zone => {
+    const input = zone.querySelector("[data-dropzone-input]") as HTMLInputElement | null;
+    const fileList = zone.querySelector("[data-dropzone-filelist]") as HTMLElement | null;
+    if (!input) return;
+
+    const isDisabled = zone.dataset.disabled === "true";
+    if (isDisabled) return;
+
+    const showFiles = (files: FileList | null) => {
+      if (!fileList || !files || files.length === 0) return;
+      fileList.classList.remove("hidden");
+      fileList.textContent =
+        files.length === 1
+          ? files[0]!.name
+          : `${files.length} files selected`;
+    };
+
+    // Click anywhere on the zone to open file picker
+    zone.addEventListener("click", () => input.click());
+    zone.addEventListener("keydown", (e) => {
+      if ((e as KeyboardEvent).key === "Enter" || (e as KeyboardEvent).key === " ") {
+        e.preventDefault();
+        input.click();
+      }
+    });
+
+    input.addEventListener("change", () => showFiles(input.files));
+
+    // Drag and drop
+    zone.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      zone.classList.add("border-primary", "bg-primary/5");
+    });
+
+    zone.addEventListener("dragleave", () => {
+      zone.classList.remove("border-primary", "bg-primary/5");
+    });
+
+    zone.addEventListener("drop", (e) => {
+      e.preventDefault();
+      zone.classList.remove("border-primary", "bg-primary/5");
+      const dt = (e as DragEvent).dataTransfer;
+      if (!dt) return;
+
+      // Transfer dropped files to the hidden input via DataTransfer trick
+      try {
+        const transfer = new DataTransfer();
+        Array.from(dt.files).forEach(f => transfer.items.add(f));
+        input.files = transfer.files;
+      } catch {
+        // Some browsers don't support assigning to input.files — graceful fallback
+      }
+
+      showFiles(dt.files);
+    });
+  });
+</script>

package/src/components/astro/RLAField.astro

@@ -0,0 +1,43 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FieldProps } from "../../types"
+import fieldThemeDefault, { createFieldTheme } from "../../themes/field.theme"
+
+const fieldTheme = fieldThemeDefault
+const field = scv(fieldTheme)
+
+const {
+  label,
+  description,
+  error,
+  required = false,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FieldProps
+
+const classes = resolveClasses(field, {
+  size
+}, useUi("field", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  {label && (
+    <label class={classes.label} data-slot="label">
+      {label}
+      {required && <span class="text-error-500 ml-0.5">*</span>}
+    </label>
+  )}
+  <slot />
+  {description && (
+    <p class={classes.description} data-slot="description">
+      {description}
+    </p>
+  )}
+  {error && (
+    <p class={classes.error} data-slot="error">
+      {error}
+    </p>
+  )}
+</div>