@rimelight/ui 0.0.42 → 0.0.44

package/README.md

@@ -50,7 +50,7 @@ deno add npm:@rimelight/ui
 bun add @rimelight/ui
 ```
 
-2. Add the Rimelight UI Astro integration to your Astro configuration:
+2. Add the Rimelight UI Vite plugin to your configuration:
 
 ```typescript
 // astro.config.ts
@@ -58,18 +58,20 @@ import { ui } from "@rimelight/ui"
 import { defineConfig } from "astro/config"
 
 export default defineConfig({
-  integrations: [
-    ui({
-      // Optional: Provide global UI overrides
-      components: {
-        themes: {
-          button: {
-            defaultVariants: { variant: "primary" }
+  vite: {
+    plugins: [
+      ui({
+        // Optional: Provide global UI overrides
+        components: {
+          themes: {
+            button: {
+              defaultVariants: { variant: "primary" }
+            }
           }
         }
-      }
-    })
-  ]
+      })
+    ]
+  }
 })
 ```
 
@@ -78,10 +80,9 @@ export default defineConfig({
 ### Astro Components
 
 ```astro
-// component.astro
-
 ---
-import { RLAButton } from '@rimelight/ui/components/astro/RLAButton.astro';
+// component.astro
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
 ---
 
 <RLAButton label="Click Me" />
@@ -90,10 +91,9 @@ import { RLAButton } from '@rimelight/ui/components/astro/RLAButton.astro';
 ### Vue Components
 
 ```vue
-// component.vue
-
+<!-- component.vue -->
 <script setup lang="ts">
-import { RLVButton } from "@rimelight/ui/components/vue/RLVButton.vue"
+import RLVButton from "@rimelight/ui/components/button/RLVButton.vue"
 </script>
 
 <template>
@@ -103,14 +103,6 @@ import { RLVButton } from "@rimelight/ui/components/vue/RLVButton.vue"
 
 For mixed usage please refer to the [Astro documentation on using front-end frameworks](https://docs.astro.build/en/guides/framework-components/).
 
-You can add the FAQ section right toward the bottom of your README, typically just before the Contributing or Support sections.
-
-Since GitHub and most Markdown viewers natively support the <details> and <summary> HTML tags, they will render as interactive accordion dropdowns, keeping your README clean and compact.
-
-Here is the exact code block to drop into your Repository README:
-
-Markdown
-
 ## Frequently Asked Questions
 
 <details>
@@ -120,7 +112,7 @@ Markdown
 
 <details>
   <summary><b>Can I use Rimelight UI without Astro?</b></summary>
-    For the time being, no. The library is strictly distributed as an Astro integration. However, in theory, it could be modularized enough to be usable as a Vite plugin, and we are open to contributions on this topic.
+    For the time being, no. The component library itself is Astro-based (the <code>.astro</code> components require Astro's compiler), but its configuration and styling pipeline are distributed as a plain Vite plugin, so any Vite-powered project can consume the Vue/Solid components, themes, and design tokens.
 </details>
 
 <details>

package/package.json

@@ -1,69 +1,50 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "private": false,
-  "description": "Rimelight Entertainment UI Library.",
-  "keywords": [
-    "astro",
-    "typescript"
-  ],
+  "description": "Rimelight Entertainment's UI Package",
   "homepage": "https://rimelight.com/docs",
   "bugs": {
     "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
   },
   "license": "MIT",
   "author": {
-    "name": "Daniel Marchi"
+    "name": "Rimelight Entertainment"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
   },
   "files": [
-    "src",
-    "worker-configuration.d.ts",
-    "README.md",
-    "LICENSE"
+    "src"
   ],
   "type": "module",
   "exports": {
-    ".": "./src/ui.ts",
-    "./components/*": "./src/components/*",
-    "./themes": "./src/themes.ts",
-    "./config/*": "./src/config/*",
-    "./utils/*": "./src/utils/*",
-    "./types/*": "./src/types/*",
-    "./icons/*": "./src/icons/*",
-    "./presets": "./src/presets/index.ts",
-    "./presets/*": "./src/presets/*",
+    ".": "./src/index.ts",
     "./*": "./src/*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "astro": "astro"
-  },
   "dependencies": {
-    "@unocss/astro": "66.7.5",
-    "css-variants": "2.3.5",
-    "nanostores": "1.4.0"
+    "@unocss/vite": "66.8.1",
+    "unocss": "66.8.1"
   },
   "devDependencies": {
-    "@astrojs/check": "0.9.9",
-    "@astrojs/solid-js": "7.0.1",
-    "@astrojs/ts-plugin": "1.10.10",
-    "@astrojs/vue": "7.0.1",
-    "astro": "7.1.3",
-    "solid-js": "1.9.14",
+    "@astrojs/check": "0.9.10",
+    "@astrojs/solid-js": "7.0.2",
+    "@astrojs/ts-plugin": "1.10.11",
+    "@astrojs/vue": "7.0.2",
+    "@rimelight/config": "0.0.3",
+    "astro": "7.2.7",
+    "solid-js": "1.9.15",
     "typescript": "6.0.3",
-    "unocss": "66.7.5",
-    "vue": "3.5.40"
+    "vue": "3.5.41"
   },
   "peerDependencies": {
     "@astrojs/solid-js": ">=7.0.1",
     "@astrojs/vue": ">=7.0.1",
-    "astro": ">=7.0.1",
+    "astro": ">=7.0.0",
     "solid-js": ">=1.9.13",
     "vue": ">=3.0.0"
   },
@@ -81,5 +62,11 @@
       "optional": true
     }
   },
-  "packageManager": "pnpm@11.9.0"
-}
+  "engines": {
+    "node": ">=26.7.0"
+  },
+  "scripts": {
+    "astro": "astro",
+    "check": "vp check --fix && astro check"
+  }
+}

package/src/components/3d-hover/3d-hover.theme.ts

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

package/src/components/3d-hover/RLA3dHover.astro

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

package/src/components/accordion/RLAAccordion.astro

@@ -1,13 +1,8 @@
 ---
-import { scv, cx } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { AccordionProps } from "./accordion"
-import accordionTheme from "./accordion.theme"
+import { accordionTheme } from "./accordion.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
-const accordion = scv(accordionTheme)
-
 const {
   items,
   summary,
@@ -15,14 +10,10 @@ const {
   trailingIcon = "chevronDown",
   disabled = false,
   name,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as AccordionProps
 
-const classes = resolveClasses(accordion, {
-  disabled
-}, useUi("accordion", uiProp), className)
+const classes = accordionTheme(Astro.props)
 
 // Generate a unique name for HTML details grouping if single-open mode (multiple=false) is active
 const groupName = name || (!multiple ? `accordion-${Math.random().toString(36).substring(2, 9)}` : undefined)
@@ -41,12 +32,12 @@ const groupName = name || (!multiple ? `accordion-${Math.random().toString(36).s
           name={groupName}
         >
           <summary 
-            class={cx(classes.trigger, itemDisabled && "pointer-events-none opacity-50 select-none")} 
+            class:list={[classes.trigger, itemDisabled && "pointer-events-none opacity-50 select-none"]} 
             data-slot="trigger"
           >
             {item.icon && (
               <span class={classes.leadingIcon} data-slot="leading-icon">
-                <span class={cx(item.icon)} aria-hidden="true" />
+                <span class={item.icon} aria-hidden="true" />
               </span>
             )}
             
@@ -75,7 +66,7 @@ const groupName = name || (!multiple ? `accordion-${Math.random().toString(36).s
 ) : (
   <details class:list={[classes.root, classes.item]} data-slot="root" name={name} {...rest}>
     <summary 
-      class={cx(classes.trigger, disabled && "pointer-events-none opacity-50 select-none")} 
+      class:list={[classes.trigger, disabled && "pointer-events-none opacity-50 select-none"]} 
       data-slot="trigger"
     >
       <span class={classes.label} data-slot="label">{summary}</span>

package/src/components/accordion/accordion.theme.ts

@@ -1,39 +1,36 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createAccordionTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "item",
-      "header",
-      "trigger",
-      "content",
-      "body",
-      "leadingIcon",
-      "trailingIcon",
-      "label"
-    ],
-    base: {
-      root: "w-full",
-      item: "border-b border-default last:border-b-0",
-      header: "flex",
-      trigger:
-        "group flex w-full flex-1 items-center gap-1.5 font-medium text-sm py-3.5 px-4 focus-visible:outline-primary min-w-0 cursor-pointer list-none [&::-webkit-details-marker]:hidden",
-      content: "overflow-hidden focus:outline-none pt-1 px-4",
-      body: "text-sm pb-3.5 text-astro-gray-200",
-      leadingIcon: "shrink-0 size-5 text-astro-gray-300",
-      trailingIcon:
-        "shrink-0 size-5 ms-auto rotate-0 transition-transform duration-200 group-open:rotate-180 text-astro-gray-300",
-      label: "text-start break-words text-astro-gray-100"
-    },
-    variants: {
-      disabled: {
-        true: {
-          trigger: "cursor-not-allowed opacity-50 select-none"
-        }
+export const accordionTheme = defineTheme("accordion", {
+  slots: [
+    "root",
+    "item",
+    "header",
+    "trigger",
+    "content",
+    "body",
+    "leadingIcon",
+    "trailingIcon",
+    "label"
+  ],
+  base: {
+    root: "w-full",
+    item: "border-b border-default last:border-b-0",
+    header: "flex",
+    trigger:
+      "group flex w-full flex-1 items-center gap-1.5 font-medium text-sm py-3.5 px-4 focus-visible:outline-primary min-w-0 cursor-pointer list-none [&::-webkit-details-marker]:hidden",
+    content: "overflow-hidden focus:outline-none pt-1 px-4",
+    body: "text-sm pb-3.5 text-astro-gray-200",
+    leadingIcon: "shrink-0 size-5 text-astro-gray-300",
+    trailingIcon:
+      "shrink-0 size-5 ms-auto rotate-0 transition-transform duration-200 group-open:rotate-180 text-astro-gray-300",
+    label: "text-start break-words text-astro-gray-100"
+  },
+  variants: {
+    disabled: {
+      true: {
+        trigger: "cursor-not-allowed opacity-50 select-none"
       }
-    },
-    defaultVariants: {}
-  })
-
-export default createAccordionTheme()
+    }
+  },
+  defaultVariants: {}
+})

package/src/components/app/RLAApp.astro

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

package/src/components/app/app.theme.ts

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

package/src/components/aspect-ratio/RLAAspectRatio.astro

@@ -1,27 +1,19 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { AspectRatioProps } from "./aspect-ratio"
-import { resolveTheme } from "../../utils/resolveTheme"
-import aspectRatioThemeDefault, { createAspectRatioTheme } from "./aspect-ratio.theme"
-const aspectRatioTheme = resolveTheme(aspectRatioThemeDefault, createAspectRatioTheme)
-
-
-const aspectRatio = scv(aspectRatioTheme)
-
-const {
-  ratio = 1,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AspectRatioProps
-
-const classes = resolveClasses(aspectRatio, {}, useUi("aspectRatio", uiProp), className)
----
-<div class:list={[classes.root]} data-slot="root" {...rest}>
-  <svg viewBox={`0 0 100 ${(1 / ratio) * 100}`} class="w-full h-auto pointer-events-none block" aria-hidden="true"></svg>
-  <div class={classes.content} data-slot="content">
-    <slot />
-  </div>
-</div>
+---
+import type { AspectRatioProps } from "./aspect-ratio"
+import { aspectRatioTheme } from "./aspect-ratio.theme"
+
+
+
+const {
+  ratio = 1,
+  ...rest
+} = Astro.props as AspectRatioProps
+
+const classes = aspectRatioTheme(Astro.props)
+---
+<div class:list={[classes.root]} data-slot="root" {...rest}>
+  <svg viewBox={`0 0 100 ${(1 / ratio) * 100}`} class="w-full h-auto pointer-events-none block" aria-hidden="true"></svg>
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/aspect-ratio/aspect-ratio.theme.ts

@@ -1,13 +1,9 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createAspectRatioTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "content"],
-    base: {
-      root: "relative w-full overflow-hidden",
-      content: "absolute inset-0 h-full w-full object-cover"
-    }
-  })
-
-export default createAspectRatioTheme()
+export const aspectRatioTheme = defineTheme("aspect-ratio", {
+  slots: ["root", "content"],
+  base: {
+    root: "relative w-full overflow-hidden",
+    content: "absolute inset-0 h-full w-full object-cover"
+  }
+})

package/src/components/audio/RLAAudio.astro

@@ -1,22 +1,11 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { AudioProps } from "./audio"
-import audioTheme from "./audio.theme"
+import { audioTheme } from "./audio.theme"
 
 
-const audio = scv(audioTheme)
 
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AudioProps
-
-const classes = resolveClasses(audio, {}, useUi("audio", uiProp), className);
+const classes = audioTheme(Astro.props)
 ---
-<div class={classes.root} data-slot="root" {...rest}>
+<div class={classes.root} data-slot="root" {...Astro.props}>
   <slot />
   {Astro.slots.has("transcript") && (
     <div class="mt-2 text-sm text-zinc-400" data-slot="transcript">

package/src/components/audio/audio.theme.ts

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

package/src/components/avatar/RLAAvatar.astro

@@ -1,16 +1,8 @@
 ---
-import { scv, cx } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { AvatarProps } from "./avatar"
-import { resolveTheme } from "../../utils/resolveTheme"
-import avatarThemeDefault, { createAvatarTheme } from "./avatar.theme"
-const avatarTheme = resolveTheme(avatarThemeDefault, createAvatarTheme)
+import { avatarTheme } from "./avatar.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
-
-const avatar = scv(avatarTheme)
-
 const {
   src,
   alt = "",
@@ -19,26 +11,15 @@ const {
   title,
   subtitle,
   label,
-  size = "md",
   badge = false,
   badgeColor = "success",
-  badgePosition = "bottom-right",
-  ui: uiProp,
-  class: className,
   ...rest
-} = Astro.props as AvatarProps & {
-  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
-  badgeColor?: string
-}
-
-const classes = resolveClasses(avatar, {
-  size,
-  color: (Astro.props.color || "neutral") as "neutral",
-  badgePosition: badgePosition as "bottom-right"
-}, useUi("avatar", uiProp), className)
+} = Astro.props as AvatarProps
 
+const classes = avatarTheme(Astro.props)
 const avatarFallback = fallback || initials
-const hasTextLayout = !!(title || subtitle)
+const hasTextLayout = Boolean(title || subtitle)
+const badgeClass = badgeColor?.startsWith("bg-") ? badgeColor : `bg-${badgeColor}-500`
 ---
 {hasTextLayout ? (
   <div class="flex items-center gap-3" data-slot="profile-wrapper">
@@ -63,7 +44,7 @@ const hasTextLayout = !!(title || subtitle)
               {avatarFallback}
             </slot>
             {!avatarFallback && !Astro.slots.has("fallback") && (
-              <RLAIcon name="user" class={classes.icon} aria-hidden="true" />
+              <RLAIcon name="i-rl-user" class={classes.icon} aria-hidden="true" />
             )}
           </span>
         )}
@@ -72,7 +53,7 @@ const hasTextLayout = !!(title || subtitle)
       <slot name="badge">
         {badge && (
           <span
-            class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
+            class:list={[classes.badge, badgeClass]}
             data-slot="badge"
           >
             {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
@@ -81,16 +62,8 @@ const hasTextLayout = !!(title || subtitle)
       </slot>
     </span>
     <div class="flex flex-col leading-tight">
-      {title && (
-        <span class="font-medium text-sm text-[var(--foreground)]" data-slot="title">
-          {title}
-        </span>
-      )}
-      {subtitle && (
-        <span class="text-xs text-[var(--muted-foreground)]" data-slot="subtitle">
-          {subtitle}
-        </span>
-      )}
+      {title && <span class="font-medium text-sm text-default" data-slot="title">{title}</span>}
+      {subtitle && <span class="text-xs text-muted" data-slot="subtitle">{subtitle}</span>}
     </div>
   </div>
 ) : (
@@ -115,7 +88,7 @@ const hasTextLayout = !!(title || subtitle)
             {avatarFallback}
           </slot>
           {!avatarFallback && !Astro.slots.has("fallback") && (
-            <RLAIcon name="user" class={classes.icon} aria-hidden="true" />
+            <RLAIcon name="i-rl-user" class={classes.icon} aria-hidden="true" />
           )}
         </span>
       )}
@@ -124,7 +97,7 @@ const hasTextLayout = !!(title || subtitle)
     <slot name="badge">
       {badge && (
         <span
-          class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
+          class:list={[classes.badge, badgeClass]}
           data-slot="badge"
         >
           {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
@@ -133,4 +106,3 @@ const hasTextLayout = !!(title || subtitle)
     </slot>
   </span>
 )}
-