@rimelight/ui 0.0.37 → 0.0.38

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,157 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TabsProps } from "./tabs"
+import tabsTheme from "./tabs.theme"
+
+
+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}
+              data-slot="content"
+              role="tabpanel"
+              data-value={item.value}
+              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;
+
+      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.removeAttribute("hidden");
+          } else {
+            panel.setAttribute("hidden", "until-found");
+          }
+        });
+
+        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 = () => {
+            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.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());
+        };
+      }
+
+      disconnectedCallback() {
+        if (this.tabsCleanup) {
+          this.tabsCleanup();
+          this.tabsCleanup = null;
+        }
+      }
+    }
+
+    if (!customElements.get('rla-tabs')) {
+      customElements.define('rla-tabs', RLATabs);
+    }
+  }
+</script>

package/src/components/tabs/tabs.theme.ts

@@ -0,0 +1,52 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTabsTheme = () =>
+  defineTheme({
+    slots: ["root", "list", "trigger", "content"],
+    base: {
+      root: "w-full flex flex-col gap-4",
+      list: "inline-flex items-center justify-start rounded-md bg-muted p-1 text-muted-foreground",
+      trigger:
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
+      content:
+        "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    },
+    variants: {
+      variant: {
+        solid: {
+          list: "bg-muted p-1 rounded-lg",
+          trigger:
+            "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+        },
+        underline: {
+          list: "bg-transparent border-b border-border rounded-none p-0 gap-4",
+          trigger:
+            "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
+        },
+        pills: {
+          list: "bg-transparent p-0 gap-2",
+          trigger:
+            "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
+        }
+      },
+      orientation: {
+        horizontal: { root: "flex-col", list: "w-full" },
+        vertical: {
+          root: "flex-row gap-6",
+          list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent"
+        }
+      },
+      size: {
+        sm: { trigger: "text-xs px-2.5 py-1" },
+        md: { trigger: "text-sm px-3.5 py-1.5" },
+        lg: { trigger: "text-base px-4.5 py-2" }
+      }
+    },
+    defaultVariants: {
+      variant: "solid",
+      orientation: "horizontal",
+      size: "md"
+    }
+  })
+
+export default createTabsTheme()

package/src/components/tabs/tabs.ts

@@ -0,0 +1,44 @@
+import type { ThemeColor } from "../../types/component"
+export interface TabItem {
+  label: string
+  value: string
+  icon?: string
+  content?: string
+  disabled?: boolean
+}
+
+export interface TabsProps {
+  /**
+   * The tab items.
+   */
+  items?: TabItem[]
+  /**
+   * Active tab value.
+   */
+  value?: string
+  /**
+   * Tab variant.
+   */
+  variant?: "solid" | "underline" | "pills"
+  /**
+   * Layout orientation.
+   */
+  orientation?: "horizontal" | "vertical"
+  /**
+   * Size scale.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}