@rimelight/ui 0.0.34 → 0.0.36

package/src/components/astro/RLATableOfContents.astro

@@ -1,23 +1,109 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TableOfContentsProps } from "../../types"
-import tableOfContentsThemeDefault, { createTableOfContentsTheme } from "../../themes/table-of-contents.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const tableOfContentsTheme = uiConfig.colors ? createTableOfContentsTheme() : tableOfContentsThemeDefault
-
-const tableOfContents = scv(tableOfContentsTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TableOfContentsProps
-
-const classes = resolveClasses(tableOfContents, {}, useUi("tableOfContents", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TableOfContentsProps } from "../../types"
+import tableOfContentsThemeDefault, { createTableOfContentsTheme } from "../../themes/table-of-contents.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const tableOfContentsTheme = uiConfig.colors ? createTableOfContentsTheme() : tableOfContentsThemeDefault
+
+const tableOfContents = scv(tableOfContentsTheme)
+
+const {
+  headings,
+  tableOfContents: tableOfContentsConfig,
+  ui: uiProp,
+  class: className,
+  containerSelector = ".markdown-content",
+  ...rest
+} = Astro.props as TableOfContentsProps
+
+const classes = resolveClasses(tableOfContents, {}, useUi("tableOfContents", uiProp), className);
+
+if (tableOfContentsConfig === false) {
+  // Render nothing
+}
+
+const minLevel = tableOfContentsConfig ? (tableOfContentsConfig.minHeadingLevel ?? 2) : 2;
+const maxLevel = tableOfContentsConfig ? (tableOfContentsConfig.maxHeadingLevel ?? 3) : 3;
+
+const filteredHeadings = tableOfContentsConfig !== false
+  ? headings.filter(h => h.depth >= minLevel && h.depth <= maxLevel)
+  : [];
+
+const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) => `:scope > h${minLevel + i}`).join(", ");
+---
+
+{tableOfContentsConfig !== false && filteredHeadings.length > 0 && (
+  <div class={classes.root} data-slot="root" data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
+    <div class={classes.container} data-slot="container">
+      <h4 class={classes.title} data-slot="title">On this page</h4>
+      <ul class:list={[classes.list, "mt-2xl flex flex-col gap-3xs"]} data-slot="list">
+        {filteredHeadings.map(heading => (
+          <li
+            class:list={[
+              classes.item,
+              heading.depth === 2 && "pl-3xs",
+              heading.depth === 3 && "pl-6",
+              heading.depth >= 4 && "pl-9"
+            ]}
+            data-slot="item"
+          >
+            <a
+              href={`#${heading.slug}`}
+              class:list={["toc-link", classes.link]}
+              data-slot="link"
+            >
+              <span class={classes.linkText} data-slot="link-text">{heading.text}</span>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+)}
+
+<style is:global>
+  .toc-active {
+    color: var(--primary);
+    font-weight: 600;
+  }
+</style>
+
+<script is:inline>
+  (function() {
+    var root = document.querySelector('[data-container-selector]');
+    if (!root) return;
+
+    function updateActiveHeading() {
+      var links = root.querySelectorAll(".toc-link");
+      if (links.length === 0) return;
+
+      var threshold = window.innerHeight * 0.5;
+      var activeId = null;
+
+      for (var i = 0; i < links.length; i++) {
+        var href = links[i].getAttribute("href");
+        if (!href || href.charAt(0) !== "#") continue;
+        var id = href.substring(1);
+        var heading = document.getElementById(id);
+        if (heading && heading.getBoundingClientRect().top <= threshold) {
+          activeId = id;
+        }
+      }
+
+      for (var j = 0; j < links.length; j++) {
+        links[j].classList.remove("toc-active");
+      }
+      if (activeId) {
+        var targetLink = root.querySelector('a[href="#' + activeId + '"].toc-link');
+        if (targetLink) targetLink.classList.add("toc-active");
+      }
+    }
+
+    updateActiveHeading();
+    window.addEventListener("scroll", updateActiveHeading, { passive: true });
+    document.addEventListener("astro:after-swap", updateActiveHeading);
+  })();
+</script>

package/src/components/astro/RLATabs.astro

@@ -1,133 +1,147 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TabsProps } from "../../types"
-import tabsThemeDefault, { createTabsTheme } from "../../themes/tabs.theme"
-
-const tabsTheme = tabsThemeDefault
-const tabs = scv(tabsTheme)
-
-const {
-  items = [],
-  value = "",
-  variant = "solid",
-  orientation = "horizontal",
-  size = "md",
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TabsProps
-
-const classes = resolveClasses(tabs, {
-  variant,
-  orientation,
-  size
-}, useUi("tabs", uiProp), className);
-
-const initialValue = value || (items.length > 0 ? items[0].value : "")
----
-<div class={classes.root} data-slot="root" data-tabs-container data-value={initialValue} {...rest}>
-  <div class={classes.list} data-slot="list" role="tablist">
-    {items.map((item) => {
-      const active = item.value === initialValue
-      return (
-        <button
-          type="button"
-          class={classes.trigger}
-          data-slot="trigger"
-          role="tab"
-          data-value={item.value}
-          data-state={active ? "active" : "inactive"}
-          disabled={item.disabled}
-        >
-          {item.icon && <span class={item.icon + " mr-2"} />}
-          {item.label}
-        </button>
-      )
-    })}
-  </div>
-  <div class="flex-1">
-    <slot>
-      {items.map(item => {
-        const active = item.value === initialValue
-        return (
-          <div
-            class={classes.content + (active ? "" : " hidden")}
-            data-slot="content"
-            role="tabpanel"
-            data-value={item.value}
-          >
-            {item.content}
-          </div>
-        )
-      })}
-    </slot>
-  </div>
-</div>
-
-<script>
-  function initTabs() {
-    document.querySelectorAll("[data-tabs-container]").forEach(container => {
-      const containerValue = (container as HTMLElement).dataset.value;
-      const triggers = container.querySelectorAll("[role=tab]");
-      const panels = container.querySelectorAll("[role=tabpanel]");
-
-      triggers.forEach(trigger => {
-        const val = (trigger as HTMLButtonElement).dataset.value;
-        trigger.setAttribute("data-state", val === containerValue ? "active" : "inactive");
-      });
-
-      panels.forEach(panel => {
-        const val = (panel as HTMLElement).dataset.value;
-        if (val === containerValue) {
-          panel.classList.remove("hidden");
-          (panel as HTMLElement).style.display = "";
-        } else {
-          panel.classList.add("hidden");
-          (panel as HTMLElement).style.display = "none";
-        }
-      });
-    });
-  }
-
-  // Setup click listeners
-  function setupTabsListeners() {
-    document.querySelectorAll("[data-tabs-container]").forEach(container => {
-      const triggers = container.querySelectorAll("[role=tab]");
-      const panels = container.querySelectorAll("[role=tabpanel]");
-
-      triggers.forEach(trigger => {
-        // Prevent duplicate listener registration
-        if ((trigger as any).__tabsListenerAttached) return;
-        (trigger as any).__tabsListenerAttached = true;
-
-        trigger.addEventListener("click", () => {
-          const targetValue = (trigger as HTMLButtonElement).dataset.value;
-
-          triggers.forEach(t => {
-            t.setAttribute("data-state", t.dataset.value === targetValue ? "active" : "inactive");
-          });
-
-          panels.forEach(panel => {
-            if ((panel as HTMLElement).dataset.value === targetValue) {
-              panel.classList.remove("hidden");
-              (panel as HTMLElement).style.display = "";
-            } else {
-              panel.classList.add("hidden");
-              (panel as HTMLElement).style.display = "none";
-            }
-          });
-        });
-      });
-    });
-  }
-
-  initTabs();
-  setupTabsListeners();
-
-  document.addEventListener("astro:after-swap", () => {
-    initTabs();
-    setupTabsListeners();
-  });
-</script>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TabsProps } from "../../types"
+import tabsThemeDefault, { createTabsTheme } from "../../themes/tabs.theme"
+
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const tabsTheme = uiConfig.colors ? createTabsTheme() : tabsThemeDefault
+const tabs = scv(tabsTheme)
+
+const {
+  items = [],
+  value = "",
+  variant = "solid",
+  orientation = "horizontal",
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TabsProps
+
+const classes = resolveClasses(tabs, {
+  variant,
+  orientation,
+  size
+}, useUi("tabs", uiProp), className);
+
+const initialValue = value || (items.length > 0 ? items[0]?.value : "")
+---
+<rla-tabs {...rest}>
+  <div class={classes.root} data-slot="root" data-tabs-container data-value={initialValue}>
+    <div class={classes.list} data-slot="list" role="tablist">
+      {items.map((item) => {
+        const active = item.value === initialValue
+        return (
+          <button
+            type="button"
+            class={classes.trigger}
+            data-slot="trigger"
+            role="tab"
+            data-value={item.value}
+            data-state={active ? "active" : "inactive"}
+            disabled={item.disabled}
+          >
+            {item.icon && <span class={item.icon + " mr-2"} />}
+            {item.label}
+          </button>
+        )
+      })}
+    </div>
+    <div class="flex-1">
+      <slot>
+        {items.map(item => {
+          const active = item.value === initialValue
+          return (
+            <div
+              class={classes.content + (active ? "" : " hidden")}
+              data-slot="content"
+              role="tabpanel"
+              data-value={item.value}
+            >
+              {item.content}
+            </div>
+          )
+        })}
+      </slot>
+    </div>
+  </div>
+</rla-tabs>
+
+<script>
+  if (typeof HTMLElement !== 'undefined') {
+    class RLATabs extends HTMLElement {
+      private tabsCleanup: (() => void) | null = null;
+
+      connectedCallback() {
+        this.style.display = 'contents';
+        const container = this.querySelector("[data-tabs-container]") as HTMLElement | null;
+        if (!container) return;
+
+        const containerValue = container.dataset.value;
+        const triggers = container.querySelectorAll("[role=tab]");
+        const panels = container.querySelectorAll("[role=tabpanel]");
+
+        triggers.forEach(trigger => {
+          const val = (trigger as HTMLButtonElement).dataset.value;
+          trigger.setAttribute("data-state", val === containerValue ? "active" : "inactive");
+        });
+
+        panels.forEach(panel => {
+          const val = (panel as HTMLElement).dataset.value;
+          if (val === containerValue) {
+            panel.classList.remove("hidden");
+            (panel as HTMLElement).style.display = "";
+          } else {
+            panel.classList.add("hidden");
+            (panel as HTMLElement).style.display = "none";
+          }
+        });
+
+        const clickCleanups: (() => void)[] = [];
+
+        triggers.forEach(triggerNode => {
+          const trigger = triggerNode as HTMLButtonElement;
+          const onClick = () => {
+            const targetValue = trigger.dataset.value;
+
+            triggers.forEach(tNode => {
+              const t = tNode as HTMLButtonElement;
+              t.setAttribute("data-state", t.dataset.value === targetValue ? "active" : "inactive");
+            });
+
+            panels.forEach(panel => {
+              if ((panel as HTMLElement).dataset.value === targetValue) {
+                panel.classList.remove("hidden");
+                (panel as HTMLElement).style.display = "";
+              } else {
+                panel.classList.add("hidden");
+                (panel as HTMLElement).style.display = "none";
+              }
+            });
+          };
+          trigger.addEventListener("click", onClick);
+          clickCleanups.push(() => trigger.removeEventListener("click", onClick));
+        });
+
+        this.tabsCleanup = () => {
+          clickCleanups.forEach(fn => fn());
+        };
+      }
+
+      disconnectedCallback() {
+        if (this.tabsCleanup) {
+          this.tabsCleanup();
+          this.tabsCleanup = null;
+        }
+      }
+    }
+
+    if (!customElements.get('rla-tabs')) {
+      customElements.define('rla-tabs', RLATabs);
+    }
+  }
+</script>

package/src/components/astro/RLATextarea.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { TextareaProps } from "../../types"
 import textareaThemeDefault, { createTextareaTheme } from "../../themes/textarea.theme"
 
-const textareaTheme = textareaThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const textareaTheme = uiConfig.colors ? createTextareaTheme() : textareaThemeDefault
 const textarea = scv(textareaTheme)
 
 const {

package/src/components/astro/RLAThemeSelector.astro

@@ -1,77 +1,106 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ThemeSelectorProps } from "../../types"
-import themeSelectorThemeDefault, { createThemeSelectorTheme } from "../../themes/theme-selector.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import RLAButton from "./RLAButton.astro"
-
-const uiConfig = getUIConfig()
-const themeSelectorTheme = uiConfig.colors ? createThemeSelectorTheme() : themeSelectorThemeDefault
-
-const themeSelector = scv(themeSelectorTheme)
-
-const {
-    size = "md",
-    ui: uiProp,
-    class: className,
-    ...rest
-} = Astro.props as ThemeSelectorProps
-
-const classes = resolveClasses(themeSelector, {
-    size
-}, useUi("themeSelector", uiProp), className);
----
-
-<RLAButton
-        size={size}
-        class:list={["theme-toggle-button", classes.root]}
-        variant="ghost"
-        aria-label="Toggle theme"
-        {...rest}
->
-    <span class:list={[classes.sun]} />
-    <span class:list={[classes.moon]} />
-</RLAButton>
-
-<script>
-    function applyStoredTheme() {
-        const stored = localStorage.getItem('theme');
-        if (stored === 'dark') {
-            document.documentElement.classList.add('dark');
-        } else if (stored === 'light') {
-            document.documentElement.classList.remove('dark');
-        }
-    }
-
-    function setupThemeToggle() {
-        const buttons = document.querySelectorAll('.theme-toggle-button');
-
-        const updateButtons = (isDark: boolean) => {
-            buttons.forEach(btn => {
-                btn.setAttribute('data-state', isDark ? 'on' : 'off');
-                btn.setAttribute('aria-pressed', isDark.toString());
-            });
-        };
-
-        const currentIsDark = document.documentElement.classList.contains('dark');
-        updateButtons(currentIsDark);
-
-        buttons.forEach(button => {
-            if (button.hasAttribute('data-initialized')) return;
-            button.setAttribute('data-initialized', '');
-            button.addEventListener('click', () => {
-                const isDark = document.documentElement.classList.toggle('dark');
-                localStorage.setItem('theme', isDark ? 'dark' : 'light');
-                updateButtons(isDark);
-            });
-        });
-    }
-
-    applyStoredTheme();
-    setupThemeToggle();
-    document.addEventListener('astro:page-load', () => {
-        applyStoredTheme();
-        setupThemeToggle();
-    });
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ThemeSelectorProps } from "../../types"
+import themeSelectorThemeDefault, { createThemeSelectorTheme } from "../../themes/theme-selector.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import RLAButton from "./RLAButton.astro"
+
+const uiConfig = getUIConfig()
+const themeSelectorTheme = uiConfig.colors ? createThemeSelectorTheme() : themeSelectorThemeDefault
+
+const themeSelector = scv(themeSelectorTheme)
+
+const {
+    size = "md",
+    ui: uiProp,
+    class: className,
+    ...rest
+} = Astro.props as ThemeSelectorProps
+
+const classes = resolveClasses(themeSelector, {
+    size
+}, useUi("themeSelector", uiProp), className);
+---
+
+<rla-theme-selector {...rest}>
+    <RLAButton
+            size={size}
+            class:list={["theme-toggle-button", classes.root]}
+            variant="ghost"
+            aria-label="Toggle theme"
+    >
+        <span class:list={[classes.sun]} />
+        <span class:list={[classes.moon]} />
+    </RLAButton>
+</rla-theme-selector>
+
+<script>
+    import { defineShortcuts } from "../../utils/shortcuts"
+
+    function applyStoredTheme() {
+        const stored = localStorage.getItem('theme');
+        if (stored === 'dark') {
+            document.documentElement.classList.add('dark');
+            document.documentElement.classList.remove('light');
+        } else if (stored === 'light') {
+            document.documentElement.classList.remove('dark');
+            document.documentElement.classList.add('light');
+        }
+    }
+
+    applyStoredTheme();
+
+    function onToggle() {
+        const willBeDark = !document.documentElement.classList.contains('dark');
+        document.documentElement.classList.toggle('dark',  willBeDark);
+        document.documentElement.classList.toggle('light', !willBeDark);
+        localStorage.setItem('theme', willBeDark ? 'dark' : 'light');
+        
+        document.querySelectorAll('.theme-toggle-button').forEach(btn => {
+            btn.setAttribute('data-state', willBeDark ? 'on' : 'off');
+            btn.setAttribute('aria-pressed', willBeDark.toString());
+        });
+    }
+
+    class RLAThemeSelector extends HTMLElement {
+        private buttonCleanup: (() => void) | null = null;
+
+        connectedCallback() {
+            this.style.display = 'contents';
+            const button = this.querySelector('.theme-toggle-button');
+            if (!button) return;
+
+            const isDark = document.documentElement.classList.contains('dark');
+            button.setAttribute('data-state', isDark ? 'on' : 'off');
+            button.setAttribute('aria-pressed', isDark.toString());
+
+            button.addEventListener('click', onToggle);
+
+            const cleanupShortcut = defineShortcuts({
+                meta_alt_t: {
+                    handler: onToggle,
+                    label: "Toggle Theme",
+                    description: "Switch between light and dark theme mode",
+                    category: "system"
+                }
+            });
+
+            this.buttonCleanup = () => {
+                button.removeEventListener('click', onToggle);
+                cleanupShortcut();
+            };
+        }
+
+        disconnectedCallback() {
+            if (this.buttonCleanup) {
+                this.buttonCleanup();
+                this.buttonCleanup = null;
+            }
+        }
+    }
+
+    if (!customElements.get('rla-theme-selector')) {
+        customElements.define('rla-theme-selector', RLAThemeSelector);
+    }
 </script>