@rimelight/ui 0.0.42 → 0.0.43

package/src/components/hover-card/RLAHoverCard.astro

@@ -1,35 +1,24 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { HoverCardProps } from "./hover-card"
-import { resolveTheme } from "../../utils/resolveTheme"
-import hoverCardThemeDefault, { createHoverCardTheme } from "./hover-card.theme"
-const hoverCardTheme = resolveTheme(hoverCardThemeDefault, createHoverCardTheme)
-
-
-const hoverCard = scv(hoverCardTheme)
-
-const {
-  triggerLabel,
-  placement = "bottom",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as HoverCardProps
-
-const classes = resolveClasses(hoverCard, {
-  placement
-}, useUi("hoverCard", uiProp), className)
----
-<div class={classes.root} data-slot="hover-card-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger" tabindex="0">
-    <slot name="trigger">
-      {triggerLabel && <span class="cursor-help underline decoration-dotted">{triggerLabel}</span>}
-    </slot>
-  </div>
-
-  <div class={classes.content} data-slot="content">
-    <slot />
-  </div>
-</div>
+---
+import type { HoverCardProps } from "./hover-card"
+import { hoverCardTheme } from "./hover-card.theme"
+
+
+
+const {
+  triggerLabel,
+  ...rest
+} = Astro.props as HoverCardProps
+
+const classes = hoverCardTheme(Astro.props)
+---
+<div class={classes.root} data-slot="hover-card-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot name="trigger">
+      {triggerLabel && <span class="cursor-help underline decoration-dotted">{triggerLabel}</span>}
+    </slot>
+  </div>
+
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/hover-card/hover-card.theme.ts

@@ -1,29 +1,25 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createHoverCardTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "trigger", "content"],
-    base: {
-      root: "relative inline-block group/hover-card",
-      trigger: "",
-      content: [
-        "absolute z-50 w-80 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-md outline-none",
-        "transition-all duration-200 invisible opacity-0 scale-95 origin-center pointer-events-none",
-        "group-hover/hover-card:visible group-hover/hover-card:opacity-100 group-hover/hover-card:scale-100 group-hover/hover-card:pointer-events-auto"
-      ]
-    },
-    variants: {
-      placement: {
-        top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
-        bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
-        left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
-        right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
-      }
-    },
-    defaultVariants: {
-      placement: "bottom"
+export const hoverCardTheme = defineTheme("hover-card", {
+  slots: ["root", "trigger", "content"],
+  base: {
+    root: "relative inline-block group/hover-card",
+    trigger: "",
+    content: [
+      "absolute z-50 w-80 rounded-lg border border-default bg-elevated p-4 text-highlighted shadow-md outline-none",
+      "transition-all duration-200 invisible opacity-0 scale-95 origin-center pointer-events-none",
+      "group-hover/hover-card:visible group-hover/hover-card:opacity-100 group-hover/hover-card:scale-100 group-hover/hover-card:pointer-events-auto"
+    ]
+  },
+  variants: {
+    placement: {
+      top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
+      bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
+      left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
+      right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
     }
-  })
-
-export default createHoverCardTheme()
+  },
+  defaultVariants: {
+    placement: "bottom"
+  }
+})

package/src/components/icon/RLAIcon.astro

@@ -1,36 +1,29 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveIcon } from "./resolver"
-import type { IconProps } from "./icon"
-import iconTheme from "./icon.theme"
-
-
-const icon = scv(iconTheme)
-
-const {
-  name,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as IconProps
-
-const classes = resolveClasses(icon, { size }, useUi("icon", uiProp), className)
-const resolved = resolveIcon(name)
----
-
-<span
-  class={classes.root}
-  data-slot="icon"
-  aria-hidden="true"
-  {...rest}
->
-  {resolved.isClass ? (
-    <span class={resolved.content} />
-  ) : (
-    <Fragment set:html={resolved.content} />
-  )}
-</span>
-
+---
+import { resolveIcon } from "./resolver"
+import type { IconProps } from "./icon"
+import { iconTheme } from "./icon.theme"
+
+
+
+const {
+  name,
+  ...rest
+} = Astro.props as IconProps
+
+const classes = iconTheme(Astro.props)
+const resolved = resolveIcon(name)
+---
+
+<span
+  class={classes.root}
+  data-slot="icon"
+  aria-hidden="true"
+  {...rest}
+>
+  {resolved.isClass ? (
+    <span class={resolved.content} />
+  ) : (
+    <Fragment set:html={resolved.content} />
+  )}
+</span>
+

package/src/components/icon/RLSIcon.tsx

@@ -1,18 +1,17 @@
 import { createMemo, splitProps, type Component } from "solid-js"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import { resolveIcon } from "./resolver"
 import type { IconProps } from "./icon"
-import iconThemeDefault from "./icon.theme"
-
-const iconScv = scv(iconThemeDefault)
+import { iconTheme } from "./icon.theme"
 
 const RLSIcon: Component<IconProps> = (allProps) => {
   const [props, rest] = splitProps(allProps, ["name", "size", "ui", "class"])
   const resolved = createMemo(() => resolveIcon(props.name))
   const classes = createMemo(() =>
-    resolveClasses(iconScv, { size: props.size ?? "md" }, useUi("icon", props.ui), props.class)
+    iconTheme({
+      size: props.size ?? "md",
+      ui: props.ui,
+      class: props.class
+    })
   )
   return (
     <span class={classes().root} data-slot="icon" aria-hidden="true" {...rest}>

package/src/components/icon/RLVIcon.vue

@@ -1,23 +1,22 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import { resolveIcon } from "./resolver"
 import type { IconProps } from "./icon"
-import iconThemeDefault from "./icon.theme"
+import { iconTheme } from "./icon.theme"
 
 defineOptions({ name: "RLVIcon" })
 
 const attrs = useAttrs()
-const iconScv = scv(iconThemeDefault)
 
 const props = withDefaults(defineProps<IconProps>(), {
   size: "md"
 })
 
 const resolvedClasses = computed(() =>
-  resolveClasses(iconScv, { size: props.size }, useUi("icon", props.ui), props.class)
+  iconTheme({
+    size: props.size,
+    class: props.class
+  })
 )
 
 const resolved = computed(() => resolveIcon(props.name))

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

@@ -1,30 +1,20 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createIconTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: [
-        "shrink-0",
-        "inline-flex",
-        "items-center",
-        "justify-center",
-        "align-middle",
-        "leading-none"
-      ]
-    },
-    variants: {
-      size: {
-        xs: { root: ["h-3", "w-3"] },
-        sm: { root: ["h-4", "w-4"] },
-        md: { root: ["h-5", "w-5"] },
-        lg: { root: ["h-6", "w-6"] },
-        xl: { root: ["h-8", "w-8"] }
-      }
-    },
-    defaultVariants: {
-      size: "md"
+export const iconTheme = defineTheme("icon", {
+  slots: ["root"],
+  base: {
+    root: "shrink-0 inline-flex items-center justify-center align-middle leading-none"
+  },
+  variants: {
+    size: {
+      xs: { root: "h-3 w-3" },
+      sm: { root: "h-4 w-4" },
+      md: { root: "h-5 w-5" },
+      lg: { root: "h-6 w-6" },
+      xl: { root: "h-8 w-8" }
     }
-  })
-
-export default createIconTheme()
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})

package/src/components/icon/resolver.ts

@@ -1,37 +1,23 @@
-import { DEFAULT_ICONS } from "../../icons/defaults"
-import { getUIConfig } from "virtual:rimelight-ui"
+import { DEFAULT_ICONS } from "../../icons"
+import { uiConfig } from "../../resolver"
 
 export interface ResolvedIcon {
   isClass: boolean
   content: string
 }
 
-const defaultIconsLookup = DEFAULT_ICONS as Record<string, string>
+const c = new Map<string, ResolvedIcon>(),
+  isCls = (s: string) => s.startsWith("i-") || s.includes(":")
 
-/**
- * Resolves whether an icon is a CSS class or raw inline SVG string, falling back to DEFAULT_ICONS.
- * Supports both static virtual config overrides and custom dynamic overrides (e.g. props).
- */
-export function resolveIcon(iconKey?: string, customProp?: string): ResolvedIcon {
-  if (!iconKey) {
-    return { isClass: false, content: "" }
-  }
-  if (iconKey.startsWith("i-") || iconKey.includes(":")) {
-    return { isClass: true, content: iconKey }
-  }
-
-  let config: Record<string, any> = {}
-  try {
-    config = getUIConfig()
-  } catch {}
-
-  const resolved = customProp || config.icons?.[iconKey]
-
-  if (!resolved) {
-    return { isClass: false, content: defaultIconsLookup[iconKey] || "" }
-  }
-
-  const isClass =
-    typeof resolved === "string" && (resolved.startsWith("i-") || resolved.includes(":"))
-  return { isClass, content: resolved }
+export const resolveIcon = (k = "", custom?: string): ResolvedIcon => {
+  if (!k) return { isClass: false, content: "" }
+  const id = custom ? `${k}:${custom}` : k,
+    cached = c.get(id)
+  if (cached) return cached
+  const raw = custom || uiConfig.icons?.[k] || k,
+    res = isCls(raw)
+      ? { isClass: true, content: raw }
+      : { isClass: false, content: (DEFAULT_ICONS as any)[raw] || "" }
+  c.set(id, res)
+  return res
 }

package/src/components/image/RLAImage.astro

@@ -2,14 +2,10 @@
 import { Image, Picture, getImage } from "astro:assets"
 import type { ImageMetadata } from "astro"
 import RLAIcon from "../icon/RLAIcon.astro"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ImageProps } from "./image"
-import imageTheme from "./image.theme"
+import { imageTheme } from "./image.theme"
 
 
-const img = scv(imageTheme)
 
 const {
   src,
@@ -21,11 +17,7 @@ const {
   height,
   width,
   loading = "lazy",
-  fit = "cover",
   metadata: preMetadata,
-  open,
-  ui: uiProp,
-  class: className,
   metaSource = true,
   metaFormat = true,
   metaDimensions = true,
@@ -35,7 +27,7 @@ const {
   ...rest
 } = Astro.props as ImageProps
 
-const classes = resolveClasses(img, {}, useUi("image", uiProp), className)
+const classes = imageTheme(Astro.props)
 
 const isResponsive = !!(mobileSrc && desktopSrc)
 const isFormatFallback = !isResponsive && !!(formats && formats.length > 0)
@@ -102,7 +94,7 @@ const initialSize = preMetadata?.size ?? undefined
       class={classes.dialog}
       data-image-dialog
     >
-      <div class="flex flex-col bg-background text-foreground max-h-[90vh]">
+      <div class="flex flex-col bg-default text-highlighted max-h-[90vh]">
         <div class="flex-1 min-h-0 flex items-center justify-center p-4 overflow-hidden">
           {isResponsive && mobileImg && desktopImg ? (
             <picture class="max-w-full max-h-[65vh] flex items-center justify-center overflow-hidden">
@@ -120,15 +112,15 @@ const initialSize = preMetadata?.size ?? undefined
           )}
         </div>
 
-        <hr class="border-border mx-4 mb-3 shrink-0" />
+        <hr class="border-default mx-4 mb-3 shrink-0" />
 
         <div class={classes.fileInfo}>
           <div class="flex flex-col gap-xs text-sm">
             {
               metaSource && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="image" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Source:</span>
+                  <RLAIcon name="image" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Source:</span>
                   <span class="text-dimmed truncate max-w-[40vw]">{fileName}</span>
                 </div>
               )
@@ -136,8 +128,8 @@ const initialSize = preMetadata?.size ?? undefined
             {
               metaFormat && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="fileQuestion" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Format:</span>
+                  <RLAIcon name="fileQuestion" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Format:</span>
                   <span class="text-dimmed" data-metadata-format>{fileExtension || "IMG"}</span>
                 </div>
               )
@@ -145,8 +137,8 @@ const initialSize = preMetadata?.size ?? undefined
             {
               metaDimensions && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="imageUpscale" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Dimensions:</span>
+                  <RLAIcon name="imageUpscale" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Dimensions:</span>
                   <span class="text-dimmed">{(imgWidth || "?")} x {(imgHeight || "?")}</span>
                 </div>
               )
@@ -154,8 +146,8 @@ const initialSize = preMetadata?.size ?? undefined
             {
               metaSize && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="hardDrive" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Size:</span>
+                  <RLAIcon name="hardDrive" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Size:</span>
                   <span class="text-dimmed" data-metadata-size>{initialSize !== undefined ? `${initialSize} bytes` : "fetching..."}</span>
                 </div>
               )
@@ -163,8 +155,8 @@ const initialSize = preMetadata?.size ?? undefined
             {
               metaAlt && (
                 <div class="flex flex-row gap-xs items-center">
-                  <RLAIcon name="alignLeft" class="size-4 shrink-0 text-muted-foreground" />
-                  <span class="text-muted-foreground">Alt:</span>
+                  <RLAIcon name="alignLeft" class="size-4 shrink-0 text-muted" />
+                  <span class="text-muted">Alt:</span>
                   <span class="text-dimmed truncate max-w-[30vw]" class:list={{ "italic opacity-50": !alt }}>{alt || "none"}</span>
                 </div>
               )
@@ -199,10 +191,15 @@ const initialSize = preMetadata?.size ?? undefined
   </div>
 </rla-image>
 
+<style>
+  rla-image {
+    display: contents;
+  }
+</style>
+
 <script>
   class RLAImage extends HTMLElement {
     connectedCallback() {
-      this.style.display = 'contents';
       const trigger = this.querySelector("[data-image-trigger]");
       if (!trigger) return;
 

package/src/components/image/image.theme.ts

@@ -1,33 +1,30 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createImageTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "trigger",
-      "triggerImage",
-      "dialog",
-      "image",
-      "fileInfo",
-      "download",
-      "closeButton"
-    ],
-    base: {
-      root: "relative inline-block group/image",
-      trigger:
-        "cursor-pointer overflow-hidden rounded-lg block hover:scale-[1.02] active:scale-95 transition-transform duration-300",
-      triggerImage: "",
-      dialog:
-        "backdrop:bg-black/60 max-w-[98vw] sm:max-w-[95vw] w-fit max-h-[90vh] rounded-xl p-0 overflow-hidden border-0 m-auto",
-      image: "object-contain max-w-full max-h-[65vh] rounded-lg",
-      fileInfo: "flex items-center justify-between gap-xl px-4 pb-4 shrink-0",
-      download:
-        "inline-flex items-center justify-center rounded-md font-medium transition-colors outline-none h-9 px-4 py-2 text-sm gap-2 text-primary-500 hover:bg-primary-500/10 active:bg-primary-500/10",
-      closeButton:
-        "inline-flex items-center justify-center size-8 rounded-full bg-background/80 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createImageTheme()
+export const imageTheme = defineTheme("image", {
+  slots: [
+    "root",
+    "trigger",
+    "triggerImage",
+    "dialog",
+    "image",
+    "fileInfo",
+    "download",
+    "closeButton"
+  ],
+  base: {
+    root: "relative inline-block group/image",
+    trigger:
+      "cursor-pointer overflow-hidden rounded-lg block hover:scale-[1.02] active:scale-95 transition-transform duration-300",
+    triggerImage: "",
+    dialog:
+      "backdrop:bg-black/60 max-w-[98vw] sm:max-w-[95vw] w-fit max-h-[90vh] rounded-xl p-0 overflow-hidden border-0 m-auto",
+    image: "object-contain max-w-full max-h-[65vh] rounded-lg",
+    fileInfo: "flex items-center justify-between gap-xl px-4 pb-4 shrink-0",
+    download:
+      "inline-flex items-center justify-center rounded-md font-medium transition-colors outline-none h-9 px-4 py-2 text-sm gap-2 text-primary-500 hover:bg-primary-500/10 active:bg-primary-500/10",
+    closeButton:
+      "inline-flex items-center justify-center size-8 rounded-full bg-default/80 hover:bg-accent text-muted hover:text-highlighted transition-colors"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/input/RLAInput.astro

@@ -1,12 +1,8 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { InputProps } from "./input"
-import inputTheme from "./input.theme"
+import { inputTheme } from "./input.theme"
 
 
-const input = scv(inputTheme)
 
 const {
   type = "text",
@@ -19,26 +15,15 @@ const {
   error = false,
   leadingIcon,
   trailingIcon,
-  variant = "default",
-  size = "md",
-  color = "primary",
-  theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as InputProps
 
-const hasLeading = !!leadingIcon || Astro.slots.has("leading")
-const hasTrailing = !!trailingIcon || Astro.slots.has("trailing")
 
-const classes = resolveClasses(input, {
-  variant,
-  size,
-  hasLeading,
-  hasTrailing,
-  error: !!error,
-  theme
-}, useUi("input", uiProp), className);
+
+const classes = inputTheme({
+  ...Astro.props,
+  error: !!error
+});
 ---
 <div class={classes.root} data-slot="root">
   {(leadingIcon || Astro.slots.has("leading")) && (