@rimelight/ui 0.0.46 → 0.0.48

package/src/components/avatar/RLSAvatar.tsx

@@ -0,0 +1,142 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { AvatarProps } from "./avatar"
+import { avatarTheme } from "./avatar.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSAvatarProps extends AvatarProps {
+  children?: JSX.Element
+  fallbackSlot?: JSX.Element
+  badgeSlot?: JSX.Element
+  imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>
+}
+
+const RLSAvatar: Component<RLSAvatarProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "src",
+    "alt",
+    "fallback",
+    "initials",
+    "title",
+    "subtitle",
+    "label",
+    "badge",
+    "badgeColor",
+    "badgePosition",
+    "size",
+    "color",
+    "loading",
+    "referrerpolicy",
+    "crossorigin",
+    "decoding",
+    "height",
+    "width",
+    "sizes",
+    "srcset",
+    "ui",
+    "class",
+    "children",
+    "fallbackSlot",
+    "badgeSlot",
+    "imgProps"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    avatarTheme({
+      size: props.size ?? "md",
+      color: props.color ?? "neutral",
+      badgePosition: props.badgePosition ?? "bottom-right",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const avatarFallback = () => props.fallback || props.initials
+  const hasTextLayout = () => Boolean(props.title || props.subtitle)
+  const badgeClass = () =>
+    props.badgeColor?.startsWith("bg-")
+      ? props.badgeColor
+      : `bg-${props.badgeColor ?? "success"}-500`
+
+  const image = () => (
+    <>
+      {props.src ? (
+        <img
+          src={props.src}
+          alt={props.alt ?? ""}
+          class={resolvedClasses().image}
+          data-slot="image"
+          loading={props.loading}
+          referrerPolicy={props.referrerpolicy || undefined}
+          crossorigin={props.crossorigin || undefined}
+          decoding={props.decoding}
+          {...props.imgProps}
+        />
+      ) : (
+        <span class={resolvedClasses().fallback} data-slot="fallback">
+          {props.fallbackSlot ? (
+            props.fallbackSlot
+          ) : avatarFallback() ? (
+            avatarFallback()
+          ) : (
+            <RLSIcon name="i-rl-user" class={resolvedClasses().icon} aria-hidden="true" />
+          )}
+        </span>
+      )}
+    </>
+  )
+
+  const badgeEl = () =>
+    props.badge || props.badgeSlot ? (
+      <span class={`${resolvedClasses().badge}  ${badgeClass()}`} data-slot="badge">
+        {props.badgeSlot
+          ? props.badgeSlot
+          : typeof props.badge === "string" || typeof props.badge === "number"
+            ? props.badge
+            : null}
+      </span>
+    ) : null
+
+  if (hasTextLayout()) {
+    return (
+      <div class="flex items-center gap-3" data-slot="profile-wrapper">
+        <span
+          class={resolvedClasses().root}
+          data-slot="root"
+          aria-label={props.label || props.title}
+          role={props.label || props.title ? "img" : undefined}
+          {...rest}
+        >
+          {props.children ? props.children : image()}
+          {badgeEl()}
+        </span>
+        <div class="flex flex-col leading-tight">
+          {props.title && (
+            <span class="font-medium text-sm text-default" data-slot="title">
+              {props.title}
+            </span>
+          )}
+          {props.subtitle && (
+            <span class="text-xs text-muted" data-slot="subtitle">
+              {props.subtitle}
+            </span>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <span
+      class={resolvedClasses().root}
+      data-slot="root"
+      aria-label={props.label}
+      role={props.label ? "img" : undefined}
+      {...rest}
+    >
+      {props.children ? props.children : image()}
+      {badgeEl()}
+    </span>
+  )
+}
+
+export default RLSAvatar

package/src/components/avatar/avatar.ts

@@ -8,24 +8,24 @@ export interface AvatarProps {
    * @default "span"
    */
   as?: any
-  src?: string
-  alt?: string
+  src?: string | undefined
+  alt?: string | undefined
   icon?: any
-  text?: string
-  fallback?: string
+  text?: string | undefined
+  fallback?: string | undefined
   /**
    * @default "md"
    */
-  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined
   /**
    * @default "neutral"
    */
-  color?: ThemeColor
-  chip?: boolean | ChipProps
-  badge?: boolean | string | number
-  badgeColor?: string
-  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
-  loading?: "lazy" | "eager"
+  color?: ThemeColor | undefined
+  chip?: boolean | ChipProps | undefined
+  badge?: boolean | string | number | undefined
+  badgeColor?: string | undefined
+  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left" | undefined
+  loading?: "lazy" | "eager" | undefined
   referrerpolicy?:
     | ""
     | "no-referrer"
@@ -36,25 +36,26 @@ export interface AvatarProps {
     | "strict-origin"
     | "strict-origin-when-cross-origin"
     | "unsafe-url"
-  crossorigin?: "" | "anonymous" | "use-credentials"
-  decoding?: "async" | "auto" | "sync"
-  height?: string | number
-  width?: string | number
-  sizes?: string
-  srcset?: string
-  usemap?: string
+    | undefined
+  crossorigin?: "" | "anonymous" | "use-credentials" | undefined
+  decoding?: "async" | "auto" | "sync" | undefined
+  height?: string | number | undefined
+  width?: string | number | undefined
+  sizes?: string | undefined
+  srcset?: string | undefined
+  usemap?: string | undefined
   /**
    * Compact initials displayed inside the avatar circle (alias for fallback)
    */
-  initials?: string
+  initials?: string | undefined
   /**
    * Display name rendered adjacent to the avatar (e.g. "Daniel Marchi")
    */
-  title?: string
+  title?: string | undefined
   /**
    * Secondary description rendered below the title (e.g. "Lead Developer")
    */
-  subtitle?: string
+  subtitle?: string | undefined
   /**
    * Accessible aria-label fallback for screen readers when avatar is purely visual
    */

package/src/components/avatar-group/RLSAvatarGroup.tsx

@@ -0,0 +1,163 @@
+import { createMemo, splitProps, For, type Component, type JSX } from "solid-js"
+import type { AvatarGroupProps } from "./avatar-group"
+import { avatarGroupTheme } from "./avatar-group.theme"
+import RLSAvatar from "../avatar/RLSAvatar"
+
+export interface RLSAvatarGroupProps extends AvatarGroupProps {
+  children?: JSX.Element
+}
+
+const sizePx: Record<string, number> = {
+  "3xs": 16,
+  "2xs": 20,
+  "xs": 24,
+  "sm": 28,
+  "md": 32,
+  "lg": 36,
+  "xl": 40,
+  "2xl": 44,
+  "3xl": 48
+}
+
+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 RLSAvatarGroup: Component<RLSAvatarGroupProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "items",
+    "displayLimit",
+    "size",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const normalizedItems = props.items ?? []
+  const displayLimit = props.displayLimit ?? 5
+  const size = props.size ?? "md"
+
+  const resolvedClasses = createMemo(() => avatarGroupTheme({ ui: props.ui, class: props.class }))
+
+  const uid = Math.random().toString(36).substring(2, 9)
+  const cName = `rla-ag-${uid}`
+
+  const avatarPx = sizePx[size] ?? 32
+  const overlapPx = 12
+  const effectivePx = avatarPx - overlapPx
+  const morePx = avatarPx + 4
+
+  const renderedItems = normalizedItems.slice(0, displayLimit)
+  const baseHiddenCount = Math.max(0, normalizedItems.length - displayLimit)
+  const needsOverflow = normalizedItems.length >= displayLimit
+
+  let instanceCss = ""
+  if (needsOverflow && renderedItems.length > 1) {
+    const maxBreaks = renderedItems.length - 1
+    for (let i = 0; i < maxBreaks; i++) {
+      const hiddenItems = i + 1
+      const visibleCount = renderedItems.length - hiddenItems
+      const maxWidth = avatarPx + Math.max(0, visibleCount - 1) * effectivePx + morePx + 4
+      const hideNthChild = renderedItems.length - i
+
+      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; }`
+      if (baseHiddenCount === 0) {
+        instanceCss += `\n  [data-ag="${uid}"] > .rla-ag-more-hidden { display: inline-flex; }`
+      }
+      instanceCss += `\n}`
+    }
+  }
+
+  if (normalizedItems.length > 0) {
+    return (
+      <>
+        <div
+          class="rla-ag-host"
+          style={`container-type: inline-size; container-name: ${cName};`}
+          {...rest}
+        >
+          <div
+            class={`${resolvedClasses().root} rla-ag-list`}
+            data-slot="avatar-group"
+            data-ag={uid}
+            style={`--base-hidden: ${baseHiddenCount}; --hidden-items: 0;`}
+          >
+            <For each={renderedItems}>
+              {(item, idx) => (
+                <span class={needsOverflow && idx() > 0 ? "rla-ag-item hidable" : "rla-ag-item"}>
+                  <RLSAvatar
+                    src={item.src}
+                    alt={item.alt ?? ""}
+                    fallback={item.fallback}
+                    initials={item.initials}
+                    size={size}
+                    color={(item.color ?? "neutral") as any}
+                  />
+                </span>
+              )}
+            </For>
+
+            {needsOverflow && (
+              <span
+                class={`${resolvedClasses().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>
+
+        <style>{instanceCss}</style>
+
+        <style>{`
+          .rla-ag-host {
+            display: inline-block;
+          }
+
+          .rla-ag-item {
+            display: inline-flex;
+            flex-shrink: 0;
+          }
+
+          .rla-ag-more {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            white-space: nowrap;
+            font-feature-settings: "tnum";
+          }
+
+          .rla-ag-more-hidden {
+            display: none;
+          }
+
+          .rla-ag-count::after {
+            counter-reset: rla-ag-cnt calc(var(--base-hidden, 0) + var(--hidden-items, 0));
+            content: counter(rla-ag-cnt);
+          }
+        `}</style>
+      </>
+    )
+  }
+
+  return (
+    <div class={resolvedClasses().root} data-slot="avatar-group" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSAvatarGroup

package/src/components/badge/RLSBadge.tsx

@@ -32,7 +32,7 @@ const RLSBadge: Component<RLSBadgeProps> = (allProps) => {
   )
 
   return (
-    <span class={resolvedClasses().root} data-slot="root" {...rest}>
+    <span class={resolvedClasses().root} data-slot="root" data-theme={props.theme} {...rest}>
       {props.children !== undefined && props.children !== null ? props.children : props.label}
     </span>
   )

package/src/components/badge/RLVBadge.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<BadgeProps>(), {
   variant: "solid",
   color: "primary",
   size: "md",
-  shape: "rounded"
+  shape: "pill"
 })
 
 const resolvedClasses = computed(() =>
@@ -20,13 +20,15 @@ const resolvedClasses = computed(() =>
     color: props.color,
     size: props.size,
     shape: props.shape,
+    theme: props.theme,
+    ui: props.ui,
     class: props.class
   })
 )
 </script>
 
 <template>
-  <span v-bind="attrs" :class="resolvedClasses.root" data-slot="root">
-    <slot />
+  <span v-bind="attrs" :class="resolvedClasses.root" data-slot="root" :data-theme="theme">
+    <slot>{{ label }}</slot>
   </span>
 </template>

package/src/components/banner/RLABanner.astro

@@ -21,7 +21,7 @@ const classes = bannerTheme({
   sticky: fixed ? false : sticky
 })
 
-const bannerId = (rest.id as string) || `rla-banner-${Math.random().toString(36).slice(2, 8)}`
+const bannerId = (rest["id"] as string) || `rla-banner-${Math.random().toString(36).slice(2, 8)}`
 const storageKey = dismissId || bannerId
 ---
 

package/src/components/banner/RLSBanner.tsx

@@ -0,0 +1,151 @@
+import { createMemo, createSignal, splitProps, For, Show, type Component, type JSX } from "solid-js"
+import type { BannerAction, BannerProps } from "./banner"
+import { bannerTheme } from "./banner.theme"
+import RLSButton from "../button/RLSButton"
+
+export interface RLSBannerProps extends BannerProps {
+  children?: JSX.Element
+  left?: JSX.Element
+  center?: JSX.Element
+  right?: JSX.Element
+  actions?: BannerAction[]
+}
+
+const RLSBanner: Component<RLSBannerProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "contain",
+    "sticky",
+    "fixed",
+    "stackIndex",
+    "hideOnScroll",
+    "dismissable",
+    "dismissId",
+    "actions",
+    "ui",
+    "class",
+    "children",
+    "left",
+    "center",
+    "right"
+  ])
+
+  const classes = createMemo(() =>
+    bannerTheme({
+      contain: props.contain ?? true,
+      sticky: (props.fixed ?? true) ? false : (props.sticky ?? false),
+      fixed: props.fixed ?? true,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const bannerId = (rest["id"] as string) || `rla-banner-${Math.random().toString(36).slice(2, 8)}`
+  const storageKey = props.dismissId || bannerId
+  const dismissKey = `rl-banner-dismiss-${storageKey}`
+  const actions = props.actions ?? []
+
+  const readDismissed = () => {
+    if (typeof window === "undefined") return false
+    try {
+      return window.localStorage.getItem(dismissKey) !== null
+    } catch {
+      return false
+    }
+  }
+
+  const [dismissed, setDismissed] = createSignal<boolean>(readDismissed())
+
+  const handleDismiss = () => {
+    try {
+      window.localStorage.setItem(dismissKey, "1")
+    } catch {}
+    setDismissed(true)
+  }
+
+  return (
+    <Show when={!dismissed()}>
+      <div
+        id={bannerId}
+        data-slot="root"
+        class={classes()["root"]}
+        data-contain={(props.contain ?? true) ? "true" : "false"}
+        data-rla-banner="true"
+        data-stack-index={props.stackIndex ?? 0}
+        data-hide-on-scroll={String(props.hideOnScroll ?? true)}
+        data-header-layer-id={bannerId}
+        data-layer-type="banner"
+        data-dismiss-key={dismissKey}
+        {...rest}
+      >
+        <div class={classes()["content"]} data-header-content>
+          <div class={classes()["container"]} data-slot="container">
+            <Show when={actions.length > 0}>
+              <input type="checkbox" id={`${bannerId}-act`} class="peer sr-only shrink-0" />
+            </Show>
+
+            <div class={`${classes()["left"]} peer-checked:hidden`} data-slot="left">
+              {props.left}
+            </div>
+            <div class={`${classes()["center"]} peer-checked:hidden`} data-slot="center">
+              {props.center !== undefined
+                ? props.center
+                : props.children !== undefined
+                  ? props.children
+                  : null}
+            </div>
+
+            <div class="flex-1"></div>
+
+            <div class={classes()["side"]}>{props.right}</div>
+
+            <Show when={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>
+
+              <div
+                class={`${classes()["actions"]} hidden peer-checked:flex md:flex flex-row items-center justify-center gap-2 peer-checked:order-first`}
+              >
+                <For each={actions}>
+                  {(action) => (
+                    <a
+                      href={action.href || "#"}
+                      class={`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
+                    >
+                      {action.label}
+                    </a>
+                  )}
+                </For>
+              </div>
+            </Show>
+
+            <Show when={props.dismissable}>
+              <RLSButton
+                type="button"
+                variant="ghost"
+                color="neutral"
+                square
+                leadingIcon="close"
+                ariaLabel="Close banner"
+                class={classes()["dismiss"]}
+                data-banner-close
+                onClick={handleDismiss}
+              />
+            </Show>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+export default RLSBanner