@rimelight/ui 0.0.30 → 0.0.32

package/src/components/astro/RLATableOfContents.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TableOfContentsProps } from "../../types"
+import tableOfContentsThemeDefault from "../../themes/table-of-contents.theme"
+
+const tableOfContents = scv(tableOfContentsThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TableOfContentsProps
+
+const classes = resolveClasses(tableOfContents, {}, useUi("tableOfContents", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</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/theme-selector.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/RLATimeline.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TimelineProps } from "../../types"
+import timelineThemeDefault from "../../themes/timeline.theme"
+
+const timeline = scv(timelineThemeDefault)
+
+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>

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/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/components/astro/RLATour.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TourProps } from "../../types"
+import tourThemeDefault from "../../themes/tour.theme"
+
+const tour = scv(tourThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TourProps
+
+const classes = resolveClasses(tour, {}, useUi("tour", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLATree.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TreeProps } from "../../types"
+import treeThemeDefault from "../../themes/tree.theme"
+
+const tree = scv(treeThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TreeProps
+
+const classes = resolveClasses(tree, {}, useUi("tree", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAUser.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { UserProps } from "../../types"
+import userThemeDefault from "../../themes/user.theme"
+
+const user = scv(userThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as UserProps
+
+const classes = resolveClasses(user, {}, useUi("user", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/{RLAEmbedYoutube.astro → RLAVideo.astro}

@@ -1,8 +1,8 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { EmbedYoutubeProps } from "../../types"
-import embedYoutubeTheme from "../../themes/embedYoutube.theme"
+import type { VideoProps } from "../../types"
+import videoTheme from "../../themes/video.theme"
 import { Image } from "astro:assets"
 
 const PLACEHOLDER_THUMBNAIL = "/assets/placeholder.webp";
@@ -109,7 +109,7 @@ function getYoutubeEmbedUrl(rawUrl: string): string | null {
   return id ? `${YOUTUBE_EMBED_BASE}${id}?autoplay=1` : null;
 }
 
-const embedYoutube = scv(embedYoutubeTheme)
+const video = scv(videoTheme)
 
 const {
   src,
@@ -118,12 +118,12 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as EmbedYoutubeProps
+} = Astro.props as VideoProps
 
-const classes = resolveClasses(embedYoutube, {
+const classes = resolveClasses(video, {
   title: !!(Astro.slots.has("title") || title),
   icon: !!(Astro.slots.has("icon") || icon),
-}, useUi("embedYoutube", uiProp), className);
+}, useUi("video", uiProp), className);
 
 const embedUrl = getYoutubeEmbedUrl(src);
 const thumbnail = await getYoutubeThumbnail(src);

package/src/components/astro/RLAWatermark.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { WatermarkProps } from "../../types"
+import watermarkThemeDefault from "../../themes/watermark.theme"
+
+const watermark = scv(watermarkThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as WatermarkProps
+
+const classes = resolveClasses(watermark, {}, useUi("watermark", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAWindowMockup.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { WindowMockupProps } from "../../types"
+import windowMockupThemeDefault from "../../themes/window-mockup.theme"
+
+const windowMockup = scv(windowMockupThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as WindowMockupProps
+
+const classes = resolveClasses(windowMockup, {}, useUi("windowMockup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>