@rimelight/ui 0.0.46 → 0.0.48

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

package/src/components/button/RLSButton.tsx

@@ -2,11 +2,13 @@ import { createMemo, splitProps, type Component, type JSX } from "solid-js"
 import type { ButtonProps } from "./button"
 import { buttonTheme } from "./button.theme"
 import RLSIcon from "../icon/RLSIcon"
+import RLSAvatar from "../avatar/RLSAvatar"
 
 export interface RLSButtonProps extends ButtonProps {
   children?: JSX.Element
   leading?: JSX.Element
   trailing?: JSX.Element
+  avatar?: any
   onClick?: (e: MouseEvent) => void
   type?: "button" | "submit" | "reset"
 }
@@ -17,9 +19,11 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
     "color",
     "size",
     "href",
+    "to",
     "label",
     "leadingIcon",
     "trailingIcon",
+    "avatar",
     "loading",
     "loadingAuto",
     "square",
@@ -49,7 +53,8 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
     "ariaCurrentValue"
   ])
 
-  const isLeading = () => !!(props.leadingIcon || props.leading) || !!props.loading
+  const href = () => props.href || (props.to as string | undefined)
+  const isLeading = () => !!(props.leadingIcon || props.avatar || props.leading) || !!props.loading
   const isTrailing = () =>
     !!(props.trailingIcon || props.trailing) || (!!props.loading && !isLeading())
 
@@ -86,45 +91,64 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
     })
   )
 
-  if (props.href) {
+  const renderLeading = () => {
+    if (props.leading) return props.leading
+    if (!isLeading()) return null
+
+    return (
+      <span class={`${classes()["leadingIcon"]} ${leadingIconClass()}`} data-slot="leading-icon">
+        {props.loading || props.leadingIcon ? (
+          <RLSIcon name={showLeadingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+        ) : props.avatar ? (
+          <RLSAvatar
+            {...(typeof props.avatar === "string" ? { src: props.avatar } : props.avatar)}
+            size={classes()["leadingAvatarSize"] as any}
+            class={classes()["leadingAvatar"]}
+            data-slot="leading-avatar"
+          />
+        ) : null}
+      </span>
+    )
+  }
+
+  const renderTrailing = () => {
+    if (props.trailing) return props.trailing
+    if (!isTrailing() || !showTrailingIcon()) return null
+
+    return (
+      <span class={`${classes()["trailingIcon"]} ${trailingIconClass()}`} data-slot="trailing-icon">
+        <RLSIcon name={showTrailingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+      </span>
+    )
+  }
+
+  if (href()) {
     return (
       <a
-        href={props.href}
+        href={href()}
         target={props.target}
         rel={props.rel || undefined}
-        class={classes().root}
+        class={classes()["root"]}
         data-slot="root"
+        data-theme={props.theme}
+        data-loading={props.loading ? "true" : undefined}
+        data-loading-auto={props.loadingAuto ? "true" : undefined}
         aria-label={props.ariaLabel}
         aria-disabled={props.disabled ? "true" : undefined}
         onClick={props.onClick}
         {...rest}
       >
-        {props.leading ? (
-          props.leading
-        ) : isLeading() && showLeadingIcon() ? (
-          <span class={`${classes().leadingIcon}  ${leadingIconClass()}`} data-slot="leading-icon">
-            <RLSIcon name={showLeadingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
-          </span>
-        ) : null}
+        {renderLeading()}
 
         {props.children !== undefined && props.children !== null ? (
           props.children
         ) : props.label !== undefined && props.label !== null ? (
-          <span class={classes().label} data-slot="label">
+          <span class={classes()["label"]} data-slot="label">
             {props.label}
           </span>
         ) : null}
 
-        {props.trailing ? (
-          props.trailing
-        ) : isTrailing() && showTrailingIcon() ? (
-          <span
-            class={`${classes().trailingIcon}  ${trailingIconClass()}`}
-            data-slot="trailing-icon"
-          >
-            <RLSIcon name={showTrailingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
-          </span>
-        ) : null}
+        {renderTrailing()}
       </a>
     )
   }
@@ -133,35 +157,26 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
     <button
       type={props.type || "button"}
       disabled={props.disabled}
-      class={classes().root}
+      class={classes()["root"]}
       data-slot="root"
+      data-theme={props.theme}
+      data-loading={props.loading ? "true" : undefined}
+      data-loading-auto={props.loadingAuto ? "true" : undefined}
       aria-label={props.ariaLabel}
       onClick={props.onClick}
       {...rest}
     >
-      {props.leading ? (
-        props.leading
-      ) : isLeading() && showLeadingIcon() ? (
-        <span class={`${classes().leadingIcon}  ${leadingIconClass()}`} data-slot="leading-icon">
-          <RLSIcon name={showLeadingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
-        </span>
-      ) : null}
+      {renderLeading()}
 
       {props.children !== undefined && props.children !== null ? (
         props.children
       ) : props.label !== undefined && props.label !== null ? (
-        <span class={classes().label} data-slot="label">
+        <span class={classes()["label"]} data-slot="label">
           {props.label}
         </span>
       ) : null}
 
-      {props.trailing ? (
-        props.trailing
-      ) : isTrailing() && showTrailingIcon() ? (
-        <span class={`${classes().trailingIcon}  ${trailingIconClass()}`} data-slot="trailing-icon">
-          <RLSIcon name={showTrailingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
-        </span>
-      ) : null}
+      {renderTrailing()}
     </button>
   )
 }

package/src/components/button/RLVButton.vue

@@ -5,45 +5,43 @@ import { buttonTheme } from "./button.theme"
 import RLVIcon from "../icon/RLVIcon.vue"
 const attrs = useAttrs()
 
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  loading = false,
-  square = false,
-  block = false,
-  active = false,
-  activeColor,
-  activeVariant
-} = defineProps<ButtonProps>()
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: "solid",
+  color: "primary",
+  size: "md",
+  justify: "center",
+  loading: false,
+  square: undefined,
+  block: false,
+  active: false,
+  rounded: false
+})
 
 const slots = useSlots()
 
-const isLeading = computed(() => !!(leadingIcon || slots.leading) || loading)
+const isLeading = computed(
+  () => !!(props.leadingIcon || props.avatar || slots.leading) || props.loading
+)
 const isTrailing = computed(
-  () => !!(trailingIcon || slots.trailing) || (loading && !isLeading.value)
+  () => !!(props.trailingIcon || slots.trailing) || (props.loading && !isLeading.value)
 )
 
 const showLeadingIcon = computed(() => {
-  if (loading) return "loaderCircle"
-  return leadingIcon
+  if (props.loading) return "loaderCircle"
+  return props.leadingIcon
 })
 
 const showTrailingIcon = computed(() => {
-  if (loading) return "loaderCircle"
-  return trailingIcon
+  if (props.loading) return "loaderCircle"
+  return props.trailingIcon
 })
 
 const leadingIconClass = computed(() => {
-  return loading && isLeading.value ? "animate-spin" : ""
+  return props.loading && isLeading.value ? "animate-spin" : ""
 })
 
 const trailingIconClass = computed(() => {
-  return loading && isTrailing.value ? "animate-spin" : ""
+  return props.loading && isTrailing.value ? "animate-spin" : ""
 })
 
 defineSlots<{
@@ -54,23 +52,37 @@ defineSlots<{
 
 const resolvedClasses = computed(() =>
   buttonTheme({
-    variant: active && activeVariant ? activeVariant : variant,
-    color: active && activeColor ? activeColor : color,
-    size,
-    block,
-    square: square || (!label && !slots.default),
+    variant: props.active && props.activeVariant ? props.activeVariant : props.variant,
+    color: props.active && props.activeColor ? props.activeColor : props.color,
+    size: props.size,
+    justify: props.justify,
+    block: props.block,
+    square: props.square !== undefined ? props.square : !props.label && !slots.default,
+    rounded: props.rounded,
     leading: isLeading.value,
     trailing: isTrailing.value,
-    loading,
-    active
+    loading: props.loading,
+    active: props.active,
+    theme: props.theme,
+    ui: props.ui,
+    class: props.class
   })
 )
 
-const Tag = href ? "a" : "button"
+const Tag = props.href ? "a" : "button"
 </script>
 
 <template>
-  <component v-bind="attrs" :is="Tag" :href="href" :class="resolvedClasses.root" data-slot="root">
+  <component
+    v-bind="attrs"
+    :is="Tag"
+    :href="props.href"
+    :type="!props.href ? (props.type as any) || 'button' : undefined"
+    :disabled="!props.href ? (props.disabled as any) : undefined"
+    :class="resolvedClasses.root"
+    data-slot="root"
+    :data-theme="props.theme"
+  >
     <slot name="leading" :ui="resolvedClasses">
       <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
         <RLVIcon :name="showLeadingIcon" :class="leadingIconClass" />

package/src/components/calendar/RLSCalendar.tsx

@@ -0,0 +1,26 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { CalendarProps } from "./calendar"
+import { calendarTheme } from "./calendar.theme"
+
+export interface RLSCalendarProps extends CalendarProps {
+  children?: JSX.Element
+}
+
+const RLSCalendar: Component<RLSCalendarProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    calendarTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSCalendar

package/src/components/callout/RLSCallout.tsx

@@ -0,0 +1,151 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { CalloutProps } from "./callout"
+import { calloutTheme } from "./callout.theme"
+import RLSAvatar from "../avatar/RLSAvatar"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSCalloutProps extends CalloutProps {
+  children?: JSX.Element
+  iconSlot?: JSX.Element
+  titleSlot?: JSX.Element
+  headerSlot?: JSX.Element
+  avatarSlot?: JSX.Element
+  closeSlot?: JSX.Element
+  actionsSlot?: JSX.Element
+  avatar?: string | Record<string, any>
+  close?: boolean
+  actions?: boolean
+  onClose?: () => void
+}
+
+const colorToIcon: Record<string, string | undefined> = {
+  error: "i-rl-circleCheck",
+  warning: "i-rl-alertTriangle",
+  info: "i-rl-info",
+  success: "i-rl-circleCheck",
+  primary: undefined,
+  secondary: undefined,
+  commentary: undefined,
+  ideation: undefined,
+  source: undefined,
+  neutral: undefined
+}
+
+const RLSCallout: Component<RLSCalloutProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "variant",
+    "color",
+    "title",
+    "description",
+    "icon",
+    "avatar",
+    "actions",
+    "close",
+    "theme",
+    "ui",
+    "class",
+    "children",
+    "iconSlot",
+    "titleSlot",
+    "headerSlot",
+    "avatarSlot",
+    "closeSlot",
+    "actionsSlot",
+    "onClose"
+  ])
+
+  const resolvedColor = props.variant === "destructive" ? "error" : (props.color ?? "primary")
+  const resolvedVariant =
+    props.variant === "solid" ||
+    props.variant === "outline" ||
+    props.variant === "soft" ||
+    props.variant === "subtle"
+      ? props.variant
+      : "solid"
+  const resolvedIcon = props.icon ?? colorToIcon[resolvedColor]
+  const hasTitleRow = !!(
+    props.title ||
+    props.titleSlot ||
+    props.headerSlot ||
+    props.avatar ||
+    props.avatarSlot ||
+    props.close ||
+    props.closeSlot
+  )
+
+  const classes = createMemo(() =>
+    calloutTheme({
+      variant: resolvedVariant,
+      color: resolvedColor as any,
+      theme: props.theme,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={classes()["root"]} data-slot="root" role="alert" data-theme={props.theme} {...rest}>
+      {props.iconSlot !== undefined ? (
+        props.iconSlot
+      ) : resolvedIcon ? (
+        <span class={classes()["icon"]} data-slot="icon">
+          <RLSIcon name={resolvedIcon} />
+        </span>
+      ) : null}
+
+      <div class={classes()["body"]} data-slot="body">
+        {hasTitleRow && (
+          <div class="flex items-center gap-2.5">
+            {props.avatarSlot !== undefined ? (
+              props.avatarSlot
+            ) : props.avatar ? (
+              <RLSAvatar
+                {...(typeof props.avatar === "string" ? { src: props.avatar } : props.avatar)}
+                size={classes()["avatarSize"] as any}
+                class={classes()["avatar"]}
+                data-slot="avatar"
+              />
+            ) : null}
+
+            {(props.title !== undefined || props.titleSlot !== undefined) && (
+              <h5 class={classes()["title"]} data-slot="title">
+                {props.title}
+                {props.titleSlot}
+              </h5>
+            )}
+
+            {props.headerSlot}
+
+            {props.closeSlot !== undefined ? (
+              props.closeSlot
+            ) : props.close ? (
+              <button
+                type="button"
+                class={classes()["close"]}
+                data-slot="close"
+                onClick={props.onClose}
+              >
+                <RLSIcon name="i-rl-close" class="size-4" />
+              </button>
+            ) : null}
+          </div>
+        )}
+
+        {(props.description !== undefined || props.children !== undefined) && (
+          <div class={classes()["content"]} data-slot="content">
+            {props.description}
+            {props.children}
+          </div>
+        )}
+
+        {(props.actions === true || props.actionsSlot !== undefined) && (
+          <div class={classes()["actions"]} data-slot="actions">
+            {props.actionsSlot}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default RLSCallout

package/src/components/card/RLSCard.tsx

@@ -16,6 +16,8 @@ const RLSCard: Component<RLSCardProps> = (allProps) => {
     "mediaSrc",
     "href",
     "overlay",
+    "variant",
+    "theme",
     "ui",
     "class",
     "children",
@@ -26,8 +28,10 @@ const RLSCard: Component<RLSCardProps> = (allProps) => {
 
   const resolvedClasses = createMemo(() =>
     cardTheme({
+      variant: props.variant,
       interactive: !!props.href,
       overlay: !!props.overlay,
+      theme: props.theme,
       ui: props.ui,
       class: props.class
     })