@rimelight/ui 0.0.36 → 0.0.38

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
+}

package/src/components/textarea/RLATextarea.astro

@@ -0,0 +1,43 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TextareaProps } from "./textarea"
+import textareaTheme from "./textarea.theme"
+
+
+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/textarea/RLVTextarea.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TextareaProps } from "./textarea"
+import textareaThemeDefault from "./textarea.theme"
+
+defineOptions({ name: "RLVTextarea" })
+
+const attrs = useAttrs()
+const textareaScv = scv(textareaThemeDefault)
+
+const modelValue = defineModel<string>()
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  size: "md",
+  color: "neutral",
+  rows: 3,
+  disabled: false,
+  readonly: false
+})
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    textareaScv,
+    {
+      size: props.size,
+      color: props.color,
+      error: !!props.error,
+      disabled: props.disabled
+    },
+    useUi("textarea", props.ui),
+    props.class
+  )
+)
+</script>
+
+<template>
+  <textarea
+    v-bind="attrs"
+    v-model="modelValue"
+    :name="name"
+    :rows="rows"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :required="required"
+    :class="resolvedClasses.root"
+    data-slot="root"
+  />
+</template>

package/src/components/textarea/textarea.theme.ts

@@ -0,0 +1,27 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTextareaTheme = () =>
+  defineTheme({
+    slots: ["root", "textarea"],
+    base: {
+      root: "relative flex items-center w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      textarea:
+        "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
+    },
+    variants: {
+      size: {
+        sm: { textarea: "py-1.5 text-xs min-h-[60px]" },
+        md: { textarea: "py-2 text-sm min-h-[80px]" },
+        lg: { textarea: "py-2.5 text-base min-h-[100px]" }
+      },
+      error: {
+        true: { root: "border-error-500 focus-within:ring-error-500/50" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: false
+    }
+  })
+
+export default createTextareaTheme()

package/src/components/textarea/textarea.ts

@@ -0,0 +1,52 @@
+import type { ThemeColor } from "../../types/component"
+export interface TextareaProps {
+  /**
+   * The text value.
+   */
+  value?: string
+  /**
+   * Placeholder text.
+   */
+  placeholder?: string
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean
+  /**
+   * Readonly state.
+   */
+  readonly?: boolean
+  /**
+   * Name for forms.
+   */
+  name?: string
+  /**
+   * Required field state.
+   */
+  required?: boolean
+  /**
+   * Row count.
+   */
+  rows?: number
+  /**
+   * Error state.
+   */
+  error?: boolean | string
+  /**
+   * 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
+}

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

@@ -0,0 +1,106 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ThemeSelectorProps } from "./theme-selector"
+import themeSelectorTheme from "./theme-selector.theme"
+import RLAButton from "../button/RLAButton.astro"
+import RLAIcon from "../icon/RLAIcon.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);
+---
+
+<rla-theme-selector {...rest}>
+    <RLAButton
+            size={size}
+            class:list={["theme-toggle-button", classes.root]}
+            variant="ghost"
+            square
+            aria-label="Toggle theme"
+    >
+        <RLAIcon name="sun" class={classes.sun} />
+        <RLAIcon name="moon" class={classes.moon} />
+    </RLAButton>
+</rla-theme-selector>
+
+<script>
+    import { defineShortcuts } from "../../utils/shortcuts"
+
+    function applyStoredTheme() {
+        const stored = localStorage.getItem('theme');
+        if (stored === 'dark') {
+            document.documentElement.classList.add('dark');
+            document.documentElement.classList.remove('light');
+        } else if (stored === 'light') {
+            document.documentElement.classList.remove('dark');
+            document.documentElement.classList.add('light');
+        }
+    }
+
+    applyStoredTheme();
+
+    function onToggle() {
+        const willBeDark = !document.documentElement.classList.contains('dark');
+        document.documentElement.classList.toggle('dark',  willBeDark);
+        document.documentElement.classList.toggle('light', !willBeDark);
+        localStorage.setItem('theme', willBeDark ? 'dark' : 'light');
+        
+        document.querySelectorAll('.theme-toggle-button').forEach(btn => {
+            btn.setAttribute('data-state', willBeDark ? 'on' : 'off');
+            btn.setAttribute('aria-pressed', willBeDark.toString());
+        });
+    }
+
+    class RLAThemeSelector extends HTMLElement {
+        private buttonCleanup: (() => void) | null = null;
+
+        connectedCallback() {
+            this.style.display = 'contents';
+            const button = this.querySelector('.theme-toggle-button');
+            if (!button) return;
+
+            const isDark = document.documentElement.classList.contains('dark');
+            button.setAttribute('data-state', isDark ? 'on' : 'off');
+            button.setAttribute('aria-pressed', isDark.toString());
+
+            button.addEventListener('click', onToggle);
+
+            const cleanupShortcut = defineShortcuts({
+                meta_alt_t: {
+                    handler: onToggle,
+                    label: "Toggle Theme",
+                    description: "Switch between light and dark theme mode",
+                    category: "system"
+                }
+            });
+
+            this.buttonCleanup = () => {
+                button.removeEventListener('click', onToggle);
+                cleanupShortcut();
+            };
+        }
+
+        disconnectedCallback() {
+            if (this.buttonCleanup) {
+                this.buttonCleanup();
+                this.buttonCleanup = null;
+            }
+        }
+    }
+
+    if (!customElements.get('rla-theme-selector')) {
+        customElements.define('rla-theme-selector', RLAThemeSelector);
+    }
+</script>

package/src/components/theme-selector/theme-selector.theme.ts

@@ -0,0 +1,15 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createThemeSelectorTheme = () =>
+  defineTheme({
+    slots: ["root", "sun", "moon"],
+    base: {
+      root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
+      sun: "hidden dark:block w-5 h-5 text-current",
+      moon: "dark:hidden w-5 h-5 text-current"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createThemeSelectorTheme()

package/src/components/timeline/RLATimeline.astro

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

@@ -0,0 +1,18 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTimelineTheme = () =>
+  defineTheme({
+    slots: ["root", "node", "dot", "dotInner", "header", "content"],
+    base: {
+      root: "relative flex flex-col pl-6 border-l-2 border-gray-800 ml-2 py-2",
+      node: "relative timeline-node",
+      dot: "absolute -left-[33px] top-[2px] flex h-4 w-4 items-center justify-center rounded-full bg-gray-950 ring-2 ring-gray-800",
+      dotInner: "h-2 w-2 rounded-full bg-primary-500",
+      header: "flex items-center justify-between gap-4 mb-3",
+      content: "space-y-2 text-sm text-gray-400"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createTimelineTheme()

package/src/components/toast/RLAToast.astro

@@ -0,0 +1,120 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ToastProps } from "./toast"
+import toastTheme from "./toast.theme"
+
+import RLAIcon from "../icon/RLAIcon.astro"
+
+const toast = scv(toastTheme)
+
+const {
+  title,
+  description,
+  variant = "default",
+  actionLabel,
+  duration = 5000,
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  dismissable = true,
+  ...rest
+} = Astro.props as ToastProps
+
+const classes = resolveClasses(toast, {
+  variant: ["success", "error", "warning", "info"].includes(variant ?? "") ? variant : "default"
+}, useUi("toast", uiProp), className)
+
+const variantIcons: Record<string, string> = {
+  default: "bell",
+  error: "circleX",
+  success: "circleCheck",
+  warning: "alertTriangle",
+  info: "info",
+}
+
+const icon = variantIcons[variant] ?? variantIcons.default!
+---
+
+<div
+  class={classes.root}
+  data-slot="root"
+  data-toast
+  data-duration={duration}
+  data-dismissable={dismissable.toString()}
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  {...rest}
+>
+  {/* Icon */}
+  <RLAIcon name={icon} class="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 || Astro.slots.has("title")) && (
+      <div class={classes.title} data-slot="title">
+        <slot name="title">{title}</slot>
+      </div>
+    )}
+    {(description || Astro.slots.has("description")) && (
+      <div class={classes.description} data-slot="description">
+        <slot name="description">{description}</slot>
+      </div>
+    )}
+    <slot />
+    {(Astro.slots.has("actions") || actionLabel) && (
+      <div class="flex items-center justify-end gap-2 mt-3" data-slot="actions">
+        <slot name="actions">
+          {actionLabel && (
+            <button
+              type="button"
+              class={classes.action}
+              data-slot="action"
+              data-toast-action
+            >
+              {actionLabel}
+            </button>
+          )}
+        </slot>
+      </div>
+    )}
+  </div>
+
+  {/* Close button */}
+  {dismissable !== false && (
+    <button
+      type="button"
+      class={classes.close}
+      data-slot="close"
+      data-toast-close
+      aria-label="Dismiss notification"
+    >
+      <RLAIcon name="close" class="size-3.5" aria-hidden="true" />
+    </button>
+  )}
+</div>
+
+<script>
+  document.querySelectorAll("[data-toast]").forEach(toast => {
+    const dismissable = toast.getAttribute("data-dismissable") !== "false";
+    if (!dismissable) return;
+
+    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/toast/toast.theme.ts

@@ -0,0 +1,37 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createToastTheme = () =>
+  defineTheme({
+    slots: ["root", "title", "description", "action", "close"],
+    base: {
+      root: "group pointer-events-auto relative flex w-full items-start justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-border bg-background text-foreground",
+      title: "text-sm font-semibold",
+      description: "text-xs opacity-90",
+      action:
+        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.error]:border-muted/40 group-[.error]:hover:border-error-500/30 group-[.error]:hover:bg-error-500 group-[.error]:hover:text-white group-[.error]:focus:ring-error-500",
+      close:
+        "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
+    },
+    variants: {
+      variant: {
+        default: { root: "bg-background border-border" },
+        error: {
+          root: "error group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400"
+        },
+        success: {
+          root: "border-success-500/20 bg-success-500/10 text-success-700 dark:text-success-400"
+        },
+        warning: {
+          root: "border-warning-500/20 bg-warning-500/10 text-warning-700 dark:text-warning-400"
+        },
+        info: {
+          root: "border-info-500/20 bg-info-500/10 text-info-700 dark:text-info-400"
+        }
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  })
+
+export default createToastTheme()

package/src/components/toast/toast.ts

@@ -0,0 +1,40 @@
+import type { ThemeColor } from "../../types/component"
+export interface ToastProps {
+  /**
+   * Main toast title.
+   */
+  title?: string
+  /**
+   * Description or message.
+   */
+  description?: string
+  /**
+   * Visual variant.
+   */
+  variant?: "default" | "error" | "success" | "warning" | "info"
+  /**
+   * Action button label.
+   */
+  actionLabel?: string
+  /**
+   * Duration in ms.
+   */
+  duration?: number
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  /**
+   * Whether the toast can be dismissed by user or timeout.
+   */
+  dismissable?: boolean
+  [key: string]: unknown
+}

package/src/components/tooltip/RLATooltip.astro

@@ -0,0 +1,33 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TooltipProps } from "./tooltip"
+import tooltipTheme from "./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/tooltip/tooltip.theme.ts

@@ -0,0 +1,28 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTooltipTheme = () =>
+  defineTheme({
+    slots: ["root", "trigger", "content"],
+    base: {
+      root: "relative inline-block group/tooltip",
+      trigger: "",
+      content: [
+        "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+        "transition-all duration-150 invisible opacity-0 scale-95 origin-center pointer-events-none",
+        "group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100"
+      ]
+    },
+    variants: {
+      placement: {
+        top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-1.5" },
+        bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-1.5" },
+        left: { content: "right-full top-1/2 -translate-y-1/2 mr-1.5" },
+        right: { content: "left-full top-1/2 -translate-y-1/2 ml-1.5" }
+      }
+    },
+    defaultVariants: {
+      placement: "top"
+    }
+  })
+
+export default createTooltipTheme()

package/src/components/tour/RLATour.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TourProps } from "./tour"
+import tourTheme from "./tour.theme"
+
+
+const tour = scv(tourTheme)
+
+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/tour/tour.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTourTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createTourTheme()