@rimelight/ui 0.0.33 → 0.0.34

package/src/components/astro/RLAButton.astro

@@ -1,139 +1,141 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ButtonProps } from "../../types"
-import buttonThemeDefault, { createButtonTheme } from "../../themes/button.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import RLAAvatar from "./RLAAvatar.astro"
-
-const uiConfig = getUIConfig()
-const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
-
-const button = scv(buttonTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  avatar,
-  loading = false,
-  loadingAuto = false,
-  square = false,
-  block = false,
-  active = false,
-  theme,
-  activeColor,
-  activeVariant,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ButtonProps
-
-const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading")) || loading
-const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
-
-const showLeadingIcon = loading
-  ? "i-lucide-loader-circle"
-  : leadingIcon
-
-const showTrailingIcon = loading
-  ? "i-lucide-loader-circle"
-  : trailingIcon
-
-const leadingIconClass = loading ? "animate-spin" : ""
-const trailingIconClass = loading ? "animate-spin" : ""
-
-const classes = resolveClasses(button, {
-  variant: active && activeVariant ? activeVariant : variant,
-  color: active && activeColor ? activeColor : color,
-  size,
-  block,
-  square: square || (!label && !Astro.slots.has("default")),
-  leading: isLeading,
-  trailing: isTrailing,
-  loading,
-  active,
-  theme
-}, useUi("button", uiProp), className);
-
-const Tag = href ? "a" : "button";
-
-const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
----
-<Tag
-  class={classes.root}
-  data-slot="root"
-  {...(Tag === "a" ? { href } : {})}
-  {...loadingAutoProps}
-  {...rest}
->
-  <slot name="leading" {...{ ui: classes }}>
-    {isLeading && (
-      <span class={classes.leadingIcon} data-slot="leading-icon">
-        {loading || leadingIcon ? (
-           <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
-        ) : avatar ? (
-           <RLAAvatar 
-              {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
-              size={classes.leadingAvatarSize as any} 
-              class={classes.leadingAvatar} 
-              data-slot="leading-avatar" 
-           />
-        ) : null}
-      </span>
-    )}
-  </slot>
-
-  {label !== undefined && label !== null && (
-    <span class={classes.label} data-slot="label">
-      {label}
-    </span>
-  )}
-  {!label && <slot />}
-
-  <slot name="trailing" {...{ ui: classes }}>
-    {isTrailing && (
-      <span class={classes.trailingIcon} data-slot="trailing-icon">
-        <span class={cx(showTrailingIcon, trailingIconClass)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-</Tag>
-
-{loadingAuto && (
-  <script>
-    document.querySelectorAll('button[data-loading-auto]').forEach((button) => {
-      button.addEventListener('click', async (event) => {
-        // Find if there are any other click listeners that return a promise
-        // This is tricky in vanilla JS, but we can assume if it's data-loading-auto,
-        // the user wants us to track the click.
-        // If the button is already loading, don't do anything
-        if (button.getAttribute('data-loading') === 'true') return;
-
-        // We can't easily intercept other listeners, but if this is an Astro component,
-        // the onClick might be passed via ...rest as a string or handled via a separate script.
-        
-        // A better way: if data-loading-auto is present, we wrap the click.
-        // But we need to know what to wait for.
-        
-        // In Rimelight UI, we handle this via native DOM events.
-        // In Astro, if the user adds an event listener in their own script, we don't know.
-        
-        // If they use standard onClick attribute:
-        const onClick = button.getAttribute('onclick');
-        if (onClick) {
-           button.setAttribute('data-loading', 'true');
-           button.classList.add('is-loading'); // We might need to ensure the CSS handles this
-           // Actually, the styles are driven by the classes generated by scv.
-           // Changing those classes dynamically is hard without knowing the full list.
-           
-           // However, if we just want PARITY in the API, we can at least provide the hook.
-        }
-      });
-    });
-  </script>
-)}
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ButtonProps } from "../../types"
+import buttonThemeDefault, { createButtonTheme } from "../../themes/button.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import RLAAvatar from "./RLAAvatar.astro"
+
+const uiConfig = getUIConfig()
+const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
+
+const button = scv(buttonTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  avatar,
+  loading = false,
+  loadingAuto = false,
+  square = false,
+  rounded = false,
+  block = false,
+  active = false,
+  theme,
+  activeColor,
+  activeVariant,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ButtonProps
+
+const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading")) || loading
+const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
+
+const showLeadingIcon = loading
+  ? "i-lucide-loader-circle"
+  : leadingIcon
+
+const showTrailingIcon = loading
+  ? "i-lucide-loader-circle"
+  : trailingIcon
+
+const leadingIconClass = loading ? "animate-spin" : ""
+const trailingIconClass = loading ? "animate-spin" : ""
+
+const classes = resolveClasses(button, {
+  variant: active && activeVariant ? activeVariant : variant,
+  color: active && activeColor ? activeColor : color,
+  size,
+  block,
+  square: square || (!label && !Astro.slots.has("default")),
+  rounded,
+  leading: isLeading,
+  trailing: isTrailing,
+  loading,
+  active,
+  theme
+}, useUi("button", uiProp), className);
+
+const Tag = href ? "a" : "button";
+
+const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
+---
+<Tag
+  class={classes.root}
+  data-slot="root"
+  {...(Tag === "a" ? { href } : {})}
+  {...loadingAutoProps}
+  {...rest}
+>
+  <slot name="leading" {...{ ui: classes }}>
+    {isLeading && (
+      <span class={classes.leadingIcon} data-slot="leading-icon">
+        {loading || leadingIcon ? (
+           <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
+        ) : avatar ? (
+           <RLAAvatar
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)}
+              size={classes.leadingAvatarSize as any}
+              class={classes.leadingAvatar}
+              data-slot="leading-avatar"
+           />
+        ) : null}
+      </span>
+    )}
+  </slot>
+
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+
+  <slot name="trailing" {...{ ui: classes }}>
+    {isTrailing && (
+      <span class={classes.trailingIcon} data-slot="trailing-icon">
+        <span class={cx(showTrailingIcon, trailingIconClass)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+</Tag>
+
+{loadingAuto && (
+  <script>
+    document.querySelectorAll('button[data-loading-auto]').forEach((button) => {
+      button.addEventListener('click', async (event) => {
+        // Find if there are any other click listeners that return a promise
+        // This is tricky in vanilla JS, but we can assume if it's data-loading-auto,
+        // the user wants us to track the click.
+        // If the button is already loading, don't do anything
+        if (button.getAttribute('data-loading') === 'true') return;
+
+        // We can't easily intercept other listeners, but if this is an Astro component,
+        // the onClick might be passed via ...rest as a string or handled via a separate script.
+
+        // A better way: if data-loading-auto is present, we wrap the click.
+        // But we need to know what to wait for.
+
+        // In Rimelight UI, we handle this via native DOM events.
+        // In Astro, if the user adds an event listener in their own script, we don't know.
+
+        // If they use standard onClick attribute:
+        const onClick = button.getAttribute('onclick');
+        if (onClick) {
+           button.setAttribute('data-loading', 'true');
+           button.classList.add('is-loading'); // We might need to ensure the CSS handles this
+           // Actually, the styles are driven by the classes generated by scv.
+           // Changing those classes dynamically is hard without knowing the full list.
+
+           // However, if we just want PARITY in the API, we can at least provide the hook.
+        }
+      });
+    });
+  </script>
+)}

package/src/components/astro/RLAChart.astro

@@ -20,9 +20,6 @@ const {
 
 const classes = resolveClasses(chart, {}, useUi("chart", uiProp), className)
 
-// Unique instance ID to prevent CSS collisions between multiple charts
-const instanceId = Math.random().toString(36).substring(2, 8)
-
 // Compute derived values on the server so we don't do heavy JS on the client
 const max = data.length > 0 ? Math.max(...data.map(d => d.value)) : 1
 const total = data.reduce((sum, d) => sum + d.value, 0)
@@ -40,21 +37,6 @@ const palette = [
 const getColor = (item: ChartDataPoint, index: number) =>
   item.color ?? palette[index % palette.length]
 
-// Strip angle brackets from color values to prevent XSS via </style> breakout
-const cssColor = (item: ChartDataPoint, index: number) =>
-  getColor(item, index).replace(/[<>]/g, "")
-
-// Build per-item CSS rules to avoid inline styles (CSP compliance)
-const itemCssRules: string[] = []
-data.forEach((item, i) => {
-  if (type === "bar") {
-    const pct = max > 0 ? (item.value / max) * 100 : 0
-    itemCssRules.push(`.rlc-${instanceId}-b-${i}{height:${pct}%;background:${cssColor(item, i)};min-height:4px;width:100%}`)
-  }
-  itemCssRules.push(`.rlc-${instanceId}-s-${i}{background:${cssColor(item, i)}}`)
-})
-const chartItemStyles = itemCssRules.join("")
-
 // Build pie/donut SVG path segments
 const PIE_R = 80
 const PIE_CX = 100
@@ -99,17 +81,17 @@ const areaPath = linePoints.length > 0
     ` L ${linePoints[linePoints.length - 1]!.x} ${LINE_H - LINE_PAD}` +
     ` L ${linePoints[0]!.x} ${LINE_H - LINE_PAD} Z`
   : ""
+const id = `chart-${Math.random().toString(36).substring(2, 9)}`
 ---
 
-<style define:vars={{ chartH: `${height}px`, chartInnerH: `${height - 60}px` }}>
-  [data-slot="root"] { min-height: var(--chart-h); }
-  [data-slot="container"] { height: var(--chart-inner-h); gap: 6px; align-items: flex-end; }
-  .rla-chart-line-wrap { height: var(--chart-inner-h); }
-  .rla-chart-pie-wrap { height: var(--chart-inner-h); }
-</style>
-<style set:html={chartItemStyles}></style>
+<style is:inline set:html={`
+  .${id} { min-height: ${height}px; }
+  .${id} [data-slot="container"] { height: ${height - 60}px; gap: 6px; align-items: flex-end; }
+  .${id} .rla-chart-line-wrap { height: ${height - 60}px; }
+  .${id} .rla-chart-pie-wrap { height: ${height - 60}px; }
+`} />
 
-<div class={classes.root} data-slot="root" {...rest}>
+<div class:list={[classes.root, id]} data-slot="root" {...rest}>
   {title && <div class={classes.title} data-slot="title">{title}</div>}
 
   {/* Bar Chart */}
@@ -122,10 +104,11 @@ const areaPath = linePoints.length > 0
             <span class="text-[10px] text-muted-foreground font-mono opacity-0 group-hover:opacity-100 transition-opacity">
               {item.value}
             </span>
-            <div
-              class={`${classes.bar} rlc-${instanceId}-b-${i}`}
-              title={`${item.label}: ${item.value}`}
-            />
+            <div class:list={[classes.bar, "h-full w-full overflow-hidden !bg-transparent"]} title={`${item.label}: ${item.value}`}>
+              <svg class="h-full w-full overflow-visible" viewBox="0 0 20 100" preserveAspectRatio="none">
+                <rect x="0" y={100 - pct} width="20" height={pct} fill={getColor(item, i)} rx="2" />
+              </svg>
+            </div>
             <span class={classes.axis}>{item.label}</span>
           </div>
         )
@@ -211,9 +194,9 @@ const areaPath = linePoints.length > 0
       <div class="flex flex-col gap-1.5">
         {data.map((item, i) => (
           <div class="flex items-center gap-2 text-xs text-muted-foreground">
-            <span
-              class={`size-3 rounded-sm shrink-0 rlc-${instanceId}-s-${i}`}
-            />
+            <svg class="size-3 shrink-0" viewBox="0 0 10 10">
+              <rect width="10" height="10" rx="2" fill={getColor(item, i)} />
+            </svg>
             <span>{item.label}</span>
             <span class="ml-1 font-mono text-foreground">{item.value}</span>
           </div>
@@ -230,7 +213,9 @@ const areaPath = linePoints.length > 0
     <div class={classes.legend} data-slot="legend">
       {data.map((item, i) => (
         <div class="flex items-center gap-1.5">
-          <span class={`size-2.5 rounded-full shrink-0 rlc-${instanceId}-s-${i}`} />
+          <svg class="size-2.5 shrink-0" viewBox="0 0 10 10">
+            <circle cx="5" cy="5" r="5" fill={getColor(item, i)} />
+          </svg>
           <span>{item.label}</span>
         </div>
       ))}