@rimelight/ui 0.0.43 → 0.0.44

package/LICENSE

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

@@ -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" }
+            }
           }
         }
-      }
-    })
-  ]
+      })
+    ]
+  }
 })
 ```
 
@@ -110,7 +112,7 @@ For mixed usage please refer to the [Astro documentation on using front-end fram
 
 <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,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "private": false,
   "description": "Rimelight Entertainment's UI Package",
   "homepage": "https://rimelight.com/docs",
@@ -26,25 +26,19 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "astro": "astro",
-    "check": "pnpm audit --audit-level=moderate && vp check --fix && astro check"
-  },
   "dependencies": {
-    "@unocss/astro": "66.7.5",
-    "css-variants": "2.3.5",
-    "nanostores": "1.5.1"
+    "@unocss/vite": "66.8.1",
+    "unocss": "66.8.1"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.10",
     "@astrojs/solid-js": "7.0.2",
-    "@astrojs/ts-plugin": "1.10.10",
+    "@astrojs/ts-plugin": "1.10.11",
     "@astrojs/vue": "7.0.2",
-    "@rimelight/config": "workspace:*",
-    "astro": "7.2.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.41"
   },
   "peerDependencies": {
@@ -71,5 +65,8 @@
   "engines": {
     "node": ">=26.7.0"
   },
-  "packageManager": "pnpm@11.22.0"
-}
+  "scripts": {
+    "astro": "astro",
+    "check": "vp check --fix && astro check"
+  }
+}

package/src/components/avatar/RLAAvatar.astro

@@ -44,7 +44,7 @@ const badgeClass = badgeColor?.startsWith("bg-") ? badgeColor : `bg-${badgeColor
               {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>
         )}
@@ -62,16 +62,8 @@ const badgeClass = badgeColor?.startsWith("bg-") ? badgeColor : `bg-${badgeColor
       </slot>
     </span>
     <div class="flex flex-col leading-tight">
-      {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>
-      )}
+      {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>
 ) : (
@@ -96,7 +88,7 @@ const badgeClass = badgeColor?.startsWith("bg-") ? badgeColor : `bg-${badgeColor
             {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>
       )}

package/src/components/badge/RLABadge.astro

@@ -6,6 +6,7 @@ import { badgeTheme } from "./badge.theme"
 const {
   variant,
   label,
+  theme,
   ...rest
 } = Astro.props as BadgeProps
 
@@ -18,6 +19,6 @@ const classes = badgeTheme({
   variant: resolvedVariant as "solid"
 })
 ---
-<span class={classes.root} data-slot="root" {...rest}>
+<span class={classes.root} data-slot="root" data-theme={theme} {...rest}>
   <slot>{label}</slot>
 </span>

package/src/components/badge/badge.theme.ts

@@ -59,10 +59,6 @@ export const badgeTheme = defineTheme("badge", {
     },
     square: {
       true: { root: "" }
-    },
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
     }
   },
   compoundVariants: [

package/src/components/banner/RLABanner.astro

@@ -83,7 +83,7 @@ const storageKey = dismissId || bannerId
           class:list={[
             "inline-flex items-center justify-center gap-1 px-3 py-1 rounded-md text-xs font-semibold transition-colors no-underline cursor-pointer shrink-0",
             action.variant === "solid" || !action.variant
-              ? "bg-foreground text-background hover:opacity-90"
+              ? "bg-neutral-950 text-neutral-50 hover:opacity-90"
               : "bg-white/20 text-white hover:bg-white/30",
             action.class
           ]}

package/src/components/banner/banner.theme.ts

@@ -10,7 +10,7 @@ export const bannerTheme = defineTheme("banner", {
     left: "absolute left-0 inset-y-0 flex items-center px-4 max-w-[30%] truncate",
     center: "absolute left-1/2 -translate-x-1/2 max-w-[50%] truncate text-center",
     side: "flex-none flex items-center gap-2",
-    actions: "flex-none flex items-center gap-2xs",
+    actions: "flex-none flex items-center gap-xs",
     dismiss:
       "flex-none flex items-center justify-center size-8 rounded-md hover:bg-black/10 dark:hover:bg-white/10 transition-colors cursor-pointer"
   },

package/src/components/breadcrumb/RLABreadcrumb.astro

@@ -199,7 +199,7 @@ if (needsOverflow && hasMidItems) {
   }
 
   .rla-bc-ellipsis {
-    color: var(--color-muted-foreground, currentColor);
+    color: var(--rl-neutral-600);
     letter-spacing: 0.05em;
     font-weight: 500;
   }
@@ -219,7 +219,7 @@ if (needsOverflow && hasMidItems) {
        so we rely on the counter never being 0 when this element is visible
        (the overflow li is only shown when --base-hidden > 0 or a container
        query is active). */
-    color: var(--color-muted-foreground, currentColor);
+    color: var(--rl-neutral-600);
     font-size: 0.6875rem;
     font-weight: 600;
     vertical-align: super;

package/src/components/button/RLAButton.astro

@@ -23,6 +23,8 @@ const {
   active = false,
   activeColor,
   activeVariant,
+  theme,
+  class: className,
   ...rest
 } = Astro.props as ButtonProps
 
@@ -56,8 +58,9 @@ const Tag = (href || to) ? RLALink : "button";
 const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
 ---
 <Tag
-  class={classes.root}
+  class={`${classes.root}${className ? ` ${className}` : ""}`}
   data-slot="root"
+  data-theme={theme}
   {...(Tag === RLALink ? { href, to, noExternalIcon: true, raw: true } : {})}
   {...loadingAutoProps}
   {...rest}

package/src/components/button/button.theme.ts

@@ -93,10 +93,6 @@ export const buttonTheme = defineTheme("button", {
     active: {
       true: { root: "" },
       false: { root: "" }
-    },
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
     }
   },
   compoundVariants: [
@@ -104,7 +100,7 @@ export const buttonTheme = defineTheme("button", {
       color: "neutral",
       variant: "solid",
       classNames: {
-        root: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
+        root: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-inverted"
       }
     },
     {

package/src/components/callout/RLACallout.astro

@@ -14,14 +14,15 @@ const {
   avatar,
   actions,
   close,
+  theme,
   ...rest
 } = Astro.props as CalloutProps
 
 const colorToIcon: Record<string, string | undefined> = {
-  error: "circleX",
-  warning: "alertTriangle",
-  info: "info",
-  success: "circleCheck",
+  error: "i-rl-circleCheck",
+  warning: "i-rl-alertTriangle",
+  info: "i-rl-info",
+  success: "i-rl-circleCheck",
   primary: undefined,
   secondary: undefined,
   commentary: undefined,
@@ -45,6 +46,7 @@ const classes = calloutTheme({
   class={classes.root}
   data-slot="root"
   role="alert"
+  data-theme={theme}
   {...rest}
 >
   <slot name="icon">
@@ -81,7 +83,7 @@ const classes = calloutTheme({
         <slot name="close">
           {close && (
             <button class={classes.close} data-slot="close">
-              <RLAIcon name="close" class="size-4" />
+              <RLAIcon name="i-rl-close" class="size-4" />
             </button>
           )}
         </slot>

package/src/components/callout/callout.theme.ts

@@ -22,11 +22,7 @@ export const calloutTheme = defineTheme("callout", {
         root: "bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
       }
     },
-    color: "auto",
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
-    }
+    color: "auto"
   },
   compoundVariants: [
     {

package/src/components/card/card.theme.ts

@@ -21,13 +21,13 @@ export const cardTheme = defineTheme("card", {
         description: "text-dimmed"
       },
       outline: {
-        root: "bg-default border border-default divide-y divide-default"
+        root: "bg-default border border-default divide-y divide-border"
       },
       soft: {
-        root: "bg-elevated/50 divide-y divide-default"
+        root: "bg-elevated/50 divide-y divide-border"
       },
       subtle: {
-        root: "bg-elevated/50 border border-default divide-y divide-default"
+        root: "bg-elevated/50 border border-default divide-y divide-border"
       }
     },
     interactive: {

package/src/components/carousel/RLACarousel.astro

@@ -43,10 +43,10 @@ const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
     </div>
 
     <button class={classes.buttonPrev} data-slot="prev-button" type="button" aria-label="Previous slide">
-      <RLAIcon name="chevronLeft" class="size-5" aria-hidden="true" />
+      <RLAIcon name="i-rl-chevronLeft" class="size-5" aria-hidden="true" />
     </button>
     <button class={classes.buttonNext} data-slot="next-button" type="button" aria-label="Next slide">
-      <RLAIcon name="chevronRight" class="size-5" aria-hidden="true" />
+      <RLAIcon name="i-rl-chevronRight" class="size-5" aria-hidden="true" />
     </button>
   </div>
 </rla-carousel>

package/src/components/carousel/carousel.theme.ts

@@ -16,11 +16,11 @@ export const carouselTheme = defineTheme("carousel", {
       "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
     ],
     dots: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-1.5 items-center",
-    dot: "block size-2 rounded-full bg-foreground/20 cursor-pointer transition-all duration-350 hover:bg-foreground/45"
+    dot: "block size-2 rounded-full bg-neutral-950/20 cursor-pointer transition-all duration-350 hover:bg-neutral-950/45"
   },
   variants: {
     active: {
-      true: { dot: "bg-foreground size-2.5" },
+      true: { dot: "bg-neutral-950 size-2.5" },
       false: { dot: "" }
     }
   },

package/src/components/chart/RLAChart.astro

@@ -181,7 +181,7 @@ const id = `chart-${Math.random().toString(36).substring(2, 9)}`
           )
         })}
         {type === "donut" && (
-          <circle cx={PIE_CX} cy={PIE_CY} r={DONUT_INNER_R} fill="var(--color-card, white)" />
+          <circle cx={PIE_CX} cy={PIE_CY} r={DONUT_INNER_R} fill="var(--rl-neutral-50)" />
         )}
       </svg>
 

package/src/components/checkbox/RLACheckbox.astro

@@ -10,12 +10,13 @@ const {
   name,
   label,
   size = "md",
+  theme,
   ...rest
 } = Astro.props as CheckboxProps
 
 const classes = checkboxTheme(Astro.props);
 ---
-<label class={classes.root} data-slot="root">
+<label class={classes.root} data-slot="root" data-theme={theme}>
   <input
     type="checkbox"
     class={classes.input}

package/src/components/checkbox/checkbox.theme.ts

@@ -24,10 +24,6 @@ export const checkboxTheme = defineTheme("checkbox", {
     checked: {
       true: { indicator: "scale-100" },
       false: { indicator: "scale-0" }
-    },
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
     }
   },
   defaultVariants: {

package/src/components/chip/RLAChip.astro

@@ -8,6 +8,7 @@ const {
   text,
   standalone = false,
   show = true,
+  theme,
   ...rest
 } = Astro.props as ChipProps
 
@@ -22,7 +23,7 @@ const classes = chipTheme(Astro.props)
     </span>
   )
 ) : (
-  <div class={classes.root} data-slot="root" {...rest}>
+  <div class={classes.root} data-slot="root" data-theme={theme} {...rest}>
     <slot />
     {show && (
       <span class={classes.base} data-slot="base">

package/src/components/chip/chip.theme.ts

@@ -30,10 +30,6 @@ export const chipTheme = defineTheme("chip", {
     },
     standalone: {
       false: { base: "absolute" }
-    },
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
     }
   },
   compoundVariants: [

package/src/components/collapsible/RLACollapsible.astro

@@ -21,7 +21,7 @@ const classes = collapsibleTheme(Astro.props);
         {icon && <span class={icon} />}
         {label}
       </span>
-      <RLAIcon name="chevronDown" class="transition-transform duration-200 group-open:rotate-180" />
+      <RLAIcon name="i-rl-chevronDown" class="transition-transform duration-200 group-open:rotate-180" />
     </slot>
   </summary>
   <div class={classes.content} data-slot="content">

package/src/components/color-area/RLAColorArea.astro

@@ -45,6 +45,7 @@ const initialValue = modelValue || defaultValue
   data-x-channel={xChannel}
   data-y-channel={yChannel}
   data-disabled={disabled ? "true" : "false"}
+  data-theme={theme}
   {...rest}
 >
   <div class={classes.root} data-slot="root">

package/src/components/color-area/color-area.theme.ts

@@ -9,11 +9,7 @@ export const colorAreaTheme = defineTheme("color-area", {
       "absolute block size-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]/50"
   },
   variants: {
-    color: "auto",
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
-    }
+    color: "auto"
   },
   defaultVariants: {
     color: "primary"

package/src/components/color-field/RLAColorField.astro

@@ -51,6 +51,7 @@ const initialValue = modelValue || defaultValue
   data-disable-wheel={disableWheelChange ? "true" : "false"}
   data-readonly={readonly ? "true" : "false"}
   data-step={step}
+  data-theme={theme}
   {...rest}
 >
   <div class={classes.root} data-slot="root">

package/src/components/color-field/color-field.theme.ts

@@ -8,11 +8,7 @@ export const colorFieldTheme = defineTheme("color-field", {
       "w-full bg-transparent border-0 p-0 text-sm focus:outline-none focus:ring-0 text-highlighted placeholder-muted-foreground"
   },
   variants: {
-    color: "auto",
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
-    }
+    color: "auto"
   },
   defaultVariants: {
     color: "primary"

package/src/components/color-slider/RLAColorSlider.astro

@@ -49,6 +49,7 @@ const initialValue = modelValue || defaultValue
   data-orientation={orientation}
   data-inverted={inverted ? "true" : "false"}
   data-step={step}
+  data-theme={theme}
   {...rest}
 >
   <div class={classes.root} data-slot="root" data-orientation={orientation}>

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

@@ -10,11 +10,7 @@ export const colorSliderTheme = defineTheme("color-slider", {
       "absolute block size-5 rounded-full border-2 border-white shadow-md cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]/50"
   },
   variants: {
-    color: "auto",
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
-    }
+    color: "auto"
   },
   defaultVariants: {
     color: "primary"

package/src/components/dashboard-group/RLADashboardGroup.astro

@@ -1,17 +1,15 @@
 ---
 import type { DashboardGroupProps } from "./dashboard-group"
 import { dashboardGroupTheme } from "./dashboard-group.theme"
-
-
 const {
-  as: Tag = "div",
+  as = "div",
+  class: className,
   ...rest
-} = Astro.props as DashboardGroupProps 
-
-
+} = Astro.props as DashboardGroupProps
 
+const Tag = as;
 const classes = dashboardGroupTheme(Astro.props);
 ---
-<Tag class={classes.root} data-slot="root" {...rest}>
+<Tag class:list={[classes.root]} data-slot="root" {...rest}>
   <slot />
 </Tag>

package/src/components/dashboard-group/dashboard-group.theme.ts

@@ -3,7 +3,7 @@ import { defineTheme } from "../../resolver"
 export const dashboardGroupTheme = defineTheme("dashboard-group", {
   slots: ["root"],
   base: {
-    root: "relative w-full h-full min-h-0 flex overflow-hidden"
+    root: "relative w-full h-full min-h-0 flex flex-row overflow-hidden"
   },
   variants: {},
   defaultVariants: {}

package/src/components/dashboard-group/dashboard-group.ts

@@ -1,5 +1,5 @@
 export interface DashboardGroupProps {
-  as?: string
+  as?: any
   ui?: any
   class?: any
   [key: string]: unknown

package/src/components/dashboard-navbar/RLADashboardNavbar.astro

@@ -5,20 +5,20 @@ import RLAIcon from "../icon/RLAIcon.astro"
 
 
 const {
-  as: Tag = "header",
+  as = "header",
   icon,
   title,
   toggle = true,
   toggleSide = "left",
+  class: className,
   ...rest
 } = Astro.props as DashboardNavbarProps 
 
-
-
+const Tag = as;
 const classes = dashboardNavbarTheme(Astro.props);
 ---
 
-<Tag class={classes.root} data-slot="root" {...rest}>
+<Tag class:list={[classes.root]} data-slot="root" style="height: 4rem; min-height: 4rem; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;" {...rest}>
   <div data-slot="left" class={classes.left}>
     {toggle && toggleSide === "left" && (
       <button type="button" data-dashboard-toggle="mobile" class={classes.toggle + " lg:hidden"} data-slot="toggle" aria-label="Toggle sidebar">

package/src/components/dashboard-navbar/dashboard-navbar.theme.ts

@@ -3,10 +3,10 @@ import { defineTheme } from "../../resolver"
 export const dashboardNavbarTheme = defineTheme("dashboard-navbar", {
   slots: ["root", "left", "icon", "title", "center", "right", "toggle"],
   base: {
-    root: "h-(--rl-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5",
-    left: "flex items-center gap-1.5 min-w-0",
+    root: "h-16 min-h-16 shrink-0 flex items-center justify-between border-b border-default px-6 py-4 gap-3",
+    left: "flex items-center gap-3 min-w-0 h-full",
     icon: "shrink-0 size-5 self-center me-1.5",
-    title: "flex items-center gap-1.5 font-semibold text-highlighted truncate",
+    title: "flex items-center gap-2 font-semibold text-highlighted truncate text-lg",
     center: "hidden lg:flex",
     right: "flex items-center shrink-0 gap-1.5",
     toggle: ""

package/src/components/dashboard-navbar/dashboard-navbar.ts

@@ -1,5 +1,5 @@
 export interface DashboardNavbarProps {
-  as?: string
+  as?: any
   icon?: string
   title?: string
   toggle?: boolean

package/src/components/dashboard-panel/RLADashboardPanel.astro

@@ -5,6 +5,7 @@ import { dashboardPanelTheme } from "./dashboard-panel.theme"
 
 const {
   resizable = false,
+  class: className,
   ...rest
 } = Astro.props as DashboardPanelProps
 
@@ -13,16 +14,16 @@ const classes = dashboardPanelTheme({
   size: false
 });
 ---
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot>
-    <slot name="header" />
+<div class={classes.root} data-slot="root" style="flex: 1 1 0%; min-width: 0;" {...rest}>
+  <slot name="header" />
 
-    <div data-slot="body" class={classes.body}>
-      <slot name="body" />
-    </div>
+  <div data-slot="body" class={classes.body}>
+    <slot name="body">
+      <slot />
+    </slot>
+  </div>
 
-    <slot name="footer" />
-  </slot>
+  <slot name="footer" />
 </div>
 
 {resizable && (

package/src/components/dashboard-panel/dashboard-panel.theme.ts

@@ -10,7 +10,7 @@ export const dashboardPanelTheme = defineTheme("dashboard-panel", {
   variants: {
     size: {
       true: {
-        root: "w-full lg:w-(--width)"
+        root: "w-full lg:w-[var(--width,16rem)]"
       },
       false: {
         root: "flex-1"