@rimelight/ui 0.0.47 → 0.0.48

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,29 +91,54 @@ 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"]}
         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
@@ -118,16 +148,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
           </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>
     )
   }
@@ -138,17 +159,14 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
       disabled={props.disabled}
       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
@@ -158,16 +176,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
         </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
     })

package/src/components/card/RLVCard.vue

@@ -9,13 +9,17 @@ const attrs = useAttrs()
 const slots = useSlots()
 
 const props = withDefaults(defineProps<CardProps>(), {
+  variant: "outline",
   overlay: false
 })
 
 const resolvedClasses = computed(() =>
   cardTheme({
+    variant: props.variant,
     interactive: !!props.href,
     overlay: props.overlay,
+    theme: props.theme,
+    ui: props.ui,
     class: props.class
   })
 )

package/src/components/card/card.ts

@@ -1,4 +1,14 @@
+import type { Theme } from "../../types"
+
 export interface CardProps {
+  /**
+   * The visual style variant of the card.
+   */
+  variant?: "solid" | "outline" | "soft" | "subtle"
+  /**
+   * Theme mode override.
+   */
+  theme?: Theme
   /**
    * Card heading title.
    */

package/src/components/carousel/RLACarousel.astro

@@ -15,7 +15,7 @@ const classes = carouselTheme(Astro.props)
 const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
 ---
 <rla-carousel data-autoplay={autoplay ? "true" : "false"} {...rest}>
-  <div id={carouselId} class={classes.root} data-slot="carousel-root">
+  <div id={carouselId} class={classes.root} data-slot="root">
     <div class={classes.viewport} data-slot="viewport">
       <div class={classes.container} data-slot="container">
         {slides ? (
@@ -48,6 +48,19 @@ const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
     <button class={classes.buttonNext} data-slot="next-button" type="button" aria-label="Next slide">
       <RLAIcon name="i-rl-chevronRight" class="size-5" aria-hidden="true" />
     </button>
+
+    {slides && slides.length > 0 && (
+      <div class={classes.dots} data-slot="dots">
+        {slides.map((_, i) => (
+          <button
+            type="button"
+            class={classes.dot}
+            data-slot="dot"
+            aria-label={`Go to slide ${i + 1}`}
+          />
+        ))}
+      </div>
+    )}
   </div>
 </rla-carousel>