@rimelight/ui 0.0.38 → 0.0.40

package/src/components/tabs/tabs.ts

@@ -1,37 +1,78 @@
 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.
    */

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";