@rimelight/ui 0.0.47 → 0.0.48

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/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

package/src/components/breadcrumb/RLSBreadcrumb.tsx

@@ -0,0 +1,194 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { BreadcrumbItem, BreadcrumbProps } from "./breadcrumb"
+import { breadcrumbTheme } from "./breadcrumb.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSBreadcrumbProps extends BreadcrumbProps {
+  children?: JSX.Element
+  separator?: JSX.Element
+}
+
+const RLSBreadcrumb: Component<RLSBreadcrumbProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "items",
+    "maxVisible",
+    "estimatedItemWidth",
+    "separatorIcon",
+    "separator",
+    "children",
+    "ui",
+    "class"
+  ])
+
+  const classes = createMemo(() =>
+    breadcrumbTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const allItems = props.items ?? []
+  const firstItem = allItems[0]
+  const lastItem = allItems.length > 1 ? allItems[allItems.length - 1] : null
+  const allMidItems = allItems.length > 2 ? allItems.slice(1, allItems.length - 1) : []
+
+  const effectiveMaxMid =
+    props.maxVisible !== undefined ? Math.max(0, props.maxVisible - 2) : allMidItems.length
+
+  const renderedMidItems = allMidItems.slice(allMidItems.length - effectiveMaxMid)
+  const baseHiddenCount = Math.max(0, allMidItems.length - effectiveMaxMid)
+
+  const hasMidItems = renderedMidItems.length > 0
+  const needsOverflow = allItems.length > 2
+
+  const uid = Math.random().toString(36).substring(2, 9)
+  const cName = `rla-bc-${uid}`
+
+  let instanceCss = ""
+  if (needsOverflow && hasMidItems) {
+    for (let i = 0; i < renderedMidItems.length; i++) {
+      const hiddenItems = i + 1
+      const visibleMids = renderedMidItems.length - hiddenItems
+      const visibleTotal = 2 + visibleMids
+      const maxWidth = visibleTotal * (props.estimatedItemWidth ?? 120) + 60
+      const hideNthChild = 3 + i
+
+      instanceCss += `\n@container ${cName} (max-width: ${maxWidth}px) {`
+      instanceCss += `\n  [data-bc="${uid}"] { --hidden-items: ${hiddenItems}; }`
+      instanceCss += `\n  [data-bc="${uid}"] > li.hidable:nth-child(${hideNthChild}) { display: none; }`
+      instanceCss += `\n  [data-bc="${uid}"] > .rla-bc-overflow { display: flex; }`
+      instanceCss += `\n}`
+    }
+  }
+
+  const separatorEl = () => (
+    <span class={classes()["separator"]} data-slot="separator" aria-hidden="true">
+      {props.separator !== undefined ? (
+        props.separator
+      ) : (
+        <RLSIcon name={props.separatorIcon ?? "chevronRight"} />
+      )}
+    </span>
+  )
+
+  const itemMarker = (item: BreadcrumbItem) =>
+    item.href ? (
+      <a href={item.href} class={classes()["link"]} data-slot="link">
+        {item.label}
+      </a>
+    ) : (
+      <span class={classes()["page"]} data-slot="page">
+        {item.label}
+      </span>
+    )
+
+  const ldJson = JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": allItems.map((item, idx) => ({
+      "@type": "ListItem",
+      "position": idx + 1,
+      "name": item.label,
+      "item": item.href ? new URL(item.href, "https://starter.rimelight.com").toString() : undefined
+    }))
+  })
+
+  const staticCss = `
+  .rla-bc-host {
+    display: block;
+    width: 100%;
+  }
+
+  .rla-bc-overflow {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    list-style: none;
+    flex-shrink: 0;
+  }
+
+  .rla-bc-overflow-hidden {
+    display: none;
+  }
+
+  .rla-bc-ellipsis {
+    color: var(--rl-neutral-600);
+    letter-spacing: 0.05em;
+    font-weight: 500;
+  }
+
+  .rla-bc-more-count::after {
+    counter-reset: rla-bc-cnt calc(var(--base-hidden, 0) + var(--hidden-items, 0));
+    content: "+" counter(rla-bc-cnt);
+    color: var(--rl-neutral-600);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    vertical-align: super;
+    line-height: 1;
+  }`
+
+  return (
+    <>
+      <nav aria-label="breadcrumb" class={classes()["root"]} data-slot="breadcrumb-root" {...rest}>
+        {props.items ? (
+          <div class="rla-bc-host" style={`container-type: inline-size; container-name: ${cName};`}>
+            <ol
+              class={classes()["list"]}
+              data-slot="list"
+              data-bc={uid}
+              style={`--base-hidden: ${baseHiddenCount}; --hidden-items: 0;`}
+            >
+              {firstItem && (
+                <li class={classes()["item"]} data-slot="item">
+                  {itemMarker(firstItem)}
+                  {(hasMidItems || lastItem) && separatorEl()}
+                </li>
+              )}
+
+              {needsOverflow && (
+                <li
+                  class={
+                    baseHiddenCount === 0
+                      ? "rla-bc-overflow rla-bc-overflow-hidden"
+                      : "rla-bc-overflow"
+                  }
+                  aria-hidden="true"
+                  data-slot="overflow"
+                >
+                  <span class="rla-bc-ellipsis">…</span>
+                  <span class="rla-bc-more-count" />
+                  {separatorEl()}
+                </li>
+              )}
+
+              {renderedMidItems.map((item) => (
+                <li class={`${classes()["item"]} hidable`} data-slot="item">
+                  {itemMarker(item)}
+                  {separatorEl()}
+                </li>
+              ))}
+
+              {lastItem && (
+                <li class={classes()["item"]} data-slot="item">
+                  <span class={classes()["page"]} data-slot="page" aria-current="page">
+                    {lastItem.label}
+                  </span>
+                </li>
+              )}
+            </ol>
+          </div>
+        ) : (
+          <ol class={classes()["list"]} data-slot="list">
+            {props.children}
+          </ol>
+        )}
+      </nav>
+
+      <style>{staticCss + instanceCss}</style>
+
+      {props.items && <script type="application/ld+json" innerHTML={ldJson} />}
+    </>
+  )
+}
+
+export default RLSBreadcrumb

package/src/components/browser-mockup/RLSBrowserMockup.tsx

@@ -0,0 +1,21 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { BrowserMockupProps } from "./browser-mockup"
+import { browserMockupTheme } from "./browser-mockup.theme"
+
+export interface RLSBrowserMockupProps extends BrowserMockupProps {
+  children?: JSX.Element
+}
+
+const RLSBrowserMockup: Component<RLSBrowserMockupProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() => browserMockupTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSBrowserMockup