@rimelight/ui 0.0.44 → 0.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "private": false,
   "description": "Rimelight Entertainment's UI Package",
   "homepage": "https://rimelight.com/docs",
@@ -26,6 +26,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "astro": "astro",
+    "check": "vp check --fix && astro check"
+  },
   "dependencies": {
     "@unocss/vite": "66.8.1",
     "unocss": "66.8.1"
@@ -35,11 +39,11 @@
     "@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",
+    "@rimelight/config": "workspace:*",
+    "astro": "7.2.9",
     "solid-js": "1.9.15",
     "typescript": "6.0.3",
-    "vue": "3.5.41"
+    "vue": "3.5.42"
   },
   "peerDependencies": {
     "@astrojs/solid-js": ">=7.0.1",
@@ -65,8 +69,5 @@
   "engines": {
     "node": ">=26.7.0"
   },
-  "scripts": {
-    "astro": "astro",
-    "check": "vp check --fix && astro check"
-  }
-}
+  "packageManager": "pnpm@12.0.0"
+}

package/src/components/button/RLSButton.tsx

@@ -75,7 +75,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
       justify: props.justify,
       block: props.block,
       square: props.square !== undefined ? props.square : !props.label && !props.children,
-      rounded: props.rounded,
+      rounded: props.rounded ?? false,
       leading: isLeading(),
       trailing: isTrailing(),
       loading: props.loading,

package/src/components/dashboard-sidebar/RLADashboardSidebar.astro

@@ -15,9 +15,6 @@ const classes = dashboardSidebarTheme({
   ...Astro.props,
   collapsed: collapsible && collapsed
 });
-
-const collapsedWidth = "4rem";
-const defaultWidth = "16rem";
 ---
 
 <div
@@ -26,11 +23,10 @@ const defaultWidth = "16rem";
   data-collapsible={collapsible ? "true" : "false"}
   data-collapsed={collapsible && collapsed ? "true" : "false"}
   data-slot="root"
-  class={classes.root}
+  class:list={[classes.root, className]}
   {...rest}
-  style={`width: ${collapsible && collapsed ? collapsedWidth : defaultWidth}; min-width: ${collapsible && collapsed ? collapsedWidth : defaultWidth}; flex-shrink: 0; --width: ${defaultWidth}; --collapsed-width: ${collapsedWidth}`}
 >
-  <div data-slot="header" class={classes.header} style="height: 4rem; min-height: 4rem; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; box-sizing: border-box;">
+  <div data-slot="header" class={classes.header}>
     <slot name="header" />
   </div>
 
@@ -48,15 +44,15 @@ const defaultWidth = "16rem";
 <div
   data-dashboard-sidebar-mobile
   data-slot="content"
-  class={classes.content + " fixed inset-y-0 left-0 z-50 w-64 bg-default shadow-xl border-e border-default transform -translate-x-full transition-transform duration-300"}
+  class:list={[classes.content, "fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] bg-default shadow-2xl border-e border-default transform -translate-x-full transition-transform duration-300 flex flex-col h-full"]}
 >
-  <div data-slot="header" class={classes.header + " " + "sm:px-6"} data-menu>
+  <div data-slot="header" class:list={[classes.header, "sm:px-6 shrink-0"]} data-menu>
     <slot name="header" />
   </div>
-  <div data-slot="body" class={classes.body + " " + "sm:px-6"} data-menu>
+  <div data-slot="body" class:list={[classes.body, "sm:px-6 overflow-y-auto flex-1"]} data-menu>
     <slot />
   </div>
-  <div data-slot="footer" class={classes.footer + " " + "sm:px-6"} data-menu>
+  <div data-slot="footer" class:list={[classes.footer, "sm:px-6 shrink-0"]} data-menu>
     <slot name="footer" />
   </div>
 </div>
@@ -70,20 +66,34 @@ const defaultWidth = "16rem";
     const mobilePanel = document.querySelector<HTMLElement>('[data-dashboard-sidebar-mobile]');
     const overlay = document.querySelector<HTMLElement>('[data-dashboard-sidebar-overlay]');
 
-    const toggleMobile = () => {
+    const openMobile = () => {
+      if (!mobilePanel || !overlay) return;
+      mobilePanel.classList.remove('-translate-x-full');
+      mobilePanel.classList.add('translate-x-0');
+      overlay.classList.remove('hidden');
+    };
+
+    const closeMobile = () => {
       if (!mobilePanel || !overlay) return;
-      const isOpen = mobilePanel.classList.toggle('translate-x-0');
-      mobilePanel.classList.toggle('-translate-x-full', !isOpen);
-      overlay.classList.toggle('hidden', !isOpen);
+      mobilePanel.classList.add('-translate-x-full');
+      mobilePanel.classList.remove('translate-x-0');
+      overlay.classList.add('hidden');
+    };
+
+    const toggleMobile = () => {
+      if (!mobilePanel) return;
+      if (mobilePanel.classList.contains('translate-x-0')) {
+        closeMobile();
+      } else {
+        openMobile();
+      }
     };
 
     const collapseSidebar = (val?: boolean) => {
       if (!collapsible) return;
       const isCollapsed = val !== undefined ? val : sidebar.dataset.collapsed !== 'true';
-      const w = isCollapsed ? '4rem' : '16rem';
-      sidebar.style.width = w;
-      sidebar.style.minWidth = w;
-      sidebar.style.setProperty('--width', w);
+      sidebar.dataset.collapsed = isCollapsed ? 'true' : 'false';
+      sidebar.setAttribute('data-collapsed', isCollapsed ? 'true' : 'false');
 
       document.querySelectorAll('[data-dashboard-toggle="collapse"]').forEach(btn => {
         btn.querySelectorAll('[data-dashboard-collapse-icon]').forEach(el => {
@@ -92,16 +102,32 @@ const defaultWidth = "16rem";
       });
     };
 
-    document.addEventListener('click', (e: MouseEvent) => {
+    const handleClick = (e: MouseEvent) => {
       const target = e.target as Element | null;
-      const toggle = target?.closest<HTMLElement>('[data-dashboard-toggle]');
+      if (!target) return;
+
+      // Toggle buttons (mobile drawer + collapse)
+      const toggle = target.closest<HTMLElement>('[data-dashboard-toggle]');
       if (toggle) {
         const side = toggle.dataset.dashboardToggle;
         if (side === 'mobile') toggleMobile();
         if (side === 'collapse') collapseSidebar();
+        return;
+      }
+
+      // Backdrop overlay click
+      if (target.closest('[data-dashboard-sidebar-overlay]')) {
+        closeMobile();
+        return;
       }
 
-      const navItem = target?.closest<HTMLElement>('[data-dashboard-nav]');
+      // Close the mobile drawer when clicking a navigation link inside it
+      if (target.closest('[data-dashboard-sidebar-mobile] a')) {
+        closeMobile();
+        return;
+      }
+
+      const navItem = target.closest<HTMLElement>('[data-dashboard-nav]');
       if (navItem) {
         const container = navItem.closest('[data-dashboard-nav-container]');
         if (container) {
@@ -113,10 +139,13 @@ const defaultWidth = "16rem";
           navItem.classList.add('bg-muted', 'text-highlighted');
         }
       }
-    });
+    };
 
-    overlay?.addEventListener('click', toggleMobile);
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeMobile();
+    };
 
-    (window as any).dashboardSidebar = { toggleMobile, collapseSidebar };
+    document.addEventListener('click', handleClick);
+    document.addEventListener('keydown', handleKey);
   })();
 </script>

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

@@ -3,12 +3,12 @@ import { defineTheme } from "../../resolver"
 export const dashboardSidebarTheme = defineTheme("dashboard-sidebar", {
   slots: ["root", "header", "body", "footer", "toggle", "handle", "content", "overlay"],
   base: {
-    root: "group relative flex flex-col h-full min-h-0 min-w-16 w-64 shrink-0 transition-[width] duration-300",
+    root: "group relative hidden lg:flex flex-col h-full min-h-0 shrink-0 transition-[width] duration-300 w-64 min-w-64 max-w-64 data-[collapsed=true]:w-16 data-[collapsed=true]:min-w-16 data-[collapsed=true]:max-w-16 data-[collapsed=true]:overflow-hidden data-[collapsed=false]:w-64 data-[collapsed=false]:min-w-64 data-[collapsed=false]:max-w-64",
     header:
-      "h-16 min-h-16 shrink-0 flex items-center gap-3 px-6 py-4 border-b border-default group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:gap-0 group-data-[collapsed=true]:px-0",
-    body: "flex flex-col gap-1 flex-1 overflow-y-auto px-3 py-3",
+      "h-16 min-h-16 shrink-0 flex items-center gap-3 px-6 py-4 border-b border-default group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:items-center group-data-[collapsed=true]:gap-0 group-data-[collapsed=true]:px-0",
+    body: "flex flex-col gap-1 flex-1 overflow-y-auto px-3 py-3 group-data-[collapsed=true]:items-center group-data-[collapsed=true]:px-0 group-data-[collapsed=true]:overflow-hidden",
     footer:
-      "shrink-0 flex items-center gap-1.5 px-3 py-3 group-data-[collapsed=true]:px-0 border-t border-default/40",
+      "shrink-0 flex items-center gap-1.5 px-3 py-3 border-t border-default/40 group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:items-center group-data-[collapsed=true]:px-0",
     toggle: "",
     handle: "",
     content: "lg:hidden",
@@ -32,7 +32,7 @@ export const dashboardSidebarTheme = defineTheme("dashboard-sidebar", {
     },
     collapsed: {
       true: {
-        root: "w-16 w-[var(--collapsed-width,4rem)] overflow-hidden",
+        root: "w-16 min-w-16 max-w-16 overflow-hidden",
         body: "overflow-hidden"
       }
     }

package/src/components/icon/RLSIcon.tsx

@@ -16,7 +16,7 @@ const RLSIcon: Component<IconProps> = (allProps) => {
   return (
     <span class={classes().root} data-slot="icon" aria-hidden="true" {...rest}>
       {resolved().isClass ? (
-        <span class={`${resolved().content} size-full`} />
+        <span class={`${resolved().content} block size-full`} />
       ) : (
         <span innerHTML={resolved().content} />
       )}

package/src/components/modal/RLAModal.astro

@@ -1,7 +1,7 @@
 ---
 import type { ModalProps } from "./modal"
 import { modalTheme } from "./modal.theme"
-import RLAIcon from "../icon/RLAIcon.astro"
+import RLAButton from "../button/RLAButton.astro"
 
 
 
@@ -49,15 +49,18 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
     data-unmount-on-hide={unmountOnHide ? "true" : "false"}
     {...rest}
   >
-    <button
+    <RLAButton
       class={classes.closeButton}
       data-slot="close-button"
       type="button"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      square
+      leadingIcon="i-rl-close"
       data-dialog-close={modalId}
       aria-label="Close modal"
-    >
-      <RLAIcon name="i-rl-close" class="size-4" aria-hidden="true" />
-    </button>
+    />
 
     <div class={classes.header} data-slot="header">
       {title && <h3 class={classes.title} data-slot="title">{title}</h3>}

package/src/components/modal/RLSModal.tsx

@@ -10,7 +10,7 @@ import {
 } from "solid-js"
 import type { ModalProps } from "./modal"
 import { modalTheme } from "./modal.theme"
-import RLSIcon from "../icon/RLSIcon"
+import RLSButton from "../button/RLSButton"
 
 export interface RLSModalProps extends ModalProps {
   onClose?: () => void
@@ -41,6 +41,7 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
 
   const closeOnClickOutside = () => props.closeOnClickOutside !== false
   const closeOnEscape = () => props.closeOnEscape !== false
+  const unmountOnHide = () => props.unmountOnHide !== false
 
   const handleClose = () => {
     props.onClose?.()
@@ -54,8 +55,8 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
         e.preventDefault()
       } else {
         e.preventDefault()
-        handleClose()
       }
+      handleClose()
     }
     const handleClick = (e: MouseEvent) => {
       // Clicking the ::backdrop means e.target IS the dialog element
@@ -91,24 +92,28 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
   })
 
   return (
-    <Show when={props.open || !props.unmountOnHide}>
+    <Show when={props.open || !unmountOnHide()}>
       <dialog
         ref={(el) => (dialogRef = el)}
-        class={`w-full rounded-xl border border-default bg-default p-6 shadow-xl outline-none flex flex-col max-h-[90vh] overflow-y-auto text-highlighted backdrop:bg-black/60 backdrop:backdrop-blur-sm ${
-          resolvedClasses().content || ""
-        }  ${props.class || ""}`}
+        class={`w-[calc(100%-1.5rem)] sm:w-full rounded-xl border border-default bg-default p-5 sm:p-6 shadow-xl outline-none flex flex-col max-h-[calc(100dvh-1.5rem)] sm:max-h-[90vh] overflow-y-auto text-highlighted backdrop:bg-black/60 backdrop:backdrop-blur-sm ${
+          props.open ? "" : "hidden"
+        } ${resolvedClasses().content || ""}  ${props.class || ""}`}
+        data-state={props.open ? "open" : "closed"}
         data-slot="content"
         {...rest}
       >
-        <button
+        <RLSButton
           type="button"
-          class="absolute right-4 top-4 rounded-md p-1 text-muted hover:text-highlighted hover:bg-neutral-100 dark:hover:bg-neutral-800 transition cursor-pointer border-none bg-transparent"
-          data-slot="close-button"
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          square
+          leadingIcon="close"
           aria-label="Close modal"
+          data-slot="close-button"
+          class="absolute right-4 top-4 text-muted hover:text-highlighted"
           onClick={handleClose}
-        >
-          <RLSIcon name="close" size="sm" aria-hidden="true" />
-        </button>
+        />
 
         {props.title || props.description || props.titleSlot || props.descriptionSlot ? (
           <div class={resolvedClasses().header || "mb-4"} data-slot="header">

package/src/components/modal/modal.theme.ts

@@ -17,8 +17,9 @@ export const modalTheme = defineTheme("modal", {
     trigger: "",
     backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
     content: [
-      "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-default",
-      "bg-default p-6 shadow-xl transition-all duration-300 outline-none",
+      "fixed left-1/2 top-1/2 z-50 w-[calc(100%-1.5rem)] sm:w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-default",
+      "bg-default p-5 sm:p-6 shadow-xl transition-all duration-300 outline-none",
+      "max-h-[calc(100dvh-1.5rem)] sm:max-h-[90vh] overflow-y-auto",
       "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
     ],
@@ -27,8 +28,8 @@ export const modalTheme = defineTheme("modal", {
     description: "text-sm text-muted leading-relaxed",
     footer: "flex flex-col-reverse 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",
-      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+      "absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100",
+      "focus:outline-none"
     ]
   },
   variants: {

package/LICENSE

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