@rimelight/ui 0.0.38 → 0.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -54,11 +54,11 @@
     "@astrojs/solid-js": "7.0.1",
     "@astrojs/ts-plugin": "1.10.10",
     "@astrojs/vue": "7.0.1",
-    "astro": "7.1.0",
+    "astro": "7.1.3",
     "solid-js": "1.9.14",
     "typescript": "6.0.3",
     "unocss": "66.7.5",
-    "vue": "3.5.39"
+    "vue": "3.5.40"
   },
   "peerDependencies": {
     "@astrojs/solid-js": ">=7.0.1",

package/src/components/icon/icon.theme.ts

@@ -4,7 +4,14 @@ export const createIconTheme = () =>
   defineTheme({
     slots: ["root"],
     base: {
-      root: ["inline-block", "align-middle"]
+      root: [
+        "shrink-0",
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "align-middle",
+        "leading-none"
+      ]
     },
     variants: {
       size: {

package/src/components/image/RLAImage.astro

@@ -1,8 +1,6 @@
 ---
-import { getImage } from "astro:assets"
+import { Image, Picture, getImage } from "astro:assets"
 import type { ImageMetadata } from "astro"
-import Image from "astro/components/Image.astro"
-import Picture from "astro/components/Picture.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 import { scv } from "css-variants"
 import { useUi } from "../../utils/useUi"

package/src/components/page-section/RLAPageSection.astro

@@ -42,6 +42,7 @@ const classes = resolveClasses(pageSection, {
 }, useUi("pageSection", uiProp), className);
 
 const hasDefaultSlot = Astro.slots.has("default");
+const hasContentSlot = Astro.slots.has("content");
 
 const Tag = as;
 const TitleTag = variant === "hero" ? "h1" : "h2";
@@ -152,7 +153,14 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
     ) : orientation === "horizontal" ? (
       <div class="hidden lg:block" />
     ) : null}
+
+    {hasContentSlot && (
+      <div class="col-span-full w-full">
+        <slot name="content" />
+      </div>
+    )}
   </div>
 
   <slot name="bottom" />
 </Tag>
+

package/src/components/post/RLAPost.astro

@@ -1,72 +1,72 @@
----
-import { scv } from "css-variants"
+---
+import { scv } from "css-variants"
 import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PostProps } from "./post"
-import postTheme from "./post.theme"
-import type { ImageMetadata } from "astro"
-import Image from "astro/components/Image.astro"
-import RLABadge from "../badge/RLABadge.astro"
-
-
-const post = scv(postTheme)
-
-const {
-  title,
-  description,
-  date,
-  image,
-  to,
-  badge,
-  badgeColor = "primary",
-  variant = "soft",
-  orientation = "vertical",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PostProps
-
-const classes = resolveClasses(post, { variant, orientation }, useUi("post", uiProp), className);
-
-const Tag = to ? "a" : "div";
-const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() : date) : null;
----
-<Tag class={classes.root} data-slot="root" {...(to ? { href: to } : {})} {...rest}>
-  <slot name="image" {...{ ui: classes }}>
-    {image && (
-      <div class={classes.imageWrapper} data-slot="image-wrapper">
-        {typeof image === 'string' ? (
-           <img src={image} alt={title} class={classes.image} data-slot="image" />
-        ) : (
-           <Image src={image as ImageMetadata} alt={title || ""} class={classes.image} data-slot="image" />
-        )}
-      </div>
-    )}
-  </slot>
-
-  <div class={classes.content} data-slot="content">
-    <slot name="title" {...{ ui: classes }}>
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-    </slot>
-
-    <slot name="description" {...{ ui: classes }}>
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-    </slot>
-
-    <slot name="badge" {...{ ui: classes }}>
-      {badge && <RLABadge color={badgeColor as any} size="sm" shape="pill" class={classes.badge} data-slot="badge">{badge}</RLABadge>}
-    </slot>
-
-    <slot name="date" {...{ ui: classes }}>
-      {formattedDate && <time class={classes.date} data-slot="date">{formattedDate}</time>}
-    </slot>
-
-    <slot />
-  </div>
-
-  {Astro.slots.has("footer") && (
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer" {...{ ui: classes }} />
-    </div>
-  )}
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { PostProps } from "./post"
+import postTheme from "./post.theme"
+import { Image } from "astro:assets"
+import type { ImageMetadata } from "astro"
+import RLABadge from "../badge/RLABadge.astro"
+
+
+const post = scv(postTheme)
+
+const {
+  title,
+  description,
+  date,
+  image,
+  to,
+  badge,
+  badgeColor = "primary",
+  variant = "soft",
+  orientation = "vertical",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PostProps
+
+const classes = resolveClasses(post, { variant, orientation }, useUi("post", uiProp), className);
+
+const Tag = to ? "a" : "div";
+const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() : date) : null;
+---
+<Tag class={classes.root} data-slot="root" {...(to ? { href: to } : {})} {...rest}>
+  <slot name="image" {...{ ui: classes }}>
+    {image && (
+      <div class={classes.imageWrapper} data-slot="image-wrapper">
+        {typeof image === 'string' ? (
+           <img src={image} alt={title} class={classes.image} data-slot="image" />
+        ) : (
+           <Image src={image as ImageMetadata} alt={title || ""} class={classes.image} data-slot="image" />
+        )}
+      </div>
+    )}
+  </slot>
+
+  <div class={classes.content} data-slot="content">
+    <slot name="title" {...{ ui: classes }}>
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+    </slot>
+
+    <slot name="description" {...{ ui: classes }}>
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+    </slot>
+
+    <slot name="badge" {...{ ui: classes }}>
+      {badge && <RLABadge color={badgeColor as any} size="sm" shape="pill" class={classes.badge} data-slot="badge">{badge}</RLABadge>}
+    </slot>
+
+    <slot name="date" {...{ ui: classes }}>
+      {formattedDate && <time class={classes.date} data-slot="date">{formattedDate}</time>}
+    </slot>
+
+    <slot />
+  </div>
+
+  {Astro.slots.has("footer") && (
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" {...{ ui: classes }} />
+    </div>
+  )}
 </Tag>

package/src/components/tabs/RLATabs.astro

@@ -2,71 +2,96 @@
 import { scv } from "css-variants"
 import { useUi } from "../../utils/useUi"
 import { resolveClasses } from "../../utils/resolveClasses"
-import type { TabsProps } from "./tabs"
+import type { TabsProps, TabItem } from "./tabs"
 import tabsTheme from "./tabs.theme"
-
+import RLABadge from "../badge/RLABadge.astro"
 
 const tabs = scv(tabsTheme)
 
 const {
   items = [],
   value = "",
-  variant = "solid",
+  defaultValue = "",
+  variant = "pill",
   orientation = "horizontal",
   size = "md",
   color = "primary",
+  content = true,
+  unmountOnHide = true,
+  valueKey = "value",
+  labelKey = "label",
   ui: uiProp,
   class: className,
   ...rest
 } = Astro.props as TabsProps
 
+// Normalize variant names for backward compatibility (solid -> pill, pills -> pill, underline -> underline, link -> underline)
+const normalizedVariant = (variant === "solid" || variant === "pills") ? "pill" : (variant === "link" ? "underline" : variant);
+
 const classes = resolveClasses(tabs, {
-  variant,
+  variant: normalizedVariant,
   orientation,
   size
 }, useUi("tabs", uiProp), className);
 
-const initialValue = value || (items.length > 0 ? items[0]?.value : "")
+const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valueKey] ?? items[0].value ?? "0") : "")
 ---
-<rla-tabs {...rest}>
+<rla-tabs {...rest} data-orientation={orientation} data-variant={normalizedVariant}>
   <div class={classes.root} data-slot="root" data-tabs-container data-value={initialValue}>
     <div class={classes.list} data-slot="list" role="tablist">
-      {items.map((item) => {
-        const active = item.value === initialValue
+      <div class={classes.indicator} data-slot="indicator" style="display: none;"></div>
+      {items.map((item, index) => {
+        const itemVal = item[valueKey] ?? item.value ?? String(index)
+        const itemLabel = item[labelKey] ?? item.label
+        const active = itemVal === initialValue
         return (
           <button
             type="button"
             class={classes.trigger}
             data-slot="trigger"
             role="tab"
-            data-value={item.value}
+            data-value={itemVal}
             data-state={active ? "active" : "inactive"}
             disabled={item.disabled}
           >
-            {item.icon && <span class={item.icon + " mr-2"} />}
-            {item.label}
+            {item.icon && <span class={item.icon + " " + classes.leadingIcon} data-slot="leadingIcon" />}
+            {itemLabel && <span class={classes.label} data-slot="label">{itemLabel}</span>}
+            {item.badge !== undefined && item.badge !== null && (
+              <RLABadge
+                size="sm"
+                variant="subtle"
+                color="neutral"
+                class={classes.trailingBadge}
+                data-slot="trailingBadge"
+              >
+                {typeof item.badge === "object" ? item.badge.label : item.badge}
+              </RLABadge>
+            )}
           </button>
         )
       })}
     </div>
-    <div class="flex-1">
-      <slot>
-        {items.map(item => {
-          const active = item.value === initialValue
-          return (
-            <div
-              class={classes.content}
-              data-slot="content"
-              role="tabpanel"
-              data-value={item.value}
-              hidden={active ? undefined : "until-found"}
-            >
-              {item.content}
-            </div>
-          )
-        })}
-      </slot>
-    </div>
+    {content && (
+      <div class="flex-1">
+        <slot>
+          {items.map((item, index) => {
+            const itemVal = item[valueKey] ?? item.value ?? String(index)
+            const active = itemVal === initialValue
+            return (
+              <div
+                class={classes.content}
+                data-slot="content"
+                role="tabpanel"
+                data-value={itemVal}
+                hidden={active ? undefined : "until-found"}
+              >
+                {item.content}
+              </div>
+            )
+          })}
+        </slot>
+      </div>
+    )}
   </div>
 </rla-tabs>
 
@@ -74,19 +99,59 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
   if (typeof HTMLElement !== 'undefined') {
     class RLATabs extends HTMLElement {
       private tabsCleanup: (() => void) | null = null;
+      private resizeObserver: ResizeObserver | null = null;
 
       connectedCallback() {
         this.style.display = 'contents';
         const container = this.querySelector("[data-tabs-container]") as HTMLElement | null;
         if (!container) return;
 
+        const list = container.querySelector("[data-slot=list]") as HTMLElement | null;
+        const indicator = container.querySelector("[data-slot=indicator]") as HTMLElement | null;
+        const orientation = this.dataset.orientation || "horizontal";
+        const isVertical = orientation === "vertical";
+
+        const updateIndicator = (activeTrigger: HTMLElement | null) => {
+          if (!indicator || !list || !activeTrigger) {
+            if (indicator) indicator.style.display = 'none';
+            return;
+          }
+
+          const listRect = list.getBoundingClientRect();
+          const triggerRect = activeTrigger.getBoundingClientRect();
+
+          if (triggerRect.width === 0 && triggerRect.height === 0) {
+            indicator.style.display = 'none';
+            return;
+          }
+
+          indicator.style.display = 'block';
+
+          if (isVertical) {
+            const top = triggerRect.top - listRect.top + list.scrollTop;
+            const height = triggerRect.height;
+            indicator.style.transform = `translateY(${top}px)`;
+            indicator.style.height = `${height}px`;
+          } else {
+            const left = triggerRect.left - listRect.left + list.scrollLeft;
+            const width = triggerRect.width;
+            indicator.style.transform = `translateX(${left}px)`;
+            indicator.style.width = `${width}px`;
+          }
+        };
+
         const containerValue = container.dataset.value;
         const triggers = container.querySelectorAll("[role=tab]");
         const panels = container.querySelectorAll("[role=tabpanel]");
 
+        let activeTrigger: HTMLElement | null = null;
+
         triggers.forEach(trigger => {
-          const val = (trigger as HTMLButtonElement).dataset.value;
-          trigger.setAttribute("data-state", val === containerValue ? "active" : "inactive");
+          const el = trigger as HTMLElement;
+          const val = el.dataset.value;
+          const isActive = val === containerValue;
+          el.setAttribute("data-state", isActive ? "active" : "inactive");
+          if (isActive) activeTrigger = el;
         });
 
         panels.forEach(panel => {
@@ -98,6 +163,17 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
           }
         });
 
+        // Initialize indicator position
+        requestAnimationFrame(() => updateIndicator(activeTrigger));
+
+        if (window.ResizeObserver && list) {
+          this.resizeObserver = new ResizeObserver(() => {
+            const currentActive = list.querySelector("[role=tab][data-state=active]") as HTMLElement | null;
+            updateIndicator(currentActive);
+          });
+          this.resizeObserver.observe(list);
+        }
+
         const clickCleanups: (() => void)[] = [];
         const beforeMatchCleanups: (() => void)[] = [];
 
@@ -117,11 +193,14 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
         triggers.forEach(triggerNode => {
           const trigger = triggerNode as HTMLButtonElement;
           const onClick = () => {
+            if (trigger.disabled) return;
             const targetValue = trigger.dataset.value;
 
             triggers.forEach(tNode => {
               const t = tNode as HTMLButtonElement;
-              t.setAttribute("data-state", t.dataset.value === targetValue ? "active" : "inactive");
+              const isTarget = t.dataset.value === targetValue;
+              t.setAttribute("data-state", isTarget ? "active" : "inactive");
+              if (isTarget) updateIndicator(t);
             });
 
             panels.forEach(panel => {
@@ -139,6 +218,10 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
         this.tabsCleanup = () => {
           clickCleanups.forEach(fn => fn());
           beforeMatchCleanups.forEach(fn => fn());
+          if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+          }
         };
       }
 
@@ -155,3 +238,4 @@ const initialValue = value || (items.length > 0 ? items[0]?.value : "")
     }
   }
 </script>
+

package/src/components/tabs/tabs.theme.ts

@@ -2,51 +2,79 @@ import { defineTheme } from "../../utils/defineTheme"
 
 export const createTabsTheme = () =>
   defineTheme({
-    slots: ["root", "list", "trigger", "content"],
+    slots: ["root", "list", "indicator", "trigger", "leadingIcon", "leadingAvatar", "label", "trailingBadge", "content"],
     base: {
-      root: "w-full flex flex-col gap-4",
-      list: "inline-flex items-center justify-start rounded-md bg-muted p-1 text-muted-foreground",
+      root: "flex gap-2 w-full",
+      list: "relative flex p-1 group items-center min-w-0",
+      indicator: "absolute transition-[translate,width,height,top,left] duration-200 ease-out pointer-events-none",
       trigger:
-        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
-      content:
-        "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        "group relative inline-flex items-center justify-center min-w-0 whitespace-nowrap font-medium transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-none data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:text-foreground",
+      leadingIcon: "shrink-0",
+      leadingAvatar: "shrink-0",
+      label: "truncate",
+      trailingBadge: "shrink-0",
+      content: "w-full focus-visible:outline-none"
     },
     variants: {
       variant: {
-        solid: {
-          list: "bg-muted p-1 rounded-lg",
-          trigger:
-            "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+        pill: {
+          list: "bg-muted/60 dark:bg-muted/40 rounded-lg p-1",
+          trigger: "grow rounded-md data-[state=active]:text-foreground z-10",
+          indicator: "bg-background rounded-md shadow-xs top-1 bottom-1 h-[calc(100%-8px)]"
         },
         underline: {
-          list: "bg-transparent border-b border-border rounded-none p-0 gap-4",
-          trigger:
-            "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
+          list: "bg-transparent border-b border-border p-0 gap-2 -mb-px",
+          trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
+          indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
         },
-        pills: {
-          list: "bg-transparent p-0 gap-2",
-          trigger:
-            "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
+        link: {
+          list: "bg-transparent border-b border-border p-0 gap-2 -mb-px",
+          trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
+          indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
         }
       },
       orientation: {
-        horizontal: { root: "flex-col", list: "w-full" },
+        horizontal: {
+          root: "flex-col",
+          list: "w-full",
+          indicator: "",
+          trigger: "justify-center"
+        },
         vertical: {
           root: "flex-row gap-6",
-          list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent"
+          list: "flex-col items-stretch w-48 border-r border-border p-0",
+          trigger: "justify-start text-left"
         }
       },
       size: {
-        sm: { trigger: "text-xs px-2.5 py-1" },
-        md: { trigger: "text-sm px-3.5 py-1.5" },
-        lg: { trigger: "text-base px-4.5 py-2" }
+        xs: {
+          trigger: "px-2 py-1 text-xs gap-1",
+          leadingIcon: "size-3.5"
+        },
+        sm: {
+          trigger: "px-2.5 py-1.5 text-xs gap-1.5",
+          leadingIcon: "size-4"
+        },
+        md: {
+          trigger: "px-3 py-1.5 text-sm gap-1.5",
+          leadingIcon: "size-4"
+        },
+        lg: {
+          trigger: "px-3.5 py-2 text-sm gap-2",
+          leadingIcon: "size-5"
+        },
+        xl: {
+          trigger: "px-4 py-2.5 text-base gap-2",
+          leadingIcon: "size-5"
+        }
       }
     },
     defaultVariants: {
-      variant: "solid",
+      variant: "pill",
       orientation: "horizontal",
       size: "md"
     }
   })
 
 export default createTabsTheme()
+

package/src/components/tabs/tabs.ts

@@ -1,37 +1,71 @@
 import type { ThemeColor } from "../../types/component"
+
 export interface TabItem {
-  label: string
-  value: string
+  label?: string
+  value?: string
   icon?: string
+  badge?: string | number | { label?: string | number; color?: string; variant?: string }
   content?: string
   disabled?: boolean
+  slot?: string
+  class?: any
+  ui?: any
+  [key: string]: any
 }
 
-export interface TabsProps {
+export interface TabsProps<T extends TabItem = TabItem> {
   /**
    * The tab items.
    */
-  items?: TabItem[]
+  items?: T[]
   /**
    * Active tab value.
    */
   value?: string
+  /**
+   * Default active tab value when uncontrolled.
+   */
+  defaultValue?: string
   /**
    * Tab variant.
+   * @defaultValue 'pill'
    */
-  variant?: "solid" | "underline" | "pills"
+  variant?: "pill" | "underline" | "link" | "solid" | "pills"
   /**
    * Layout orientation.
+   * @defaultValue 'horizontal'
    */
   orientation?: "horizontal" | "vertical"
   /**
    * Size scale.
+   * @defaultValue 'md'
    */
-  size?: "sm" | "md" | "lg"
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
   /**
    * Color theme.
    */
   color?: ThemeColor
+  /**
+   * Whether to render content panels automatically. Set to false for tab bar only.
+   * @defaultValue true
+   */
+  content?: boolean
+  /**
+   * Unmount hidden tab panels from DOM. Defaults to true.
+   * If false, panel is hidden via CSS/attribute.
+   * @defaultValue true
+   */
+  unmountOnHide?: boolean
+  /**
+   * Property key for value on item object.
+   * @defaultValue 'value'
+   */
+  valueKey?: string
+  /**
+   * Property key for label on item object.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   /**
    * Slot-specific CSS class overrides.
    */
@@ -42,3 +76,4 @@ export interface TabsProps {
   class?: any
   [key: string]: unknown
 }
+

package/src/components/timeline/RLATimeline.astro

@@ -1,21 +1,195 @@
----
-import { scv } from "css-variants"
+---
+import { scv, cx } 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>
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TimelineProps, TimelineItem } from "./timeline"
+import { resolveTheme } from "../../utils/resolveTheme"
+import timelineThemeDefault, { createTimelineTheme } from "./timeline.theme"
+const timelineTheme = resolveTheme(timelineThemeDefault, createTimelineTheme)
+import RLAAvatar from "../avatar/RLAAvatar.astro"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+const timeline = scv(timelineTheme)
+
+const {
+  as: Component = "div",
+  items,
+  size = "md",
+  color = "primary",
+  orientation = "vertical",
+  valueKey = "value",
+  defaultValue,
+  modelValue,
+  reverse = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TimelineProps
+
+const classes = resolveClasses(
+  timeline,
+  {
+    orientation,
+    size,
+    color,
+    reverse
+  },
+  useUi("timeline", uiProp),
+  className
+)
+
+const activeVal = modelValue !== undefined ? modelValue : defaultValue
+
+function getItemValue(item: TimelineItem, index: number) {
+  return item[valueKey] !== undefined ? item[valueKey] : index
+}
+
+function getItemState(item: TimelineItem, index: number): "active" | "completed" | undefined {
+  if (activeVal === undefined) return undefined
+
+  let currentIndex = -1
+  if (items && items.length > 0) {
+    if (typeof activeVal === "string") {
+      currentIndex = items.findIndex((i) => getItemValue(i, items.indexOf(i)) === activeVal)
+    } else if (typeof activeVal === "number") {
+      if (reverse) {
+        currentIndex = items.length - 1 - activeVal
+      } else {
+        currentIndex = activeVal
+      }
+    }
+  }
+
+  if (currentIndex === -1) return undefined
+  if (index === currentIndex) return "active"
+
+  if (reverse) {
+    return index > currentIndex ? "completed" : undefined
+  } else {
+    return index < currentIndex ? "completed" : undefined
+  }
+}
+
+function getSlotName(item: TimelineItem, slotType: string): string {
+  return item.slot ? `${item.slot}-${slotType}` : slotType
+}
+---
+
+<Component
+  data-orientation={orientation}
+  data-slot="root"
+  class={classes.root}
+  {...rest}
+>
+  {items && items.length > 0 ? (
+    items.map((item, index) => {
+      const state = getItemState(item, index)
+      const isLast = index === items.length - 1
+
+      const itemIndicatorSlot = getSlotName(item, "indicator")
+      const itemWrapperSlot = getSlotName(item, "wrapper")
+      const itemDateSlot = getSlotName(item, "date")
+      const itemTitleSlot = getSlotName(item, "title")
+      const itemDescriptionSlot = getSlotName(item, "description")
+
+      const hasCustomIndicator = Astro.slots.has(itemIndicatorSlot) || (item.slot && Astro.slots.has("indicator"))
+      const hasCustomWrapper = Astro.slots.has(itemWrapperSlot) || (item.slot && Astro.slots.has("wrapper"))
+      const hasCustomDate = Astro.slots.has(itemDateSlot) || (item.slot && Astro.slots.has("date"))
+      const hasCustomTitle = Astro.slots.has(itemTitleSlot) || (item.slot && Astro.slots.has("title"))
+      const hasCustomDescription = Astro.slots.has(itemDescriptionSlot) || (item.slot && Astro.slots.has("description"))
+
+      return (
+        <div
+          data-slot="item"
+          class={cx(classes.item, item.ui?.item, item.class)}
+          data-state={state}
+        >
+          <div
+            data-slot="container"
+            class={cx(classes.container, item.ui?.container)}
+          >
+            <RLAAvatar
+              size={size as any}
+              src={item.avatar?.src}
+              alt={item.avatar?.alt}
+              {...(typeof item.avatar === "object" ? item.avatar : {})}
+              data-slot="indicator"
+              class={cx(classes.indicator, item.ui?.indicator)}
+              ui={{ icon: "text-highlighted group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted", fallback: "text-highlighted group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted" }}
+            >
+              {hasCustomIndicator ? (
+                <slot name={itemIndicatorSlot} item={item}>
+                  <slot name="indicator" item={item} />
+                </slot>
+              ) : item.icon ? (
+                <RLAIcon name={item.icon} class="text-inherit" />
+              ) : null}
+            </RLAAvatar>
+
+            {!isLast && (
+              <div
+                data-slot="separator"
+                class={cx(classes.separator, item.ui?.separator)}
+                data-orientation={orientation}
+              />
+            )}
+          </div>
+
+          <div
+            data-slot="wrapper"
+            class={cx(classes.wrapper, item.ui?.wrapper)}
+          >
+            {hasCustomWrapper ? (
+              <slot name={itemWrapperSlot} item={item}>
+                <slot name="wrapper" item={item} />
+              </slot>
+            ) : (
+              <>
+                {(item.date || hasCustomDate) && (
+                  <div
+                    data-slot="date"
+                    class={cx(classes.date, item.ui?.date)}
+                  >
+                    <slot name={itemDateSlot} item={item}>
+                      <slot name="date" item={item}>
+                        {item.date}
+                      </slot>
+                    </slot>
+                  </div>
+                )}
+
+                {(item.title || hasCustomTitle) && (
+                  <div
+                    data-slot="title"
+                    class={cx(classes.title, item.ui?.title)}
+                  >
+                    <slot name={itemTitleSlot} item={item}>
+                      <slot name="title" item={item}>
+                        {item.title}
+                      </slot>
+                    </slot>
+                  </div>
+                )}
+
+                {(item.description || hasCustomDescription) && (
+                  <div
+                    data-slot="description"
+                    class={cx(classes.description, item.ui?.description)}
+                  >
+                    <slot name={itemDescriptionSlot} item={item}>
+                      <slot name="description" item={item}>
+                        {item.description}
+                      </slot>
+                    </slot>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      )
+    })
+  ) : (
+    <slot />
+  )}
+</Component>

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

@@ -2,17 +2,315 @@ import { defineTheme } from "../../utils/defineTheme"
 
 export const createTimelineTheme = () =>
   defineTheme({
-    slots: ["root", "node", "dot", "dotInner", "header", "content"],
+    slots: [
+      "root",
+      "item",
+      "container",
+      "indicator",
+      "separator",
+      "wrapper",
+      "date",
+      "title",
+      "description"
+    ],
     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"
+      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: {},
-    defaultVariants: {}
+    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

@@ -1,11 +1,61 @@
-export interface TimelineProps {
+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"
   /**
-   * Slot-specific CSS class overrides.
+   * The orientation of the Timeline.
+   *
+   * @default "vertical"
    */
-  ui?: any
+  orientation?: "horizontal" | "vertical"
   /**
-   * Additional CSS classes to apply to the root element.
+   * 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/video/RLAVideo.astro

@@ -4,7 +4,7 @@ import { useUi } from "../../utils/useUi"
 import { resolveClasses } from "../../utils/resolveClasses"
 import type { VideoProps } from "./video"
 import videoTheme from "./video.theme"
-import Image from "astro/components/Image.astro"
+import { Image } from "astro:assets"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 const PLACEHOLDER_THUMBNAIL = "/assets/placeholder.webp";