@rimelight/ui 0.0.29 → 0.0.31

package/src/components/astro/RLASkeleton.astro

@@ -0,0 +1,20 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SkeletonProps } from "../../types"
+import skeletonTheme from "../../themes/skeleton.theme"
+
+const skeleton = scv(skeletonTheme)
+
+const {
+  shape = "rounded",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SkeletonProps
+
+const classes = resolveClasses(skeleton, {
+  shape
+}, useUi("skeleton", uiProp), className)
+---
+<div class={classes.root} data-slot="root" {...rest} />

package/src/components/astro/RLASlider.astro

@@ -0,0 +1,53 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SliderProps } from "../../types"
+import sliderThemeDefault, { createSliderTheme } from "../../themes/slider.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const sliderTheme = uiConfig.colors ? createSliderTheme(uiConfig.colors) : sliderThemeDefault
+const slider = scv(sliderTheme)
+
+const {
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  name,
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SliderProps
+
+const classes = resolveClasses(slider, {
+  color
+}, useUi("slider", uiProp), className)
+
+const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
+---
+<div class={classes.root} data-slot="slider-root" {...rest}>
+  <div class={classes.track} data-slot="track">
+    <div
+      class={classes.range}
+      data-slot="range"
+      style={{ left: "0%", right: `${100 - percentage}%` }}
+    />
+  </div>
+  <input
+    type="range"
+    min={min}
+    max={max}
+    step={step}
+    value={value}
+    name={name}
+    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+    data-slot="input"
+  />
+  <div
+    class={classes.thumb}
+    data-slot="thumb"
+    style={{ left: `calc(${percentage}% - 9px)` }}
+  />
+</div>

package/src/components/astro/RLASpinner.astro

@@ -0,0 +1,25 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SpinnerProps } from "../../types"
+import spinnerThemeDefault, { createSpinnerTheme } from "../../themes/spinner.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const spinnerTheme = uiConfig.colors ? createSpinnerTheme(uiConfig.colors) : spinnerThemeDefault
+const spinner = scv(spinnerTheme)
+
+const {
+  size = "md",
+  color = "current",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SpinnerProps
+
+const classes = resolveClasses(spinner, {
+  size,
+  color
+}, useUi("spinner", uiProp), className)
+---
+<div class={classes.root} data-slot="root" {...rest} />

package/src/components/astro/RLAStickySurface.astro

@@ -0,0 +1,27 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { StickySurfaceProps } from "../../types"
+import stickySurfaceTheme from "../../themes/stickySurface.theme"
+
+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`
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  style={{ top: topOffset, zIndex }}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/astro/RLASwitch.astro

@@ -0,0 +1,49 @@
+---
+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",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SwitchProps
+
+const classes = resolveClasses(switchFn, {
+  color,
+  size,
+  checked
+}, 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

@@ -0,0 +1,60 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TableProps } from "../../types"
+import tableThemeDefault, { createTableTheme } from "../../themes/table.theme"
+
+const tableTheme = 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/RLATabs.astro

@@ -0,0 +1,92 @@
+---
+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>
+  document.querySelectorAll("[data-tabs-container]").forEach(container => {
+    const triggers = container.querySelectorAll("[role=tab]");
+    const panels = container.querySelectorAll("[role=tabpanel]");
+
+    triggers.forEach(trigger => {
+      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");
+          } else {
+            panel.classList.add("hidden");
+          }
+        });
+      });
+    });
+  });
+</script>

package/src/components/astro/RLATextarea.astro

@@ -0,0 +1,42 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TextareaProps } from "../../types"
+import textareaThemeDefault, { createTextareaTheme } from "../../themes/textarea.theme"
+
+const textareaTheme = 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

@@ -0,0 +1,73 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ThemeSelectorProps } from "../../types"
+import themeSelectorTheme from "../../themes/themeSelector.theme"
+import RLAButton from "./RLAButton.astro"
+
+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();
+    });
+</script>

package/src/components/astro/RLAToast.astro

@@ -0,0 +1,107 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ToastProps } from "../../types"
+import toastThemeDefault, { createToastTheme } from "../../themes/toast.theme"
+
+const toastTheme = toastThemeDefault
+const toast = scv(toastTheme)
+
+const {
+  title,
+  description,
+  variant = "default",
+  actionLabel,
+  duration = 5000,
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ToastProps
+
+const classes = resolveClasses(toast, {
+  variant
+}, useUi("toast", uiProp), className)
+
+const variantIcons: Record<string, string> = {
+  default: "i-lucide-bell",
+  destructive: "i-lucide-alert-circle",
+  success: "i-lucide-check-circle-2",
+  warning: "i-lucide-alert-triangle",
+  info: "i-lucide-info",
+}
+
+const icon = variantIcons[variant] ?? variantIcons.default!
+---
+
+<div
+  class={classes.root}
+  data-slot="root"
+  data-toast
+  data-duration={duration}
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  {...rest}
+>
+  {/* Icon */}
+  <span class={icon + " size-4 shrink-0 mt-0.5"} aria-hidden="true" />
+
+  {/* Text body */}
+  <div class="flex flex-col gap-0.5 flex-1 min-w-0">
+    {title && (
+      <div class={classes.title} data-slot="title">
+        <slot name="title">{title}</slot>
+      </div>
+    )}
+    {description && (
+      <div class={classes.description} data-slot="description">
+        <slot name="description">{description}</slot>
+      </div>
+    )}
+    <slot />
+  </div>
+
+  {/* Action */}
+  {actionLabel && (
+    <button
+      type="button"
+      class={classes.action}
+      data-slot="action"
+      data-toast-action
+    >
+      {actionLabel}
+    </button>
+  )}
+
+  {/* Close button */}
+  <button
+    type="button"
+    class={classes.close}
+    data-slot="close"
+    data-toast-close
+    aria-label="Dismiss notification"
+  >
+    <span class="i-lucide-x size-3.5" aria-hidden="true" />
+  </button>
+</div>
+
+<script>
+  document.querySelectorAll("[data-toast]").forEach(toast => {
+    const close = toast.querySelector("[data-toast-close]");
+    const duration = parseInt((toast as HTMLElement).dataset.duration ?? "5000", 10);
+
+    const dismiss = () => {
+      toast.classList.add("opacity-0", "translate-y-2", "pointer-events-none");
+      toast.addEventListener("transitionend", () => toast.remove(), { once: true });
+    };
+
+    // Auto-dismiss
+    if (duration > 0) {
+      setTimeout(dismiss, duration);
+    }
+
+    // Manual close
+    close?.addEventListener("click", dismiss);
+  });
+</script>

package/src/components/astro/RLAToggle.astro

@@ -0,0 +1,38 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ToggleProps } from "../../types"
+import toggleThemeDefault, { createToggleTheme } from "../../themes/toggle.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const toggleTheme = uiConfig.colors ? createToggleTheme(uiConfig.colors) : toggleThemeDefault
+
+const toggle = scv(toggleTheme)
+
+const {
+  active = false,
+  disabled = false,
+  color = "primary",
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ToggleProps
+
+const classes = resolveClasses(toggle, {
+  color,
+  size,
+  active
+}, useUi("toggle", uiProp), className);
+---
+<button
+  type="button"
+  class={classes.root}
+  data-slot="root"
+  data-state={active ? "on" : "off"}
+  disabled={disabled}
+  {...rest}
+>
+  <slot />
+</button>

package/src/components/astro/RLAToggleGroup.astro

@@ -0,0 +1,30 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ToggleGroupProps } from "../../types"
+import toggleGroupThemeDefault, { createToggleGroupTheme } from "../../themes/toggleGroup.theme"
+
+const toggleGroupTheme = toggleGroupThemeDefault
+const toggleGroup = scv(toggleGroupTheme)
+
+const {
+  value = [],
+  type = "single",
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ToggleGroupProps
+
+const classes = resolveClasses(toggleGroup, {
+  size
+}, useUi("toggleGroup", uiProp), className);
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  data-type={type}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/astro/RLATooltip.astro

@@ -0,0 +1,31 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TooltipProps } from "../../types"
+import tooltipTheme from "../../themes/tooltip.theme"
+
+const tooltip = scv(tooltipTheme)
+
+const {
+  content,
+  placement = "top",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TooltipProps
+
+const classes = resolveClasses(tooltip, {
+  placement
+}, useUi("tooltip", uiProp), className)
+---
+<div class={classes.root} data-slot="tooltip-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot />
+  </div>
+
+  <div class={classes.content} data-slot="content" role="tooltip">
+    <slot name="content">
+      {content}
+    </slot>
+  </div>
+</div>

package/src/integrations/ui.ts

@@ -100,6 +100,7 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
         plugins: [
           uiPlugin({
             router: false,
+            colorMode: false,
             scanPackages: ["@rimelight/ui"]
           }),
           tailwindcss(),