@rimelight/ui 0.0.37 → 0.0.38

package/src/components/avatar/avatar.ts

@@ -0,0 +1,76 @@
+import type { ChipProps } from "../chip/chip"
+
+export interface AvatarProps {
+  /**
+   * The component the root element should render as.
+   *
+   * @default "span"
+   */
+  as?: any
+  src?: string
+  alt?: string
+  icon?: any
+  text?: string
+  /**
+   * @default "md"
+   */
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  /**
+   * @default "neutral"
+   */
+  color?:
+    | "neutral"
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "error"
+    | "commentary"
+    | "ideation"
+    | "source"
+  chip?: boolean | ChipProps
+  loading?: "lazy" | "eager"
+  referrerpolicy?:
+    | ""
+    | "no-referrer"
+    | "no-referrer-when-downgrade"
+    | "origin"
+    | "origin-when-cross-origin"
+    | "same-origin"
+    | "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
+  /**
+   * Compact initials displayed inside the avatar circle (alias for fallback)
+   */
+  initials?: string
+  /**
+   * Display name rendered adjacent to the avatar (e.g. "Daniel Marchi")
+   */
+  title?: string
+  /**
+   * Secondary description rendered below the title (e.g. "Lead Developer")
+   */
+  subtitle?: string
+  /**
+   * Accessible aria-label fallback for screen readers when avatar is purely visual
+   */
+  label?: string
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

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

@@ -0,0 +1,23 @@
+---
+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>

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

@@ -0,0 +1,12 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+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()

package/src/components/badge/RLABadge.astro

@@ -0,0 +1,36 @@
+---
+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>

package/src/components/badge/RLVBadge.vue

@@ -0,0 +1,40 @@
+<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"
+
+defineOptions({ name: "RLVBadge" })
+
+const attrs = useAttrs()
+const badgeScv = scv(badgeThemeDefault)
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  variant: "solid",
+  color: "primary",
+  size: "md",
+  shape: "rounded"
+})
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    badgeScv,
+    {
+      variant: props.variant,
+      color: props.color,
+      size: props.size,
+      shape: props.shape
+    },
+    useUi("badge", props.ui),
+    props.class
+  )
+)
+</script>
+
+<template>
+  <span v-bind="attrs" :class="resolvedClasses.root" data-slot="root">
+    <slot />
+  </span>
+</template>

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

@@ -0,0 +1,171 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+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" }
+      }
+    },
+    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: "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",
+        square: true,
+        classNames: { root: "p-1" }
+      },
+      {
+        size: "lg",
+        square: true,
+        classNames: { root: "p-1" }
+      },
+      {
+        size: "xl",
+        square: true,
+        classNames: { root: "p-1" }
+      }
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md",
+      shape: "pill"
+    }
+  })
+}
+
+export default createBadgeTheme()

package/src/components/badge/badge.ts

@@ -0,0 +1,33 @@
+import type { Theme, ThemeColor } from "../../types/component"
+
+export interface BadgeProps {
+  /**
+   * Visual style variant.
+   */
+  variant?: "solid" | "outline" | "soft" | "ghost"
+  /**
+   * Color scheme applied.
+   */
+  color?: ThemeColor
+  /**
+   * The size scale of the badge.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * The shape corner rounding.
+   */
+  shape?: "square" | "rounded" | "pill"
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/banner/RLABanner.astro

@@ -0,0 +1,136 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { BannerProps } from "./banner"
+import bannerTheme from "./banner.theme"
+
+
+const banner = scv(bannerTheme)
+
+const {
+  contain = true,
+  sticky = false,
+  fixed = true,
+  stackIndex = 0,
+  hideOnScroll = true,
+  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 bannerId = `rla-banner-${Math.random().toString(36).slice(2, 8)}`;
+const storageKey = dismissId || bannerId;
+const zIndex = 200 - stackIndex;
+---
+
+<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"
+  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"
+        />
+      )}
+
+      <div class="flex-1"></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 && (
+        <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={[
+                "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>
+      )}
+    </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; }` : ''}
+`} />

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

@@ -0,0 +1,49 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+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"
+        }
+      },
+      sticky: {
+        true: {
+          root: "sticky top-0 inset-x-0 z-50"
+        },
+        false: {
+          root: ""
+        }
+      },
+      fixed: {
+        true: {
+          root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
+        },
+        false: {}
+      }
+    },
+    defaultVariants: {
+      contain: true,
+      sticky: false,
+      fixed: true
+    }
+  })
+
+export default createBannerTheme()

package/src/components/breadcrumb/RLABreadcrumb.astro

@@ -0,0 +1,62 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { BreadcrumbProps } from "./breadcrumb"
+import { resolveTheme } from "../../utils/resolveTheme"
+import breadcrumbThemeDefault, { createBreadcrumbTheme } from "./breadcrumb.theme"
+const breadcrumbTheme = resolveTheme(breadcrumbThemeDefault, createBreadcrumbTheme)
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const breadcrumb = scv(breadcrumbTheme)
+
+const {
+  items,
+  separatorIcon = "chevronRight",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BreadcrumbProps
+
+const classes = resolveClasses(breadcrumb, {}, useUi("breadcrumb", uiProp), className)
+---
+<nav class={classes.root} data-slot="breadcrumb-root" {...rest}>
+  <ol class={classes.list} data-slot="list">
+    {items ? (
+      items.map((item, idx) => (
+        <li class={classes.item} data-slot="item">
+          {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>
+          )}
+          {idx < items.length - 1 && (
+            <span class={classes.separator} data-slot="separator" aria-hidden="true">
+              <RLAIcon name={separatorIcon} />
+            </span>
+          )}
+        </li>
+      ))
+    ) : (
+      <slot />
+    )}
+  </ol>
+</nav>
+
+{items && (
+  <script type="application/ld+json" is:inline set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": items.map((item, idx) => ({
+      "@type": "ListItem",
+      "position": idx + 1,
+      "name": item.label,
+      "item": item.href ? new URL(item.href, Astro.site || "https://starter.rimelight.com").toString() : undefined
+    }))
+  })} />
+)}

package/src/components/breadcrumb/breadcrumb.theme.ts

@@ -0,0 +1,17 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createBreadcrumbTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "list", "item", "link", "separator", "page"],
+    base: {
+      root: "aria-label='breadcrumb'",
+      list: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      item: "flex items-center gap-1.5",
+      link: "transition-colors hover:text-foreground cursor-pointer decoration-none text-current",
+      separator: "flex size-3.5 items-center justify-center [&_svg]:size-3.5 opacity-60",
+      page: "font-normal text-foreground"
+    }
+  })
+
+export default createBreadcrumbTheme()

package/src/components/browser-mockup/RLABrowserMockup.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { BrowserMockupProps } from "./browser-mockup"
+import browserMockupTheme from "./browser-mockup.theme"
+
+
+const browserMockup = scv(browserMockupTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BrowserMockupProps
+
+const classes = resolveClasses(browserMockup, {}, useUi("browserMockup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>