@rimelight/ui 0.0.23 → 0.0.25

package/src/components/astro/RLAScrollToTop.astro

@@ -1,221 +1,171 @@
----
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { scrollToTopTheme } from "../../themes/scroll-to-top.theme.ts"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-export interface RLAScrollToTopProps {
-  /**
-   * Button color.
-   *
-   * @default "primary"
-   */
-  color?: keyof typeof scrollToTopTheme.variants.color
-  /**
-   * Transition duration for the progress circle (in seconds).
-   *
-   * @default 0.1
-   */
-  duration?: number
-  /**
-   * Scroll threshold (in pixels) before the button becomes visible.
-   *
-   * @default 200
-   */
-  threshold?: number
-  /**
-   * Whether to show the scroll progress indicator.
-   *
-   * @default false
-   */
-  showProgress?: boolean
-  /**
-   * Stroke width of the progress circle.
-   *
-   * @default 6
-   */
-  progressWidth?: number
-  /**
-   * UI overrides for individual slots, derived from the scroll-to-top theme.
-   */
-  ui?: Partial<Record<keyof typeof scrollToTopTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string
-  /**
-   * Standard HTML attributes.
-   */
-  [key: string]: unknown
-}
-
-const scrollToTop = scv({
-  slots: [...scrollToTopTheme.slots],
-  base: scrollToTopTheme.base,
-  variants: scrollToTopTheme.variants,
-  compoundVariants: [...scrollToTopTheme.compoundVariants],
-  defaultVariants: scrollToTopTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
-
-const {
-  color = "primary",
-  progressWidth = 6,
-  duration = 0.1,
-  threshold = 200,
-  showProgress = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as RLAScrollToTopProps
-
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig["scroll-to-top"] as Record<string, unknown>) ?? {}
-) as Record<keyof typeof scrollToTopTheme.base, string | undefined>
-
-const { root, button, progressBase, svg: svgClass, iconContainer, icon } = scrollToTop({
-  color
-})
-
-const circumference = 2 * Math.PI * 45
-const percentPx = circumference / 100
----
-
-<div
-  class:list={["rla-scroll-to-top", "fixed bottom-6 right-6 z-50", twMerge(root, mergedUI.root, className)]}
-  data-threshold={threshold}
-  data-duration={duration}
-  data-circle-stroke-width={progressWidth}
-  {...rest}
->
-  <button
-    type="button"
-    class={twMerge(button, mergedUI.button)}
-    aria-label="Scroll to top"
-    data-scroll-to-top-button
-  >
-    <div class={twMerge(progressBase, mergedUI.progressBase)}>
-      <svg class={twMerge(svgClass, mergedUI.svg)} viewBox="0 0 100 100" shape-rendering="geometricPrecision">
-        <circle
-          cx="50"
-          cy="50"
-          r="45"
-          fill="var(--color-primary-950)"
-          stroke-width={progressWidth}
-          stroke-dashoffset="0"
-          stroke-linecap="round"
-          class="gauge-secondary-stroke opacity-100"
-        />
-        {showProgress && (
-        <circle
-          cx="50"
-          cy="50"
-          r="45"
-          fill="transparent"
-          stroke-width={progressWidth}
-          stroke-dashoffset="0"
-          stroke-linecap="round"
-          class="gauge-primary-stroke opacity-100"
-          data-progress-circle
-          style={`--stroke-percent: 0; --percent-to-px: ${percentPx}px; --circumference: ${circumference}; --duration: ${duration}s`}
-        />
-        )}
-      </svg>
-      <div class={twMerge(iconContainer, mergedUI.iconContainer)}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class={twMerge(icon, mergedUI.icon)}
-        >
-          <path d="m5 12 7-7 7 7" />
-          <path d="M12 19V5" />
-        </svg>
-      </div>
-    </div>
-  </button>
-</div>
-
-<script>
-  document.querySelectorAll('.rla-scroll-to-top').forEach((el) => {
-    const element = el as HTMLElement
-    const button = element.querySelector('[data-scroll-to-top-button]') as HTMLButtonElement | null
-    const progressCircle = element.querySelector('[data-progress-circle]') as SVGCircleElement | null
-
-    if (!button) return
-
-    const threshold = Number(element.dataset.threshold) || 200
-
-    function updateScrollState() {
-      const scrollTop = window.scrollY || document.documentElement.scrollTop
-      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
-      const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
-
-      if (scrollTop > threshold) {
-        element.classList.add('visible')
-      } else {
-        element.classList.remove('visible')
-      }
-
-      if (progressCircle) {
-        const circumference = 2 * Math.PI * 45
-        const percentPx = circumference / 100
-        const duration = element.dataset.duration || '0.1'
-        progressCircle.style.setProperty('--stroke-percent', scrollPercentage.toString())
-        progressCircle.style.setProperty('--percent-to-px', `${percentPx}px`)
-        progressCircle.style.setProperty('--circumference', circumference.toString())
-        progressCircle.style.setProperty('--duration', `${duration}s`)
-      }
-    }
-
-    button.addEventListener('click', () => {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-    })
-
-    window.addEventListener('scroll', updateScrollState, { passive: true })
-    updateScrollState()
-  })
-</script>
-
-<style>
-  .rla-scroll-to-top {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  .rla-scroll-to-top.visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .progress-circle-base {
-    transform: translateZ(0);
-  }
-
-  .gauge-primary-stroke {
-    stroke: var(--color-primary-500);
-    stroke-dasharray: calc(var(--stroke-percent, 0) * var(--percent-to-px, 2.826px)) var(--circumference, 282.6);
-    transition: stroke-dasharray var(--duration, 0.1s) ease, stroke var(--duration, 0.1s) ease;
-    transform: rotate(-90deg);
-    transform-origin: center;
-    shape-rendering: geometricPrecision;
-  }
-
-  .gauge-secondary-stroke {
-    stroke: var(--color-primary-900);
-    stroke-dasharray: 282.6;
-    transform: rotate(-90deg);
-    transform-origin: center;
-  }
-</style>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants } from "../../types"
+import scrollToTopTheme from "../../themes/scroll-to-top.theme"
+
+const scrollToTop = scv(scrollToTopTheme)
+type ScrollToTopVariants = ComponentVariants<typeof scrollToTopTheme>
+
+export interface RLAScrollToTopProps {
+  color?: ScrollToTopVariants['color'];
+  progressWidth?: number;
+  duration?: number;
+  threshold?: number;
+  showProgress?: boolean;
+  ui?: Partial<Record<string, string>>;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  color = "primary",
+  progressWidth = 6,
+  duration = 0.1,
+  threshold = 200,
+  showProgress = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RLAScrollToTopProps
+
+const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
+
+const circumference = 2 * Math.PI * 45
+const percentPx = circumference / 100
+---
+
+<div
+  class:list={["rla-scroll-to-top", "fixed bottom-6 right-6 z-50", classes.root]}
+  data-threshold={threshold}
+  data-duration={duration}
+  data-circle-stroke-width={progressWidth}
+  {...rest}
+>
+  <button
+    type="button"
+    class={classes.button}
+    aria-label="Scroll to top"
+    data-scroll-to-top-button
+  >
+    <div class={classes.progressBase}>
+      <svg class={classes.svg} viewBox="0 0 100 100" shape-rendering="geometricPrecision">
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="var(--color-primary-950)"
+          stroke-width={progressWidth}
+          stroke-dashoffset="0"
+          stroke-linecap="round"
+          class="gauge-secondary-stroke opacity-100"
+        />
+        {showProgress && (
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="transparent"
+          stroke-width={progressWidth}
+          stroke-dashoffset="0"
+          stroke-linecap="round"
+          class="gauge-primary-stroke opacity-100"
+          data-progress-circle
+          style={`--stroke-percent: 0; --percent-to-px: ${percentPx}px; --circumference: ${circumference}; --duration: ${duration}s`}
+        />
+        )}
+      </svg>
+      <div class={classes.iconContainer}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class={classes.icon}
+        >
+          <path d="m5 12 7-7 7 7" />
+          <path d="M12 19V5" />
+        </svg>
+      </div>
+    </div>
+  </button>
+</div>
+
+<script>
+  document.querySelectorAll('.rla-scroll-to-top').forEach((el) => {
+    const element = el as HTMLElement
+    const button = element.querySelector('[data-scroll-to-top-button]') as HTMLButtonElement | null
+    const progressCircle = element.querySelector('[data-progress-circle]') as SVGCircleElement | null
+
+    if (!button) return
+
+    const threshold = Number(element.dataset.threshold) || 200
+
+    function updateScrollState() {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop
+      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
+      const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
+
+      if (scrollTop > threshold) {
+        element.classList.add('visible')
+      } else {
+        element.classList.remove('visible')
+      }
+
+      if (progressCircle) {
+        const circumference = 2 * Math.PI * 45
+        const percentPx = circumference / 100
+        const duration = element.dataset.duration || '0.1'
+        progressCircle.style.setProperty('--stroke-percent', scrollPercentage.toString())
+        progressCircle.style.setProperty('--percent-to-px', `${percentPx}px`)
+        progressCircle.style.setProperty('--circumference', circumference.toString())
+        progressCircle.style.setProperty('--duration', `${duration}s`)
+      }
+    }
+
+    button.addEventListener('click', () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    })
+
+    window.addEventListener('scroll', updateScrollState, { passive: true })
+    updateScrollState()
+  })
+</script>
+
+<style>
+  .rla-scroll-to-top {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .rla-scroll-to-top.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .progress-circle-base {
+    transform: translateZ(0);
+  }
+
+  .gauge-primary-stroke {
+    stroke: var(--color-primary-500);
+    stroke-dasharray: calc(var(--stroke-percent, 0) * var(--percent-to-px, 2.826px)) var(--circumference, 282.6);
+    transition: stroke-dasharray var(--duration, 0.1s) ease, stroke var(--duration, 0.1s) ease;
+    transform: rotate(-90deg);
+    transform-origin: center;
+    shape-rendering: geometricPrecision;
+  }
+
+  .gauge-secondary-stroke {
+    stroke: var(--color-primary-900);
+    stroke-dasharray: 282.6;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+</style>

package/src/components/astro/RLASection.astro

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