@rimelight/ui 0.0.34 → 0.0.36

package/src/components/astro/RLADropdownMenu.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { DropdownMenuProps } from "../../types"
 import dropdownMenuThemeDefault, { createDropdownMenuTheme } from "../../themes/dropdown-menu.theme"
 
-const dropdownMenuTheme = dropdownMenuThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dropdownMenuTheme = uiConfig.colors ? createDropdownMenuTheme() : dropdownMenuThemeDefault
 const dropdownMenu = scv(dropdownMenuTheme)
 
 const {
@@ -22,61 +25,85 @@ 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>
+<rla-dropdown-menu {...rest}>
+  <div class={classes.root} data-slot="root" data-dropdown-menu>
+    <button
+      type="button"
+      class={classes.trigger}
+      data-slot="trigger"
+      data-dropdown-trigger
+    >
+      <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 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>
-</div>
+</rla-dropdown-menu>
 
 <script>
-  document.querySelectorAll("[data-dropdown-menu]").forEach(menu => {
-    const trigger = menu.querySelector("[data-dropdown-trigger]");
-    const content = menu.querySelector("[data-dropdown-content]");
+  class RLADropdownMenu extends HTMLElement {
+    private dropdownCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const trigger = this.querySelector("[data-dropdown-trigger]") as HTMLElement | null;
+      const content = this.querySelector("[data-dropdown-content]") as HTMLElement | null;
+
+      if (!trigger || !content) return;
+
+      const onTriggerClick = (e: MouseEvent) => {
+        e.stopPropagation();
+        content.classList.toggle("hidden");
+      };
+      trigger.addEventListener("click", onTriggerClick);
+
+      const onDocumentClick = () => {
+        content.classList.add("hidden");
+      };
+      document.addEventListener("click", onDocumentClick);
 
-    if (!trigger || !content) return;
+      this.dropdownCleanup = () => {
+        trigger.removeEventListener("click", onTriggerClick);
+        document.removeEventListener("click", onDocumentClick);
+      };
+    }
 
-    trigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      content.classList.toggle("hidden");
-    });
+    disconnectedCallback() {
+      if (this.dropdownCleanup) {
+        this.dropdownCleanup();
+        this.dropdownCleanup = null;
+      }
+    }
+  }
 
-    document.addEventListener("click", () => {
-      content.classList.add("hidden");
-    });
-  });
+  if (!customElements.get('rla-dropdown-menu')) {
+    customElements.define('rla-dropdown-menu', RLADropdownMenu);
+  }
 </script>

package/src/components/astro/RLAFieldGroup.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { FieldGroupProps } from "../../types"
 import fieldGroupThemeDefault, { createFieldGroupTheme } from "../../themes/field-group.theme"
 
-const fieldGroupTheme = fieldGroupThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const fieldGroupTheme = uiConfig.colors ? createFieldGroupTheme() : fieldGroupThemeDefault
 const fieldGroup = scv(fieldGroupTheme)
 
 const {

package/src/components/astro/RLAFileUpload.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { FileUploadProps } from "../../types"
 import fileUploadThemeDefault, { createFileUploadTheme } from "../../themes/file-upload.theme"
 
-const fileUploadTheme = fileUploadThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const fileUploadTheme = uiConfig.colors ? createFileUploadTheme() : fileUploadThemeDefault
 const fileUpload = scv(fileUploadTheme)
 
 const {
@@ -27,108 +30,119 @@ const classes = resolveClasses(fileUpload, {
 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"
+<rla-file-upload {...rest}>
+  <div
+    class={classes.root}
+    data-slot="root"
+    data-fileUpload
+    data-disabled={disabled ? "true" : undefined}
+    role="button"
+    tabindex={disabled ? -1 : 0}
+    aria-label={title}
+  >
+    <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>
-</div>
+</rla-file-upload>
 
 <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 === " ") {
+  class RLAFileUpload extends HTMLElement {
+    connectedCallback() {
+      this.style.display = 'contents';
+      const zone = this.querySelector("[data-fileUpload]") as HTMLElement | null;
+      if (!zone) return;
+
+      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.key === "Enter" || e.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();
-        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);
-    });
-  });
+        zone.classList.remove("border-primary", "bg-primary/5");
+        const dt = e.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);
+      });
+    }
+  }
+
+  if (!customElements.get('rla-file-upload')) {
+    customElements.define('rla-file-upload', RLAFileUpload);
+  }
 </script>

package/src/components/astro/RLAFooter.astro

@@ -23,9 +23,10 @@ const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), cla
 <footer
   class:list={[classes.root]}
   data-slot="root"
+  data-contain={contain ? "true" : "false"}
   {...rest}
 >
-  <div class:list={[classes.container]}>
+  <div class:list={[classes.container]} data-slot="container">
     <div class:list={[classes.left]} data-slot="left">
       <slot name="left" />
     </div>

package/src/components/astro/RLAFormField.astro

@@ -4,10 +4,14 @@ import { useUi, resolveClasses } from "../../utils"
 import type { FormFieldProps } from "../../types"
 import formFieldThemeDefault, { createFormFieldTheme } from "../../themes/form-field.theme"
 
-const formFieldTheme = formFieldThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const formFieldTheme = uiConfig.colors ? createFormFieldTheme() : formFieldThemeDefault
 const formField = scv(formFieldTheme)
 
 const {
+  id = `field-${Math.random().toString(36).substring(2, 9)}`,
   label,
   description,
   error,
@@ -16,7 +20,7 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as FormFieldProps
+} = Astro.props as FormFieldProps & { id?: string }
 
 const classes = resolveClasses(formField, {
   size
@@ -24,19 +28,19 @@ const classes = resolveClasses(formField, {
 ---
 <div class={classes.root} data-slot="root" {...rest}>
   {label && (
-    <label class={classes.label} data-slot="label">
+    <label for={id} class={classes.label} data-slot="label">
       {label}
-      {required && <span class="text-error-500 ml-0.5">*</span>}
+      {required && <span class="text-error-500 ml-0.5" aria-hidden="true">*</span>}
     </label>
   )}
   <slot />
   {description && (
-    <p class={classes.description} data-slot="description">
+    <p id={`${id}-description`} class={classes.description} data-slot="description">
       {description}
     </p>
   )}
   {error && (
-    <p class={classes.error} data-slot="error">
+    <p id={`${id}-error`} class={classes.error} data-slot="error" aria-live="assertive">
       {error}
     </p>
   )}

package/src/components/astro/RLAGrid.astro

@@ -1,39 +1,31 @@
----
-interface Props {
-  stagger?: boolean
-  class?: string
-}
-
-const { stagger = false, class: className = "", ...rest } = Astro.props
----
-
-<div class:list={["rl-grid", { stagger }, className]} {...rest}>
-  <slot />
-</div>
-
-<style>
-  .rl-grid {
-    display: grid;
-    grid-template-columns: 100%;
-    gap: 1rem;
-  }
-
-  .rl-grid > :global(*) {
-    margin-top: 0 !important;
-  }
-
-  @media (min-width: 50rem) {
-    .rl-grid {
-      grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-    }
-    .stagger {
-      --stagger-height: 5rem;
-      padding-bottom: var(--stagger-height);
-    }
-
-    .stagger > :global(*):nth-child(2n) {
-      transform: translateY(var(--stagger-height));
-    }
-  }
-</style>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { GridProps } from "../../types"
+import gridThemeDefault, { createGridTheme } from "../../themes/grid.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const gridTheme = uiConfig.colors ? createGridTheme() : gridThemeDefault
+
+const grid = scv(gridTheme)
+
+const {
+  cols = 2,
+  gap = "md",
+  stagger = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as GridProps
+
+const classes = resolveClasses(grid, {
+  cols: cols as any,
+  gap,
+  stagger
+}, useUi("grid", uiProp), className)
+---
+
+<div class={classes.root} {...rest}>
+  <slot />
+</div>