@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLASidebar.astro

@@ -1,212 +1,158 @@
----
-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>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SidebarProps, SidebarItem } from "../../types"
+import sidebarThemeDefault 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,
+  _depth = 0,
+  ...rest
+} = Astro.props as SidebarProps & { t?: (key: string) => string; _depth?: number }
+
+const classes = resolveClasses(sidebar, {
+  side,
+  collapsible
+}, useUi("sidebar", uiProp), className)
+
+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" || v === "default") { color = "primary"; variant = "soft" }
+  }
+  return { text: badge.text || "", color, variant: variant as "solid" | "outline" | "soft", class: badge.class || "" }
+}
+
+const isRoot = _depth === 0
+// Indentation per depth level
+const indentClass = _depth === 0 ? "ml-6" : _depth === 1 ? "ml-4" : "ml-3"
+const textSizeClass = _depth === 0 ? "" : "text-xs"
+---
+
+{isRoot ? (
+  <>
+    <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>
+          <Astro.self items={items} t={t} _depth={1} ui={uiProp} />
+        </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>
+  </>
+) : (
+  <div class="flex flex-col gap-0.5">
+    {items.map((item: SidebarItem) => {
+      const hasChildren = item.children && item.children.length > 0
+      const isActive = item.active || hasActiveChild(item)
+      const b = normalizeBadge(item.badge)
+      return (
+        <div class={_depth === 1 ? classes.item : ""} data-slot={_depth === 1 ? "item" : undefined}>
+          {hasChildren ? (
+            <details open={isActive} class="group/details">
+              <summary
+                class={
+                  (_depth === 1 ? classes.itemLink : `flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors ${textSizeClass}`) +
+                  (isActive ? " text-foreground bg-muted" : "") +
+                  " list-none cursor-pointer"
+                }
+                data-slot="item-summary"
+              >
+                {item.icon && <span class={(_depth === 1 ? classes.itemIcon : "size-3.5 shrink-0") + " " + item.icon} aria-hidden="true" />}
+                <span data-slot="item-text" class="truncate flex-1">{t(item.label)}</span>
+                {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 ml-auto transition-transform group-open/details:rotate-90" />
+              </summary>
+              <div class={`mt-0.5 ${indentClass} flex flex-col gap-0.5`}>
+                <Astro.self items={item.children} t={t} _depth={_depth + 1} />
+              </div>
+            </details>
+          ) : (
+            <a
+              href={item.href ?? "#"}
+              class={
+                (_depth === 1 ? classes.itemLink : `flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors ${textSizeClass}`) +
+                (isActive ? " text-foreground bg-muted" : "")
+              }
+              aria-current={isActive ? "page" : undefined}
+            >
+              {item.icon && <span class={(_depth === 1 ? classes.itemIcon : "size-3.5 shrink-0") + " " + item.icon} aria-hidden="true" />}
+              <span data-slot="item-text" class="truncate flex-1">{t(item.label)}</span>
+              {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>
+      )
+    })}
+  </div>
+)}

package/src/components/astro/RLASlideover.astro

@@ -11,7 +11,7 @@ const slideoverTheme = uiConfig.colors ? createSlideoverTheme() : slideoverTheme
 const slideover = scv(slideoverTheme)
 
 const {
-  side = "right",
+  side = "left",
   title,
   description,
   triggerLabel,
@@ -32,12 +32,12 @@ const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
       class={classes.trigger}
       data-slot="trigger"
       type="button"
-      onclick={`document.getElementById('${dialogId}').showModal()`}
+      data-dialog-show={dialogId}
     >
       {triggerLabel}
     </button>
   ) : (
-    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
+    <span data-dialog-show={dialogId}>
       <slot name="trigger" />
     </span>
   )}
@@ -53,7 +53,7 @@ const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
       class={classes.closeButton}
       data-slot="close-button"
       type="button"
-      onclick={`document.getElementById('${dialogId}').close()`}
+      data-dialog-close={dialogId}
       aria-label="Close slideover"
     >
       <span class="i-lucide-x size-4" aria-hidden="true" />
@@ -74,3 +74,98 @@ const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
     </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>
+  if (!(window as any).rlaDialogListenerActive) {
+    (window as any).rlaDialogListenerActive = true;
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+
+      const showTrigger = target.closest('[data-dialog-show]');
+      if (showTrigger) {
+        const dialogId = showTrigger.getAttribute('data-dialog-show');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          if (dialog) {
+            if (typeof dialog.showModal === 'function') {
+              dialog.showModal();
+            } else if (typeof (dialog as any).showmodal === 'function') {
+              (dialog as any).showmodal();
+            }
+          }
+        }
+      }
+
+      const closeTrigger = target.closest('[data-dialog-close]');
+      if (closeTrigger) {
+        const dialogId = closeTrigger.getAttribute('data-dialog-close');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          dialog?.close();
+        }
+      }
+
+      if (target.tagName === 'DIALOG' && target.getAttribute('data-close-on-click-outside') === 'true') {
+        const rect = 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) {
+          (target as HTMLDialogElement).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>