@rimelight/ui 0.0.46 → 0.0.48

package/src/components/tabs/RLATabs.astro

@@ -225,7 +225,7 @@ if (needsOverflow && renderedListItems.length > 1) {
 
         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 orientation = this.dataset["orientation"] || "horizontal";
         const isVertical = orientation === "vertical";
 
         const updateIndicator = (activeTrigger: HTMLElement | null) => {
@@ -263,7 +263,7 @@ if (needsOverflow && renderedListItems.length > 1) {
           }
         };
 
-        const containerValue = container.dataset.value;
+        const containerValue = container.dataset["value"];
         const triggers = container.querySelectorAll("[role=tab]");
         const panels = container.querySelectorAll("[role=tabpanel]");
         const popoverItems = container.querySelectorAll("[data-popover-item]");
@@ -273,7 +273,7 @@ if (needsOverflow && renderedListItems.length > 1) {
         const syncState = (targetValue: string | undefined) => {
           triggers.forEach(trigger => {
             const el = trigger as HTMLElement;
-            const val = el.dataset.value;
+            const val = el.dataset["value"];
             const isActive = val === targetValue;
             el.setAttribute("data-state", isActive ? "active" : "inactive");
             if (isActive) activeTrigger = el;
@@ -281,7 +281,7 @@ if (needsOverflow && renderedListItems.length > 1) {
 
           popoverItems.forEach(item => {
             const el = item as HTMLElement;
-            const val = el.dataset.tabOverflowValue;
+            const val = el.dataset["tabOverflowValue"];
             if (val === targetValue) {
               el.setAttribute("data-active", "true");
               el.classList.add("bg-muted/80", "font-medium");
@@ -292,7 +292,7 @@ if (needsOverflow && renderedListItems.length > 1) {
           });
 
           panels.forEach(panel => {
-            const val = (panel as HTMLElement).dataset.value;
+            const val = (panel as HTMLElement).dataset["value"];
             if (val === targetValue) {
               panel.removeAttribute("hidden");
             } else {
@@ -319,7 +319,7 @@ if (needsOverflow && renderedListItems.length > 1) {
         // Watch for browser Find-in-Page auto-expands
         panels.forEach(panel => {
           const onBeforeMatch = () => {
-            const targetValue = (panel as HTMLElement).dataset.value;
+            const targetValue = (panel as HTMLElement).dataset["value"];
             const trigger = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLButtonElement | null;
             if (trigger) {
               trigger.click();
@@ -335,7 +335,7 @@ if (needsOverflow && renderedListItems.length > 1) {
           const trigger = triggerNode as HTMLButtonElement;
           const onClick = () => {
             if (trigger.disabled) return;
-            const targetValue = trigger.dataset.value;
+            const targetValue = trigger.dataset["value"];
             syncState(targetValue);
             updateIndicator(trigger);
           };
@@ -346,7 +346,7 @@ if (needsOverflow && renderedListItems.length > 1) {
         popoverItems.forEach(itemNode => {
           const item = itemNode as HTMLButtonElement;
           const onClick = () => {
-            const targetValue = item.dataset.tabOverflowValue;
+            const targetValue = item.dataset["tabOverflowValue"];
             syncState(targetValue);
             const activeTrig = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLElement | null;
             updateIndicator(activeTrig);

package/src/components/tabs/RLSTabs.tsx

@@ -0,0 +1,298 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { TabItem, TabsProps } from "./tabs"
+import { tabsTheme } from "./tabs.theme"
+import RLSBadge from "../badge/RLSBadge"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSTabsProps<T extends TabItem = TabItem> extends TabsProps<T> {
+  children?: JSX.Element
+  onChange?: (value: string) => void
+}
+
+const RLSTabs: Component<RLSTabsProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "items",
+    "value",
+    "defaultValue",
+    "variant",
+    "orientation",
+    "size",
+    "color",
+    "content",
+    "unmountOnHide",
+    "valueKey",
+    "labelKey",
+    "maxTabs",
+    "estimatedTabWidth",
+    "onChange",
+    "class",
+    "ui",
+    "children"
+  ])
+
+  const items = () => props.items ?? []
+  const valueKey = () => props.valueKey ?? "value"
+  const labelKey = () => props.labelKey ?? "label"
+  const orientation = () => props.orientation ?? "horizontal"
+  const size = () => props.size ?? "md"
+  const showContent = () => props.content ?? true
+
+  const normalizedVariant = createMemo(() => {
+    const v = props.variant ?? "pill"
+    if (v === "solid" || v === "pills") return "pill"
+    if (v === "link") return "underline"
+    return v
+  })
+
+  const initialVal = createMemo(() => {
+    if (props.value !== undefined) return props.value
+    if (props.defaultValue !== undefined) return props.defaultValue
+    const list = items()
+    if (list.length > 0) {
+      return (list[0]?.[valueKey()] ?? list[0]?.value ?? "0") as string
+    }
+    return ""
+  })
+
+  const [internalValue, setInternalValue] = createSignal(initialVal())
+
+  createEffect(() => {
+    if (props.value !== undefined) {
+      setInternalValue(props.value)
+    }
+  })
+
+  const currentValue = () => (props.value !== undefined ? props.value : internalValue())
+
+  const handleSelect = (val: string) => {
+    if (props.value === undefined) {
+      setInternalValue(val)
+    }
+    props.onChange?.(val)
+  }
+
+  const resolvedClasses = createMemo(() =>
+    tabsTheme({
+      variant: normalizedVariant(),
+      orientation: orientation(),
+      size: size(),
+      color: props.color,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  let listRef: HTMLDivElement | null = null
+  let indicatorRef: HTMLDivElement | null = null
+  const [popoverOpen, setPopoverOpen] = createSignal(false)
+
+  const updateIndicator = () => {
+    const list = listRef
+    const indicator = indicatorRef
+    if (!list || !indicator) return
+    const activeEl = list.querySelector(`[role=tab][data-state=active]`) as HTMLElement | null
+    if (!activeEl || getComputedStyle(activeEl).display === "none") {
+      indicator.style.display = "none"
+      return
+    }
+
+    const listRect = list.getBoundingClientRect()
+    const triggerRect = activeEl.getBoundingClientRect()
+
+    if (triggerRect.width === 0 && triggerRect.height === 0) {
+      indicator.style.display = "none"
+      return
+    }
+
+    indicator.style.display = "block"
+    const isVert = orientation() === "vertical"
+
+    if (isVert) {
+      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`
+    }
+  }
+
+  onMount(() => {
+    updateIndicator()
+    if (typeof ResizeObserver !== "undefined" && listRef) {
+      const ro = new ResizeObserver(() => updateIndicator())
+      ro.observe(listRef)
+      onCleanup(() => ro.disconnect())
+    }
+  })
+
+  createEffect(() => {
+    currentValue()
+    requestAnimationFrame(() => updateIndicator())
+  })
+
+  const effectiveMax = () =>
+    props.maxTabs !== undefined ? Math.max(1, props.maxTabs) : items().length
+  const renderedListItems = () => items().slice(0, effectiveMax())
+  const overflowItems = () => items().slice(effectiveMax())
+  const needsOverflow = () => items().length > 1 && orientation() === "horizontal"
+
+  return (
+    <div
+      class={resolvedClasses().root}
+      data-slot="root"
+      data-orientation={orientation()}
+      data-variant={normalizedVariant()}
+      data-value={currentValue()}
+      {...rest}
+    >
+      <div
+        ref={(el) => (listRef = el)}
+        class={resolvedClasses().list}
+        data-slot="list"
+        role="tablist"
+      >
+        <div
+          ref={(el) => (indicatorRef = el)}
+          class={resolvedClasses().indicator}
+          data-slot="indicator"
+          style={{ display: "none" }}
+        />
+
+        <For each={renderedListItems()}>
+          {(item, index) => {
+            const itemVal = () => (item[valueKey()] ?? item.value ?? String(index())) as string
+            const itemLabel = () => item[labelKey()] ?? item.label
+            const active = () => itemVal() === currentValue()
+
+            return (
+              <button
+                type="button"
+                class={resolvedClasses().trigger}
+                data-slot="trigger"
+                role="tab"
+                data-value={itemVal()}
+                data-state={active() ? "active" : "inactive"}
+                disabled={item.disabled}
+                onClick={() => handleSelect(itemVal())}
+              >
+                {item.icon && (
+                  <RLSIcon
+                    name={item.icon}
+                    class={resolvedClasses().leadingIcon}
+                    data-slot="leadingIcon"
+                  />
+                )}
+                {itemLabel() && (
+                  <span class={resolvedClasses().label} data-slot="label">
+                    {itemLabel()}
+                  </span>
+                )}
+                {item.badge !== undefined && item.badge !== null && (
+                  <RLSBadge
+                    size="sm"
+                    variant="soft"
+                    color="neutral"
+                    class={resolvedClasses().trailingBadge}
+                    data-slot="trailingBadge"
+                  >
+                    {typeof item.badge === "object" ? item.badge.label : item.badge}
+                  </RLSBadge>
+                )}
+              </button>
+            )
+          }}
+        </For>
+
+        <Show when={needsOverflow() && overflowItems().length > 0}>
+          <div class="relative inline-flex items-center ml-auto">
+            <button
+              type="button"
+              class={`${resolvedClasses().trigger} rla-tb-overflow-btn`}
+              data-slot="overflow-trigger"
+              aria-label="More tabs"
+              onClick={() => setPopoverOpen(!popoverOpen())}
+            >
+              <span class="rla-tb-label">+{overflowItems().length} more</span>
+              <RLSIcon name="chevronDown" class="ml-1 size-3.5 opacity-70" />
+            </button>
+
+            <Show when={popoverOpen()}>
+              <div
+                class="absolute right-0 top-full mt-1 z-50 rounded-lg border border-default bg-default p-1 shadow-lg backdrop-blur-sm min-w-[10rem] flex flex-col gap-0.5"
+                onClick={() => setPopoverOpen(false)}
+              >
+                <For each={overflowItems()}>
+                  {(item, index) => {
+                    const itemVal = () =>
+                      (item[valueKey()] ?? item.value ?? String(effectiveMax() + index())) as string
+                    const itemLabel = () => item[labelKey()] ?? item.label
+                    const active = () => itemVal() === currentValue()
+
+                    return (
+                      <button
+                        type="button"
+                        class={`w-full text-left px-3 py-1.5 text-sm rounded-md transition-colors flex items-center justify-between hover:bg-muted focus-visible:outline-none cursor-pointer ${
+                          active() ? "bg-muted/80 font-medium" : ""
+                        }`}
+                        onClick={() => handleSelect(itemVal())}
+                      >
+                        <span class="truncate">{itemLabel()}</span>
+                        {active() && <RLSIcon name="check" class="size-4 opacity-100" />}
+                      </button>
+                    )
+                  }}
+                </For>
+              </div>
+            </Show>
+          </div>
+        </Show>
+      </div>
+
+      <Show when={showContent()}>
+        <div class="flex-1">
+          {props.children ? (
+            props.children
+          ) : (
+            <For each={items()}>
+              {(item, index) => {
+                const itemVal = () => (item[valueKey()] ?? item.value ?? String(index())) as string
+                const active = () => itemVal() === currentValue()
+
+                return (
+                  <Show when={props.unmountOnHide === false || active()}>
+                    <div
+                      class={resolvedClasses().content}
+                      data-slot="content"
+                      role="tabpanel"
+                      data-value={itemVal()}
+                      style={{ display: active() ? undefined : "none" }}
+                    >
+                      {item.content}
+                    </div>
+                  </Show>
+                )
+              }}
+            </For>
+          )}
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSTabs

package/src/components/textarea/RLATextarea.astro

@@ -34,6 +34,7 @@ const classes = textareaTheme({
   -->
   <textarea
     class={classes.textarea}
+    data-slot="textarea"
     placeholder={placeholder}
     disabled={disabled}
     readonly={readonly}

package/src/components/textarea/RLSTextarea.tsx

@@ -20,6 +20,7 @@ const RLSTextarea: Component<RLSTextareaProps> = (allProps) => {
     "name",
     "required",
     "rows",
+    "autoGrow",
     "error",
     "size",
     "color",
@@ -47,7 +48,8 @@ const RLSTextarea: Component<RLSTextareaProps> = (allProps) => {
       <textarea
         ref={props.ref}
         name={props.name}
-        rows={props.rows ?? 3}
+        rows={props.autoGrow ? undefined : (props.rows ?? 4)}
+        style={props.autoGrow ? "field-sizing: content; min-height: unset;" : undefined}
         value={props.value !== undefined ? props.value : ""}
         placeholder={props.placeholder}
         disabled={props.disabled}

package/src/components/theme-selector/RLAThemeSelector.astro

@@ -1,95 +1,124 @@
 ---
 import type { ThemeSelectorProps } from "./theme-selector"
 import { themeSelectorTheme } from "./theme-selector.theme"
-import RLAButton from "../button/RLAButton.astro"
+import RLASelect from "../select/RLASelect.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 
-
-
 const {
+  mode = "select",
   size = "md",
+  theme,
+  class: classAttr,
   ...rest
 } = Astro.props as ThemeSelectorProps
 
 const classes = themeSelectorTheme(Astro.props);
+
+const items = [
+  { label: "System", value: "system", icon: "i-lucide-laptop" },
+  { label: "Light", value: "light", icon: "i-rl-sun" },
+  { label: "Dark", value: "dark", icon: "i-rl-moon" }
+];
 ---
 
-<rla-theme-selector {...rest}>
-    <RLAButton
-            size={size}
-            class:list={["theme-toggle-button", classes.root]}
-            variant="ghost"
-            square
-            aria-label="Toggle theme"
-    >
-        <RLAIcon name="i-rl-sun" class={classes.sun} />
-        <RLAIcon name="i-rl-moon" class={classes.moon} />
-    </RLAButton>
+<rla-theme-selector data-mode={mode} data-theme={theme} {...rest}>
+  <div class:list={[classes.root, classAttr]} data-theme-selector>
+    <div class:list={[classes.wrapper]}>
+      <RLASelect
+        items={items}
+        defaultValue="system"
+        size={size}
+        theme={theme}
+        variant={mode === "icon" ? "icon" : "default"}
+        aria-label="Toggle theme"
+        class={classes.select}
+      >
+        <span slot="leading" class="flex items-center">
+          <RLAIcon name="i-lucide-laptop" class="rla-theme-icon-system size-4" style="display: block;" />
+          <RLAIcon name="i-rl-sun" class="rla-theme-icon-light size-4" style="display: none;" />
+          <RLAIcon name="i-rl-moon" class="rla-theme-icon-dark size-4" style="display: none;" />
+        </span>
+      </RLASelect>
+    </div>
+  </div>
 </rla-theme-selector>
 
-<style is:global>
-    .rla-theme-sun { display: none; }
-    [data-theme="dark"] .rla-theme-sun { display: block; }
-    .rla-theme-moon { display: block; }
-    [data-theme="dark"] .rla-theme-moon { display: none; }
-</style>
-
 <script>
     import { defineShortcuts } from "../../shortcuts"
 
-    function applyStoredTheme() {
-        const stored = localStorage.getItem('theme');
-        if (stored === 'dark' || stored === 'light') {
-            document.documentElement.setAttribute('data-theme', stored);
-        }
-    }
+    class RLAThemeSelector extends HTMLElement {
+        private cleanup: (() => void) | null = null;
+        private select: HTMLSelectElement | null = null;
 
-    applyStoredTheme();
+        private getPreference(): string {
+            const stored = localStorage.getItem('theme');
+            return stored === 'system' || stored === 'light' || stored === 'dark' ? stored : 'system';
+        }
 
-    function onToggle() {
-        const willBeDark = document.documentElement.getAttribute('data-theme') !== 'dark';
-        document.documentElement.setAttribute('data-theme', willBeDark ? 'dark' : 'light');
-        localStorage.setItem('theme', willBeDark ? 'dark' : 'light');
+        connectedCallback() {
+            this.style.display = 'contents';
+            const pref = this.getPreference();
 
-        document.querySelectorAll('.theme-toggle-button').forEach(btn => {
-            btn.setAttribute('data-state', willBeDark ? 'on' : 'off');
-            btn.setAttribute('aria-pressed', willBeDark.toString());
-        });
-    }
+            const select = this.querySelector('select');
+            this.select = select;
+            if (select) {
+                select.value = pref;
+                select.dispatchEvent(new Event('change', { bubbles: true }));
+            }
 
-    class RLAThemeSelector extends HTMLElement {
-        private buttonCleanup: (() => void) | null = null;
+            const updateTheme = (next: string) => {
+                this.setAttribute('data-theme-preference', next);
+
+                const sysIcons = this.querySelectorAll('.rla-theme-icon-system');
+                const lightIcons = this.querySelectorAll('.rla-theme-icon-light');
+                const darkIcons = this.querySelectorAll('.rla-theme-icon-dark');
+                sysIcons.forEach(el => ((el as HTMLElement).style.display = next === 'system' ? 'block' : 'none'));
+                lightIcons.forEach(el => ((el as HTMLElement).style.display = next === 'light' ? 'block' : 'none'));
+                darkIcons.forEach(el => ((el as HTMLElement).style.display = next === 'dark' ? 'block' : 'none'));
+
+                const resolved = next === 'system'
+                    ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+                    : next;
+                document.documentElement.setAttribute('data-theme', resolved);
+                localStorage.setItem('theme', next);
+            };
 
-        connectedCallback() {
-            this.style.display = 'contents';
-            const button = this.querySelector('.theme-toggle-button');
-            if (!button) return;
+            updateTheme(pref);
 
-            const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-            button.setAttribute('data-state', isDark ? 'on' : 'off');
-            button.setAttribute('aria-pressed', isDark.toString());
+            const onChange = (event: Event) => {
+                const target = event.target as HTMLSelectElement | null;
+                if (target && target.tagName === 'SELECT' && target.value) {
+                    updateTheme(target.value);
+                }
+            };
+            this.addEventListener('change', onChange);
 
-            button.addEventListener('click', onToggle);
+            const cycle = () => {
+                const current = localStorage.getItem('theme') || 'system';
+                const next = current === 'system' ? 'light' : current === 'light' ? 'dark' : 'system';
+                if (this.select) this.select.value = next;
+                updateTheme(next);
+            };
 
             const cleanupShortcut = defineShortcuts({
                 meta_alt_t: {
-                    handler: onToggle,
-                    label: "Toggle Theme",
-                    description: "Switch between light and dark theme mode",
+                    handler: cycle,
+                    label: "Cycle Theme",
+                    description: "Cycle between system, light, and dark theme mode",
                     category: "system"
                 }
             });
 
-            this.buttonCleanup = () => {
-                button.removeEventListener('click', onToggle);
+            this.cleanup = () => {
+                this.removeEventListener('change', onChange);
                 cleanupShortcut();
             };
         }
 
         disconnectedCallback() {
-            if (this.buttonCleanup) {
-                this.buttonCleanup();
-                this.buttonCleanup = null;
+            if (this.cleanup) {
+                this.cleanup();
+                this.cleanup = null;
             }
         }
     }
@@ -97,4 +126,4 @@ const classes = themeSelectorTheme(Astro.props);
     if (!customElements.get('rla-theme-selector')) {
         customElements.define('rla-theme-selector', RLAThemeSelector);
     }
-</script>
+</script>