@rimelight/ui 0.0.30 → 0.0.32

package/src/components/astro/RLAContainer.astro

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

package/src/components/astro/RLAContextMenu.astro

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

package/src/components/astro/RLADashboardGroup.astro

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

package/src/components/astro/RLADashboardNavbar.astro

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

package/src/components/astro/RLADashboardPanel.astro

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

package/src/components/astro/RLADashboardResizeHandle.astro

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

package/src/components/astro/RLADashboardSearch.astro

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

package/src/components/astro/RLADashboardSearchButton.astro

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

package/src/components/astro/RLADashboardSidebar.astro

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

package/src/components/astro/RLADashboardSidebarCollapse.astro

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

package/src/components/astro/RLADashboardSidebarToggle.astro

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

package/src/components/astro/RLADashboardToolbar.astro

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

package/src/components/astro/RLADock.astro

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

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/dropdown-menu.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/RLAEditor.astro

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

package/src/components/astro/RLAEmpty.astro

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

package/src/components/astro/RLAError.astro

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

package/src/components/astro/RLAFieldGroup.astro

@@ -0,0 +1,35 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FieldGroupProps } from "../../types"
+import fieldGroupThemeDefault, { createFieldGroupTheme } from "../../themes/field-group.theme"
+
+const fieldGroupTheme = fieldGroupThemeDefault
+const fieldGroup = scv(fieldGroupTheme)
+
+const {
+  prepend,
+  append,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FieldGroupProps
+
+const classes = resolveClasses(fieldGroup, {
+  size
+}, useUi("fieldGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  {prepend && (
+    <div class={classes.prepend} data-slot="prepend">
+      {prepend}
+    </div>
+  )}
+  <slot />
+  {append && (
+    <div class={classes.append} data-slot="append">
+      {append}
+    </div>
+  )}
+</div>

package/src/components/astro/RLAFieldset.astro

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

package/src/components/astro/RLAFileUpload.astro

@@ -0,0 +1,134 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FileUploadProps } from "../../types"
+import fileUploadThemeDefault, { createFileUploadTheme } from "../../themes/file-upload.theme"
+
+const fileUploadTheme = fileUploadThemeDefault
+const fileUpload = scv(fileUploadTheme)
+
+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 FileUploadProps
+
+const classes = resolveClasses(fileUpload, {
+  disabled
+}, useUi("fileUpload", uiProp), className)
+
+const inputId = `fileUpload-${Math.random().toString(36).slice(2, 9)}`
+---
+
+<div
+  class={classes.root}
+  data-slot="root"
+  data-fileUpload
+  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-fileUpload-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-fileUpload-filelist
+      aria-live="polite"
+    />
+  </div>
+</div>
+
+<script>
+  document.querySelectorAll("[data-fileUpload]").forEach(zone => {
+    const input = zone.querySelector("[data-fileUpload-input]") as HTMLInputElement | null;
+    const fileList = zone.querySelector("[data-fileUpload-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>