@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLASelect.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { SelectProps } from "../../types"
 import selectThemeDefault, { createSelectTheme } from "../../themes/select.theme"
 
-const selectTheme = selectThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const selectTheme = uiConfig.colors ? createSelectTheme() : selectThemeDefault
 const select = scv(selectTheme)
 
 const {
@@ -35,75 +38,109 @@ const normalizedItems = items.map(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-select-wrapper>
-    <button
-      type="button"
-      class={classes.trigger}
-      data-slot="trigger"
-      disabled={disabled}
-      data-select-trigger
-      {...rest}
-    >
-      <span data-select-value>{initialLabel || placeholder}</span>
-      <span class="i-lucide-chevron-down opacity-50" />
-    </button>
-
-    <div class={classes.content + " hidden"} data-select-dropdown data-slot="content">
-      <div class="py-1" data-select-items>
-        {normalizedItems.map(item => (
-          <div
-            class={classes.item}
-            data-slot="item"
-            data-value={item.value}
-            data-label={item.label}
-            data-select-item
-          >
-            <span class={classes.itemText}>{item.label}</span>
-            <span class={classes.itemIcon + " hidden i-lucide-check"} data-check-icon />
-          </div>
-        ))}
+<rla-select {...rest}>
+  <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-select-wrapper>
+      <button
+        type="button"
+        class={classes.trigger}
+        data-slot="trigger"
+        disabled={disabled}
+        data-select-trigger
+      >
+        <span data-select-value>{initialLabel || placeholder}</span>
+        <span class="i-lucide-chevron-down opacity-50" />
+      </button>
+
+      <div class={classes.content + " hidden"} data-select-dropdown data-slot="content">
+        <div class="py-1" data-select-items>
+          {normalizedItems.map(item => (
+            <div
+              class={classes.item}
+              data-slot="item"
+              data-value={item.value}
+              data-label={item.label}
+              data-select-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-select-hidden-input />
   </div>
-  <input type="hidden" name={name} value={value} data-select-hidden-input />
-</div>
+</rla-select>
 
 <script>
-  document.querySelectorAll("[data-select-wrapper]").forEach(wrapper => {
-    const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
-    const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
-    const items = wrapper.querySelectorAll("[data-select-item]");
-    const valueSpan = wrapper.querySelector("[data-select-value]");
-    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-select-hidden-input]") as HTMLInputElement;
-
-    if (!trigger || !dropdown) return;
-
-    trigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      dropdown.classList.toggle("hidden");
-    });
-
-    items.forEach(item => {
-      item.addEventListener("click", (e) => {
+  class RLASelect extends HTMLElement {
+    private selectCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const wrapper = this.querySelector("[data-select-wrapper]") as HTMLElement | null;
+      if (!wrapper) return;
+
+      const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
+      const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
+      const items = wrapper.querySelectorAll<HTMLElement>("[data-select-item]");
+      const valueSpan = wrapper.querySelector("[data-select-value]");
+      const hiddenInput = this.querySelector("[data-select-hidden-input]") as HTMLInputElement | null;
+
+      if (!trigger || !dropdown) return;
+
+      const onTriggerClick = (e: MouseEvent) => {
         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");
+        dropdown.classList.toggle("hidden");
+      };
+      trigger.addEventListener("click", onTriggerClick);
+
+      const itemCleanups: (() => void)[] = [];
+      items.forEach(item => {
+        const onItemClick = (e: MouseEvent) => {
+          e.stopPropagation();
+          const val = (item as HTMLElement).dataset.value || "";
+          const label = (item as HTMLElement).dataset.label || "";
+          
+          if (hiddenInput) {
+            hiddenInput.value = val;
+            hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          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");
+        };
+        item.addEventListener("click", onItemClick);
+        itemCleanups.push(() => item.removeEventListener("click", onItemClick));
       });
-    });
 
-    document.addEventListener("click", () => {
-      dropdown.classList.add("hidden");
-    });
-  });
+      const onDocumentClick = () => {
+        dropdown.classList.add("hidden");
+      };
+      document.addEventListener("click", onDocumentClick);
+
+      this.selectCleanup = () => {
+        trigger.removeEventListener("click", onTriggerClick);
+        itemCleanups.forEach(fn => fn());
+        document.removeEventListener("click", onDocumentClick);
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.selectCleanup) {
+        this.selectCleanup();
+        this.selectCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-select')) {
+    customElements.define('rla-select', RLASelect);
+  }
 </script>

package/src/components/astro/RLASeparator.astro

@@ -8,7 +8,7 @@ import RLAAvatar from "./RLAAvatar.astro"
 import { cx } from "css-variants"
 
 const uiConfig = getUIConfig()
-const separatorTheme = uiConfig.colors ? createSeparatorTheme() : separatorThemeDefault
+const separatorTheme = uiConfig.colors ? createSeparatorTheme(uiConfig.colors) : separatorThemeDefault
 
 const separator = scv(separatorTheme)
 
@@ -25,14 +25,19 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as SeparatorProps
+} = Astro.props as SeparatorProps & {
+  color?: string
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  type?: "solid" | "dashed" | "dotted"
+  position?: "start" | "center" | "end"
+}
 
 const classes = resolveClasses(separator, {
   orientation,
-  color,
-  size,
-  type,
-  position
+  color: color as "neutral",
+  size: size as "xs",
+  type: type as "solid",
+  position: position as "center"
 }, useUi("separator", uiProp), className)
 ---
 <div

package/src/components/astro/RLAShare.astro

@@ -0,0 +1,60 @@
+---
+import RLAButton from "./RLAButton.astro"
+import type { ButtonProps } from "../../types"
+
+interface Props extends Omit<ButtonProps, "href" | "label" | "leadingIcon" | "trailingIcon" | "loading" | "loadingAuto" | "square" | "active" | "activeColor" | "activeVariant"> {}
+
+const {
+  ...rest
+} = Astro.props
+---
+
+<RLAButton
+  id="rl-share"
+  color="neutral"
+  variant="outline"
+  size="sm"
+  leadingIcon="i-lucide-share-2"
+  label="Share"
+  {...rest}
+/>
+
+<script>
+  function setupShare() {
+    const shareBtn = document.getElementById("rl-share") as (HTMLButtonElement & { rlShareRegistered?: boolean }) | null;
+    if (!shareBtn) return;
+
+    if (shareBtn.rlShareRegistered) return;
+    shareBtn.rlShareRegistered = true;
+
+    shareBtn.addEventListener("click", async () => {
+      if (navigator.share) {
+        try {
+          await navigator.share({ title: document.title, url: window.location.href });
+        } catch (err) {
+          const error = err as { name?: string };
+          if (error.name !== "AbortError") {
+            console.error("Share failed:", err);
+          }
+        }
+      } else {
+        try {
+          await navigator.clipboard.writeText(window.location.href);
+          const labelEl = shareBtn.querySelector('[data-slot="label"]');
+          if (labelEl) {
+            const origText = labelEl.textContent;
+            labelEl.textContent = "Link Copied!";
+            setTimeout(() => {
+              labelEl.textContent = origText;
+            }, 2000);
+          }
+        } catch (err) {
+          console.error("Failed to copy link:", err);
+        }
+      }
+    });
+  }
+
+  setupShare();
+  document.addEventListener("astro:after-swap", setupShare);
+</script>