@rimelight/ui 0.0.42 → 0.0.44

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

@@ -1,171 +1,125 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createBadgeTheme = (colors: readonly string[] = colorConfig.colors) => {
-  const colorVariants: Record<string, { root: string }> = { neutral: { root: "" } }
-  for (const c of colors) {
-    colorVariants[c] = { root: "" }
-  }
-
-  return defineTheme({
-    slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
-    base: {
-      root: "font-medium inline-flex items-center gap-1.5 transition-all duration-150 select-none",
-      label: "truncate",
-      leadingIcon: "shrink-0",
-      leadingAvatar: "shrink-0",
-      leadingAvatarSize: "",
-      trailingIcon: "shrink-0"
-    },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" }
-      },
-      color: colorVariants,
-      size: {
-        xs: {
-          root: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm",
-          leadingIcon: "size-3",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-3"
-        },
-        sm: {
-          root: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm",
-          leadingIcon: "size-3",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-3"
-        },
-        md: {
-          root: "text-xs px-2 py-1 gap-1 rounded-md",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-4"
-        },
-        lg: {
-          root: "text-sm px-2 py-1 gap-1.5 rounded-md",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-5"
-        },
-        xl: {
-          root: "text-base px-2.5 py-1 gap-1.5 rounded-md",
-          leadingIcon: "size-6",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-6"
-        }
-      },
-      shape: {
-        square: { root: "rounded-sm" },
-        rounded: { root: "rounded-md" },
-        pill: { root: "rounded-full" }
-      },
-      square: {
-        true: { root: "" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
+export const badgeTheme = defineTheme("badge", {
+  slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
+  base: {
+    root: "font-medium inline-flex items-center gap-1.5 transition-all duration-150 select-none",
+    label: "truncate",
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    trailingIcon: "shrink-0"
+  },
+  variants: {
+    variant: {
+      solid: { root: "bg-[var(--rl-bg)] text-white" },
+      outline: { root: "text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/50" },
+      soft: { root: "bg-[var(--rl-bg)]/10 text-[var(--rl-text)]" },
+      subtle: {
+        root: "bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
       }
     },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/50"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: {
-          root: "text-inverted bg-inverted"
-        }
+    color: "auto",
+    size: {
+      xs: {
+        root: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm",
+        leadingIcon: "size-3",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-3"
       },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-default"
-        }
+      sm: {
+        root: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm",
+        leadingIcon: "size-3",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-3"
       },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: {
-          root: "text-default bg-elevated"
-        }
+      md: {
+        root: "text-xs px-2 py-1 gap-1 rounded-md",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-4"
       },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-elevated"
-        }
+      lg: {
+        root: "text-sm px-2 py-1 gap-1.5 rounded-md",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-5"
       },
-      {
-        size: "xs",
-        square: true,
-        classNames: { root: "p-0.5" }
-      },
-      {
-        size: "sm",
-        square: true,
-        classNames: { root: "p-1" }
-      },
-      {
-        size: "md",
-        square: true,
-        classNames: { root: "p-1" }
-      },
-      {
-        size: "lg",
-        square: true,
-        classNames: { root: "p-1" }
-      },
-      {
-        size: "xl",
-        square: true,
-        classNames: { root: "p-1" }
+      xl: {
+        root: "text-base px-2.5 py-1 gap-1.5 rounded-md",
+        leadingIcon: "size-6",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-6"
       }
-    ],
-    defaultVariants: {
+    },
+    shape: {
+      square: { root: "rounded-sm" },
+      rounded: { root: "rounded-md" },
+      pill: { root: "rounded-full" }
+    },
+    square: {
+      true: { root: "" }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
       variant: "solid",
-      color: "primary",
+      classNames: {
+        root: "text-inverted bg-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      classNames: {
+        root: "ring ring-inset ring-accented text-default bg-default"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      classNames: {
+        root: "text-default bg-elevated"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "subtle",
+      classNames: {
+        root: "ring ring-inset ring-accented text-default bg-elevated"
+      }
+    },
+    {
+      size: "xs",
+      square: true,
+      classNames: { root: "p-0.5" }
+    },
+    {
+      size: "sm",
+      square: true,
+      classNames: { root: "p-1" }
+    },
+    {
       size: "md",
-      shape: "pill"
+      square: true,
+      classNames: { root: "p-1" }
+    },
+    {
+      size: "lg",
+      square: true,
+      classNames: { root: "p-1" }
+    },
+    {
+      size: "xl",
+      square: true,
+      classNames: { root: "p-1" }
     }
-  })
-}
-
-export default createBadgeTheme()
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    shape: "pill"
+  }
+})

package/src/components/badge/badge.ts

@@ -1,6 +1,7 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface BadgeProps {
+  label?: string
   /**
    * Visual style variant.
    */

package/src/components/banner/RLABanner.astro

@@ -1,13 +1,9 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
+import HeaderLayer from "../header/HeaderLayer.astro"
 import type { BannerProps } from "./banner"
-import bannerTheme from "./banner.theme"
+import { bannerTheme } from "./banner.theme"
 
 
-const banner = scv(bannerTheme)
-
 const {
   contain = true,
   sticky = false,
@@ -17,120 +13,109 @@ const {
   dismissable = false,
   dismissId,
   actions = [],
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as BannerProps
 
-const classes = resolveClasses(banner, {
-  contain,
-  sticky: fixed ? false : sticky,
-  fixed,
-}, useUi("banner", uiProp), className);
+const classes = bannerTheme({
+  ...Astro.props,
+  sticky: fixed ? false : sticky
+})
 
-const bannerId = `rla-banner-${Math.random().toString(36).slice(2, 8)}`;
-const storageKey = dismissId || bannerId;
-const zIndex = 200 - stackIndex;
+const bannerId = (rest.id as string) || `rla-banner-${Math.random().toString(36).slice(2, 8)}`
+const storageKey = dismissId || bannerId
 ---
 
-<div
+<HeaderLayer
+  as="div"
   id={bannerId}
-  data-slot="root"
-  class:list={[classes.root]}
-  data-rla-banner="true"
-  data-stack-index={stackIndex}
-  data-hide-on-scroll={String(hideOnScroll)}
-  data-header-layer-id={bannerId}
-  data-layer-type="banner"
+  layerType="banner"
+  componentName="banner"
+  theme={bannerTheme}
+  contain={contain}
+  sticky={sticky}
+  fixed={fixed}
+  stackIndex={stackIndex}
+  hideOnScroll={hideOnScroll}
   data-dismiss-key={`rl-banner-dismiss-${storageKey}`}
   {...rest}
 >
-  <div class:list={[classes.content]} data-header-content>
-    <div class:list={[classes.container]}>
-      <div class:list={[classes.left, "actions-open-hidden"]} data-slot="left">
-        <slot name="left" />
-      </div>
-      <div class:list={[classes.center, "actions-open-hidden"]} data-slot="center">
-        <slot name="center">
-          <slot />
-        </slot>
-      </div>
+  {actions.length > 0 && (
+    <input
+      type="checkbox"
+      id={`${bannerId}-act`}
+      class="peer sr-only shrink-0"
+    />
+  )}
 
-      {actions.length > 0 && (
-        <input
-          type="checkbox"
-          id={`${bannerId}-act`}
-          class="peer sr-only shrink-0"
-        />
-      )}
+  <div class:list={[classes.left, "peer-checked:hidden"]} data-slot="left">
+    <slot name="left" />
+  </div>
+  <div class:list={[classes.center, "peer-checked:hidden"]} data-slot="center">
+    <slot name="center">
+      <slot />
+    </slot>
+  </div>
 
-      <div class="flex-1"></div>
+  <div class="flex-1"></div>
 
-      <div class:list={[classes.side]}>
-        <slot name="right" />
-      </div>
+  <div class:list={[classes.side]}>
+    <slot name="right" />
+  </div>
 
-      {actions.length > 0 && (
-        <label
-          for={`${bannerId}-act`}
-          class="flex-none flex items-center justify-center size-7 rounded-md hover:bg-black/10 dark:hover:bg-white/10 cursor-pointer md:hidden text-sm leading-none peer-checked:order-first"
-          aria-label="Show actions"
-        >···</label>
-      )}
+  {actions.length > 0 && (
+    <label
+      for={`${bannerId}-act`}
+      class="flex-none flex items-center justify-center size-7 rounded-md hover:bg-black/10 dark:hover:bg-white/10 cursor-pointer md:hidden text-sm leading-none peer-checked:order-first"
+      aria-label="Show actions"
+    >···</label>
+  )}
 
-      {actions.length > 0 && (
-        <div
+  {actions.length > 0 && (
+    <div
+      class:list={[
+        classes.actions,
+        "hidden peer-checked:flex md:flex flex-row items-center justify-center gap-2 peer-checked:order-first"
+      ]}
+    >
+      {actions.map((action) => (
+        <a
+          href={action.href || "#"}
           class:list={[
-            classes.actions,
-            "hidden peer-checked:flex md:flex flex-row items-center justify-center gap-2 peer-checked:order-first"
+            "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-neutral-950 text-neutral-50 hover:opacity-90"
+              : "bg-white/20 text-white hover:bg-white/30",
+            action.class
           ]}
+          data-banner-action
         >
-          {actions.map((action) => (
-            <a
-              href={action.href || "#"}
-              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-white/20 text-white hover:bg-white/30",
-                action.class
-              ]}
-              data-banner-action
-            >
-              {action.label}
-            </a>
-          ))}
-        </div>
-      )}
-
-      {dismissable && (
-        <button
-          class:list={[classes.dismiss]}
-          data-banner-close
-          aria-label="Close banner"
-          type="button"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
-        </button>
-      )}
+          {action.label}
+        </a>
+      ))}
     </div>
-  </div>
-</div>
+  )}
 
-<style is:inline set:html={`
-  ${actions.length > 0 ? `#${bannerId}:has(#${bannerId}-act:checked) .actions-open-hidden { display: none !important; }` : ''}
-  ${fixed ? `#${bannerId} { z-index: ${zIndex} !important; }` : ''}
-`} />
+  {dismissable && (
+    <button
+      class:list={[classes.dismiss]}
+      data-banner-close
+      aria-label="Close banner"
+      type="button"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </button>
+  )}
+</HeaderLayer>

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

@@ -1,49 +1,46 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createBannerTheme = () =>
-  defineTheme({
-    slots: ["root", "content", "container", "center", "left", "side", "actions", "dismiss"],
-    base: {
-      root: "w-full",
-      content: "w-full",
-      container:
-        "relative flex flex-row items-center min-h-12 md:h-14 px-xs sm:px-md md:px-xl lg:px-xl text-sm gap-2",
-      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",
-      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"
-    },
-    variants: {
-      contain: {
-        true: {
-          container: "mx-auto max-w-90rem"
-        },
-        false: {
-          container: "max-w-none"
-        }
+export const bannerTheme = defineTheme("banner", {
+  slots: ["root", "content", "container", "center", "left", "side", "actions", "dismiss"],
+  base: {
+    root: "w-full",
+    content: "w-full",
+    container:
+      "relative flex flex-row items-center min-h-12 md:h-14 px-xs sm:px-md md:px-xl lg:px-xl text-sm gap-2",
+    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-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"
+  },
+  variants: {
+    contain: {
+      true: {
+        container: "mx-auto max-w-90rem"
       },
-      sticky: {
-        true: {
-          root: "sticky top-0 inset-x-0 z-50"
-        },
-        false: {
-          root: ""
-        }
+      false: {
+        container: "max-w-none"
+      }
+    },
+    sticky: {
+      true: {
+        root: "sticky top-0 inset-x-0 z-50"
       },
-      fixed: {
-        true: {
-          root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
-        },
-        false: {}
+      false: {
+        root: ""
       }
     },
-    defaultVariants: {
-      contain: true,
-      sticky: false,
-      fixed: true
+    fixed: {
+      true: {
+        root: "fixed left-0 right-0 z-50 transition-[top,opacity] duration-200 ease-in-out"
+      },
+      false: {}
     }
-  })
-
-export default createBannerTheme()
+  },
+  defaultVariants: {
+    contain: true,
+    sticky: false,
+    fixed: true
+  }
+})