@rimelight/ui 0.0.37 → 0.0.39

package/src/components/timeline/timeline.theme.ts

@@ -0,0 +1,316 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTimelineTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "item",
+      "container",
+      "indicator",
+      "separator",
+      "wrapper",
+      "date",
+      "title",
+      "description"
+    ],
+    base: {
+      root: "flex gap-1.5",
+      item: "group relative flex flex-1 gap-3",
+      container: "relative flex items-center gap-1.5",
+      indicator:
+        "group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-highlighted",
+      separator: "flex-1 rounded-full bg-elevated",
+      wrapper: "w-full",
+      date: "text-dimmed text-xs/5",
+      title: "font-medium text-highlighted text-sm",
+      description: "text-muted text-wrap text-sm"
+    },
+    variants: {
+      orientation: {
+        horizontal: {
+          root: "flex-row w-full",
+          item: "flex-col",
+          separator: "h-0.5"
+        },
+        vertical: {
+          root: "flex-col",
+          container: "flex-col",
+          separator: "w-0.5"
+        }
+      },
+      color: {
+        primary: {
+          indicator: "group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"
+        },
+        secondary: {
+          indicator:
+            "group-data-[state=completed]:bg-secondary group-data-[state=active]:bg-secondary"
+        },
+        success: {
+          indicator: "group-data-[state=completed]:bg-success group-data-[state=active]:bg-success"
+        },
+        info: {
+          indicator: "group-data-[state=completed]:bg-info group-data-[state=active]:bg-info"
+        },
+        warning: {
+          indicator: "group-data-[state=completed]:bg-warning group-data-[state=active]:bg-warning"
+        },
+        error: {
+          indicator: "group-data-[state=completed]:bg-error group-data-[state=active]:bg-error"
+        },
+        neutral: {
+          indicator:
+            "group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"
+        }
+      },
+      size: {
+        "3xs": {},
+        "2xs": {},
+        "xs": {},
+        "sm": {},
+        "md": {},
+        "lg": {},
+        "xl": {},
+        "2xl": {},
+        "3xl": {}
+      },
+      reverse: {
+        true: {},
+        false: {}
+      }
+    },
+    compoundVariants: [
+      {
+        color: "primary",
+        reverse: false,
+        class: {
+          separator: "group-data-[state=completed]:bg-primary"
+        }
+      },
+      {
+        color: "secondary",
+        reverse: false,
+        class: {
+          separator: "group-data-[state=completed]:bg-secondary"
+        }
+      },
+      {
+        color: "success",
+        reverse: false,
+        class: {
+          separator: "group-data-[state=completed]:bg-success"
+        }
+      },
+      {
+        color: "info",
+        reverse: false,
+        class: {
+          separator: "group-data-[state=completed]:bg-info"
+        }
+      },
+      {
+        color: "warning",
+        reverse: false,
+        class: {
+          separator: "group-data-[state=completed]:bg-warning"
+        }
+      },
+      {
+        color: "error",
+        reverse: false,
+        class: {
+          separator: "group-data-[state=completed]:bg-error"
+        }
+      },
+      {
+        color: "primary",
+        reverse: true,
+        class: {
+          separator: "group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"
+        }
+      },
+      {
+        color: "secondary",
+        reverse: true,
+        class: {
+          separator:
+            "group-data-[state=active]:bg-secondary group-data-[state=completed]:bg-secondary"
+        }
+      },
+      {
+        color: "success",
+        reverse: true,
+        class: {
+          separator: "group-data-[state=active]:bg-success group-data-[state=completed]:bg-success"
+        }
+      },
+      {
+        color: "info",
+        reverse: true,
+        class: {
+          separator: "group-data-[state=active]:bg-info group-data-[state=completed]:bg-info"
+        }
+      },
+      {
+        color: "warning",
+        reverse: true,
+        class: {
+          separator: "group-data-[state=active]:bg-warning group-data-[state=completed]:bg-warning"
+        }
+      },
+      {
+        color: "error",
+        reverse: true,
+        class: {
+          separator: "group-data-[state=active]:bg-error group-data-[state=completed]:bg-error"
+        }
+      },
+      {
+        color: "neutral",
+        reverse: false,
+        class: {
+          separator: "group-data-[state=completed]:bg-inverted"
+        }
+      },
+      {
+        color: "neutral",
+        reverse: true,
+        class: {
+          separator:
+            "group-data-[state=active]:bg-inverted group-data-[state=completed]:bg-inverted"
+        }
+      },
+      {
+        orientation: "horizontal",
+        size: "3xs",
+        class: {
+          wrapper: "pe-4.5"
+        }
+      },
+      {
+        orientation: "horizontal",
+        size: "2xs",
+        class: {
+          wrapper: "pe-5"
+        }
+      },
+      {
+        orientation: "horizontal",
+        size: "xs",
+        class: {
+          wrapper: "pe-5.5"
+        }
+      },
+      {
+        orientation: "horizontal",
+        size: "sm",
+        class: {
+          wrapper: "pe-6"
+        }
+      },
+      {
+        orientation: "horizontal",
+        size: "md",
+        class: {
+          wrapper: "pe-6.5"
+        }
+      },
+      {
+        orientation: "horizontal",
+        size: "lg",
+        class: {
+          wrapper: "pe-7"
+        }
+      },
+      {
+        orientation: "horizontal",
+        size: "xl",
+        class: {
+          wrapper: "pe-7.5"
+        }
+      },
+      {
+        orientation: "horizontal",
+        size: "2xl",
+        class: {
+          wrapper: "pe-8"
+        }
+      },
+      {
+        orientation: "horizontal",
+        size: "3xl",
+        class: {
+          wrapper: "pe-8.5"
+        }
+      },
+      {
+        orientation: "vertical",
+        size: "3xs",
+        class: {
+          wrapper: "-mt-0.5 pb-4.5"
+        }
+      },
+      {
+        orientation: "vertical",
+        size: "2xs",
+        class: {
+          wrapper: "pb-5"
+        }
+      },
+      {
+        orientation: "vertical",
+        size: "xs",
+        class: {
+          wrapper: "mt-0.5 pb-5.5"
+        }
+      },
+      {
+        orientation: "vertical",
+        size: "sm",
+        class: {
+          wrapper: "mt-1 pb-6"
+        }
+      },
+      {
+        orientation: "vertical",
+        size: "md",
+        class: {
+          wrapper: "mt-1.5 pb-6.5"
+        }
+      },
+      {
+        orientation: "vertical",
+        size: "lg",
+        class: {
+          wrapper: "mt-2 pb-7"
+        }
+      },
+      {
+        orientation: "vertical",
+        size: "xl",
+        class: {
+          wrapper: "mt-2.5 pb-7.5"
+        }
+      },
+      {
+        orientation: "vertical",
+        size: "2xl",
+        class: {
+          wrapper: "mt-3 pb-8"
+        }
+      },
+      {
+        orientation: "vertical",
+        size: "3xl",
+        class: {
+          wrapper: "mt-3.5 pb-8.5"
+        }
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary"
+    }
+  })
+
+export default createTimelineTheme()

package/src/components/timeline/timeline.ts

@@ -0,0 +1,61 @@
+export interface TimelineItem {
+  date?: string
+  title?: string
+  description?: string
+  icon?: string
+  avatar?: any
+  value?: string | number
+  slot?: string
+  class?: any
+  ui?: {
+    item?: any
+    container?: any
+    indicator?: any
+    separator?: any
+    wrapper?: any
+    date?: any
+    title?: any
+    description?: any
+    [key: string]: any
+  }
+  [key: string]: any
+}
+
+export interface TimelineProps<T extends TimelineItem = TimelineItem> {
+  /**
+   * The element or component this component should render as.
+   */
+  as?: any
+  items?: T[]
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
+  /**
+   * The orientation of the Timeline.
+   *
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical"
+  /**
+   * The key used to get the value from the item.
+   *
+   * @default "value"
+   */
+  valueKey?: string
+  defaultValue?: string | number
+  modelValue?: string | number
+  reverse?: boolean
+  ui?: {
+    root?: any
+    item?: any
+    container?: any
+    indicator?: any
+    separator?: any
+    wrapper?: any
+    date?: any
+    title?: any
+    description?: any
+    [key: string]: any
+  }
+  class?: any
+  [key: string]: unknown
+}

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

package/src/components/tree/RLATree.astro

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