@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLAStickySurface.astro

@@ -1,38 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { StickySurfaceProps } from "../../types"
-import stickySurfaceThemeDefault, { createStickySurfaceTheme } from "../../themes/sticky-surface.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const stickySurfaceTheme = uiConfig.colors ? createStickySurfaceTheme() : stickySurfaceThemeDefault
-
-const stickySurface = scv(stickySurfaceTheme)
-
-const {
-  offsetTop = 0,
-  zIndex = 10,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as StickySurfaceProps
-
-const classes = resolveClasses(stickySurface, {}, useUi("stickySurface", uiProp), className)
-const topOffset = `${offsetTop}px`
-const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
----
-<div
-  class:list={[classes.root, id]}
-  data-slot="root"
-  {...rest}
->
-  <slot />
-</div>
-
-<style is:inline set:html={`
-  .${id} {
-    top: ${topOffset} !important;
-    z-index: ${zIndex} !important;
-  }
-`} />

package/src/components/astro/RLASurround.astro

@@ -1,39 +0,0 @@
----
-export interface SurroundItem {
-  label: string;
-  href: string;
-}
-
-export interface Props {
-  prev?: SurroundItem | null;
-  next?: SurroundItem | null;
-}
-
-const { prev, next } = Astro.props;
----
-
-{(prev || next) && (
-  <div class="mt-12 pt-6 border-t border-border flex justify-between gap-4">
-    {prev ? (
-      <a href={prev.href} class="flex flex-col gap-1 text-left group no-underline max-w-[45%]">
-        <span class="text-xs text-muted-foreground font-medium flex items-center gap-1 group-hover:text-primary transition-colors">
-          <span class="i-lucide-arrow-left size-3" /> Previous
-        </span>
-        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
-          {prev.label}
-        </span>
-      </a>
-    ) : <div />}
-
-    {next ? (
-      <a href={next.href} class="flex flex-col gap-1 text-right group no-underline max-w-[45%]">
-        <span class="text-xs text-muted-foreground font-medium flex items-center justify-end gap-1 group-hover:text-primary transition-colors">
-          Next <span class="i-lucide-arrow-right size-3" />
-        </span>
-        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
-          {next.label}
-        </span>
-      </a>
-    ) : <div />}
-  </div>
-)}

package/src/components/astro/RLASwitch.astro

@@ -1,51 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SwitchProps } from "../../types"
-import switchThemeDefault, { createSwitchTheme } from "../../themes/switch.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const switchTheme = uiConfig.colors ? createSwitchTheme(uiConfig.colors) : switchThemeDefault
-
-const switchFn = scv(switchTheme)
-
-const {
-  checked = false,
-  disabled = false,
-  name,
-  label,
-  color = "primary",
-  size = "md",
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SwitchProps
-
-const classes = resolveClasses(switchFn, {
-  color,
-  size,
-  checked,
-  theme
-}, useUi("switch", uiProp), className);
----
-<label class={classes.root} data-slot="root">
-  <input
-    type="checkbox"
-    class={classes.input}
-    checked={checked}
-    disabled={disabled}
-    name={name}
-    {...rest}
-  />
-  <div class={classes.track} data-slot="track">
-    <div class={classes.thumb} data-slot="thumb" />
-  </div>
-  {label !== undefined && label !== null && (
-    <span class={classes.label} data-slot="label">
-      {label}
-    </span>
-  )}
-  {!label && <slot />}
-</label>

package/src/components/astro/RLATable.astro

@@ -1,63 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TableProps } from "../../types"
-import tableThemeDefault, { createTableTheme } from "../../themes/table.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const tableTheme = uiConfig.colors ? createTableTheme() : tableThemeDefault
-const table = scv(tableTheme)
-
-const {
-  headers = [],
-  rows = [],
-  striped = false,
-  bordered = false,
-  hoverable = true,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TableProps
-
-const classes = resolveClasses(table, {
-  striped,
-  bordered
-}, useUi("table", uiProp), className);
----
-<div class={classes.root} data-slot="root">
-  <table class={classes.table} data-slot="table" {...rest}>
-    {headers.length > 0 && (
-      <thead class={classes.thead} data-slot="thead">
-        <tr class={classes.tr} data-slot="tr">
-          {headers.map(header => {
-            const label = typeof header === "string" ? header : header.label
-            const cellClass = typeof header === "string" ? "" : (header.class || "")
-            return (
-              <th class={classes.th + " " + cellClass} data-slot="th">
-                {label}
-              </th>
-            )
-          })}
-        </tr>
-      </thead>
-    )}
-    <tbody class={classes.tbody} data-slot="tbody">
-      <slot>
-        {rows.map(row => {
-          const cells = Array.isArray(row) ? row : Object.values(row)
-          return (
-            <tr class={classes.tr} data-slot="tr">
-              {cells.map(cell => (
-                <td class={classes.td} data-slot="td">
-                  {cell}
-                </td>
-              ))}
-            </tr>
-          )
-        })}
-      </slot>
-    </tbody>
-  </table>
-</div>

package/src/components/astro/RLATableOfContents.astro

@@ -1,158 +0,0 @@
----
-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,
-  collapsible = false,
-  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 && (
-  collapsible ? (
-    <details class:list={[className]} data-rla-toc-collapsible data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
-      <summary class="flex items-center justify-between gap-3 px-4 h-10 text-sm font-medium text-foreground cursor-pointer select-none hover:bg-muted/40 transition-colors list-none">
-        <span class="flex items-center gap-2">
-          <span class="i-lucide-list size-4 text-primary shrink-0" />
-          <span>On this page</span>
-        </span>
-        <span class="rla-toc-chevron i-lucide-chevron-down size-4 text-muted-foreground shrink-0 transition-transform duration-200" />
-      </summary>
-      <div class="px-4 pt-3 max-h-[40vh] overflow-y-auto border-t border-border/50 bg-background">
-        <ul class="flex flex-col gap-0.5 pb-8">
-          {filteredHeadings.map(heading => (
-            <li class:list={[heading.depth === 3 && "pl-4"]}>
-              <a
-                href={`#${heading.slug}`}
-                class:list={[
-                  "toc-link block py-1.5 text-sm transition-colors hover:text-primary no-underline",
-                  heading.depth === 2 ? "text-foreground font-medium" : "text-muted-foreground"
-                ]}
-                data-rla-toc-link
-              >
-                {heading.text}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </details>
-  ) : (
-    <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() {
-    // ── Collapsible TOC behaviour (chevron + close-on-link-click) ──
-    function initCollapsibleTocs() {
-      document.querySelectorAll('[data-rla-toc-collapsible]').forEach(function(details) {
-        var chevron = details.querySelector('.rla-toc-chevron');
-        details.addEventListener('toggle', function() {
-          if (chevron) chevron.style.transform = details.open ? 'rotate(180deg)' : '';
-        });
-        details.querySelectorAll('[data-rla-toc-link]').forEach(function(link) {
-          link.addEventListener('click', function() { details.open = false; });
-        });
-      });
-    }
-
-    // ── Active-heading tracker (desktop sidebar) ──
-    function updateActiveHeading() {
-      var root = document.querySelector('[data-slot="root"][data-container-selector]');
-      if (!root) return;
-      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");
-      }
-    }
-
-    initCollapsibleTocs();
-    updateActiveHeading();
-
-    window.addEventListener("scroll", updateActiveHeading, { passive: true });
-    document.addEventListener("astro:after-swap", function() {
-      initCollapsibleTocs();
-      updateActiveHeading();
-    });
-  })();
-</script>

package/src/components/astro/RLATabs.astro

@@ -1,147 +0,0 @@
----
-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

@@ -1,45 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TextareaProps } from "../../types"
-import textareaThemeDefault, { createTextareaTheme } from "../../themes/textarea.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const textareaTheme = uiConfig.colors ? createTextareaTheme() : textareaThemeDefault
-const textarea = scv(textareaTheme)
-
-const {
-  value = "",
-  placeholder,
-  disabled = false,
-  readonly = false,
-  name,
-  required = false,
-  rows = 4,
-  error = false,
-  size = "md",
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TextareaProps
-
-const classes = resolveClasses(textarea, {
-  size,
-  error: !!error
-}, useUi("textarea", uiProp), className);
----
-<div class={classes.root} data-slot="root">
-  <textarea
-    class={classes.textarea}
-    placeholder={placeholder}
-    disabled={disabled}
-    readonly={readonly}
-    name={name}
-    required={required}
-    rows={rows}
-    {...rest}
-  >{value}</textarea>
-</div>

package/src/components/astro/RLAThemeSelector.astro

@@ -1,107 +0,0 @@
----
-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"
-            square
-            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>

package/src/components/astro/RLATimeline.astro

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