@rimelight/ui 0.0.42 → 0.0.44

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

@@ -1,49 +1,45 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createModalTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: [
-      "root",
-      "trigger",
-      "backdrop",
-      "content",
-      "header",
-      "title",
-      "description",
-      "footer",
-      "closeButton"
+export const modalTheme = defineTheme("modal", {
+  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 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",
+      "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"
     ],
-    base: {
-      root: "relative inline-block",
-      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-border",
-        "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
-        "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"
-      ],
-      header: "flex flex-col gap-1.5 text-center sm:text-left 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-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"
-      ]
-    },
-    variants: {
-      size: {
-        sm: { content: "max-w-sm" },
-        md: { content: "max-w-lg" },
-        lg: { content: "max-w-2xl" },
-        xl: { content: "max-w-4xl" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
+    header: "flex flex-col gap-1.5 text-center sm:text-left mb-4",
+    title: "text-lg font-semibold leading-none tracking-tight text-highlighted",
+    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"
+    ]
+  },
+  variants: {
+    size: {
+      sm: { content: "max-w-sm" },
+      md: { content: "max-w-lg" },
+      lg: { content: "max-w-2xl" },
+      xl: { content: "max-w-4xl" }
     }
-  })
-
-export default createModalTheme()
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})

package/src/components/modal/modal.ts

@@ -1,4 +1,5 @@
 export interface ModalProps {
+  size?: "sm" | "md" | "lg" | "xl"
   /**
    * Controlled open state.
    */

package/src/components/navigation-menu/RLANavigationMenu.astro

@@ -1,25 +1,17 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import RLAIcon from "../icon/RLAIcon.astro"
 import type { NavigationMenuProps } from "./navigation-menu"
-import navigationMenuTheme from "./navigation-menu.theme"
-
-
-const navigationMenu = scv(navigationMenuTheme)
+import { navigationMenuTheme } from "./navigation-menu.theme"
 
 const {
   items = [],
   color = "primary",
-  theme,
   orientation = "horizontal",
-  ui: uiProp,
-  class: className,
+  theme,
   ...rest
-} = Astro.props as NavigationMenuProps & { theme?: string }
+} = Astro.props as NavigationMenuProps
 
-const classes = resolveClasses(navigationMenu, { theme: theme as "dark", orientation }, useUi("navigationMenu", uiProp), className)
+const classes = navigationMenuTheme(Astro.props)
 
 const slotContents: Record<string, string> = {}
 await Promise.all(
@@ -31,22 +23,22 @@ await Promise.all(
 )
 ---
 
-<rla-navigation-menu orientation={orientation} {...rest}>
+<rla-navigation-menu orientation={orientation} data-theme={theme} {...rest}>
   <nav class={classes.root} data-slot="root" data-nav-menu data-orientation={orientation}>
     <ul class={classes.list} data-slot="list" role="list">
       {items.map((item, i) => {
         const hasChildren = item.children && item.children.length > 0
-        
+
         const itemPath = (item.href ?? item.to ?? "#") as string
         const normalizedPath = itemPath.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
         const currentPath = Astro.url.pathname.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
-        
+
         const isActive = item.active ?? (
-          normalizedPath !== '' && normalizedPath !== '/' 
+          normalizedPath !== '' && normalizedPath !== '/'
             ? currentPath.startsWith(normalizedPath)
             : currentPath === '/'
         )
-        
+
         return (
           <li class={classes.item} data-slot="item" data-nav-item data-index={i}>
             {hasChildren ? (
@@ -60,7 +52,7 @@ await Promise.all(
               >
                 {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
                 {item.label}
-                <RLAIcon name="chevronDown" class="ml-1 size-3.5 transition-transform duration-200" aria-hidden="true" data-chevron />
+                <RLAIcon name="i-rl-chevronDown" class="ml-1 size-3.5 transition-transform duration-200" aria-hidden="true" data-chevron />
               </button>
             ) : (
               <a
@@ -75,10 +67,10 @@ await Promise.all(
             )}
 
             {hasChildren && (
-              <div 
-                class={classes.content + " hidden"} 
-                data-slot="content" 
-                data-nav-content 
+              <div
+                class={classes.content + " hidden"}
+                data-slot="content"
+                data-nav-content
                 data-item-index={i}
                 role="region"
               >
@@ -90,13 +82,13 @@ await Promise.all(
                       <li>
                         <a
                           href={typeof child.href === "string" ? child.href : (typeof child.to === "string" ? child.to : "#")}
-                          class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                          class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accented hover:text-highlighted transition-colors"
                         >
-                          {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted-foreground"} />}
+                          {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted"} />}
                           <div>
                             <div class="font-medium leading-none">{child.label}</div>
                             {child.description && (
-                              <p class="mt-1 text-xs text-muted-foreground line-clamp-2">{child.description}</p>
+                              <p class="mt-1 text-xs text-muted line-clamp-2">{child.description}</p>
                             )}
                           </div>
                         </a>
@@ -156,7 +148,7 @@ await Promise.all(
 
       const open = (item: HTMLElement, trigger: HTMLElement, content: HTMLElement) => {
         clearTimeout(hoverTimeout);
-        
+
         if (orientation === "horizontal" && activeItem && activeItem !== item) {
           close(activeItem);
         }
@@ -187,7 +179,7 @@ await Promise.all(
       const close = (item: HTMLElement) => {
         const trigger = item.querySelector("[data-nav-trigger]") as HTMLElement | null;
         const itemIndex = item.getAttribute("data-index");
-        
+
         let content = item.querySelector("[data-nav-content]") as HTMLElement | null;
         if (!content && viewport) {
           content = viewport.querySelector(`[data-nav-content][data-item-index="${itemIndex}"]`) as HTMLElement | null;
@@ -334,7 +326,7 @@ await Promise.all(
     outline: none !important;
     outline-width: 0px !important;
     outline-color: transparent !important;
-    
+
     /* Wiping out any UnoCSS/Tailwind rings on the viewport container */
     --un-ring-width: 0px !important;
     --tw-ring-width: 0px !important;
@@ -346,7 +338,7 @@ await Promise.all(
     --tw-ring-shadow: none !important;
     --un-ring-offset-shadow: none !important;
     --tw-ring-offset-shadow: none !important;
-    
+
     /* Premium card shadow */
     box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.35), 0 8px 10px -6px rgb(0 0 0 / 0.35) !important; /* Premium shadow-xl */
   }
@@ -361,8 +353,7 @@ await Promise.all(
     border-width: 0px !important;
     box-shadow: none !important;
     padding: 0 !important;
-    background: transparent !important;
-    
+
     /* Wiping out any UnoCSS/Tailwind rings on content */
     --un-ring-width: 0px !important;
     --tw-ring-width: 0px !important;

package/src/components/navigation-menu/navigation-menu.theme.ts

@@ -1,44 +1,37 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createNavigationMenuTheme = () =>
-  defineTheme({
-    slots: ["root", "list", "item", "link", "trigger", "content", "viewport", "viewportWrapper"],
-    base: {
-      root: "relative z-10 flex w-full",
-      list: "group flex flex-1 list-none",
-      item: "relative",
-      link: "text-foreground inline-flex items-center px-4 py-2 text-sm font-medium transition-colors hover:text-accent-foreground focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
-      trigger:
-        "group inline-flex h-10 items-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 gap-1",
-      content:
-        "absolute left-0 top-full z-50 mt-1.5 w-56 rounded-md border bg-popover p-1 text-popover-foreground shadow-md origin-top-left",
-      viewportWrapper: "absolute left-0 top-full flex justify-center w-full",
-      viewport:
-        "relative mt-1.5 h-auto w-full origin-top overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
-    },
-    variants: {
-      theme: {
-        light: { link: "rl-light", trigger: "rl-light" },
-        dark: { link: "rl-dark", trigger: "rl-dark" }
+export const navigationMenuTheme = defineTheme("navigation-menu", {
+  slots: ["root", "list", "item", "link", "trigger", "content", "viewport", "viewportWrapper"],
+  base: {
+    root: "relative z-10 flex w-full",
+    list: "group flex flex-1 list-none",
+    item: "relative",
+    link: "text-highlighted inline-flex items-center px-4 py-2 text-sm font-medium transition-colors hover:text-highlighted focus:text-highlighted focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+    trigger:
+      "group inline-flex h-10 items-center rounded-md bg-default px-4 py-2 text-sm font-medium transition-colors hover:bg-accented hover:text-highlighted focus:bg-accented focus:text-highlighted focus:outline-none disabled:pointer-events-none disabled:opacity-50 gap-1",
+    content:
+      "absolute left-0 top-full z-50 mt-1.5 w-56 rounded-md border bg-elevated p-1 text-highlighted shadow-md origin-top-left",
+    viewportWrapper: "absolute left-0 top-full flex justify-center w-full",
+    viewport:
+      "relative mt-1.5 h-auto w-full origin-top overflow-hidden rounded-md bg-default text-highlighted shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "max-w-max flex-1 items-center justify-center",
+        list: "items-center justify-center space-x-1",
+        link: "justify-center w-max",
+        trigger: "w-max"
       },
-      orientation: {
-        horizontal: {
-          root: "max-w-max flex-1 items-center justify-center",
-          list: "items-center justify-center space-x-1",
-          link: "justify-center w-max",
-          trigger: "w-max"
-        },
-        vertical: {
-          root: "flex-col w-full items-stretch justify-start",
-          list: "flex-col flex-1 items-stretch justify-start space-y-2 w-full",
-          link: "justify-start w-full px-4 py-2 text-lg",
-          trigger: "justify-start w-full h-10 px-4 py-2 text-lg"
-        }
+      vertical: {
+        root: "flex-col w-full items-stretch justify-start",
+        list: "flex-col flex-1 items-stretch justify-start space-y-2 w-full",
+        link: "justify-start w-full px-4 py-2 text-lg",
+        trigger: "justify-start w-full h-10 px-4 py-2 text-lg"
       }
-    },
-    defaultVariants: {
-      orientation: "horizontal"
     }
-  })
-
-export default createNavigationMenuTheme()
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+})

package/src/components/navigation-menu/navigation-menu.ts

@@ -1,23 +1,23 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 import type { LinkProps } from "../link/link"
 
 export interface NavigationMenuItem extends Omit<LinkProps, "type" | "raw" | "custom"> {
-  label?: string
-  icon?: string
-  badge?: string | number
-  avatar?: Record<string, any>
-  chip?: boolean | Record<string, any>
-  tooltip?: boolean | string | Record<string, any>
-  popover?: boolean | Record<string, any>
-  trailingIcon?: string
-  type?: "label" | "trigger" | "link"
-  slot?: string
-  value?: string
-  children?: NavigationMenuChildItem[]
-  defaultOpen?: boolean
-  open?: boolean
-  onSelect?: (e: Event) => void
-  click?: (event: MouseEvent) => void
+  label?: string | undefined
+  icon?: string | undefined
+  badge?: string | number | undefined
+  avatar?: Record<string, any> | undefined
+  chip?: boolean | Record<string, any> | undefined
+  tooltip?: boolean | string | Record<string, any> | undefined
+  popover?: boolean | Record<string, any> | undefined
+  trailingIcon?: string | undefined
+  type?: "label" | "trigger" | "link" | undefined
+  slot?: string | undefined
+  value?: string | undefined
+  children?: NavigationMenuChildItem[] | undefined
+  defaultOpen?: boolean | undefined
+  open?: boolean | undefined
+  onSelect?: ((e: Event) => void) | undefined
+  click?: ((event: MouseEvent) => void) | undefined
   /**
    * Slot-specific CSS class overrides.
    */
@@ -30,11 +30,12 @@ export interface NavigationMenuItem extends Omit<LinkProps, "type" | "raw" | "cu
 }
 
 export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, "type" | "ui"> {
-  description?: string
+  description?: string | undefined
   [key: string]: any
 }
 
 export interface NavigationMenuProps {
+  theme?: string
   /**
    * Main menu navigation links.
    */

package/src/components/page/RLAPage.astro

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

package/src/components/page/page.theme.ts

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

package/src/components/page-aside/RLAPageAside.astro

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

package/src/components/page-aside/page-aside.theme.ts

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

package/src/components/page-body/RLAPageBody.astro

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

package/src/components/page-body/page-body.theme.ts

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

package/src/components/page-header/RLAPageHeader.astro

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

package/src/components/page-header/page-header.theme.ts

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