@rimelight/ui 0.0.41 → 0.0.43

package/src/components/carousel/carousel.theme.ts

@@ -1,34 +1,30 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createCarouselTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "viewport", "container", "slide", "buttonPrev", "buttonNext", "dots", "dot"],
-    base: {
-      root: "relative w-full overflow-hidden select-none group/carousel",
-      viewport: "w-full overflow-hidden cursor-grab active:cursor-grabbing",
-      container: "flex backface-hidden",
-      slide: "min-w-0 shrink-0 grow-0 basis-full pl-4 relative",
-      buttonPrev: [
-        "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-border bg-background/80 backdrop-blur-sm text-foreground shadow transition-all hover:bg-background cursor-pointer",
-        "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
-      ],
-      buttonNext: [
-        "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-border bg-background/80 backdrop-blur-sm text-foreground shadow transition-all hover:bg-background cursor-pointer",
-        "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
-      ],
-      dots: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-1.5 items-center",
-      dot: "block size-2 rounded-full bg-foreground/20 cursor-pointer transition-all duration-350 hover:bg-foreground/45"
-    },
-    variants: {
-      active: {
-        true: { dot: "bg-foreground size-2.5" },
-        false: { dot: "" }
-      }
-    },
-    defaultVariants: {
-      active: false
+export const carouselTheme = defineTheme("carousel", {
+  slots: ["root", "viewport", "container", "slide", "buttonPrev", "buttonNext", "dots", "dot"],
+  base: {
+    root: "relative w-full overflow-hidden select-none group/carousel",
+    viewport: "w-full overflow-hidden cursor-grab active:cursor-grabbing",
+    container: "flex backface-hidden",
+    slide: "min-w-0 shrink-0 grow-0 basis-full pl-4 relative",
+    buttonPrev: [
+      "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-default bg-default/80 backdrop-blur-sm text-highlighted shadow transition-all hover:bg-default cursor-pointer",
+      "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
+    ],
+    buttonNext: [
+      "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-default bg-default/80 backdrop-blur-sm text-highlighted shadow transition-all hover:bg-default cursor-pointer",
+      "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
+    ],
+    dots: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-1.5 items-center",
+    dot: "block size-2 rounded-full bg-foreground/20 cursor-pointer transition-all duration-350 hover:bg-foreground/45"
+  },
+  variants: {
+    active: {
+      true: { dot: "bg-foreground size-2.5" },
+      false: { dot: "" }
     }
-  })
-
-export default createCarouselTheme()
+  },
+  defaultVariants: {
+    active: false
+  }
+})

package/src/components/chart/RLAChart.astro

@@ -1,12 +1,8 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ChartProps, ChartDataPoint } from "./chart"
-import chartTheme from "./chart.theme"
+import { chartTheme } from "./chart.theme"
 
 
-const chart = scv(chartTheme)
 
 const {
   type = "bar",
@@ -14,12 +10,10 @@ const {
   title,
   height = 280,
   color = "primary",
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as ChartProps
 
-const classes = resolveClasses(chart, {}, useUi("chart", uiProp), className)
+const classes = chartTheme(Astro.props)
 
 // Compute derived values on the server so we don't do heavy JS on the client
 const max = data.length > 0 ? Math.max(...data.map(d => d.value)) : 1
@@ -102,7 +96,7 @@ const id = `chart-${Math.random().toString(36).substring(2, 9)}`
         const pct = max > 0 ? (item.value / max) * 100 : 0
         return (
           <div class="flex flex-col items-center gap-1 flex-1 group">
-            <span class="text-[10px] text-muted-foreground font-mono opacity-0 group-hover:opacity-100 transition-opacity">
+            <span class="text-[10px] text-muted font-mono opacity-0 group-hover:opacity-100 transition-opacity">
               {item.value}
             </span>
             <div class:list={[classes.bar, "h-full w-full overflow-hidden !bg-transparent"]} title={`${item.label}: ${item.value}`}>
@@ -194,12 +188,12 @@ const id = `chart-${Math.random().toString(36).substring(2, 9)}`
       {/* Legend */}
       <div class="flex flex-col gap-1.5">
         {data.map((item, i) => (
-          <div class="flex items-center gap-2 text-xs text-muted-foreground">
+          <div class="flex items-center gap-2 text-xs text-muted">
             <svg class="size-3 shrink-0" viewBox="0 0 10 10">
               <rect width="10" height="10" rx="2" fill={getColor(item, i)} />
             </svg>
             <span>{item.label}</span>
-            <span class="ml-1 font-mono text-foreground">{item.value}</span>
+            <span class="ml-1 font-mono text-highlighted">{item.value}</span>
           </div>
         ))}
       </div>

package/src/components/chart/chart.theme.ts

@@ -1,22 +1,19 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChartTheme = () =>
-  defineTheme({
-    slots: ["root", "title", "container", "svg", "axis", "bar", "line", "tooltip", "legend"],
-    base: {
-      root: "flex flex-col gap-3 p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm",
-      title: "text-sm font-semibold tracking-tight text-foreground",
-      container: "relative w-full aspect-video flex items-end justify-between",
-      svg: "w-full h-full",
-      axis: "text-[10px] text-muted-foreground",
-      bar: "rounded-t transition-all hover:opacity-85",
-      line: "stroke-2 fill-none",
-      tooltip:
-        "absolute z-50 bg-background text-foreground border border-border rounded shadow p-2 text-xs",
-      legend: "flex items-center justify-center gap-4 text-xs text-muted-foreground"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChartTheme()
+export const chartTheme = defineTheme("chart", {
+  slots: ["root", "title", "container", "svg", "axis", "bar", "line", "tooltip", "legend"],
+  base: {
+    root: "flex flex-col gap-3 p-4 rounded-xl border border-default bg-elevated text-highlighted shadow-sm",
+    title: "text-sm font-semibold tracking-tight text-highlighted",
+    container: "relative w-full aspect-video flex items-end justify-between",
+    svg: "w-full h-full",
+    axis: "text-[10px] text-muted",
+    bar: "rounded-t transition-all hover:opacity-85",
+    line: "stroke-2 fill-none",
+    tooltip:
+      "absolute z-50 bg-default text-highlighted border border-default rounded shadow p-2 text-xs",
+    legend: "flex items-center justify-center gap-4 text-xs text-muted"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chart/chart.ts

@@ -1,4 +1,4 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 export interface ChartDataPoint {
   label: string
   value: number

package/src/components/chat/RLAChat.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatProps } from "./chat"
-import chatTheme from "./chat.theme"
-
-
-const chat = scv(chatTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatProps
-
-const classes = resolveClasses(chat, {}, useUi("chat", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatTheme } from "./chat.theme"
+
+
+
+const classes = chatTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/chat/chat.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChatTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatTheme()
+export const chatTheme = defineTheme("chat", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chat-message/RLAChatMessage.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatMessageProps } from "./chat-message"
-import chatMessageTheme from "./chat-message.theme"
-
-
-const chatMessage = scv(chatMessageTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatMessageProps
-
-const classes = resolveClasses(chatMessage, {}, useUi("chatMessage", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatMessageTheme } from "./chat-message.theme"
+
+
+
+const classes = chatMessageTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/chat-message/chat-message.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChatMessageTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatMessageTheme()
+export const chatMessageTheme = defineTheme("chat-message", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chat-messages/RLAChatMessages.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatMessagesProps } from "./chat-messages"
-import chatMessagesTheme from "./chat-messages.theme"
-
-
-const chatMessages = scv(chatMessagesTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatMessagesProps
-
-const classes = resolveClasses(chatMessages, {}, useUi("chatMessages", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatMessagesTheme } from "./chat-messages.theme"
+
+
+
+const classes = chatMessagesTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/chat-messages/chat-messages.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChatMessagesTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatMessagesTheme()
+export const chatMessagesTheme = defineTheme("chat-messages", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chat-palette/RLAChatPalette.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatPaletteProps } from "./chat-palette"
-import chatPaletteTheme from "./chat-palette.theme"
-
-
-const chatPalette = scv(chatPaletteTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatPaletteProps
-
-const classes = resolveClasses(chatPalette, {}, useUi("chatPalette", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatPaletteTheme } from "./chat-palette.theme"
+
+
+
+const classes = chatPaletteTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/chat-palette/chat-palette.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChatPaletteTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatPaletteTheme()
+export const chatPaletteTheme = defineTheme("chat-palette", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chat-prompt/RLAChatPrompt.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatPromptProps } from "./chat-prompt"
-import chatPromptTheme from "./chat-prompt.theme"
-
-
-const chatPrompt = scv(chatPromptTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatPromptProps
-
-const classes = resolveClasses(chatPrompt, {}, useUi("chatPrompt", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatPromptTheme } from "./chat-prompt.theme"
+
+
+
+const classes = chatPromptTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/chat-prompt/chat-prompt.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChatPromptTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatPromptTheme()
+export const chatPromptTheme = defineTheme("chat-prompt", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chat-prompt-submit/RLAChatPromptSubmit.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatPromptSubmitProps } from "./chat-prompt-submit"
-import chatPromptSubmitTheme from "./chat-prompt-submit.theme"
-
-
-const chatPromptSubmit = scv(chatPromptSubmitTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatPromptSubmitProps
-
-const classes = resolveClasses(chatPromptSubmit, {}, useUi("chatPromptSubmit", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatPromptSubmitTheme } from "./chat-prompt-submit.theme"
+
+
+
+const classes = chatPromptSubmitTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/chat-prompt-submit/chat-prompt-submit.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChatPromptSubmitTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatPromptSubmitTheme()
+export const chatPromptSubmitTheme = defineTheme("chat-prompt-submit", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chat-reasoning/RLAChatReasoning.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatReasoningProps } from "./chat-reasoning"
-import chatReasoningTheme from "./chat-reasoning.theme"
-
-
-const chatReasoning = scv(chatReasoningTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatReasoningProps
-
-const classes = resolveClasses(chatReasoning, {}, useUi("chatReasoning", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatReasoningTheme } from "./chat-reasoning.theme"
+
+
+
+const classes = chatReasoningTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/chat-reasoning/chat-reasoning.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChatReasoningTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatReasoningTheme()
+export const chatReasoningTheme = defineTheme("chat-reasoning", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chat-shimmer/RLAChatShimmer.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatShimmerProps } from "./chat-shimmer"
-import chatShimmerTheme from "./chat-shimmer.theme"
-
-
-const chatShimmer = scv(chatShimmerTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatShimmerProps
-
-const classes = resolveClasses(chatShimmer, {}, useUi("chatShimmer", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatShimmerTheme } from "./chat-shimmer.theme"
+
+
+
+const classes = chatShimmerTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/chat-shimmer/chat-shimmer.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createChatShimmerTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatShimmerTheme()
+export const chatShimmerTheme = defineTheme("chat-shimmer", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/chat-tool/RLAChatTool.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ChatToolProps } from "./chat-tool"
-import chatToolTheme from "./chat-tool.theme"
-
-
-const chatTool = scv(chatToolTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatToolProps
-
-const classes = resolveClasses(chatTool, {}, useUi("chatTool", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { chatToolTheme } from "./chat-tool.theme"
+
+
+
+const classes = chatToolTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>