@rimelight/ui 0.0.37 → 0.0.39

package/src/components/switch/switch.ts

@@ -0,0 +1,41 @@
+import type { Theme, ThemeColor } from "../../types/component"
+
+export interface SwitchProps {
+  /**
+   * Controlled checked state.
+   */
+  checked?: boolean
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean
+  /**
+   * Input element name.
+   */
+  name?: string
+  /**
+   * Label descriptor.
+   */
+  label?: string
+  /**
+   * Size scale.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/table/RLATable.astro

@@ -0,0 +1,63 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TableProps } from "./table"
+import tableTheme from "./table.theme"
+
+
+const table = scv(tableTheme)
+
+const {
+  headers = [],
+  rows = [],
+  striped = false,
+  bordered = false,
+  hoverable = true,
+  caption,
+  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}>
+    {caption && <caption class="sr-only">{caption}</caption>}
+    {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 scope="col" 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/table/table.theme.ts

@@ -0,0 +1,36 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTableTheme = () =>
+  defineTheme({
+    slots: ["root", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "caption"],
+    base: {
+      root: "relative w-full overflow-auto rounded-lg border border-border shadow-sm",
+      table: "w-full text-sm text-left border-collapse",
+      thead: "bg-muted/50 border-b border-border",
+      tbody: "divide-y divide-border",
+      tfoot: "bg-muted/30 border-t border-border font-medium",
+      tr: "transition-colors hover:bg-muted/30",
+      th: "p-4 text-xs font-semibold uppercase text-muted-foreground",
+      td: "p-4 text-foreground align-middle",
+      caption: "p-4 text-xs text-muted-foreground text-center"
+    },
+    variants: {
+      striped: {
+        true: { tr: "odd:bg-background even:bg-muted/20 hover:bg-muted/35" }
+      },
+      bordered: {
+        true: {
+          root: "border-2 border-border",
+          tr: "border-b border-border",
+          th: "border-r border-border last:border-r-0",
+          td: "border-r border-border last:border-r-0"
+        }
+      }
+    },
+    defaultVariants: {
+      striped: false,
+      bordered: false
+    }
+  })
+
+export default createTableTheme()

package/src/components/table/table.ts

@@ -0,0 +1,35 @@
+export interface TableProps {
+  /**
+   * Column headers array.
+   */
+  headers?: Array<string | { label: string; key: string; class?: string }>
+  /**
+   * Data rows array.
+   */
+  rows?: Array<Record<string, any> | any[]>
+  /**
+   * Striped row style.
+   */
+  striped?: boolean
+  /**
+   * Hoverable rows state.
+   */
+  hoverable?: boolean
+  /**
+   * Bordered cells.
+   */
+  bordered?: boolean
+  /**
+   * Accessible description or title of the table.
+   */
+  caption?: string
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/table-of-contents/RLATableOfContents.astro

@@ -0,0 +1,157 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TableOfContentsProps } from "./table-of-contents"
+import tableOfContentsTheme from "./table-of-contents.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+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">
+          <RLAIcon name="list" class="size-4 text-primary shrink-0" />
+          <span>On this page</span>
+        </span>
+        <RLAIcon name="chevronDown" class="rla-toc-chevron 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/table-of-contents/table-of-contents.theme.ts

@@ -0,0 +1,67 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTableOfContentsTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "container",
+      "top",
+      "bottom",
+      "trigger",
+      "title",
+      "trailing",
+      "trailingIcon",
+      "content",
+      "list",
+      "listWithChildren",
+      "item",
+      "itemWithChildren",
+      "link",
+      "linkText",
+      "indicator",
+      "indicatorLine",
+      "indicatorActive"
+    ],
+    base: {
+      root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 xl:mx-0 overflow-y-auto overflow-x-hidden max-h-[calc(100vh-var(--ui-header-height))]",
+      container:
+        "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
+      top: "",
+      bottom: "hidden lg:flex lg:flex-col gap-6",
+      trigger:
+        "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
+      title: "truncate",
+      trailing: "ms-auto inline-flex gap-1.5 items-center",
+      trailingIcon:
+        "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
+      content:
+        "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
+      list: "min-w-0",
+      listWithChildren: "ms-3",
+      item: "min-w-0",
+      itemWithChildren: "",
+      link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
+      linkText: "truncate",
+      indicator: "",
+      indicatorLine: "",
+      indicatorActive: ""
+    },
+    variants: {
+      interactive: {
+        true: {
+          root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30"
+        },
+        false: { root: "" }
+      },
+      overlay: {
+        true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
+        false: { root: "" }
+      }
+    },
+    defaultVariants: {
+      interactive: false,
+      overlay: false
+    }
+  })
+
+export default createTableOfContentsTheme()

package/src/components/tabs/RLATabs.astro

@@ -0,0 +1,241 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TabsProps, TabItem } from "./tabs"
+import tabsTheme from "./tabs.theme"
+import RLABadge from "../badge/RLABadge.astro"
+
+const tabs = scv(tabsTheme)
+
+const {
+  items = [],
+  value = "",
+  defaultValue = "",
+  variant = "pill",
+  orientation = "horizontal",
+  size = "md",
+  color = "primary",
+  content = true,
+  unmountOnHide = true,
+  valueKey = "value",
+  labelKey = "label",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TabsProps
+
+// Normalize variant names for backward compatibility (solid -> pill, pills -> pill, underline -> underline, link -> underline)
+const normalizedVariant = (variant === "solid" || variant === "pills") ? "pill" : (variant === "link" ? "underline" : variant);
+
+const classes = resolveClasses(tabs, {
+  variant: normalizedVariant,
+  orientation,
+  size
+}, useUi("tabs", uiProp), className);
+
+const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valueKey] ?? items[0].value ?? "0") : "")
+---
+<rla-tabs {...rest} data-orientation={orientation} data-variant={normalizedVariant}>
+  <div class={classes.root} data-slot="root" data-tabs-container data-value={initialValue}>
+    <div class={classes.list} data-slot="list" role="tablist">
+      <div class={classes.indicator} data-slot="indicator" style="display: none;"></div>
+      {items.map((item, index) => {
+        const itemVal = item[valueKey] ?? item.value ?? String(index)
+        const itemLabel = item[labelKey] ?? item.label
+        const active = itemVal === initialValue
+        return (
+          <button
+            type="button"
+            class={classes.trigger}
+            data-slot="trigger"
+            role="tab"
+            data-value={itemVal}
+            data-state={active ? "active" : "inactive"}
+            disabled={item.disabled}
+          >
+            {item.icon && <span class={item.icon + " " + classes.leadingIcon} data-slot="leadingIcon" />}
+            {itemLabel && <span class={classes.label} data-slot="label">{itemLabel}</span>}
+            {item.badge !== undefined && item.badge !== null && (
+              <RLABadge
+                size="sm"
+                variant="subtle"
+                color="neutral"
+                class={classes.trailingBadge}
+                data-slot="trailingBadge"
+              >
+                {typeof item.badge === "object" ? item.badge.label : item.badge}
+              </RLABadge>
+            )}
+          </button>
+        )
+      })}
+    </div>
+    {content && (
+      <div class="flex-1">
+        <slot>
+          {items.map((item, index) => {
+            const itemVal = item[valueKey] ?? item.value ?? String(index)
+            const active = itemVal === initialValue
+            return (
+              <div
+                class={classes.content}
+                data-slot="content"
+                role="tabpanel"
+                data-value={itemVal}
+                hidden={active ? undefined : "until-found"}
+              >
+                {item.content}
+              </div>
+            )
+          })}
+        </slot>
+      </div>
+    )}
+  </div>
+</rla-tabs>
+
+<script>
+  if (typeof HTMLElement !== 'undefined') {
+    class RLATabs extends HTMLElement {
+      private tabsCleanup: (() => void) | null = null;
+      private resizeObserver: ResizeObserver | null = null;
+
+      connectedCallback() {
+        this.style.display = 'contents';
+        const container = this.querySelector("[data-tabs-container]") as HTMLElement | null;
+        if (!container) return;
+
+        const list = container.querySelector("[data-slot=list]") as HTMLElement | null;
+        const indicator = container.querySelector("[data-slot=indicator]") as HTMLElement | null;
+        const orientation = this.dataset.orientation || "horizontal";
+        const isVertical = orientation === "vertical";
+
+        const updateIndicator = (activeTrigger: HTMLElement | null) => {
+          if (!indicator || !list || !activeTrigger) {
+            if (indicator) indicator.style.display = 'none';
+            return;
+          }
+
+          const listRect = list.getBoundingClientRect();
+          const triggerRect = activeTrigger.getBoundingClientRect();
+
+          if (triggerRect.width === 0 && triggerRect.height === 0) {
+            indicator.style.display = 'none';
+            return;
+          }
+
+          indicator.style.display = 'block';
+
+          if (isVertical) {
+            const top = triggerRect.top - listRect.top + list.scrollTop;
+            const height = triggerRect.height;
+            indicator.style.transform = `translateY(${top}px)`;
+            indicator.style.height = `${height}px`;
+          } else {
+            const left = triggerRect.left - listRect.left + list.scrollLeft;
+            const width = triggerRect.width;
+            indicator.style.transform = `translateX(${left}px)`;
+            indicator.style.width = `${width}px`;
+          }
+        };
+
+        const containerValue = container.dataset.value;
+        const triggers = container.querySelectorAll("[role=tab]");
+        const panels = container.querySelectorAll("[role=tabpanel]");
+
+        let activeTrigger: HTMLElement | null = null;
+
+        triggers.forEach(trigger => {
+          const el = trigger as HTMLElement;
+          const val = el.dataset.value;
+          const isActive = val === containerValue;
+          el.setAttribute("data-state", isActive ? "active" : "inactive");
+          if (isActive) activeTrigger = el;
+        });
+
+        panels.forEach(panel => {
+          const val = (panel as HTMLElement).dataset.value;
+          if (val === containerValue) {
+            panel.removeAttribute("hidden");
+          } else {
+            panel.setAttribute("hidden", "until-found");
+          }
+        });
+
+        // Initialize indicator position
+        requestAnimationFrame(() => updateIndicator(activeTrigger));
+
+        if (window.ResizeObserver && list) {
+          this.resizeObserver = new ResizeObserver(() => {
+            const currentActive = list.querySelector("[role=tab][data-state=active]") as HTMLElement | null;
+            updateIndicator(currentActive);
+          });
+          this.resizeObserver.observe(list);
+        }
+
+        const clickCleanups: (() => void)[] = [];
+        const beforeMatchCleanups: (() => void)[] = [];
+
+        // Watch for browser Find-in-Page auto-expands
+        panels.forEach(panel => {
+          const onBeforeMatch = () => {
+            const targetValue = (panel as HTMLElement).dataset.value;
+            const trigger = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLButtonElement | null;
+            if (trigger) {
+              trigger.click();
+            }
+          };
+          panel.addEventListener("beforematch", onBeforeMatch);
+          beforeMatchCleanups.push(() => panel.removeEventListener("beforematch", onBeforeMatch));
+        });
+
+        triggers.forEach(triggerNode => {
+          const trigger = triggerNode as HTMLButtonElement;
+          const onClick = () => {
+            if (trigger.disabled) return;
+            const targetValue = trigger.dataset.value;
+
+            triggers.forEach(tNode => {
+              const t = tNode as HTMLButtonElement;
+              const isTarget = t.dataset.value === targetValue;
+              t.setAttribute("data-state", isTarget ? "active" : "inactive");
+              if (isTarget) updateIndicator(t);
+            });
+
+            panels.forEach(panel => {
+              if ((panel as HTMLElement).dataset.value === targetValue) {
+                panel.removeAttribute("hidden");
+              } else {
+                panel.setAttribute("hidden", "until-found");
+              }
+            });
+          };
+          trigger.addEventListener("click", onClick);
+          clickCleanups.push(() => trigger.removeEventListener("click", onClick));
+        });
+
+        this.tabsCleanup = () => {
+          clickCleanups.forEach(fn => fn());
+          beforeMatchCleanups.forEach(fn => fn());
+          if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+          }
+        };
+      }
+
+      disconnectedCallback() {
+        if (this.tabsCleanup) {
+          this.tabsCleanup();
+          this.tabsCleanup = null;
+        }
+      }
+    }
+
+    if (!customElements.get('rla-tabs')) {
+      customElements.define('rla-tabs', RLATabs);
+    }
+  }
+</script>
+