@rimelight/ui 0.0.41 → 0.0.43

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,17 +9,10 @@ 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))
 ---

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

@@ -1,35 +1,22 @@
-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 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",
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
     }
-  })
-
-export default createSliderTheme()
+  },
+  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,12 @@
 ---
-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} />

package/src/components/spinner/spinner.theme.ts

@@ -1,33 +1,32 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSpinnerTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "animate-spin shrink-0 rounded-full border-2 border-t-transparent border-current"
+export const spinnerTheme = defineTheme("spinner", {
+  slots: ["root"],
+  base: {
+    root: "animate-spin shrink-0 rounded-full border-2 border-t-transparent text-[var(--rl-text)] border-current"
+  },
+  variants: {
+    size: {
+      xs: { root: "size-3" },
+      sm: { root: "size-4" },
+      md: { root: "size-6" },
+      lg: { root: "size-8" },
+      xl: { root: "size-10" }
     },
-    variants: {
-      size: {
-        xs: { root: "size-3" },
-        sm: { root: "size-4" },
-        md: { root: "size-6" },
-        lg: { root: "size-8" },
-        xl: { root: "size-10" }
-      },
-      color: Object.fromEntries([
-        ["current", { root: "text-current" }],
-        ...colors.map((color) => [color, { root: "rl-color-" + color + " text-[var(--rl-text)]" }])
-      ]),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      color: "current"
+    color: "auto",
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
     }
-  })
-
-export default createSpinnerTheme()
+  },
+  compoundVariants: [
+    {
+      color: "current",
+      classNames: { root: "text-current" }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "current"
+  }
+})

package/src/components/spinner/spinner.ts

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

package/src/components/splitter/RLASplitter.astro

@@ -1,25 +1,17 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SplitterProps } from "./splitter"
-import splitterTheme from "./splitter.theme"
+import { splitterTheme } from "./splitter.theme"
 
 import RLAIcon from "../icon/RLAIcon.astro"
 
-const splitter = scv(splitterTheme)
 
 const {
   direction = "horizontal",
   defaultSizes = [50, 50],
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as SplitterProps
 
-const classes = resolveClasses(splitter, {
-  direction
-}, useUi("splitter", uiProp), className)
+const classes = splitterTheme(Astro.props)
 
 // Normalise sizes so they sum to 100
 const total = defaultSizes.reduce((s, v) => s + v, 0)
@@ -74,7 +66,7 @@ await Promise.all(
           >
             <RLAIcon
               name={direction === "horizontal" ? "gripVertical" : "gripHorizontal"}
-              class="size-3.5 text-muted-foreground/50"
+              class="size-3.5 text-muted/50"
               aria-hidden="true"
             />
           </div>

package/src/components/splitter/splitter.theme.ts

@@ -1,23 +1,20 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSplitterTheme = () =>
-  defineTheme({
-    slots: ["root", "panel", "handle"],
-    base: {
-      root: "flex w-full h-full",
-      panel: "overflow-auto transition-all",
-      handle:
-        "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
-    },
-    variants: {
-      direction: {
-        horizontal: { root: "flex-row", handle: "w-1.5 h-full cursor-col-resize" },
-        vertical: { root: "flex-col", handle: "h-1.5 w-full cursor-row-resize" }
-      }
-    },
-    defaultVariants: {
-      direction: "horizontal"
+export const splitterTheme = defineTheme("splitter", {
+  slots: ["root", "panel", "handle"],
+  base: {
+    root: "flex w-full h-full",
+    panel: "overflow-auto transition-all",
+    handle:
+      "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
+  },
+  variants: {
+    direction: {
+      horizontal: { root: "flex-row", handle: "w-1.5 h-full cursor-col-resize" },
+      vertical: { root: "flex-col", handle: "h-1.5 w-full cursor-row-resize" }
     }
-  })
-
-export default createSplitterTheme()
+  },
+  defaultVariants: {
+    direction: "horizontal"
+  }
+})

package/src/components/spoiler/RLASpoiler.astro

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

package/src/components/spoiler/spoiler.theme.ts

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