@rimelight/ui 0.0.42 → 0.0.44

package/src/components/avatar/avatar.theme.ts

@@ -1,84 +1,73 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createAvatarTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "image", "fallback", "icon", "badge"],
-    base: {
-      root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative",
-      image: "h-full w-full rounded-[inherit] object-cover",
-      fallback: "font-medium truncate",
-      icon: "shrink-0",
-      badge: "absolute rounded-full ring-2 ring-bg"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(
-          colors.map((color) => [
-            color,
-            {
-              root: `bg-${color}/10`,
-              fallback: `text-${color}`,
-              icon: `text-${color}`
-            }
-          ])
-        ),
-        neutral: {
-          root: "bg-elevated",
-          fallback: "text-foreground",
-          icon: "text-muted"
-        }
+export const avatarTheme = defineTheme("avatar", {
+  slots: ["root", "image", "fallback", "icon", "badge"],
+  base: {
+    root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative bg-[var(--rl-bg)]/10 text-[var(--rl-text)]",
+    image: "h-full w-full rounded-[inherit] object-cover",
+    fallback: "font-medium truncate text-inherit",
+    icon: "shrink-0 text-inherit",
+    badge: "absolute rounded-full ring-2 ring-bg"
+  },
+  variants: {
+    color: "auto",
+    size: {
+      "3xs": {
+        root: "size-4 text-[8px]",
+        badge: "size-1.5"
+      },
+      "2xs": {
+        root: "size-5 text-[10px]",
+        badge: "size-2"
+      },
+      "xs": {
+        root: "size-6 text-xs",
+        badge: "size-2"
+      },
+      "sm": {
+        root: "size-7 text-sm",
+        badge: "size-2.5"
+      },
+      "md": {
+        root: "size-8 text-base",
+        badge: "size-3"
       },
-      size: {
-        "3xs": {
-          root: "size-4 text-[8px]",
-          badge: "size-1.5"
-        },
-        "2xs": {
-          root: "size-5 text-[10px]",
-          badge: "size-2"
-        },
-        "xs": {
-          root: "size-6 text-xs",
-          badge: "size-2"
-        },
-        "sm": {
-          root: "size-7 text-sm",
-          badge: "size-2.5"
-        },
-        "md": {
-          root: "size-8 text-base",
-          badge: "size-3"
-        },
-        "lg": {
-          root: "size-9 text-lg",
-          badge: "size-3"
-        },
-        "xl": {
-          root: "size-10 text-xl",
-          badge: "size-3.5"
-        },
-        "2xl": {
-          root: "size-11 text-[22px]",
-          badge: "size-4"
-        },
-        "3xl": {
-          root: "size-12 text-2xl",
-          badge: "size-4"
-        }
+      "lg": {
+        root: "size-9 text-lg",
+        badge: "size-3"
       },
-      badgePosition: {
-        "top-right": { badge: "top-0 right-0" },
-        "bottom-right": { badge: "bottom-0 right-0" },
-        "top-left": { badge: "top-0 left-0" },
-        "bottom-left": { badge: "bottom-0 left-0" }
+      "xl": {
+        root: "size-10 text-xl",
+        badge: "size-3.5"
+      },
+      "2xl": {
+        root: "size-11 text-[22px]",
+        badge: "size-4"
+      },
+      "3xl": {
+        root: "size-12 text-2xl",
+        badge: "size-4"
       }
     },
-    defaultVariants: {
-      size: "md",
+    badgePosition: {
+      "top-right": { badge: "top-0 right-0" },
+      "bottom-right": { badge: "bottom-0 right-0" },
+      "top-left": { badge: "top-0 left-0" },
+      "bottom-left": { badge: "bottom-0 left-0" }
+    }
+  },
+  compoundVariants: [
+    {
       color: "neutral",
-      badgePosition: "bottom-right"
+      classNames: {
+        root: "bg-elevated text-highlighted",
+        icon: "text-muted"
+      }
     }
-  })
-
-export default createAvatarTheme()
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "neutral",
+    badgePosition: "bottom-right"
+  }
+})

package/src/components/avatar/avatar.ts

@@ -1,3 +1,4 @@
+import type { ThemeColor } from "../../types"
 import type { ChipProps } from "../chip/chip"
 
 export interface AvatarProps {
@@ -11,6 +12,7 @@ export interface AvatarProps {
   alt?: string
   icon?: any
   text?: string
+  fallback?: string
   /**
    * @default "md"
    */
@@ -18,18 +20,11 @@ export interface AvatarProps {
   /**
    * @default "neutral"
    */
-  color?:
-    | "neutral"
-    | "primary"
-    | "secondary"
-    | "info"
-    | "success"
-    | "warning"
-    | "error"
-    | "commentary"
-    | "ideation"
-    | "source"
+  color?: ThemeColor
   chip?: boolean | ChipProps
+  badge?: boolean | string | number
+  badgeColor?: string
+  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
   loading?: "lazy" | "eager"
   referrerpolicy?:
     | ""

package/src/components/avatar-group/RLAAvatarGroup.astro

@@ -1,23 +1,188 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { AvatarGroupProps } from "./avatar-group"
-import { resolveTheme } from "../../utils/resolveTheme"
-import avatarGroupThemeDefault, { createAvatarGroupTheme } from "./avatar-group.theme"
-const avatarGroupTheme = resolveTheme(avatarGroupThemeDefault, createAvatarGroupTheme)
-
-
-const avatarGroup = scv(avatarGroupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AvatarGroupProps
-
-const classes = resolveClasses(avatarGroup, {}, useUi("avatarGroup", uiProp), className)
----
-<div class={classes.root} data-slot="avatar-group" {...rest}>
-  <slot />
-</div>
+---
+import type { AvatarGroupProps } from "./avatar-group"
+import { avatarGroupTheme } from "./avatar-group.theme"
+import RLAAvatar from "../avatar/RLAAvatar.astro"
+
+
+
+const {
+  items,
+  displayLimit = 5,
+  size = "md",
+  ...rest
+} = Astro.props as AvatarGroupProps
+
+const classes = avatarGroupTheme(Astro.props)
+
+// ─── Responsive CSS Item Counter ────────────────────────────────────────────
+//
+// Technique: CSS Container Queries + Custom Properties + CSS Counters.
+//
+// 1. Server-side: compute baseHiddenCount = max(0, total - displayLimit).
+//    Set --base-hidden on the list element.
+// 2. Per-instance container queries: as the container shrinks, each breakpoint
+//    hides one more avatar (nth-child) and bumps --hidden-items.
+// 3. CSS counter: "+N more" = counter-reset: calc(--base-hidden + --hidden-items).
+//    Entirely CSS arithmetic — zero JS resize observers.
+//
+// ─────────────────────────────────────────────────────────────────────────────
+
+const uid = Math.random().toString(36).substring(2, 9)
+const cName = `rla-ag-${uid}` // unique CSS container-name
+
+// Avatar pixel sizes (matching avatar.theme.ts size variants)
+const sizePx: Record<string, number> = {
+  "3xs": 16, "2xs": 20, "xs": 24, "sm": 28,
+  "md": 32, "lg": 36, "xl": 40, "2xl": 44, "3xl": 48
+}
+// UnoCSS utility classes for the "+more" bubble sized to match the avatar
+const sizeCls: Record<string, string> = {
+  "3xs": "size-4 text-[7px]", "2xs": "size-5 text-[8px]",
+  "xs": "size-6 text-[9px]",  "sm": "size-7 text-[10px]",
+  "md": "size-8 text-[11px]", "lg": "size-9 text-xs",
+  "xl": "size-10 text-xs",   "2xl": "size-11 text-sm", "3xl": "size-12 text-sm"
+}
+
+const avatarPx      = sizePx[size] ?? 32
+const overlapPx     = 12                      // -space-x-3 = -0.75rem = 12px
+const effectivePx   = avatarPx - overlapPx    // width each extra avatar adds
+const morePx        = avatarPx + 4            // "+more" bubble ~= avatar with tiny padding
+
+const normalizedItems = items ?? []
+const renderedItems   = normalizedItems.slice(0, displayLimit)
+const baseHiddenCount = Math.max(0, normalizedItems.length - displayLimit)
+
+// We need an overflow indicator when total ≥ displayLimit so that even when
+// base-hidden is 0, CSS breakpoints can still surface the "+N more" bubble.
+const needsOverflow = normalizedItems.length >= displayLimit
+
+// ── Generate per-instance container-query CSS ────────────────────────────────
+// Each breakpoint hides exactly ONE new nth-child (CSS cascade accumulates them).
+//
+// Breakpoint i (0-indexed):
+//   hiddenItems = i + 1            → value set on --hidden-items
+//   visibleCount = rendered - hiddenItems → avatars still showing
+//   maxWidth = width of visibleCount avatars + more bubble
+//   hideNthChild = rendered - i    → the avatar position to newly hide
+//
+// At container width W:
+//   every breakpoint with maxWidth ≥ W matches.
+//   Each matching rule adds one hidden nth-child and raises --hidden-items.
+//   The LAST matching rule's --hidden-items wins (correct, since smaller
+//   containers match more rules and the last has the highest count).
+// ─────────────────────────────────────────────────────────────────────────────
+let instanceCss = ""
+if (needsOverflow && renderedItems.length > 1) {
+  const maxBreaks = renderedItems.length - 1 // keep at least 1 avatar always
+  for (let i = 0; i < maxBreaks; i++) {
+    const hiddenItems  = i + 1
+    const visibleCount = renderedItems.length - hiddenItems
+    // Min container width for this many avatars + the more bubble
+    const maxWidth     = avatarPx + Math.max(0, visibleCount - 1) * effectivePx + morePx + 4
+    const hideNthChild = renderedItems.length - i  // count from end
+
+    instanceCss += `\n@container ${cName} (max-width: ${maxWidth}px) {`
+    instanceCss += `\n  [data-ag="${uid}"] { --hidden-items: ${hiddenItems}; }`
+    instanceCss += `\n  [data-ag="${uid}"] > .rla-ag-item.hidable:nth-child(${hideNthChild}) { display: none; }`
+    // When base-hidden is 0, the bubble starts hidden; show it once a breakpoint fires
+    if (baseHiddenCount === 0) {
+      instanceCss += `\n  [data-ag="${uid}"] > .rla-ag-more-hidden { display: inline-flex; }`
+    }
+    instanceCss += `\n}`
+  }
+}
+---
+
+{normalizedItems.length > 0 ? (
+  <div
+    class="rla-ag-host"
+    style={`container-type: inline-size; container-name: ${cName};`}
+    {...rest}
+  >
+    <div
+      class:list={[classes.root, "rla-ag-list"]}
+      data-slot="avatar-group"
+      data-ag={uid}
+      style={`--base-hidden: ${baseHiddenCount}; --hidden-items: 0;`}
+    >
+      {renderedItems.map((item, idx) => (
+        <span class:list={["rla-ag-item", needsOverflow && idx > 0 && "hidable"]}>
+          <RLAAvatar
+            src={item.src}
+            alt={item.alt ?? ""}
+            fallback={item.fallback}
+            initials={item.initials}
+            size={size}
+            color={(item.color ?? "neutral") as any}
+          />
+        </span>
+      ))}
+
+      {needsOverflow && (
+        <span
+          class:list={[
+            classes.more,
+            sizeCls[size] ?? sizeCls["md"],
+            "rla-ag-more",
+            baseHiddenCount === 0 && "rla-ag-more-hidden"
+          ]}
+          aria-hidden="true"
+          data-slot="more"
+        >
+          +<span class="rla-ag-count" />
+        </span>
+      )}
+    </div>
+  </div>
+) : (
+  <div class={classes.root} data-slot="avatar-group" {...rest}>
+    <slot />
+  </div>
+)}
+
+<!-- Per-instance container-query CSS (scoped via unique data-ag attribute) -->
+<style is:inline set:html={instanceCss} />
+
+<style>
+  .rla-ag-host {
+    /* Inline so the group doesn't stretch to full column width */
+    display: inline-block;
+  }
+
+  .rla-ag-item {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  /* "+more" bubble — base styles; size/color come from theme + sizeCls above */
+  .rla-ag-more {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    white-space: nowrap;
+    font-feature-settings: "tnum";
+  }
+
+  /* Hidden by default when base-hidden is 0 (no pre-truncation).
+     Container queries restore display when responsive hiding fires. */
+  .rla-ag-more-hidden {
+    display: none;
+  }
+
+  /*
+   * CSS Counter — the entire "+N" calculation happens here.
+   *
+   * counter-reset creates a named counter with an initial value equal to
+   * the sum of:
+   *   --base-hidden  (set at render time: total - displayLimit)
+   *   --hidden-items (set by container queries: how many are responsively hidden)
+   *
+   * The `content` property reads it back as a string.
+   * Zero JS arithmetic. Automatic — no resize observers.
+   */
+  .rla-ag-count::after {
+    counter-reset: rla-ag-cnt calc(var(--base-hidden, 0) + var(--hidden-items, 0));
+    content: counter(rla-ag-cnt);
+  }
+</style>

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

@@ -1,12 +1,13 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createAvatarGroupTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "flex -space-x-3 hover:space-x-0 transition-all duration-300 [&_[data-slot=root]]:ring-2 [&_[data-slot=root]]:ring-background [&_[data-slot=root]]:transition-all"
-    }
-  })
-
-export default createAvatarGroupTheme()
+export const avatarGroupTheme = defineTheme("avatar-group", {
+  slots: ["root", "more"],
+  base: {
+    root: "flex -space-x-3 hover:space-x-0 transition-all duration-300 [&_[data-slot=root]]:ring-2 [&_[data-slot=root]]:ring-background [&_[data-slot=root]]:transition-all",
+    more: [
+      "inline-flex items-center justify-center rounded-full shrink-0 select-none cursor-default",
+      "bg-elevated text-muted font-bold ring-2 ring-background",
+      "transition-all duration-300"
+    ]
+  }
+})

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

@@ -1,4 +1,45 @@
+export interface AvatarItemData {
+  /**
+   * Image URL.
+   */
+  src?: string
+  /**
+   * Alt text for the image.
+   */
+  alt?: string
+  /**
+   * Fallback text (initials or short label).
+   */
+  fallback?: string
+  /**
+   * Alias for fallback — two-letter initials.
+   */
+  initials?: string
+  /**
+   * Color variant passed to the inner Avatar.
+   */
+  color?: string
+}
+
 export interface AvatarGroupProps {
+  /**
+   * Array of avatar data to render automatically. When provided, enables the CSS responsive item
+   * counter. When omitted, falls back to the default `<slot />` behaviour.
+   */
+  items?: AvatarItemData[]
+  /**
+   * Maximum number of avatars to show at full container width. Additional avatars are pre-hidden
+   * server-side and counted. Container queries will responsively hide more as width shrinks.
+   *
+   * @default 5
+   */
+  displayLimit?: number
+  /**
+   * Avatar size — forwarded to each inner RLAAvatar.
+   *
+   * @default "md"
+   */
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/badge/RLABadge.astro

@@ -1,36 +1,24 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { BadgeProps } from "./badge"
-import { resolveTheme } from "../../utils/resolveTheme"
-import badgeThemeDefault, { createBadgeTheme } from "./badge.theme"
-const badgeTheme = resolveTheme(badgeThemeDefault, createBadgeTheme)
-
-const badge = scv(badgeTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  shape = "pill",
-  label,
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BadgeProps & { label?: string }
-
-const resolvedVariant = (variant === "ghost") ? "soft" : ((variant === "solid" || variant === "outline" || variant === "soft" || variant === "subtle") ? variant : "solid")
-
-const classes = resolveClasses(badge, {
-  variant: resolvedVariant as "solid",
-  color: color as "neutral",
-  size,
-  shape,
-  theme
-}, useUi("badge", uiProp), className)
----
-<span class={classes.root} data-slot="root" {...rest}>
-  <slot>{label}</slot>
-</span>
+---
+import type { BadgeProps } from "./badge"
+import { badgeTheme } from "./badge.theme"
+
+
+const {
+  variant,
+  label,
+  theme,
+  ...rest
+} = Astro.props as BadgeProps
+
+
+
+const resolvedVariant = (variant === "ghost") ? "soft" : ((variant === "solid" || variant === "outline" || variant === "soft" || variant === "subtle") ? variant : "solid")
+
+const classes = badgeTheme({
+  ...Astro.props,
+  variant: resolvedVariant as "solid"
+})
+---
+<span class={classes.root} data-slot="root" data-theme={theme} {...rest}>
+  <slot>{label}</slot>
+</span>

package/src/components/badge/RLSBadge.tsx

@@ -0,0 +1,41 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { BadgeProps } from "./badge"
+import { badgeTheme } from "./badge.theme"
+
+export interface RLSBadgeProps extends BadgeProps {
+  children?: JSX.Element
+}
+
+const RLSBadge: Component<RLSBadgeProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "label",
+    "variant",
+    "color",
+    "size",
+    "shape",
+    "theme",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    badgeTheme({
+      variant: props.variant ?? "solid",
+      color: props.color ?? "primary",
+      size: props.size ?? "md",
+      shape: props.shape ?? "pill",
+      theme: props.theme,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <span class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children !== undefined && props.children !== null ? props.children : props.label}
+    </span>
+  )
+}
+
+export default RLSBadge

package/src/components/badge/RLVBadge.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { BadgeProps } from "./badge"
-import badgeThemeDefault from "./badge.theme"
+import { badgeTheme } from "./badge.theme"
 
 defineOptions({ name: "RLVBadge" })
 
 const attrs = useAttrs()
-const badgeScv = scv(badgeThemeDefault)
 
 const props = withDefaults(defineProps<BadgeProps>(), {
   variant: "solid",
@@ -19,17 +15,13 @@ const props = withDefaults(defineProps<BadgeProps>(), {
 })
 
 const resolvedClasses = computed(() =>
-  resolveClasses(
-    badgeScv,
-    {
-      variant: props.variant,
-      color: props.color,
-      size: props.size,
-      shape: props.shape
-    },
-    useUi("badge", props.ui),
-    props.class
-  )
+  badgeTheme({
+    variant: props.variant,
+    color: props.color,
+    size: props.size,
+    shape: props.shape,
+    class: props.class
+  })
 )
 </script>