@rimelight/ui 0.0.24 → 0.0.26

package/src/components/astro/RLASection.astro

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

@@ -1,139 +1,166 @@
-<script setup lang="ts">
-import { computed, useSlots } from "vue"
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { buttonTheme } from "../../themes/button.theme.ts"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const button = scv({
-  slots: [...buttonTheme.slots],
-  base: buttonTheme.base,
-  variants: buttonTheme.variants,
-  compoundVariants: [...buttonTheme.compoundVariants],
-  defaultVariants: buttonTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
-
-export interface RLVButtonProps {
-  variant?: keyof typeof buttonTheme.variants.variant
-  color?: keyof typeof buttonTheme.variants.color
-  size?: keyof typeof buttonTheme.variants.size
-  href?: string
-  label?: string
-  leadingIcon?: string
-  trailingIcon?: string
-  loading?: boolean
-  square?: boolean
-  block?: boolean
-  active?: boolean
-  activeColor?: keyof typeof buttonTheme.variants.color
-  activeVariant?: keyof typeof buttonTheme.variants.variant
-  ui?: Partial<Record<string, string>>
-  class?: string
-  [key: string]: unknown
-}
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  class: className,
-  ui: uiProp,
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  loading = false,
-  square = false,
-  block = false,
-  active = false,
-  activeColor,
-  activeVariant
-} = defineProps<RLVButtonProps>()
-
-const slots = useSlots()
-
-const isLeading = computed(() => !!(leadingIcon || slots.leading) || loading)
-const isTrailing = computed(() => !!(trailingIcon || slots.trailing) || (loading && !isLeading.value))
-
-const showLeadingIcon = computed(() => {
-  if (loading) return "i-lucide-loader-circle"
-  return leadingIcon
-})
-
-const showTrailingIcon = computed(() => {
-  if (loading) return "i-lucide-loader-circle"
-  return trailingIcon
-})
-
-const leadingIconClass = computed(() => {
-  return loading && isLeading.value ? "animate-spin" : ""
-})
-
-const trailingIconClass = computed(() => {
-  return loading && isTrailing.value ? "animate-spin" : ""
-})
-
-defineSlots<{
-  default(props: {}): any
-  leading(props: { ui: Record<string, string> }): any
-  trailing(props: { ui: Record<string, string> }): any
-}>()
-
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.button as Record<string, unknown>) ?? {}
-) as Record<string, string | undefined>
-
-const resolved = computed(() => button({
-  variant: active && activeVariant ? activeVariant : variant,
-  color: active && activeColor ? activeColor : color,
-  size,
-  block,
-  square: square || (!label && !slots.default),
-  leading: isLeading.value,
-  trailing: isTrailing.value,
-  loading,
-  active
-}))
-
-const Tag = href ? "a" : "button"
-</script>
-
-<template>
-  <component
-    v-bind="$attrs"
-    :is="Tag"
-    :href="href"
-    :class="twMerge(resolved.root, mergedUI.root, className)"
-    data-slot="rlv-button"
-  >
-    <slot name="leading" :ui="resolved">
-      <span
-        v-if="isLeading"
-        :class="twMerge(resolved.leadingIcon, mergedUI.leadingIcon)"
-        data-slot="leading-icon"
-      >
-        <span :class="[showLeadingIcon, leadingIconClass]" aria-hidden="true" />
-      </span>
-    </slot>
-
-    <span v-if="label !== undefined && label !== null" :class="twMerge(resolved.label, mergedUI.label)" data-slot="label">
-      {{ label }}
-    </span>
-    <slot v-else />
-
-    <slot name="trailing" :ui="resolved">
-      <span
-        v-if="isTrailing"
-        :class="twMerge(resolved.trailingIcon, mergedUI.trailingIcon)"
-        data-slot="trailing-icon"
-      >
-        <span :class="[showTrailingIcon, trailingIconClass]" aria-hidden="true" />
-      </span>
-    </slot>
-  </component>
-</template>
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import buttonTheme from "../../themes/button.theme"
+
+const button = scv(buttonTheme)
+type ButtonVariants = ComponentVariants<typeof buttonTheme>
+
+export interface RLVButtonProps {
+  /**
+   * The visual style variant of the button
+   */
+  variant?: ButtonVariants["variant"]
+  /**
+   * The color scheme applied to the button
+   */
+  color?: ButtonVariants["color"]
+  /**
+   * The size scale of the button
+   */
+  size?: ButtonVariants["size"]
+  /**
+   * When provided, renders the button as an anchor link
+   */
+  href?: string
+  /**
+   * The text label displayed inside the button
+   */
+  label?: string
+  /**
+   * Icon name displayed before the label
+   */
+  leadingIcon?: string
+  /**
+   * Icon name displayed after the label
+   */
+  trailingIcon?: string
+  /**
+   * Shows a loading spinner animation
+   */
+  loading?: boolean
+  /**
+   * Renders a square button with equal padding
+   */
+  square?: boolean
+  /**
+   * Makes the button stretch to full width
+   */
+  block?: boolean
+  /**
+   * Applies active state styling
+   */
+  active?: boolean
+  /**
+   * Color used when button is in active state
+   */
+  activeColor?: ButtonVariants["color"]
+  /**
+   * Variant used when button is in active state
+   */
+  activeVariant?: ButtonVariants["variant"]
+  /**
+   * Component-specific CSS class overrides
+   */
+  ui?: ComponentSlots<typeof buttonTheme>
+  class?: any
+  [key: string]: unknown
+}
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant,
+  ui: uiProp,
+  class: className
+} = defineProps<RLVButtonProps>()
+
+const slots = useSlots()
+
+const isLeading = computed(() => !!(leadingIcon || slots.leading) || loading)
+const isTrailing = computed(
+  () => !!(trailingIcon || slots.trailing) || (loading && !isLeading.value)
+)
+
+const showLeadingIcon = computed(() => {
+  if (loading) return "i-lucide-loader-circle"
+  return leadingIcon
+})
+
+const showTrailingIcon = computed(() => {
+  if (loading) return "i-lucide-loader-circle"
+  return trailingIcon
+})
+
+const leadingIconClass = computed(() => {
+  return loading && isLeading.value ? "animate-spin" : ""
+})
+
+const trailingIconClass = computed(() => {
+  return loading && isTrailing.value ? "animate-spin" : ""
+})
+
+defineSlots<{
+  default(props: { ui: Record<string, string> }): any
+  leading(props: { ui: Record<string, string> }): any
+  trailing(props: { ui: Record<string, string> }): any
+}>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    button,
+    {
+      variant: active && activeVariant ? activeVariant : variant,
+      color: active && activeColor ? activeColor : color,
+      size,
+      block,
+      square: square || (!label && !slots.default),
+      leading: isLeading.value,
+      trailing: isTrailing.value,
+      loading,
+      active
+    },
+    useUi("button", uiProp),
+    className
+  )
+)
+
+const Tag = href ? "a" : "button"
+</script>
+
+<template>
+  <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" />
+      </span>
+    </slot>
+
+    <span
+      v-if="label !== undefined && label !== null"
+      :class="resolvedClasses.label"
+      data-slot="label"
+    >
+      {{ label }}
+    </span>
+    <slot v-else />
+
+    <slot name="trailing" :ui="resolvedClasses">
+      <span v-if="isTrailing" :class="resolvedClasses.trailingIcon" data-slot="trailing-icon">
+        <span :class="[showTrailingIcon, trailingIconClass]" aria-hidden="true" />
+      </span>
+    </slot>
+  </component>
+</template>

package/src/components/vue/RLVFooter.vue

@@ -1,79 +1,42 @@
 <script setup lang="ts">
 import { computed } from "vue"
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import { useUi } from "../../composables"
-import { footerTheme } from "../../themes/footer.theme.ts"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import footerTheme from "../../themes/footer.theme"
 
-const footer = scv({
-  slots: [...footerTheme.slots],
-  base: footerTheme.base,
-  variants: footerTheme.variants,
-  defaultVariants: footerTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+const footer = scv(footerTheme)
+type FooterVariants = ComponentVariants<typeof footerTheme>
 
 export interface RLVFooterProps {
-  /**
-   * Whether to contain the footer content in a max-width container.
-   *
-   * @default false
-   */
-  contain?: boolean
-  /**
-   * UI overrides for individual slots, derived from the footer theme.
-   */
-  ui?: Partial<Record<keyof typeof footerTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string
+  contain?: FooterVariants["contain"]
+  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<{
-  /**
-   * Content to display on the left side of the footer.
-   */
   left(props: {}): any
-  /**
-   * Content to display in the center of the footer.
-   */
   center(props: {}): any
-  /**
-   * Content to display on the right side of the footer.
-   */
   right(props: {}): any
 }>()
 
-const mergedUI = useUi("footer", uiProp as Record<string, unknown> | undefined)
-
-const resolvedClasses = computed(() => {
-  const classes = footer({
-    contain
-  })
-
-  return {
-    root: twMerge(classes.root, mergedUI.value.root as string | undefined),
-    container: twMerge(classes.container, mergedUI.value.container as string | undefined),
-    left: twMerge(classes.left, mergedUI.value.left as string | undefined),
-    center: twMerge(classes.center, mergedUI.value.center as string | undefined),
-    right: twMerge(classes.right, mergedUI.value.right as string | undefined)
-  }
-})
+const resolvedClasses = computed(() =>
+  resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
+)
 </script>
 
 <template>
-  <footer :class="[resolvedClasses.root, className]" 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>