@rimelight/ui 0.0.30 → 0.0.31

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(),

package/src/themes/alert.theme.ts

@@ -0,0 +1,51 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createAlertTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "icon", "content", "title", "description"],
+    base: {
+      root: "relative w-full rounded-lg border p-4 flex gap-3 text-sm transition-all shadow-sm",
+      icon: "shrink-0 size-5 text-current",
+      content: "flex flex-col gap-1 w-full",
+      title: "font-semibold leading-none tracking-tight text-foreground",
+      description: "text-xs opacity-90 leading-relaxed"
+    },
+    variants: {
+      variant: {
+        default: { root: "bg-background text-foreground border-border" },
+        destructive: { root: "bg-error-500/10 text-error-700 border-error-500/20 dark:text-error-400" },
+        outline: { root: "border bg-transparent" },
+        solid: { root: "border-transparent text-white" }
+      },
+      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+      hasIcon: {
+        true: { icon: "block" },
+        false: { icon: "hidden" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: `bg-${color}-500 text-white border-transparent`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root: `border-${color}-500/20 text-${color}-600 bg-${color}-500/5`
+        }
+      }))
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "primary",
+      hasIcon: false
+    }
+  })
+
+export default createAlertTheme()

package/src/themes/alertDialog.theme.ts

@@ -0,0 +1,33 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const alertDialogTheme = defineTheme({
+  slots: ["root", "trigger", "backdrop", "content", "header", "title", "description", "footer", "cancelButton", "actionButton"],
+  base: {
+    root: "relative inline-block",
+    trigger: "",
+    backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
+    content: [
+      "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border",
+      "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
+    ],
+    header: "flex flex-col gap-1.5 text-center sm:text-left mb-4",
+    title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+    description: "text-sm text-muted-foreground leading-relaxed",
+    footer: "flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6",
+    cancelButton: "w-full sm:w-auto",
+    actionButton: "w-full sm:w-auto"
+  },
+  variants: {
+    variant: {
+      default: { actionButton: "" },
+      destructive: { actionButton: "bg-error-500 hover:bg-error-600 focus-visible:ring-error-500/50" }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+})
+
+export default alertDialogTheme

package/src/themes/aspectRatio.theme.ts

@@ -0,0 +1,11 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const aspectRatioTheme = defineTheme({
+  slots: ["root", "content"],
+  base: {
+    root: "relative w-full overflow-hidden",
+    content: "absolute inset-0 h-full w-full object-cover"
+  }
+})
+
+export default aspectRatioTheme

package/src/themes/avatar.theme.ts

@@ -0,0 +1,28 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const avatarTheme = defineTheme({
+  slots: ["root", "image", "fallback", "badge"],
+  base: {
+    root: "relative flex shrink-0 overflow-hidden rounded-full select-none",
+    image: "aspect-square h-full w-full object-cover",
+    fallback: "flex h-full w-full items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground uppercase",
+    badge: "absolute bottom-0 right-0 block size-2.5 rounded-full ring-2 ring-background"
+  },
+  variants: {
+    size: {
+      sm: { root: "size-8", fallback: "text-xs" },
+      md: { root: "size-10", fallback: "text-sm" },
+      lg: { root: "size-12", fallback: "text-base" }
+    },
+    hasBadge: {
+      true: { badge: "block" },
+      false: { badge: "hidden" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    hasBadge: false
+  }
+})
+
+export default avatarTheme

package/src/themes/avatarGroup.theme.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const avatarGroupTheme = defineTheme({
+  slots: ["root"],
+  base: {
+    root: "flex -space-x-3 hover:space-x-0 transition-all duration-300 [&_[data-slot=root]]:ring-2 [&_[data-slot=root]]:ring-background [&_[data-slot=root]]:transition-all"
+  }
+})
+
+export default avatarGroupTheme

package/src/themes/badge.theme.ts

@@ -0,0 +1,61 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createBadgeTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "inline-flex items-center gap-1.5 font-medium select-none overflow-hidden transition-all duration-150"
+    },
+    variants: {
+      variant: {
+        solid: { root: "border border-transparent text-white" },
+        outline: { root: "border" },
+        soft: { root: "border border-transparent" },
+        ghost: { root: "bg-transparent hover:bg-muted" }
+      },
+      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+      size: {
+        sm: { root: "px-2 py-0.5 text-2xs rounded-full h-5" },
+        md: { root: "px-2.5 py-0.5 text-xs rounded-full h-6" },
+        lg: { root: "px-3 py-1 text-sm rounded-full h-7" }
+      },
+      shape: {
+        square: { root: "rounded-sm" },
+        rounded: { root: "rounded-md" },
+        pill: { root: "rounded-full" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: `bg-${color}-500 text-white hover:bg-${color}-600`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root: `border-${color}-500/20 text-${color}-600 bg-transparent hover:bg-${color}-500/5`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20`
+        }
+      }))
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md",
+      shape: "pill"
+    }
+  })
+
+export default createBadgeTheme()