@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLASidebar.astro

@@ -1,135 +1,212 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SidebarProps, SidebarItem } from "../../types"
-import sidebarThemeDefault, { createSidebarTheme } from "../../themes/sidebar.theme"
-
-const sidebarTheme = sidebarThemeDefault
-const sidebar = scv(sidebarTheme)
-
-const {
-  items = [],
-  side = "left",
-  collapsible = "none",
-  logo,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SidebarProps
-
-const classes = resolveClasses(sidebar, {
-  side,
-  collapsible
-}, useUi("sidebar", uiProp), className)
-
-// Recursive helper to render sidebar items with children
-const hasActiveChild = (item: SidebarItem): boolean => {
-  if (item.active) return true
-  return (item.children ?? []).some(c => hasActiveChild(c))
-}
----
-
-<aside class={classes.root} data-slot="root" data-sidebar {...rest}>
-  {/* Header */}
-  <div class={classes.header} data-slot="header">
-    <slot name="header">
-      {logo && (
-        <span data-slot="sidebar-logo" class="flex items-center gap-2">
-          <span class="i-lucide-layers size-5 text-primary" />
-          <span class="truncate">{logo}</span>
-        </span>
-      )}
-    </slot>
-  </div>
-
-  {/* Body */}
-  <div class={classes.content} data-slot="content">
-    <slot>
-      {items.map((item) => {
-        const hasChildren = item.children && item.children.length > 0
-        const isActive = item.active || hasActiveChild(item)
-        return (
-          <div class={classes.item} data-slot="item">
-            {hasChildren ? (
-              <details open={isActive} class="group/details">
-                <summary
-                  class={classes.itemLink + (isActive ? " text-foreground bg-muted" : "") + " list-none cursor-pointer"}
-                  data-slot="item-summary"
-                >
-                  {item.icon && (
-                    <span
-                      class={classes.itemIcon + " " + item.icon}
-                      aria-hidden="true"
-                    />
-                  )}
-                  <span data-slot="item-text" class="truncate flex-1">{item.label}</span>
-                  {item.badge !== undefined && (
-                    <span class={classes.itemBadge} data-slot="item-badge">{item.badge}</span>
-                  )}
-                  <span class="i-lucide-chevron-right size-3.5 ml-auto transition-transform group-open/details:rotate-90" />
-                </summary>
-                <div class="mt-0.5 ml-6 flex flex-col gap-0.5">
-                  {item.children!.map(child => (
-                    <a
-                      href={child.href ?? "#"}
-                      class={classes.itemLink + (child.active ? " text-foreground bg-muted" : "") + " text-xs pl-2"}
-                    >
-                      {child.icon && <span class={classes.itemIcon + " " + child.icon} aria-hidden="true" />}
-                      <span data-slot="item-text" class="truncate flex-1">{child.label}</span>
-                      {child.badge !== undefined && (
-                        <span class={classes.itemBadge} data-slot="item-badge">{child.badge}</span>
-                      )}
-                    </a>
-                  ))}
-                </div>
-              </details>
-            ) : (
-              <a
-                href={item.href ?? "#"}
-                class={classes.itemLink + (isActive ? " text-foreground bg-muted" : "")}
-                aria-current={isActive ? "page" : undefined}
-              >
-                {item.icon && (
-                  <span
-                    class={classes.itemIcon + " " + item.icon}
-                    aria-hidden="true"
-                  />
-                )}
-                <span data-slot="item-text" class="truncate flex-1">{item.label}</span>
-                {item.badge !== undefined && (
-                  <span class={classes.itemBadge} data-slot="item-badge">{item.badge}</span>
-                )}
-              </a>
-            )}
-          </div>
-        )
-      })}
-    </slot>
-  </div>
-
-  {/* Footer */}
-  <div class={classes.footer} data-slot="footer">
-    <slot name="footer" />
-  </div>
-</aside>
-
-{collapsible === "offcanvas" && (
-  <button
-    type="button"
-    data-sidebar-toggle
-    class="fixed top-4 left-4 z-50 flex size-9 items-center justify-center rounded-md bg-background border border-border shadow-sm hover:bg-muted transition-colors"
-    aria-label="Toggle sidebar"
-  >
-    <span class="i-lucide-panel-left size-4" />
-  </button>
-)}
-
-<script>
-  document.querySelectorAll("[data-sidebar-toggle]").forEach(toggle => {
-    toggle.addEventListener("click", () => {
-      const sidebar = document.querySelector("[data-sidebar]");
-      if (!sidebar) return;
-      sidebar.classList.toggle("-translate-x-full");
-    });
-  });
-</script>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SidebarProps, SidebarItem } from "../../types"
+import sidebarThemeDefault, { createSidebarTheme } from "../../themes/sidebar.theme"
+import RLABadge from "./RLABadge.astro"
+
+const sidebarTheme = sidebarThemeDefault
+const sidebar = scv(sidebarTheme)
+
+const {
+  items = [],
+  side = "left",
+  collapsible = "none",
+  logo,
+  ui: uiProp,
+  class: className,
+  t = (key: string) => key,
+  ...rest
+} = Astro.props as SidebarProps & { t?: (key: string) => string }
+
+const classes = resolveClasses(sidebar, {
+  side,
+  collapsible
+}, useUi("sidebar", uiProp), className)
+
+// Recursive helper to render sidebar items with children
+const hasActiveChild = (item: SidebarItem): boolean => {
+  if (item.active) return true
+  return (item.children ?? []).some(c => hasActiveChild(c))
+}
+
+function normalizeBadge(badge: any) {
+  if (!badge) return null
+  if (typeof badge === "string") {
+    return {
+      text: badge,
+      color: "primary",
+      variant: "soft" as const,
+      class: ""
+    }
+  }
+  
+  let color = badge.color || "primary"
+  let variant = badge.variant || "soft"
+  
+  if (badge.variant) {
+    const v = badge.variant.toLowerCase()
+    if (v === "tip" || v === "success") {
+      color = "success"
+      variant = "soft"
+    } else if (v === "caution" || v === "warning") {
+      color = "warning"
+      variant = "soft"
+    } else if (v === "danger") {
+      color = "danger"
+      variant = "soft"
+    } else if (v === "note") {
+      color = "primary"
+      variant = "soft"
+    } else if (v === "default") {
+      color = "primary"
+      variant = "soft"
+    }
+  }
+  
+  return {
+    text: badge.text || "",
+    color,
+    variant: variant as "solid" | "outline" | "soft",
+    class: badge.class || ""
+  }
+}
+---
+
+<aside class={classes.root} data-slot="root" data-sidebar {...rest}>
+  {/* Header */}
+  <div class={classes.header} data-slot="header">
+    <slot name="header">
+      {logo && (
+        <span data-slot="sidebar-logo" class="flex items-center gap-2">
+          <span class="i-lucide-layers size-5 text-primary" />
+          <span class="truncate">{logo}</span>
+        </span>
+      )}
+    </slot>
+  </div>
+
+  {/* Body */}
+  <div class={classes.content} data-slot="content">
+    <slot>
+      {items.map((item) => {
+        const hasChildren = item.children && item.children.length > 0
+        const isActive = item.active || hasActiveChild(item)
+        return (
+          <div class={classes.item} data-slot="item">
+            {hasChildren ? (
+              <details open={isActive} class="group/details">
+                <summary
+                  class={classes.itemLink + (isActive ? " text-foreground bg-muted" : "") + " list-none cursor-pointer"}
+                  data-slot="item-summary"
+                >
+                  {item.icon && (
+                    <span
+                      class={classes.itemIcon + " " + item.icon}
+                      aria-hidden="true"
+                    />
+                  )}
+                  <span data-slot="item-text" class="truncate flex-1">{t(item.label)}</span>
+                  {(() => {
+                    const b = normalizeBadge(item.badge);
+                    return b && (
+                      <RLABadge
+                        variant={b.variant}
+                        color={b.color}
+                        size="xs"
+                        class={"ml-auto select-none " + b.class}
+                        data-slot="item-badge"
+                      >
+                        {t(b.text)}
+                      </RLABadge>
+                    );
+                  })()}
+                  <span class="i-lucide-chevron-right size-3.5 ml-auto transition-transform group-open/details:rotate-90" />
+                </summary>
+                <div class="mt-0.5 ml-6 flex flex-col gap-0.5">
+                  {item.children!.map(child => (
+                    <a
+                      href={child.href ?? "#"}
+                      class={classes.itemLink + (child.active ? " text-foreground bg-muted" : "") + " text-xs pl-2"}
+                    >
+                      {child.icon && <span class={classes.itemIcon + " " + child.icon} aria-hidden="true" />}
+                      <span data-slot="item-text" class="truncate flex-1">{t(child.label)}</span>
+                      {(() => {
+                        const b = normalizeBadge(child.badge);
+                        return b && (
+                          <RLABadge
+                            variant={b.variant}
+                            color={b.color}
+                            size="xs"
+                            class={"ml-auto select-none " + b.class}
+                            data-slot="item-badge"
+                          >
+                            {t(b.text)}
+                          </RLABadge>
+                        );
+                      })()}
+                    </a>
+                  ))}
+                </div>
+              </details>
+            ) : (
+              <a
+                href={item.href ?? "#"}
+                class={classes.itemLink + (isActive ? " text-foreground bg-muted" : "")}
+                aria-current={isActive ? "page" : undefined}
+              >
+                {item.icon && (
+                  <span
+                    class={classes.itemIcon + " " + item.icon}
+                    aria-hidden="true"
+                  />
+                )}
+                <span data-slot="item-text" class="truncate flex-1">{t(item.label)}</span>
+                {(() => {
+                  const b = normalizeBadge(item.badge);
+                  return b && (
+                    <RLABadge
+                      variant={b.variant}
+                      color={b.color}
+                      size="xs"
+                      class={"ml-auto select-none " + b.class}
+                      data-slot="item-badge"
+                    >
+                      {t(b.text)}
+                    </RLABadge>
+                  );
+                })()}
+              </a>
+            )}
+          </div>
+        )
+      })}
+    </slot>
+  </div>
+
+  {/* Footer */}
+  <div class={classes.footer} data-slot="footer">
+    <slot name="footer" />
+  </div>
+</aside>
+
+{collapsible === "offcanvas" && (
+  <button
+    type="button"
+    data-sidebar-toggle
+    class="fixed top-4 left-4 z-50 flex size-9 items-center justify-center rounded-md bg-background border border-border shadow-sm hover:bg-muted transition-colors"
+    aria-label="Toggle sidebar"
+  >
+    <span class="i-lucide-panel-left size-4" />
+  </button>
+)}
+
+<script>
+  document.querySelectorAll("[data-sidebar-toggle]").forEach(toggle => {
+    toggle.addEventListener("click", () => {
+      const sidebar = document.querySelector("[data-sidebar]");
+      if (!sidebar) return;
+      sidebar.classList.toggle("-translate-x-full");
+    });
+  });
+</script>

package/src/components/astro/RLASkeleton.astro

@@ -1,20 +1,24 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SkeletonProps } from "../../types"
-import skeletonTheme from "../../themes/skeleton.theme"
-
-const skeleton = scv(skeletonTheme)
-
-const {
-  shape = "rounded",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SkeletonProps
-
-const classes = resolveClasses(skeleton, {
-  shape
-}, useUi("skeleton", uiProp), className)
----
-<div class={classes.root} data-slot="root" {...rest} />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SkeletonProps } from "../../types"
+import skeletonThemeDefault, { createSkeletonTheme } from "../../themes/skeleton.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const skeletonTheme = uiConfig.colors ? createSkeletonTheme() : skeletonThemeDefault
+
+const skeleton = scv(skeletonTheme)
+
+const {
+  shape = "rounded",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SkeletonProps
+
+const classes = resolveClasses(skeleton, {
+  shape
+}, useUi("skeleton", uiProp), className)
+---
+<div class={classes.root} data-slot="root" {...rest} />

package/src/components/astro/RLASlideover.astro

@@ -1,72 +1,141 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SlideoverProps } from "../../types"
-import slideoverTheme from "../../themes/slideover.theme"
-
-const slideover = scv(slideoverTheme)
-
-const {
-  side = "right",
-  title,
-  description,
-  triggerLabel,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SlideoverProps
-
-const classes = resolveClasses(slideover, {
-  side
-}, useUi("slideover", uiProp), className)
-
-const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="slideover-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}
-  >
-    <button
-      class={classes.closeButton}
-      data-slot="close-button"
-      type="button"
-      onclick={`document.getElementById('${dialogId}').close()`}
-      aria-label="Close slideover"
-    >
-      <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>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SlideoverProps } from "../../types"
+import slideoverThemeDefault, { createSlideoverTheme } from "../../themes/slideover.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const slideoverTheme = uiConfig.colors ? createSlideoverTheme() : slideoverThemeDefault
+
+const slideover = scv(slideoverTheme)
+
+const {
+  side = "left",
+  title,
+  description,
+  triggerLabel,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SlideoverProps
+
+const classes = resolveClasses(slideover, {
+  side
+}, useUi("slideover", uiProp), className)
+
+const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="slideover-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}
+  >
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').close()`}
+      aria-label="Close slideover"
+    >
+      <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>
+
+<style is:global>
+  /* Transition/Animation support for native <dialog> slideovers */
+  dialog[data-slot="content"] {
+    transition: transform 0.3s ease, opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete !important;
+    opacity: 0;
+  }
+  
+  /* Left side slideover */
+  dialog[data-slot="content"].left-0 {
+    transform: translateX(-100%);
+  }
+  
+  /* Right side slideover */
+  dialog[data-slot="content"].right-0 {
+    transform: translateX(100%);
+  }
+  
+  /* Open states */
+  dialog[data-slot="content"][open] {
+    opacity: 1 !important;
+    transform: translateX(0) !important;
+  }
+  
+  /* Starting styles for enter transitions */
+  @starting-style {
+    dialog[data-slot="content"][open].left-0 {
+      opacity: 0 !important;
+      transform: translateX(-100%) !important;
+    }
+    dialog[data-slot="content"][open].right-0 {
+      opacity: 0 !important;
+      transform: translateX(100%) !important;
+    }
+    dialog[data-slot="content"][open]::backdrop {
+      background-color: rgba(0, 0, 0, 0) !important;
+      backdrop-filter: blur(0px) !important;
+    }
+  }
+
+  /* Backdrop transition */
+  dialog[data-slot="content"]::backdrop {
+    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete !important;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    backdrop-filter: blur(4px) !important;
+  }
+</style>
+
+<script is:inline>
+  document.addEventListener('click', (e) => {
+    if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
+      const rect = e.target.getBoundingClientRect();
+      const isInModal = (
+        rect.top <= e.clientY &&
+        e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX &&
+        e.clientX <= rect.left + rect.width
+      );
+      if (!isInModal) {
+        e.target.close();
+      }
+    }
+  });
+</script>
+

package/src/components/astro/RLASlider.astro

@@ -29,17 +29,11 @@ const classes = resolveClasses(slider, {
 
 const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
 ---
-<style define:vars={{ sliderPct: `${percentage}%` }}>
-  [data-slot="range"] { left: 0%; right: calc(100% - var(--slider-pct)); }
-  [data-slot="thumb"] { left: calc(var(--slider-pct) - 9px); }
-</style>
-
 <div class={classes.root} data-slot="slider-root" {...rest}>
   <div class={classes.track} data-slot="track">
-    <div
-      class={classes.range}
-      data-slot="range"
-    />
+    <svg class="h-full w-full overflow-visible pointer-events-none">
+      <rect class:list={[classes.range, "h-full"]} width={`${percentage}%`} fill="currentColor" rx="2" />
+    </svg>
   </div>
   <input
     type="range"
@@ -48,11 +42,17 @@ const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100
     step={step}
     value={value}
     name={name}
-    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
     data-slot="input"
   />
-  <div
-    class={classes.thumb}
-    data-slot="thumb"
-  />
+  <svg class="absolute inset-0 h-full w-full overflow-visible pointer-events-none">
+    <circle
+      cx={`${percentage}%`}
+      cy="50%"
+      r="8"
+      class:list={[classes.thumb, "pointer-events-auto border-none"]}
+      data-slot="thumb"
+      fill="currentColor"
+    />
+  </svg>
 </div>