@rimelight/ui 0.0.58 → 0.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.58",
+  "version": "0.0.61",
   "private": false,
   "description": "Rimelight Entertainment's UI Package",
   "homepage": "https://rimelight.com/docs",
@@ -54,6 +54,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "vp pack",
+    "prepack": "pnpm run build",
+    "astro": "astro",
+    "check": "vp check --fix && astro check"
+  },
   "dependencies": {
     "@unocss/vite": "66.10.5",
     "unocss": "66.10.5"
@@ -61,9 +67,8 @@
   "devDependencies": {
     "@astrojs/check": "0.9.10",
     "@astrojs/solid-js": "7.0.2",
-    "@astrojs/ts-plugin": "1.10.12",
     "@astrojs/vue": "7.0.3",
-    "@rimelight/config": "0.0.18",
+    "@rimelight/config": "workspace:*",
     "@vitejs/plugin-vue": "6.0.9",
     "astro": "7.3.3",
     "solid-js": "1.9.15",
@@ -95,9 +100,5 @@
   "engines": {
     "node": ">=26.9.0"
   },
-  "scripts": {
-    "build": "vp pack",
-    "astro": "astro",
-    "check": "vp check --fix && astro check"
-  }
-}
+  "packageManager": "pnpm@12.4.2"
+}

package/src/components/head/UIHead.astro

@@ -286,4 +286,4 @@ const {
   })();
 </script>
 
-{transitions && <ClientRouter />}
+{transitions && <ClientRouter fallback="none" />}

package/src/components/timeline/RLATimeline.astro

@@ -62,7 +62,7 @@ function getSlotName(item: TimelineItem, base: string) {
   {...rest}
 >
   {items && items.length > 0 ? (
-    items.map((item, index) => {
+    items.map(async (item, index) => {
       const state = getItemState(item, index)
       const isLast = index === items.length - 1
 
@@ -72,6 +72,7 @@ function getSlotName(item: TimelineItem, base: string) {
       const itemTitleSlot = getSlotName(item, "title")
       const itemDescriptionSlot = getSlotName(item, "description")
 
+      const hasDefaultSlot = Astro.slots.has("default")
       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"))
@@ -98,9 +99,12 @@ function getSlotName(item: TimelineItem, base: string) {
               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}>
-                  <slot name="indicator" />
-                </slot>
+                <Fragment
+                  set:html={await Astro.slots.render(
+                    Astro.slots.has(itemIndicatorSlot) ? itemIndicatorSlot : "indicator",
+                    [item, index]
+                  )}
+                />
               ) : item.icon ? (
                 <RLAIcon name={item.icon} class="text-inherit" />
               ) : null}
@@ -120,9 +124,12 @@ function getSlotName(item: TimelineItem, base: string) {
             class:list={[classes.wrapper, item.ui?.wrapper]}
           >
             {hasCustomWrapper ? (
-              <slot name={itemWrapperSlot}>
-                <slot name="wrapper" />
-              </slot>
+              <Fragment
+                set:html={await Astro.slots.render(
+                  Astro.slots.has(itemWrapperSlot) ? itemWrapperSlot : "wrapper",
+                  [item, index]
+                )}
+              />
             ) : (
               <>
                 {(item.date || hasCustomDate) && (
@@ -130,11 +137,16 @@ function getSlotName(item: TimelineItem, base: string) {
                     data-slot="date"
                     class:list={[classes.date, item.ui?.date]}
                   >
-                    <slot name={itemDateSlot}>
-                      <slot name="date">
-                        {item.date}
-                      </slot>
-                    </slot>
+                    {hasCustomDate ? (
+                      <Fragment
+                        set:html={await Astro.slots.render(
+                          Astro.slots.has(itemDateSlot) ? itemDateSlot : "date",
+                          [item, index]
+                        )}
+                      />
+                    ) : (
+                      item.date
+                    )}
                   </div>
                 )}
 
@@ -143,24 +155,38 @@ function getSlotName(item: TimelineItem, base: string) {
                     data-slot="title"
                     class:list={[classes.title, item.ui?.title]}
                   >
-                    <slot name={itemTitleSlot}>
-                      <slot name="title">
-                        {item.title}
-                      </slot>
-                    </slot>
+                    {hasCustomTitle ? (
+                      <Fragment
+                        set:html={await Astro.slots.render(
+                          Astro.slots.has(itemTitleSlot) ? itemTitleSlot : "title",
+                          [item, index]
+                        )}
+                      />
+                    ) : (
+                      item.title
+                    )}
                   </div>
                 )}
 
-                {(item.description || hasCustomDescription) && (
+                {(item.description || hasCustomDescription || hasDefaultSlot) && (
                   <div
                     data-slot="description"
                     class:list={[classes.description, item.ui?.description]}
                   >
-                    <slot name={itemDescriptionSlot}>
-                      <slot name="description">
-                        {item.description}
-                      </slot>
-                    </slot>
+                    {hasDefaultSlot ? (
+                      <Fragment
+                        set:html={await Astro.slots.render("default", [item, index])}
+                      />
+                    ) : hasCustomDescription ? (
+                      <Fragment
+                        set:html={await Astro.slots.render(
+                          Astro.slots.has(itemDescriptionSlot) ? itemDescriptionSlot : "description",
+                          [item, index]
+                        )}
+                      />
+                    ) : (
+                      item.description
+                    )}
                   </div>
                 )}
               </>

package/src/components/timeline/RLSTimeline.tsx

@@ -6,9 +6,14 @@ import RLSAvatar from "../avatar/RLSAvatar"
 import RLSIcon from "../icon/RLSIcon"
 
 export interface RLSTimelineProps extends TimelineProps {
-  children?: JSX.Element
-  indicator?: (ctx: { item: TimelineItem; index: number }) => JSX.Element
-  wrapper?: (ctx: { item: TimelineItem; index: number }) => JSX.Element
+  children?:
+    | JSX.Element
+    | ((ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element)
+  indicator?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
+  wrapper?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
+  date?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
+  title?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
+  description?: (ctx: { item: TimelineItem; index: number } & TimelineItem) => JSX.Element
 }
 
 const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
@@ -26,7 +31,10 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
     "class",
     "children",
     "indicator",
-    "wrapper"
+    "wrapper",
+    "date",
+    "title",
+    "description"
   ])
 
   const items = (): TimelineItem[] => props.items ?? []
@@ -67,6 +75,19 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
     })
   )
 
+  const renderSlot = (
+    slotFn: any,
+    item: TimelineItem,
+    index: number,
+    fallback?: () => JSX.Element
+  ) => {
+    if (typeof slotFn === "function") {
+      const ctx = { ...item, item, index }
+      return slotFn(ctx)
+    }
+    return fallback ? fallback() : null
+  }
+
   return (
     <Dynamic
       component={props.as || "div"}
@@ -107,7 +128,7 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
                     }}
                   >
                     {props.indicator ? (
-                      props.indicator({ item, index: index() })
+                      renderSlot(props.indicator, item, index())
                     ) : item.icon ? (
                       <RLSIcon name={item.icon} class="text-inherit" />
                     ) : null}
@@ -127,31 +148,35 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
                   class={`${resolvedClasses().wrapper}  ${item.ui?.wrapper || ""}`}
                 >
                   {props.wrapper ? (
-                    props.wrapper({ item, index: index() })
+                    renderSlot(props.wrapper, item, index())
                   ) : (
                     <>
-                      {item.date ? (
+                      {item.date || props.date ? (
                         <div
                           data-slot="date"
                           class={`${resolvedClasses().date}  ${item.ui?.date || ""}`}
                         >
-                          {item.date}
+                          {renderSlot(props.date, item, index(), () => item.date)}
                         </div>
                       ) : null}
-                      {item.title ? (
+                      {item.title || props.title ? (
                         <div
                           data-slot="title"
                           class={`${resolvedClasses().title}  ${item.ui?.title || ""}`}
                         >
-                          {item.title}
+                          {renderSlot(props.title, item, index(), () => item.title)}
                         </div>
                       ) : null}
-                      {item.description ? (
+                      {item.description ||
+                      props.description ||
+                      typeof props.children === "function" ? (
                         <div
                           data-slot="description"
                           class={`${resolvedClasses().description}  ${item.ui?.description || ""}`}
                         >
-                          {item.description}
+                          {typeof props.children === "function"
+                            ? renderSlot(props.children, item, index(), () => item.description)
+                            : renderSlot(props.description, item, index(), () => item.description)}
                         </div>
                       ) : null}
                     </>
@@ -161,7 +186,7 @@ const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
             )
           }}
         </For>
-      ) : props.children ? (
+      ) : typeof props.children !== "function" ? (
         props.children
       ) : null}
     </Dynamic>

package/src/components/timeline/timeline.ts

@@ -21,6 +21,16 @@ export interface TimelineItem {
   [key: string]: any
 }
 
+export interface TimelineItemProps extends TimelineItem {
+  as?: any
+  isLast?: boolean
+  state?: "active" | "completed"
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
+  orientation?: "horizontal" | "vertical"
+  class?: any
+}
+
 export interface TimelineProps<T extends TimelineItem = TimelineItem> {
   /**
    * The element or component this component should render as.

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Rimelight Entertainment
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.