@rimelight/ui 0.0.37 → 0.0.38

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Daniel Marchi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Rimelight Entertainment
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -54,16 +54,18 @@ bun add @rimelight/ui
 
 ```typescript
 // astro.config.ts
-import { ui } from "@rimelight/ui/integrations"
+import { ui } from "@rimelight/ui"
 import { defineConfig } from "astro/config"
 
 export default defineConfig({
   integrations: [
     ui({
       // Optional: Provide global UI overrides
-      ui: {
-        button: {
-          defaultVariants: { variant: "primary" }
+      components: {
+        themes: {
+          button: {
+            defaultVariants: { variant: "primary" }
+          }
         }
       }
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -27,25 +27,13 @@
   ],
   "type": "module",
   "exports": {
-    ".": "./src/integrations/index.ts",
-    "./styles/*": "./src/styles/*",
+    ".": "./src/ui.ts",
     "./components/*": "./src/components/*",
-    "./components/astro/*": "./src/components/astro/*",
-    "./components/vue/*": "./src/components/vue/*",
-    "./themes": "./src/themes/index.ts",
-    "./themes/*": "./src/themes/*",
-    "./config": "./src/config/index.ts",
+    "./themes": "./src/themes.ts",
     "./config/*": "./src/config/*",
-    "./utils": "./src/utils/index.ts",
     "./utils/*": "./src/utils/*",
-    "./integrations": "./src/integrations/index.ts",
-    "./integrations/*": "./src/integrations/*",
-    "./docs": "./src/docs/extractAll.ts",
-    "./docs/*": "./src/docs/*",
-    "./plugins": "./src/plugins/index.ts",
-    "./plugins/*": "./src/plugins/*",
-    "./types": "./src/types/index.ts",
     "./types/*": "./src/types/*",
+    "./icons/*": "./src/icons/*",
     "./presets": "./src/presets/index.ts",
     "./presets/*": "./src/presets/*",
     "./*": "./src/*"
@@ -54,31 +42,27 @@
     "access": "public"
   },
   "scripts": {
-    "astro": "astro",
-    "docs:meta": "tsx scripts/extract-meta.ts"
+    "astro": "astro"
   },
   "dependencies": {
-    "@iconify-json/lucide": "1.2.113",
-    "@unocss/astro": "^66.7.2",
+    "@unocss/astro": "66.7.5",
     "css-variants": "2.3.5",
-    "nanostores": "1.3.0"
+    "nanostores": "1.4.0"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.9",
     "@astrojs/solid-js": "7.0.1",
-    "@astrojs/ts-plugin": "1.10.9",
+    "@astrojs/ts-plugin": "1.10.10",
     "@astrojs/vue": "7.0.1",
-    "astro": "7.0.2",
-    "solid-js": "1.9.13",
-    "tsx": "4.22.4",
+    "astro": "7.1.0",
+    "solid-js": "1.9.14",
     "typescript": "6.0.3",
-    "unocss": "66.7.2",
-    "vue": "3.5.38"
+    "unocss": "66.7.5",
+    "vue": "3.5.39"
   },
   "peerDependencies": {
     "@astrojs/solid-js": ">=7.0.1",
     "@astrojs/vue": ">=7.0.1",
-    "@rimelight/i18n": "workspace:^0.0.1",
     "astro": ">=7.0.1",
     "solid-js": ">=1.9.13",
     "vue": ">=3.0.0"
@@ -90,9 +74,6 @@
     "@astrojs/vue": {
       "optional": true
     },
-    "@rimelight/i18n": {
-      "optional": true
-    },
     "solid-js": {
       "optional": true
     },
@@ -100,5 +81,5 @@
       "optional": true
     }
   },
-  "packageManager": "pnpm@11.8.0"
+  "packageManager": "pnpm@11.9.0"
 }

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

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

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

@@ -0,0 +1,21 @@
+---
+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 />
+</div>

package/src/components/accordion/RLAAccordion.astro

@@ -0,0 +1,97 @@
+---
+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 RLAIcon from "../icon/RLAIcon.astro"
+
+const accordion = scv(accordionTheme)
+
+const {
+  items,
+  summary,
+  multiple = false,
+  trailingIcon = "chevronDown",
+  disabled = false,
+  name,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AccordionProps
+
+const classes = resolveClasses(accordion, {
+  disabled
+}, useUi("accordion", uiProp), className)
+
+// 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)
+---
+
+{items ? (
+  <div class={classes.root} data-slot="root" {...rest}>
+    {items.map((item) => {
+      const itemDisabled = disabled || item.disabled
+      const itemTrailingIcon = item.trailingIcon || trailingIcon
+      
+      return (
+        <details 
+          class={classes.item} 
+          data-slot="item" 
+          name={groupName}
+        >
+          <summary 
+            class={cx(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>
+            )}
+            
+            <span class={classes.label} data-slot="label">
+              {item.label}
+            </span>
+
+            {itemTrailingIcon && (
+              <span class={classes.trailingIcon} data-slot="trailing-icon">
+                <slot name="trailing-icon">
+                  <RLAIcon name={itemTrailingIcon} />
+                </slot>
+              </span>
+            )}
+          </summary>
+
+          <div class={classes.content} data-slot="content">
+            <div class={classes.body} data-slot="body">
+              {item.content}
+            </div>
+          </div>
+        </details>
+      )
+    })}
+  </div>
+) : (
+  <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")} 
+      data-slot="trigger"
+    >
+      <span class={classes.label} data-slot="label">{summary}</span>
+      {trailingIcon && (
+        <span class={classes.trailingIcon} data-slot="trailing-icon">
+          <slot name="trailing-icon">
+            <RLAIcon name={trailingIcon} />
+          </slot>
+        </span>
+      )}
+    </summary>
+
+    <div class={classes.content} data-slot="content">
+      <div class={classes.body} data-slot="body">
+        <slot />
+      </div>
+    </div>
+  </details>
+)}

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

@@ -0,0 +1,39 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+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"
+        }
+      }
+    },
+    defaultVariants: {}
+  })
+
+export default createAccordionTheme()

package/src/components/app/RLAApp.astro

@@ -0,0 +1,21 @@
+---
+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 />
+</div>

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

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

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

@@ -0,0 +1,27 @@
+---
+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>

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

@@ -0,0 +1,13 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+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()

package/src/components/audio/RLAAudio.astro

@@ -0,0 +1,26 @@
+---
+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"
+
+
+const audio = scv(audioTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AudioProps
+
+const classes = resolveClasses(audio, {}, useUi("audio", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+  {Astro.slots.has("transcript") && (
+    <div class="mt-2 text-sm text-zinc-400" data-slot="transcript">
+      <slot name="transcript" />
+    </div>
+  )}
+</div>

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

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

package/src/components/avatar/RLAAvatar.astro

@@ -0,0 +1,136 @@
+---
+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 RLAIcon from "../icon/RLAIcon.astro"
+
+
+const avatar = scv(avatarTheme)
+
+const {
+  src,
+  alt = "",
+  fallback,
+  initials,
+  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)
+
+const avatarFallback = fallback || initials
+const hasTextLayout = !!(title || subtitle)
+---
+{hasTextLayout ? (
+  <div class="flex items-center gap-3" data-slot="profile-wrapper">
+    <span
+      class={classes.root}
+      data-slot="root"
+      aria-label={label || title}
+      role={label || title ? "img" : undefined}
+      {...rest}
+    >
+      <slot>
+        {src ? (
+          <img
+            src={src}
+            alt={alt}
+            class={classes.image}
+            data-slot="image"
+          />
+        ) : (
+          <span class={classes.fallback} data-slot="fallback">
+            <slot name="fallback">
+              {avatarFallback}
+            </slot>
+            {!avatarFallback && !Astro.slots.has("fallback") && (
+              <RLAIcon name="user" class={classes.icon} aria-hidden="true" />
+            )}
+          </span>
+        )}
+      </slot>
+
+      <slot name="badge">
+        {badge && (
+          <span
+            class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
+            data-slot="badge"
+          >
+            {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
+          </span>
+        )}
+      </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>
+      )}
+    </div>
+  </div>
+) : (
+  <span
+    class={classes.root}
+    data-slot="root"
+    aria-label={label}
+    role={label ? "img" : undefined}
+    {...rest}
+  >
+    <slot>
+      {src ? (
+        <img
+          src={src}
+          alt={alt}
+          class={classes.image}
+          data-slot="image"
+        />
+      ) : (
+        <span class={classes.fallback} data-slot="fallback">
+          <slot name="fallback">
+            {avatarFallback}
+          </slot>
+          {!avatarFallback && !Astro.slots.has("fallback") && (
+            <RLAIcon name="user" class={classes.icon} aria-hidden="true" />
+          )}
+        </span>
+      )}
+    </slot>
+
+    <slot name="badge">
+      {badge && (
+        <span
+          class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
+          data-slot="badge"
+        >
+          {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
+        </span>
+      )}
+    </slot>
+  </span>
+)}
+

package/src/components/avatar/avatar.theme.ts

@@ -0,0 +1,84 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createAvatarTheme = (colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "image", "fallback", "icon", "badge"],
+    base: {
+      root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative",
+      image: "h-full w-full rounded-[inherit] object-cover",
+      fallback: "font-medium truncate",
+      icon: "shrink-0",
+      badge: "absolute rounded-full ring-2 ring-bg"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            {
+              root: `bg-${color}/10`,
+              fallback: `text-${color}`,
+              icon: `text-${color}`
+            }
+          ])
+        ),
+        neutral: {
+          root: "bg-elevated",
+          fallback: "text-foreground",
+          icon: "text-muted"
+        }
+      },
+      size: {
+        "3xs": {
+          root: "size-4 text-[8px]",
+          badge: "size-1.5"
+        },
+        "2xs": {
+          root: "size-5 text-[10px]",
+          badge: "size-2"
+        },
+        "xs": {
+          root: "size-6 text-xs",
+          badge: "size-2"
+        },
+        "sm": {
+          root: "size-7 text-sm",
+          badge: "size-2.5"
+        },
+        "md": {
+          root: "size-8 text-base",
+          badge: "size-3"
+        },
+        "lg": {
+          root: "size-9 text-lg",
+          badge: "size-3"
+        },
+        "xl": {
+          root: "size-10 text-xl",
+          badge: "size-3.5"
+        },
+        "2xl": {
+          root: "size-11 text-[22px]",
+          badge: "size-4"
+        },
+        "3xl": {
+          root: "size-12 text-2xl",
+          badge: "size-4"
+        }
+      },
+      badgePosition: {
+        "top-right": { badge: "top-0 right-0" },
+        "bottom-right": { badge: "bottom-0 right-0" },
+        "top-left": { badge: "top-0 left-0" },
+        "bottom-left": { badge: "bottom-0 left-0" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "neutral",
+      badgePosition: "bottom-right"
+    }
+  })
+
+export default createAvatarTheme()