@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLAProse.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ProseProps } from "../../types"
-import proseThemeDefault from "../../themes/prose.theme"
-
-const prose = scv(proseThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ProseProps
-
-const classes = resolveClasses(prose, {}, useUi("prose", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ProseProps } from "../../types"
+import proseThemeDefault, { createProseTheme } from "../../themes/prose.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const proseTheme = uiConfig.colors ? createProseTheme() : proseThemeDefault
+
+const prose = scv(proseTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ProseProps
+
+const classes = resolveClasses(prose, {}, useUi("prose", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAQrCode.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { QrCodeProps } from "../../types"
-import qrCodeThemeDefault from "../../themes/qr-code.theme"
-
-const qrCode = scv(qrCodeThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as QrCodeProps
-
-const classes = resolveClasses(qrCode, {}, useUi("qrCode", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { QrCodeProps } from "../../types"
+import qrCodeThemeDefault, { createQrCodeTheme } from "../../themes/qr-code.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const qrCodeTheme = uiConfig.colors ? createQrCodeTheme() : qrCodeThemeDefault
+
+const qrCode = scv(qrCodeTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as QrCodeProps
+
+const classes = resolveClasses(qrCode, {}, useUi("qrCode", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLARadioGroup.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { RadioGroupProps } from "../../types"
-import radioGroupThemeDefault from "../../themes/radio-group.theme"
-
-const radioGroup = scv(radioGroupThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as RadioGroupProps
-
-const classes = resolveClasses(radioGroup, {}, useUi("radioGroup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { RadioGroupProps } from "../../types"
+import radioGroupThemeDefault, { createRadioGroupTheme } from "../../themes/radio-group.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const radioGroupTheme = uiConfig.colors ? createRadioGroupTheme() : radioGroupThemeDefault
+
+const radioGroup = scv(radioGroupTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RadioGroupProps
+
+const classes = resolveClasses(radioGroup, {}, useUi("radioGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLARating.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { RatingProps } from "../../types"
-import ratingThemeDefault from "../../themes/rating.theme"
-
-const rating = scv(ratingThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as RatingProps
-
-const classes = resolveClasses(rating, {}, useUi("rating", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { RatingProps } from "../../types"
+import ratingThemeDefault, { createRatingTheme } from "../../themes/rating.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const ratingTheme = uiConfig.colors ? createRatingTheme() : ratingThemeDefault
+
+const rating = scv(ratingTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RatingProps
+
+const classes = resolveClasses(rating, {}, useUi("rating", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLASelect.astro

@@ -72,38 +72,52 @@ const initialLabel = selectedItem ? selectedItem.label : ""
 </div>
 
 <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;
+  const initializeSelects = () => {
+    document.querySelectorAll("[data-select-wrapper]").forEach(wrapper => {
+      if (wrapper.hasAttribute("data-initialized")) return;
+      wrapper.setAttribute("data-initialized", "true");
 
-    if (!trigger || !dropdown) return;
+      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;
 
-    trigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      dropdown.classList.toggle("hidden");
-    });
+      if (!trigger || !dropdown) return;
 
-    items.forEach(item => {
-      item.addEventListener("click", (e) => {
+      trigger.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");
+        dropdown.classList.toggle("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;
+            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");
+        });
       });
     });
+  };
 
-    document.addEventListener("click", () => {
+  // Close all dropdowns when clicking outside
+  document.addEventListener("click", () => {
+    document.querySelectorAll("[data-select-dropdown]").forEach(dropdown => {
       dropdown.classList.add("hidden");
     });
   });
+
+  document.addEventListener("DOMContentLoaded", initializeSelects);
+  document.addEventListener("astro:page-load", initializeSelects);
 </script>

package/src/components/astro/RLASeparator.astro

@@ -1,27 +1,78 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SeparatorProps } from "../../types"
-import separatorTheme from "../../themes/separator.theme"
-
-const separator = scv(separatorTheme)
-
-const {
-  orientation = "horizontal",
-  decorative = true,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SeparatorProps
-
-const classes = resolveClasses(separator, {
-  orientation
-}, useUi("separator", uiProp), className)
----
-<div
-  class={classes.root}
-  data-slot="root"
-  role={decorative ? "none" : "separator"}
-  aria-orientation={decorative ? undefined : orientation}
-  {...rest}
-/>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SeparatorProps } from "../../types"
+import separatorThemeDefault, { createSeparatorTheme } from "../../themes/separator.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import RLAAvatar from "./RLAAvatar.astro"
+import { cx } from "css-variants"
+
+const uiConfig = getUIConfig()
+const separatorTheme = uiConfig.colors ? createSeparatorTheme() : separatorThemeDefault
+
+const separator = scv(separatorTheme)
+
+const {
+  orientation = "horizontal",
+  color = "neutral",
+  size = "xs",
+  type = "solid",
+  label,
+  icon,
+  avatar,
+  position = "center",
+  decorative = true,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SeparatorProps
+
+const classes = resolveClasses(separator, {
+  orientation,
+  color,
+  size,
+  type,
+  position
+}, useUi("separator", uiProp), className)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role={decorative ? "none" : "separator"}
+  aria-orientation={decorative ? undefined : orientation}
+  {...rest}
+>
+  <div class={classes.border} />
+
+  {(label || icon || avatar || Astro.slots.has("default")) && (
+    <>
+      <div class={classes.container} data-slot="container">
+        <slot name="avatar">
+          {avatar && (
+            <RLAAvatar 
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
+              size={classes.avatarSize as any} 
+              class={classes.avatar} 
+              data-slot="avatar" 
+            />
+          )}
+        </slot>
+        
+        <slot name="icon">
+          {icon && (
+            <span class={classes.icon} data-slot="icon">
+              <span class={cx(icon)} aria-hidden="true" />
+            </span>
+          )}
+        </slot>
+
+        <span class={classes.label} data-slot="label">
+          {label}
+          <slot />
+        </span>
+      </div>
+
+      <div class={classes.border} />
+    </>
+  )}
+</div>