@rimelight/ui 0.0.25 → 0.0.27

package/src/components/astro/RLASection.astro

@@ -1,181 +1,210 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
-import sectionTheme from "../../themes/section.theme"
-
-const section = scv(sectionTheme)
-type SectionVariants = ComponentVariants<typeof sectionTheme>
-
-export interface RLASectionProps {
-  as?: string;
-  variant?: SectionVariants['variant'];
-  headline?: string;
-  icon?: string;
-  title?: string;
-  description?: string;
-  orientation?: SectionVariants['orientation'];
-  reverse?: boolean;
-  ctaVariant?: SectionVariants['ctaVariant'];
-  ui?: Partial<Record<string, string>>;
-  class?: string;
-  [key: string]: unknown;
-}
-
-const {
-  as = "section",
-  variant = "default",
-  orientation = "vertical",
-  reverse = false,
-  ctaVariant = "outline",
-  class: className,
-  ui: uiProp,
-  ...rest
-} = Astro.props as RLASectionProps;
-
-const classes = resolveClasses(section, {
-  variant,
-  orientation,
-  reverse,
-  ...(variant === "cta" && { ctaVariant }),
-  headline: Astro.slots.has("headline") || Astro.props.headline,
-  title: Astro.slots.has("title") || Astro.props.title,
-  description: Astro.slots.has("description") || Astro.props.description,
-  body: Astro.slots.has("body") || Astro.slots.has("features")
-}, useUi("section", uiProp), className);
-
-const Tag = as;
----
-
-<Tag
-  data-orientation={orientation}
-  data-slot="rla-section"
-  class:list={[classes.root]}
-  {...rest}
->
-  <slot name="background">
-    {Astro.slots.has("background") && (
-      <div class:list={[classes.background]} data-slot="background">
-        <slot name="background" />
-      </div>
-    )}
-  </slot>
-
-  <slot name="top" />
-
-  <div
-    data-slot="container"
-    class:list={[classes.container]}
-  >
-    {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description || Astro.slots.has("body") || Astro.slots.has("footer") || Astro.slots.has("links") || Astro.slots.has("features")) && (
-      <div
-        data-slot="wrapper"
-        class:list={[classes.wrapper]}
-      >
-        {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description) && (
-          <div
-            data-slot="header"
-            class:list={[classes.header]}
-          >
-            <slot name="header">
-              {(Astro.props.icon || Astro.slots.has("leading")) && (
-                <div
-                  data-slot="leading"
-                  class:list={[classes.leading]}
-                >
-                  <slot name="leading" {...{ ui: classes }}>
-                    {Astro.props.icon && (
-                      <span
-                        class:list={[classes.leadingIcon]}
-                        data-slot="leading-icon"
-                      >
-                        <span class={Astro.props.icon} aria-hidden="true" />
-                      </span>
-                    )}
-                  </slot>
-                </div>
-              )}
-
-              {(Astro.props.headline || Astro.slots.has("headline")) && (
-                <div
-                  data-slot="headline"
-                  class:list={[classes.headline]}
-                >
-                  <slot name="headline">
-                    {Astro.props.headline}
-                  </slot>
-                </div>
-              )}
-
-              {(Astro.props.title || Astro.slots.has("title")) && (
-                <component
-                  is={variant === "hero" ? "h1" : "h2"}
-                  data-slot="title"
-                  class:list={[classes.title]}
-                >
-                  <slot name="title">
-                    {Astro.props.title}
-                  </slot>
-                </component>
-              )}
-
-              {(Astro.props.description || Astro.slots.has("description")) && (
-                <div
-                  data-slot="description"
-                  class:list={[classes.description]}
-                >
-                  <slot name="description">
-                    {Astro.props.description}
-                  </slot>
-                </div>
-              )}
-            </slot>
-          </div>
-        )}
-
-        {(Astro.slots.has("body") || Astro.slots.has("features")) && (
-          <div
-            data-slot="body"
-            class:list={[classes.body]}
-          >
-            <slot name="body">
-              {Astro.slots.has("features") && (
-                <ul
-                  data-slot="features"
-                  class:list={[classes.features]}
-                >
-                  <slot name="features" />
-                </ul>
-              )}
-            </slot>
-          </div>
-        )}
-
-        {(Astro.slots.has("footer") || Astro.slots.has("links")) && (
-          <div
-            data-slot="footer"
-            class:list={[classes.footer]}
-          >
-            <slot name="footer">
-              {Astro.slots.has("links") && (
-                <div
-                  data-slot="links"
-                  class:list={[classes.links]}
-                >
-                  <slot name="links" />
-                </div>
-              )}
-            </slot>
-          </div>
-        )}
-      </div>
-    )}
-
-    <slot />
-    {orientation === "horizontal" && (
-      <div class="hidden lg:block" />
-    )}
-  </div>
-
-  <slot name="bottom" />
-</Tag>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import sectionTheme from "../../themes/section.theme"
+import type { RLAIconProps } from "./RLAIcon.astro"
+import type { RLAButtonProps } from "./RLAButton.astro"
+import RLAIcon from "./RLAIcon.astro"
+import RLAButton from "./RLAButton.astro"
+
+const section = scv(sectionTheme)
+type SectionVariants = ComponentVariants<typeof sectionTheme>
+
+export interface RLASectionProps {
+  /**
+   * The element or component this component should render as.
+   * @default 'section'
+   */
+  as?: any;
+  /**
+   * The variant of the section.
+   * @default 'default'
+   */
+  variant?: SectionVariants['variant'];
+  /** The variant of the section when it's a CTA.
+   * @default 'solid'
+   */
+  ctaVariant?: SectionVariants['ctaVariant'];
+  /**
+   * The headline displayed above the title.
+   */
+  headline?: string;
+  /**
+   * The icon displayed above the title.
+   */
+  icon?: RLAIconProps["name"];
+  /**
+   * The section's title, displayed as a <h1> for the hero variant or <h2> otherwise.
+   */
+  title?: string;
+  /**
+   * The section's description, displayed under the title.
+   */
+  description?: string;
+  /**
+   * Display a list of buttons under the description.
+   */
+  links?: RLAButtonProps[]
+  /**
+   * The orientation of the section.
+   * @default 'vertical'
+   */
+  orientation?: SectionVariants['orientation'];
+  /**
+   * Reverse the order of the default slot.
+   * @default false
+   */
+  reverse?: boolean;
+  ui?: ComponentSlots<typeof sectionTheme>;
+  class?: any;
+  [key: string]: unknown;
+}
+
+const {
+  as = "section",
+  variant = "default",
+  orientation = "vertical",
+  reverse = false,
+  ctaVariant = "solid",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RLASectionProps;
+
+const classes = resolveClasses(section, {
+  variant,
+  orientation,
+  reverse,
+  ...(variant === "cta" && { ctaVariant }),
+  headline: !!(Astro.slots.has("headline") || Astro.props.headline),
+  title: !!(Astro.slots.has("title") || Astro.props.title),
+  description: !!(Astro.slots.has("description") || Astro.props.description),
+  body: Astro.slots.has("body")
+}, useUi("section", uiProp), className);
+
+const hasDefaultSlot = Astro.slots.has("default");
+
+const Tag = as;
+const TitleTag = variant === "hero" ? "h1" : "h2";
+---
+
+<Tag
+  data-orientation={orientation}
+  data-slot="root"
+  class:list={[classes.root]}
+  {...rest}
+>
+  {Astro.slots.has("background") && (
+    <div class:list={[classes.background]} data-slot="background">
+      <slot name="background" />
+    </div>
+  )}
+
+  <slot name="top" />
+
+  <div
+    data-slot="container"
+    class:list={[classes.container]}
+  >
+    {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description || Astro.slots.has("body") || Astro.slots.has("footer") || Astro.slots.has("links") || Astro.props.links?.length) && (
+      <div
+        data-slot="wrapper"
+        class:list={[classes.wrapper]}
+      >
+        {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description) && (
+          <div
+            data-slot="header"
+            class:list={[classes.header]}
+          >
+            <slot name="header">
+              {(Astro.props.icon || Astro.slots.has("leading")) && (
+                <div
+                  data-slot="leading"
+                  class:list={[classes.leading]}
+                >
+                  <slot name="leading" {...{ ui: classes }}>
+                    {Astro.props.icon && (
+                      <RLAIcon name={Astro.props.icon} size="md" ui={{ root: classes.leadingIcon }} />
+                    )}
+                  </slot>
+                </div>
+              )}
+
+              {(Astro.props.headline || Astro.slots.has("headline")) && (
+                <div
+                  data-slot="headline"
+                  class:list={[classes.headline]}
+                >
+                  <slot name="headline">
+                    {Astro.props.headline}
+                  </slot>
+                </div>
+              )}
+
+              {(Astro.props.title || Astro.slots.has("title")) && (
+                <TitleTag
+                  data-slot="title"
+                  class:list={[classes.title]}
+                >
+                  <slot name="title">
+                    {Astro.props.title}
+                  </slot>
+                </TitleTag>
+              )}
+
+              {(Astro.props.description || Astro.slots.has("description")) && (
+                <div
+                  data-slot="description"
+                  class:list={[classes.description]}
+                >
+                  <slot name="description">
+                    {Astro.props.description}
+                  </slot>
+                </div>
+              )}
+            </slot>
+          </div>
+        )}
+
+        {Astro.slots.has("body") && (
+          <div
+            data-slot="body"
+            class:list={[classes.body]}
+          >
+            <slot name="body" />
+          </div>
+        )}
+
+        {(Astro.slots.has("footer") || Astro.slots.has("links") || Astro.props.links?.length) && (
+          <div
+            data-slot="footer"
+            class:list={[classes.footer]}
+          >
+            <slot name="footer">
+              {(Astro.props.links?.length || Astro.slots.has("links")) && (
+                <div
+                  data-slot="links"
+                  class:list={[classes.links]}
+                >
+                  {Astro.props.links?.map((link) => (
+                    <RLAButton size="lg" {...link} />
+                  ))}
+                  <slot name="links" />
+                </div>
+              )}
+            </slot>
+          </div>
+        )}
+      </div>
+    )}
+
+    {hasDefaultSlot ? (
+      <slot />
+    ) : orientation === "horizontal" ? (
+      <div class="hidden lg:block" />
+    ) : null}
+  </div>
+
+  <slot name="bottom" />
+</Tag>

package/src/components/vue/RLVButton.vue

@@ -2,7 +2,7 @@
 import { computed, useSlots } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import buttonTheme from "../../themes/button.theme"
 
 const button = scv(buttonTheme)
@@ -64,8 +64,8 @@ export interface RLVButtonProps {
   /**
    * Component-specific CSS class overrides
    */
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof buttonTheme>
+  class?: any
   [key: string]: unknown
 }
 
@@ -73,8 +73,6 @@ const {
   variant = "solid",
   color = "primary",
   size = "md",
-  class: className,
-  ui: uiProp,
   href,
   label,
   leadingIcon,
@@ -84,7 +82,9 @@ const {
   block = false,
   active = false,
   activeColor,
-  activeVariant
+  activeVariant,
+  ui: uiProp,
+  class: className
 } = defineProps<RLVButtonProps>()
 
 const slots = useSlots()
@@ -141,13 +141,7 @@ const Tag = href ? "a" : "button"
 </script>
 
 <template>
-  <component
-    v-bind="$attrs"
-    :is="Tag"
-    :href="href"
-    :class="resolvedClasses.root"
-    data-slot="rlv-button"
-  >
+  <component v-bind="$attrs" :is="Tag" :href="href" :class="resolvedClasses.root" data-slot="root">
     <slot name="leading" :ui="resolvedClasses">
       <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
         <span :class="[showLeadingIcon, leadingIconClass]" aria-hidden="true" />

package/src/components/vue/RLVFooter.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import footerTheme from "../../themes/footer.theme"
 
 const footer = scv(footerTheme)
@@ -10,11 +10,11 @@ type FooterVariants = ComponentVariants<typeof footerTheme>
 
 export interface RLVFooterProps {
   contain?: FooterVariants["contain"]
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof footerTheme>
+  class?: any
 }
 
-const { contain = false, class: className, ui: uiProp } = defineProps<RLVFooterProps>()
+const { contain = false, ui: uiProp, class: className } = defineProps<RLVFooterProps>()
 
 defineSlots<{
   left(props: {}): any
@@ -28,15 +28,15 @@ const resolvedClasses = computed(() =>
 </script>
 
 <template>
-  <footer :class="[resolvedClasses.root]" data-slot="rlv-footer" v-bind="$attrs">
+  <footer :class="[resolvedClasses.root]" data-slot="root" v-bind="$attrs">
     <div :class="resolvedClasses.container">
-      <div :class="resolvedClasses.left" data-slot="footer-left">
+      <div :class="resolvedClasses.left" data-slot="left">
         <slot name="left" />
       </div>
-      <div :class="resolvedClasses.center" data-slot="footer-center">
+      <div :class="resolvedClasses.center" data-slot="center">
         <slot name="center" />
       </div>
-      <div :class="resolvedClasses.right" data-slot="footer-right">
+      <div :class="resolvedClasses.right" data-slot="right">
         <slot name="right" />
       </div>
     </div>

package/src/components/vue/RLVHeader.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, onUnmounted, ref } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import headerTheme from "../../themes/header.theme"
 import { getHeaderStack } from "../../utils/headerStack"
 
@@ -15,8 +15,8 @@ export interface RLVHeaderProps {
   fixed?: HeaderVariants["fixed"]
   stackIndex?: number
   hideOnScroll?: boolean
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof headerTheme>
+  class?: any
 }
 
 const {
@@ -25,8 +25,8 @@ const {
   fixed = false,
   stackIndex = 0,
   hideOnScroll = false,
-  class: className,
-  ui: uiProp
+  ui: uiProp,
+  class: className
 } = defineProps<RLVHeaderProps>()
 
 defineSlots<{
@@ -112,18 +112,18 @@ onUnmounted(() => {
     :id="id"
     :class="[resolvedClasses.root]"
     :style="fixedStyle"
-    data-slot="rlv-header"
+    data-slot="root"
     v-bind="$attrs"
   >
     <div ref="contentRef" :class="resolvedClasses.content">
       <div :class="resolvedClasses.container">
-        <div :class="resolvedClasses.left" data-slot="header-left">
+        <div :class="resolvedClasses.left" data-slot="left">
           <slot name="left" />
         </div>
-        <div :class="resolvedClasses.center" data-slot="header-center">
+        <div :class="resolvedClasses.center" data-slot="center">
           <slot name="center" />
         </div>
-        <div :class="resolvedClasses.right" data-slot="header-right">
+        <div :class="resolvedClasses.right" data-slot="right">
           <slot name="right" />
         </div>
       </div>

package/src/components/vue/RLVIcon.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import iconTheme from "../../themes/icon.theme"
 
 const icon = scv(iconTheme)
@@ -11,11 +11,11 @@ type IconVariants = ComponentVariants<typeof iconTheme>
 export interface RLVIconProps {
   name: string
   size?: IconVariants["size"]
-  class?: string
-  ui?: Partial<Record<string, string>>
+  ui?: ComponentSlots<typeof iconTheme>
+  class?: any
 }
 
-const { name, size = "md", class: className, ui: uiProp } = defineProps<RLVIconProps>()
+const { name, size = "md", ui: uiProp, class: className } = defineProps<RLVIconProps>()
 
 const resolvedClasses = computed(() =>
   resolveClasses(icon, { size }, useUi("icon", uiProp), className)
@@ -27,12 +27,7 @@ defineSlots<{
 </script>
 
 <template>
-  <span
-    v-bind="$attrs"
-    :class="[resolvedClasses.root, name]"
-    data-slot="rlv-icon"
-    aria-hidden="true"
-  >
+  <span v-bind="$attrs" :class="[resolvedClasses.root, name]" data-slot="root" aria-hidden="true">
     <slot />
   </span>
 </template>

package/src/components/vue/RLVLogo.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
 import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
@@ -11,9 +12,9 @@ export interface RLVLogoProps {
   variant?: string
   mode?: "color" | "white" | "black"
   href?: string
-  ui?: Partial<Record<string, string>>
-  class?: string
   alt?: string
+  ui?: ComponentSlots<typeof logoTheme>
+  class?: any
   [key: string]: unknown
 }
 
@@ -64,7 +65,7 @@ const Tag = computed(() => (props.href ? "a" : "div"))
     :href="Tag === 'a' ? href : undefined"
     :aria-label="alt || variant"
     :class="resolvedClasses.root"
-    data-slot="rlv-logo"
+    data-slot="root"
   >
     <template v-if="logoSrc">
       <span v-if="isIcon" :class="[logoSrc, 'size-full block shrink-0']" aria-hidden="true" />

package/src/components/vue/RLVPlaceholder.vue

@@ -2,17 +2,18 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
 import placeholderTheme from "../../themes/placeholder.theme"
 
 const placeholder = scv(placeholderTheme)
 
 export interface RLVPlaceholderProps {
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof placeholderTheme>
+  class?: any
   [key: string]: unknown
 }
 
-const { class: className, ui: uiProp } = defineProps<RLVPlaceholderProps>()
+const { ui: uiProp, class: className } = defineProps<RLVPlaceholderProps>()
 
 defineSlots<{
   /**

package/src/components/vue/RLVScrollToTop.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants } from "../../types"
+import type { ComponentVariants, ComponentSlots } from "../../types"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 import { useScrollToTop } from "../../composables/useScrollToTop"
 import { computed } from "vue"
@@ -15,8 +15,8 @@ export interface RLVScrollToTopProps {
   duration?: number
   threshold?: number
   showProgress?: boolean
-  ui?: Partial<Record<string, string>>
-  class?: string
+  ui?: ComponentSlots<typeof scrollToTopTheme>
+  class?: any
 }
 
 const {