@rimelight/ui 0.0.42 → 0.0.43

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,20 @@
 ---
-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"
+import { navigationMenuTheme } from "./navigation-menu.theme"
 
 
-const navigationMenu = scv(navigationMenuTheme)
 
 const {
   items = [],
   color = "primary",
-  theme,
   orientation = "horizontal",
-  ui: uiProp,
-  class: className,
   ...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(
@@ -92,11 +87,11 @@ await Promise.all(
                           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"
                         >
-                          {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>

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

@@ -1,44 +1,41 @@
-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"
+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-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-default 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-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 border bg-elevated 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: {
+    theme: {
+      light: { link: "rl-light", trigger: "rl-light" },
+      dark: { link: "rl-dark", trigger: "rl-dark" }
     },
-    variants: {
-      theme: {
-        light: { link: "rl-light", trigger: "rl-light" },
-        dark: { link: "rl-dark", trigger: "rl-dark" }
+    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: {}
+})

package/src/components/page-section/RLAPageSection.astro

@@ -1,20 +1,15 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { PageSectionProps } from "./page-section"
-import pageSectionTheme from "./page-section.theme"
+import { pageSectionTheme } from "./page-section.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 import RLAButton from "../button/RLAButton.astro"
 
 
-const pageSection = scv(pageSectionTheme)
 
 const {
   as = "section",
   variant = "default",
   orientation = "vertical",
-  reverse = false,
   ctaVariant = "solid",
   headline,
   title,
@@ -23,23 +18,21 @@ const {
   links,
   contentVisibility,
   containIntrinsicSize,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as PageSectionProps;
 
 const resolvedVariant = (variant === "default" || variant === "hero" || variant === "cta") ? variant : "default"
 
-const classes = resolveClasses(pageSection, {
+const classes = pageSectionTheme({
+  ...Astro.props,
   variant: resolvedVariant,
-  orientation,
-  reverse,
-  ...(resolvedVariant === "cta" && { ctaVariant }),
+  ...(resolvedVariant === "cta" && { ctaVariant
+}),
   headline: !!(Astro.slots.has("headline") || headline),
   title: !!(Astro.slots.has("title") || title),
   description: !!(Astro.slots.has("description") || description),
-  body: Astro.slots.has("body")
-}, useUi("pageSection", uiProp), className);
+  body: Astro.slots.has("body"),
+});
 
 const hasDefaultSlot = Astro.slots.has("default");
 const hasContentSlot = Astro.slots.has("content");
@@ -50,7 +43,10 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
 
 <Tag
   data-orientation={orientation}
-  class:list={[classes.root, contentVisibility === "auto" && "rla-visibility-aware"]}
+  class:list={[
+    classes.root,
+    contentVisibility === "auto" && "[content-visibility:auto] [contain-intrinsic-size:var(--rla-contain-intrinsic-size,auto_500px)]"
+  ]}
   style={containIntrinsicSize ? `--rla-contain-intrinsic-size: ${containIntrinsicSize};` : undefined}
   {...rest}
 >