@rimelight/ui 0.0.42 → 0.0.43

package/src/components/separator/separator.theme.ts

@@ -1,147 +1,144 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSeparatorTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "border", "container", "icon", "avatar", "avatarSize", "label"],
-    base: {
-      root: "flex items-center align-center text-center",
-      border: "",
-      container: "font-medium text-default flex",
-      icon: "shrink-0 size-5",
-      avatar: "shrink-0",
-      avatarSize: "2xs",
-      label: "text-sm"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { border: `border-${color}` }])),
-        neutral: { border: "border-default" }
-      },
-      orientation: {
-        horizontal: {
-          root: "w-full flex-row",
-          border: "w-full",
-          container: "whitespace-nowrap"
-        },
-        vertical: {
-          root: "h-full flex-col",
-          border: "h-full",
-          container: ""
-        }
-      },
-      size: {
-        xs: {},
-        sm: {},
-        md: {},
-        lg: {},
-        xl: {}
-      },
-      position: {
-        start: {},
-        center: {},
-        end: {}
-      },
-      type: {
-        solid: {
-          border: "border-solid"
-        },
-        dashed: {
-          border: "border-dashed"
-        },
-        dotted: {
-          border: "border-dotted"
-        }
+export const separatorTheme = defineTheme("separator", {
+  slots: ["root", "border", "container", "icon", "avatar", "avatarSize", "label"],
+  base: {
+    root: "flex items-center align-center text-center",
+    border: "border-[var(--rl-border)]",
+    container: "font-medium text-default flex",
+    icon: "shrink-0 size-5",
+    avatar: "shrink-0",
+    avatarSize: "2xs",
+    label: "text-sm"
+  },
+  variants: {
+    color: "auto",
+    orientation: {
+      horizontal: {
+        root: "w-full flex-row",
+        border: "w-full",
+        container: "whitespace-nowrap"
+      },
+      vertical: {
+        root: "h-full flex-col",
+        border: "h-full",
+        container: ""
       }
     },
-    compoundVariants: [
-      {
-        orientation: "horizontal",
-        position: "start",
-        classNames: { container: "me-3" }
-      },
-      {
-        orientation: "horizontal",
-        position: "center",
-        classNames: { container: "mx-3" }
-      },
-      {
-        orientation: "horizontal",
-        position: "end",
-        classNames: { container: "ms-3" }
-      },
-      {
-        orientation: "vertical",
-        position: "start",
-        classNames: { container: "mb-2" }
-      },
-      {
-        orientation: "vertical",
-        position: "center",
-        classNames: { container: "my-2" }
-      },
-      {
-        orientation: "vertical",
-        position: "end",
-        classNames: { container: "mt-2" }
-      },
-      {
-        orientation: "horizontal",
-        size: "xs",
-        classNames: { border: "border-t" }
-      },
-      {
-        orientation: "horizontal",
-        size: "sm",
-        classNames: { border: "border-t-[2px]" }
-      },
-      {
-        orientation: "horizontal",
-        size: "md",
-        classNames: { border: "border-t-[3px]" }
-      },
-      {
-        orientation: "horizontal",
-        size: "lg",
-        classNames: { border: "border-t-[4px]" }
-      },
-      {
-        orientation: "horizontal",
-        size: "xl",
-        classNames: { border: "border-t-[5px]" }
-      },
-      {
-        orientation: "vertical",
-        size: "xs",
-        classNames: { border: "border-s" }
-      },
-      {
-        orientation: "vertical",
-        size: "sm",
-        classNames: { border: "border-s-[2px]" }
-      },
-      {
-        orientation: "vertical",
-        size: "md",
-        classNames: { border: "border-s-[3px]" }
+    size: {
+      xs: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    },
+    position: {
+      start: {},
+      center: {},
+      end: {}
+    },
+    type: {
+      solid: {
+        border: "border-solid"
       },
-      {
-        orientation: "vertical",
-        size: "lg",
-        classNames: { border: "border-s-[4px]" }
+      dashed: {
+        border: "border-dashed"
       },
-      {
-        orientation: "vertical",
-        size: "xl",
-        classNames: { border: "border-s-[5px]" }
+      dotted: {
+        border: "border-dotted"
       }
-    ],
-    defaultVariants: {
+    }
+  },
+  compoundVariants: [
+    {
       color: "neutral",
+      classNames: { border: "border-default" }
+    },
+    {
+      orientation: "horizontal",
+      position: "start",
+      classNames: { container: "me-3" }
+    },
+    {
+      orientation: "horizontal",
+      position: "center",
+      classNames: { container: "mx-3" }
+    },
+    {
+      orientation: "horizontal",
+      position: "end",
+      classNames: { container: "ms-3" }
+    },
+    {
+      orientation: "vertical",
+      position: "start",
+      classNames: { container: "mb-2" }
+    },
+    {
+      orientation: "vertical",
+      position: "center",
+      classNames: { container: "my-2" }
+    },
+    {
+      orientation: "vertical",
+      position: "end",
+      classNames: { container: "mt-2" }
+    },
+    {
+      orientation: "horizontal",
       size: "xs",
-      type: "solid",
-      orientation: "horizontal"
+      classNames: { border: "border-t" }
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      classNames: { border: "border-t-[2px]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      classNames: { border: "border-t-[3px]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      classNames: { border: "border-t-[4px]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      classNames: { border: "border-t-[5px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      classNames: { border: "border-s" }
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      classNames: { border: "border-s-[2px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      classNames: { border: "border-s-[3px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      classNames: { border: "border-s-[4px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      classNames: { border: "border-s-[5px]" }
     }
-  })
-
-export default createSeparatorTheme()
+  ],
+  defaultVariants: {
+    color: "neutral",
+    size: "xs",
+    type: "solid",
+    orientation: "horizontal"
+  }
+})

package/src/components/separator/separator.ts

@@ -1,4 +1,8 @@
 export interface SeparatorProps {
+  color?: string
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  type?: "solid" | "dashed" | "dotted"
+  position?: "start" | "center" | "end"
   /**
    * The visual layout orientation.
    */

package/src/components/shortcuts/RLAShortcuts.astro

@@ -1,6 +1,6 @@
 ---
 import RLAIcon from "../icon/RLAIcon.astro"
-import { getUIConfig } from "virtual:rimelight-ui"
+import { uiConfig } from "../../resolver"
 
 interface Props {
   categories?: Record<string, string>
@@ -11,7 +11,6 @@ const {
   ...rest
 } = Astro.props as Props
 
-const uiConfig = getUIConfig()
 const configCategories = uiConfig.shortcuts?.categories || {}
 
 // Resolve categories: prop overrides -> integration config -> fallback key
@@ -57,8 +56,8 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
 </rla-shortcuts>
 
 <script>
-  import { activeShortcutsStore, defineShortcuts } from "../../utils/shortcuts"
-  import type { RegisteredShortcut } from "../../utils/shortcuts"
+  import { activeShortcutsStore, defineShortcuts } from "../../shortcuts"
+  import type { RegisteredShortcut } from "../../shortcuts"
 
   class RLAShortcuts extends HTMLElement {
     private shortcutsCleanup: (() => void) | null = null;

package/src/components/sidebar/RLASidebar.astro

@@ -1,33 +1,23 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SidebarProps, SidebarItem } from "./sidebar"
-import sidebarThemeDefault from "./sidebar.theme"
+import { sidebarTheme } from "./sidebar.theme"
 import RLABadge from "../badge/RLABadge.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 
-const sidebarTheme = sidebarThemeDefault
-const sidebar = scv(sidebarTheme)
 
 const {
   items = [],
-  side = "left",
   collapsible = "none",
   variant = "sidebar",
   logo,
-  ui: uiProp,
-  class: className,
   t = (key: string) => key,
   _depth = 0,
   ...rest
-} = Astro.props as SidebarProps & { t?: (key: string) => string; _depth?: number }
+} = Astro.props as SidebarProps
 
-const classes = resolveClasses(sidebar, {
-  side,
-  collapsible,
-  variant
-}, useUi("sidebar", uiProp), className)
+
+
+const classes = sidebarTheme(Astro.props)
 
 const hasActiveChild = (item: SidebarItem): boolean => {
   if (item.active) return true
@@ -75,7 +65,7 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
       <!-- Body -->
       <div class={classes.content} data-slot="content">
         <slot>
-          <Astro.self items={items} t={t} _depth={1} ui={uiProp} />
+          <Astro.self items={items} t={t} _depth={1} ui={Astro.props.ui} />
         </slot>
       </div>
 
@@ -89,7 +79,7 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
       <button
         type="button"
         data-sidebar-toggle
-        class="fixed top-4 left-4 z-50 flex size-9 items-center justify-center rounded-md bg-background border border-border shadow-sm hover:bg-muted transition-colors"
+        class="fixed top-4 left-4 z-50 flex size-9 items-center justify-center rounded-md bg-default border border-default shadow-sm hover:bg-muted transition-colors"
         aria-label="Toggle sidebar"
       >
         <RLAIcon name="panelLeft" class="size-4" />
@@ -118,8 +108,8 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
             <details open={isActive} class="group/details">
               <summary
                 class={
-                  (_depth === 1 ? classes.itemLink : `flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors ${textSizeClass}`) +
-                  (isActive ? " text-foreground bg-muted" : "") +
+                  (_depth === 1 ? classes.itemLink : `flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-muted hover:text-highlighted hover:bg-muted transition-colors ${textSizeClass}`) +
+                  (isActive ? " text-highlighted bg-muted" : "") +
                   " list-none cursor-pointer"
                 }
                 data-slot="item-summary"
@@ -141,8 +131,8 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
             <a
               href={item.href ?? "#"}
               class={
-                (_depth === 1 ? classes.itemLink : `flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors ${textSizeClass}`) +
-                (isActive ? " text-foreground bg-muted" : "")
+                (_depth === 1 ? classes.itemLink : `flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-muted hover:text-highlighted hover:bg-muted transition-colors ${textSizeClass}`) +
+                (isActive ? " text-highlighted bg-muted" : "")
               }
               aria-current={isActive ? "page" : undefined}
             >

package/src/components/sidebar/sidebar.theme.ts

@@ -1,48 +1,45 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSidebarTheme = () =>
-  defineTheme({
-    slots: ["root", "header", "content", "footer", "item", "itemLink", "itemIcon", "itemBadge"],
-    base: {
-      root: "flex flex-col h-full w-64 bg-background border-r border-border shadow-sm transition-all duration-300",
-      header:
-        "flex h-16 items-center px-6 border-b border-border gap-2 font-semibold text-lg text-foreground",
-      content: "flex-1 overflow-y-auto p-4 flex flex-col gap-1.5",
-      footer: "p-4 border-t border-border flex items-center justify-between",
-      item: "relative",
-      itemLink:
-        "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer",
-      itemIcon: "size-4 text-current",
-      itemBadge:
-        "ml-auto flex size-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold"
+export const sidebarTheme = defineTheme("sidebar", {
+  slots: ["root", "header", "content", "footer", "item", "itemLink", "itemIcon", "itemBadge"],
+  base: {
+    root: "flex flex-col h-full w-64 bg-default border-r border-default shadow-sm transition-all duration-300",
+    header:
+      "flex h-16 items-center px-6 border-b border-default gap-2 font-semibold text-lg text-highlighted",
+    content: "flex-1 overflow-y-auto p-4 flex flex-col gap-1.5",
+    footer: "p-4 border-t border-default flex items-center justify-between",
+    item: "relative",
+    itemLink:
+      "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-muted hover:text-highlighted transition-colors cursor-pointer",
+    itemIcon: "size-4 text-current",
+    itemBadge:
+      "ml-auto flex size-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold"
+  },
+  variants: {
+    side: {
+      left: { root: "left-0 border-r" },
+      right: { root: "right-0 border-l" }
     },
-    variants: {
-      side: {
-        left: { root: "left-0 border-r" },
-        right: { root: "right-0 border-l" }
+    collapsible: {
+      icon: {
+        root: "w-16 [&_[data-slot=item-text]]:hidden [&_[data-slot=item-badge]]:hidden [&_[data-slot=sidebar-logo]]:hidden"
       },
-      collapsible: {
-        icon: {
-          root: "w-16 [&_[data-slot=item-text]]:hidden [&_[data-slot=item-badge]]:hidden [&_[data-slot=sidebar-logo]]:hidden"
-        },
-        offcanvas: { root: "-translate-x-full" },
-        none: {}
+      offcanvas: { root: "-translate-x-full" },
+      none: {}
+    },
+    variant: {
+      sidebar: {},
+      floating: {
+        root: "m-4 rounded-xl border border-default shadow-md h-[calc(100vh-2rem)] bg-default/95 backdrop-blur"
       },
-      variant: {
-        sidebar: {},
-        floating: {
-          root: "m-4 rounded-xl border border-border shadow-md h-[calc(100vh-2rem)] bg-background/95 backdrop-blur"
-        },
-        inset: {
-          root: "bg-muted/40 border-none p-2"
-        }
+      inset: {
+        root: "bg-muted/40 border-none p-2"
       }
-    },
-    defaultVariants: {
-      side: "left",
-      collapsible: "none",
-      variant: "sidebar"
     }
-  })
-
-export default createSidebarTheme()
+  },
+  defaultVariants: {
+    side: "left",
+    collapsible: "none",
+    variant: "sidebar"
+  }
+})

package/src/components/sidebar/sidebar.ts

@@ -21,6 +21,8 @@ export interface SidebarScope {
 }
 
 export interface SidebarProps {
+  t?: (key: string) => string
+  _depth?: number
   /**
    * The navigation links array.
    */

package/src/components/skeleton/RLASkeleton.astro

@@ -1,22 +1,13 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { SkeletonProps } from "./skeleton"
-import skeletonTheme from "./skeleton.theme"
-
-
-const skeleton = scv(skeletonTheme)
-
-const {
-  shape = "rounded",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SkeletonProps
-
-const classes = resolveClasses(skeleton, {
-  shape
-}, useUi("skeleton", uiProp), className)
----
-<div class={classes.root} data-slot="root" {...rest} />
+---
+import type { SkeletonProps } from "./skeleton"
+import { skeletonTheme } from "./skeleton.theme"
+
+
+
+const {
+  ...rest
+} = Astro.props as SkeletonProps
+
+const classes = skeletonTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...rest} />

package/src/components/skeleton/skeleton.theme.ts

@@ -1,21 +1,18 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSkeletonTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "animate-pulse bg-elevated shrink-0"
-    },
-    variants: {
-      shape: {
-        circle: { root: "rounded-full" },
-        rectangle: { root: "rounded-none" },
-        rounded: { root: "rounded-md" }
-      }
-    },
-    defaultVariants: {
-      shape: "rounded"
+export const skeletonTheme = defineTheme("skeleton", {
+  slots: ["root"],
+  base: {
+    root: "animate-pulse bg-elevated shrink-0"
+  },
+  variants: {
+    shape: {
+      circle: { root: "rounded-full" },
+      rectangle: { root: "rounded-none" },
+      rounded: { root: "rounded-md" }
     }
-  })
-
-export default createSkeletonTheme()
+  },
+  defaultVariants: {
+    shape: "rounded"
+  }
+})

package/src/components/slideover/RLASlideover.astro

@@ -1,30 +1,20 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SlideoverProps } from "./slideover"
-import { resolveTheme } from "../../utils/resolveTheme"
-import slideoverThemeDefault, { createSlideoverTheme } from "./slideover.theme"
-const slideoverTheme = resolveTheme(slideoverThemeDefault, createSlideoverTheme)
+import { slideoverTheme } from "./slideover.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const slideover = scv(slideoverTheme)
 
 const {
   side = "left",
   title,
   description,
   triggerLabel,
-  ui: uiProp,
-  class: className,
   unmountOnHide = true,
   ...rest
 } = Astro.props as SlideoverProps
 
-const classes = resolveClasses(slideover, {
-  side
-}, useUi("slideover", uiProp), className)
+const classes = slideoverTheme(Astro.props)
 
 const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
 ---