@rimelight/ui 0.0.42 → 0.0.44

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
@@ -65,7 +55,7 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
         <slot name="header">
           {logo && (
             <span data-slot="sidebar-logo" class="flex items-center gap-2">
-              <RLAIcon name="layers" class="size-5 text-primary" />
+              <RLAIcon name="i-rl-layers" class="size-5 text-primary" />
               <span class="truncate">{logo}</span>
             </span>
           )}
@@ -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,10 +79,10 @@ 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" />
+        <RLAIcon name="i-rl-panelLeft" class="size-4" />
       </button>
     )}
 
@@ -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"
@@ -131,7 +121,7 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
                     {t(b.text)}
                   </RLABadge>
                 )}
-                <RLAIcon name="chevronRight" class="size-3 ml-auto transition-transform group-open/details:rotate-90" />
+                <RLAIcon name="i-rl-chevronRight" class="size-3 ml-auto transition-transform group-open/details:rotate-90" />
               </summary>
               <div class={`mt-0.5 ${indentClass} flex flex-col gap-0.5`}>
                 <Astro.self items={item.children} t={t} _depth={_depth + 1} />
@@ -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)}`
 ---
@@ -59,7 +49,7 @@ const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
       data-dialog-close={dialogId}
       aria-label="Close slideover"
     >
-      <RLAIcon name="close" class="size-4" aria-hidden="true" />
+      <RLAIcon name="i-rl-close" class="size-4" aria-hidden="true" />
     </button>
 
     <div class={classes.header} data-slot="header">

package/src/components/slideover/slideover.theme.ts

@@ -1,59 +1,55 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSlideoverTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: [
-      "root",
-      "trigger",
-      "backdrop",
-      "content",
-      "header",
-      "title",
-      "description",
-      "footer",
-      "closeButton"
+export const slideoverTheme = defineTheme("slideover", {
+  slots: [
+    "root",
+    "trigger",
+    "backdrop",
+    "content",
+    "header",
+    "title",
+    "description",
+    "footer",
+    "closeButton"
+  ],
+  base: {
+    root: "relative inline-block",
+    trigger: "",
+    backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
+    content: [
+      "fixed z-50 bg-default p-6 shadow-xl border-default transition-all duration-300 outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out"
     ],
-    base: {
-      root: "relative inline-block",
-      trigger: "",
-      backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
-      content: [
-        "fixed z-50 bg-background p-6 shadow-xl border-border transition-all duration-300 outline-none",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out"
-      ],
-      header: "flex flex-col gap-1.5 mb-4",
-      title: "text-lg font-semibold leading-none tracking-tight text-foreground",
-      description: "text-sm text-muted-foreground leading-relaxed",
-      footer: "flex flex-col sm:flex-row sm:justify-end gap-2 mt-6",
-      closeButton: [
-        "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 text-foreground",
-        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-      ]
-    },
-    variants: {
-      side: {
-        top: {
-          content:
-            "inset-x-0 top-0 border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top"
-        },
-        bottom: {
-          content:
-            "inset-x-0 bottom-0 border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
-        },
-        left: {
-          content:
-            "inset-y-0 left-0 right-auto h-full w-2/3 max-w-sm border-r m-0 max-h-none data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"
-        },
-        right: {
-          content:
-            "inset-y-0 right-0 left-auto h-full w-2/3 max-w-sm border-l m-0 max-h-none data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
-        }
+    header: "flex flex-col gap-1.5 mb-4",
+    title: "text-lg font-semibold leading-none tracking-tight text-highlighted",
+    description: "text-sm text-muted leading-relaxed",
+    footer: "flex flex-col sm:flex-row sm:justify-end gap-2 mt-6",
+    closeButton: [
+      "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 text-highlighted",
+      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+    ]
+  },
+  variants: {
+    side: {
+      top: {
+        content:
+          "inset-x-0 top-0 border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top"
+      },
+      bottom: {
+        content:
+          "inset-x-0 bottom-0 border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
+      },
+      left: {
+        content:
+          "inset-y-0 left-0 right-auto h-full w-2/3 max-w-sm border-r m-0 max-h-none data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"
+      },
+      right: {
+        content:
+          "inset-y-0 right-0 left-auto h-full w-2/3 max-w-sm border-l m-0 max-h-none data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
       }
-    },
-    defaultVariants: {
-      side: "left"
     }
-  })
-
-export default createSlideoverTheme()
+  },
+  defaultVariants: {
+    side: "left"
+  }
+})

package/src/components/slider/RLASlider.astro

@@ -1,13 +1,7 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SliderProps } from "./slider"
-import { resolveTheme } from "../../utils/resolveTheme"
-import sliderThemeDefault, { createSliderTheme } from "./slider.theme"
-const sliderTheme = resolveTheme(sliderThemeDefault, createSliderTheme)
+import { sliderTheme } from "./slider.theme"
 
-const slider = scv(sliderTheme)
 
 const {
   value = 0,
@@ -15,21 +9,15 @@ const {
   max = 100,
   step = 1,
   name,
-  color = "primary",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as SliderProps
 
-const classes = resolveClasses(slider, {
-  color,
-  theme
-}, useUi("slider", uiProp), className)
+const classes = sliderTheme(Astro.props)
 
 const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
 ---
-<div class={classes.root} data-slot="slider-root" {...rest}>
+<div class={classes.root} data-slot="slider-root" data-theme={theme} {...rest}>
   <div class={classes.track} data-slot="track">
     <svg class="h-full w-full overflow-visible pointer-events-none">
       <rect class:list={[classes.range, "h-full"]} width={`${percentage}%`} fill="currentColor" rx="2" />

package/src/components/slider/slider.theme.ts

@@ -1,35 +1,18 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSliderTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "track", "range", "thumb"],
-    base: {
-      root: "relative flex w-full touch-none select-none items-center",
-      track: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted",
-      range: "absolute h-full",
-      thumb:
-        "block size-4.5 rounded-full border border-border bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            range: `bg-[var(--rl-bg)]`,
-            thumb: `focus-visible:ring-[var(--rl-ring)]/50 hover:border-[var(--rl-border)]`
-          }
-        ])
-      ),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-    }
-  })
-
-export default createSliderTheme()
+export const sliderTheme = defineTheme("slider", {
+  slots: ["root", "track", "range", "thumb"],
+  base: {
+    root: "relative flex w-full touch-none select-none items-center",
+    track: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted",
+    range: "absolute h-full bg-[var(--rl-bg)]",
+    thumb:
+      "block size-4.5 rounded-full border border-default bg-default shadow transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]/50 hover:border-[var(--rl-border)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
+  },
+  variants: {
+    color: "auto"
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+})

package/src/components/slider/slider.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface SliderProps {
   /**

package/src/components/speed-dial/RLASpeedDial.astro

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

package/src/components/speed-dial/speed-dial.theme.ts

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

package/src/components/spinner/RLASpinner.astro

@@ -1,27 +1,13 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SpinnerProps } from "./spinner"
-import { resolveTheme } from "../../utils/resolveTheme"
-import spinnerThemeDefault, { createSpinnerTheme } from "./spinner.theme"
-const spinnerTheme = resolveTheme(spinnerThemeDefault, createSpinnerTheme)
+import { spinnerTheme } from "./spinner.theme"
 
-const spinner = scv(spinnerTheme)
 
 const {
-  size = "md",
-  color = "current",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as SpinnerProps
 
-const classes = resolveClasses(spinner, {
-  size,
-  color,
-  theme
-}, useUi("spinner", uiProp), className)
+const classes = spinnerTheme(Astro.props)
 ---
-<div class={classes.root} data-slot="root" {...rest} />
+<div class={classes.root} data-slot="root" data-theme={theme} {...rest} />