@rimelight/ui 0.0.47 → 0.0.48

package/src/components/post/RLSPost.tsx

@@ -0,0 +1,134 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { PostProps } from "./post"
+import { postTheme } from "./post.theme"
+import RLSBadge from "../badge/RLSBadge"
+
+export interface RLSPostProps extends PostProps {
+  children?: JSX.Element
+  imageSlot?: JSX.Element
+  titleSlot?: JSX.Element
+  descriptionSlot?: JSX.Element
+  badgeSlot?: JSX.Element
+  dateSlot?: JSX.Element
+  footerSlot?: JSX.Element
+}
+
+const RLSPost: Component<RLSPostProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "title",
+    "description",
+    "date",
+    "image",
+    "to",
+    "badge",
+    "badgeColor",
+    "variant",
+    "orientation",
+    "ui",
+    "class",
+    "children",
+    "imageSlot",
+    "titleSlot",
+    "descriptionSlot",
+    "badgeSlot",
+    "dateSlot",
+    "footerSlot"
+  ])
+
+  const classes = createMemo(() =>
+    postTheme({
+      variant: props.variant ?? "soft",
+      orientation: props.orientation ?? "vertical",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const formattedDate = props.date
+    ? props.date instanceof Date
+      ? props.date.toLocaleDateString()
+      : props.date
+    : null
+
+  const imageSrc = () =>
+    typeof props.image === "string"
+      ? props.image
+      : (props.image as { src?: string } | undefined)?.src
+
+  const body = () => (
+    <>
+      {props.imageSlot !== undefined ? (
+        props.imageSlot
+      ) : props.image ? (
+        <div class={classes()["imageWrapper"]} data-slot="image-wrapper">
+          <img
+            src={imageSrc()}
+            alt={props.title || ""}
+            class={classes()["image"]}
+            data-slot="image"
+          />
+        </div>
+      ) : null}
+
+      <div class={classes()["content"]} data-slot="content">
+        {props.titleSlot !== undefined ? (
+          props.titleSlot
+        ) : props.title ? (
+          <h3 class={classes()["title"]} data-slot="title">
+            {props.title}
+          </h3>
+        ) : null}
+
+        {props.descriptionSlot !== undefined ? (
+          props.descriptionSlot
+        ) : props.description ? (
+          <p class={classes()["description"]} data-slot="description">
+            {props.description}
+          </p>
+        ) : null}
+
+        {props.badgeSlot !== undefined ? (
+          props.badgeSlot
+        ) : props.badge ? (
+          <RLSBadge
+            color={(props.badgeColor ?? "primary") as any}
+            size="sm"
+            shape="pill"
+            class={classes()["badge"]}
+            data-slot="badge"
+          >
+            {props.badge}
+          </RLSBadge>
+        ) : null}
+
+        {props.dateSlot !== undefined ? (
+          props.dateSlot
+        ) : formattedDate ? (
+          <time class={classes()["date"]} data-slot="date">
+            {formattedDate}
+          </time>
+        ) : null}
+
+        {props.children}
+      </div>
+
+      {props.footerSlot !== undefined && (
+        <div class={classes()["footer"]} data-slot="footer">
+          {props.footerSlot}
+        </div>
+      )}
+    </>
+  )
+
+  return props.to ? (
+    <a href={props.to} class={classes()["root"]} data-slot="root" {...rest}>
+      {body()}
+    </a>
+  ) : (
+    <div class={classes()["root"]} data-slot="root" {...rest}>
+      {body()}
+    </div>
+  )
+}
+
+export default RLSPost

package/src/components/pricing-plan/RLSPricingPlan.tsx

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

package/src/components/pricing-table/RLSPricingTable.tsx

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

package/src/components/progress/RLSProgress.tsx

@@ -0,0 +1,53 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ProgressProps } from "./progress"
+import { progressTheme } from "./progress.theme"
+
+export interface RLSProgressProps extends ProgressProps {
+  children?: JSX.Element
+}
+
+const RLSProgress: Component<RLSProgressProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "value",
+    "max",
+    "theme",
+    "color",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const value = () => props.value ?? 0
+  const max = () => props.max ?? 100
+  const percentage = createMemo(() => Math.min(100, Math.max(0, (value() / max()) * 100)))
+
+  const resolvedClasses = createMemo(() =>
+    progressTheme({
+      color: props.color,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div
+      class={resolvedClasses().root}
+      data-slot="progress-root"
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max()}
+      aria-valuenow={value()}
+      data-theme={props.theme}
+      {...rest}
+    >
+      <div
+        class={resolvedClasses().indicator}
+        data-slot="indicator"
+        style={{ transform: `translateX(-${100 - percentage()}%)` }}
+      />
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSProgress

package/src/components/prose/RLSProse.tsx

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

package/src/components/qr-code/RLSQrCode.tsx

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

package/src/components/quote/RLAQuote.astro

@@ -1,15 +1,19 @@
 ---
 import RLAIcon from "../icon/RLAIcon.astro"
+import type { QuoteProps } from "./quote"
+import { quoteTheme } from "./quote.theme"
+
+export interface Props extends QuoteProps {}
+
+const classes = quoteTheme(Astro.props)
 ---
 
-<figure class="relative my-8 border-y-[3px] border-astro-gray-500 py-4">
-    <RLAIcon name="quote" class="mb-2 s-10 md:absolute md:right-[calc(100%+1rem)] md:top-6" />
-    <blockquote
-            class="font-heading heading-3 text-xl font-medium text-white md:text-[32px] md:leading-[40px]"
-    >
+<figure class={classes.root} data-slot="root" {...Astro.props}>
+    <RLAIcon name="quote" class={classes.icon} data-slot="icon" />
+    <blockquote class={classes.quote} data-slot="quote">
         <slot name="quote" />
     </blockquote>
-    <figcaption class="font-mono mt-4 text-right text-astro-pink-light">
+    <figcaption class={classes.caption} data-slot="caption">
         <slot name="caption" />
     </figcaption>
 </figure>

package/src/components/quote/RLSQuote.tsx

@@ -0,0 +1,37 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { QuoteProps } from "./quote"
+import { quoteTheme } from "./quote.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSQuoteProps extends QuoteProps {
+  children?: JSX.Element
+  quote?: JSX.Element
+  caption?: JSX.Element
+}
+
+const RLSQuote: Component<RLSQuoteProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["quote", "caption", "children", "ui", "class"])
+
+  const resolvedClasses = createMemo(() =>
+    quoteTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <figure class={resolvedClasses().root} data-slot="root" {...rest}>
+      <RLSIcon name="quote" class={resolvedClasses().icon} data-slot="icon" />
+      <blockquote class={resolvedClasses().quote} data-slot="quote">
+        {props.quote !== undefined ? props.quote : props.children}
+      </blockquote>
+      {props.caption ? (
+        <figcaption class={resolvedClasses().caption} data-slot="caption">
+          {props.caption}
+        </figcaption>
+      ) : null}
+    </figure>
+  )
+}
+
+export default RLSQuote

package/src/components/quote/quote.theme.ts

@@ -1,9 +1,12 @@
 import { defineTheme } from "../../resolver"
 
 export const quoteTheme = defineTheme("quote", {
-  slots: ["root"],
+  slots: ["root", "icon", "quote", "caption"],
   base: {
-    root: ""
+    root: "relative my-8 border-y-[3px] border-astro-gray-500 py-4",
+    icon: "mb-2 s-10 md:absolute md:right-[calc(100%+1rem)] md:top-6",
+    quote: "font-heading heading-3 text-xl font-medium text-white md:text-[32px] md:leading-[40px]",
+    caption: "font-mono mt-4 text-right text-astro-pink-light"
   },
   variants: {},
   defaultVariants: {}

package/src/components/radio-group/RLSRadioGroup.tsx

@@ -0,0 +1,37 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { RadioGroupProps } from "./radio-group"
+import { radioGroupTheme } from "./radio-group.theme"
+
+export interface RLSRadioGroupProps extends RadioGroupProps {
+  children?: JSX.Element
+}
+
+const RLSRadioGroup: Component<RLSRadioGroupProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "ui",
+    "class",
+    "children",
+    "checked",
+    "disabled",
+    "name",
+    "label",
+    "value",
+    "trailing"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    radioGroupTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSRadioGroup

package/src/components/rating/RLSRating.tsx

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

package/src/components/scroll-area/RLSScrollArea.tsx

@@ -0,0 +1,210 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { ScrollAreaProps } from "./scroll-area"
+import { scrollAreaTheme } from "./scroll-area.theme"
+
+export interface RLSScrollAreaProps extends ScrollAreaProps {
+  children?: JSX.Element
+}
+
+const RLSScrollArea: Component<RLSScrollAreaProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "orientation",
+    "scrollHideDelay",
+    "height",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const orientation = () => props.orientation ?? "vertical"
+  const hideDelay = () => props.scrollHideDelay ?? 600
+
+  let viewportRef: HTMLDivElement | null = null
+  let vBarRef: HTMLDivElement | null = null
+  let hBarRef: HTMLDivElement | null = null
+  let vThumbRef: HTMLDivElement | null = null
+  let hThumbRef: HTMLDivElement | null = null
+
+  const [barsVisible, setBarsVisible] = createSignal(false)
+  let hideTimer: ReturnType<typeof setTimeout> | undefined
+
+  const showBars = () => {
+    setBarsVisible(true)
+  }
+
+  const hideBars = () => {
+    if (hideTimer) clearTimeout(hideTimer)
+    hideTimer = setTimeout(() => {
+      setBarsVisible(false)
+    }, hideDelay())
+  }
+
+  const updateThumbs = () => {
+    const vp = viewportRef
+    if (!vp) return
+
+    if (vThumbRef && vBarRef) {
+      const ratio = vp.clientHeight / vp.scrollHeight
+      const thumbH = Math.max(ratio * vBarRef.clientHeight, 20)
+      const thumbTop = (vp.scrollTop / vp.scrollHeight) * vBarRef.clientHeight
+      vThumbRef.style.height = `${thumbH}px`
+      vThumbRef.style.transform = `translateY(${thumbTop}px)`
+    }
+
+    if (hThumbRef && hBarRef) {
+      const ratio = vp.clientWidth / vp.scrollWidth
+      const thumbW = Math.max(ratio * hBarRef.clientWidth, 20)
+      const thumbLeft = (vp.scrollLeft / vp.scrollWidth) * hBarRef.clientWidth
+      hThumbRef.style.width = `${thumbW}px`
+      hThumbRef.style.transform = `translateX(${thumbLeft}px)`
+    }
+  }
+
+  const handleScroll = () => {
+    if (hideTimer) clearTimeout(hideTimer)
+    showBars()
+    updateThumbs()
+    hideBars()
+  }
+
+  const setupDraggable = (
+    thumb: HTMLDivElement | null,
+    scrollProp: "scrollTop" | "scrollLeft",
+    clientProp: "clientY" | "clientX",
+    sizeProp: "scrollHeight" | "scrollWidth",
+    clientSizeProp: "clientHeight" | "clientWidth"
+  ) => {
+    if (!thumb) return () => {}
+    let startPos = 0
+    let startScroll = 0
+
+    const onMouseDown = (e: MouseEvent) => {
+      const vp = viewportRef
+      if (!vp) return
+      e.preventDefault()
+      startPos = e[clientProp]
+      startScroll = vp[scrollProp]
+
+      const onMouseMove = (ev: MouseEvent) => {
+        const vpCurrent = viewportRef
+        if (!vpCurrent) return
+        const delta = ev[clientProp] - startPos
+        const ratio = vpCurrent[sizeProp] / vpCurrent[clientSizeProp]
+        vpCurrent[scrollProp] = startScroll + delta * ratio
+      }
+
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove)
+        document.removeEventListener("mouseup", onMouseUp)
+      }
+
+      document.addEventListener("mousemove", onMouseMove)
+      document.addEventListener("mouseup", onMouseUp)
+    }
+
+    thumb.addEventListener("mousedown", onMouseDown)
+    return () => thumb.removeEventListener("mousedown", onMouseDown)
+  }
+
+  onMount(() => {
+    updateThumbs()
+    const cleanV = setupDraggable(vThumbRef, "scrollTop", "clientY", "scrollHeight", "clientHeight")
+    const cleanH = setupDraggable(hThumbRef, "scrollLeft", "clientX", "scrollWidth", "clientWidth")
+
+    onCleanup(() => {
+      if (hideTimer) clearTimeout(hideTimer)
+      cleanV()
+      cleanH()
+    })
+  })
+
+  createEffect(() => {
+    void props.children
+    requestAnimationFrame(() => updateThumbs())
+  })
+
+  const resolvedClasses = createMemo(() =>
+    scrollAreaTheme({
+      orientation: orientation(),
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const heightStyle = () =>
+    props.height
+      ? typeof props.height === "number"
+        ? `${props.height}px`
+        : props.height
+      : undefined
+
+  return (
+    <div
+      class={resolvedClasses().root}
+      data-slot="root"
+      data-scroll-area
+      data-orientation={orientation()}
+      data-hide-delay={hideDelay()}
+      style={{ height: heightStyle() }}
+      {...rest}
+    >
+      <div
+        ref={(el) => (viewportRef = el)}
+        class={resolvedClasses().viewport}
+        data-slot="viewport"
+        data-scroll-viewport
+        onScroll={handleScroll}
+      >
+        {props.children}
+      </div>
+
+      <Show when={orientation() === "vertical" || orientation() === "both"}>
+        <div
+          ref={(el) => (vBarRef = el)}
+          class={`${resolvedClasses().scrollbar} transition-opacity ${
+            barsVisible() ? "opacity-100" : "opacity-0"
+          }`}
+          data-slot="scrollbar"
+          data-scroll-bar="vertical"
+          aria-hidden="true"
+        >
+          <div
+            ref={(el) => (vThumbRef = el)}
+            class={resolvedClasses().thumb}
+            data-scroll-thumb="vertical"
+          />
+        </div>
+      </Show>
+
+      <Show when={orientation() === "horizontal" || orientation() === "both"}>
+        <div
+          ref={(el) => (hBarRef = el)}
+          class={`absolute bottom-0 left-0 right-0 h-2.5 flex-row flex p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10 transition-opacity ${
+            barsVisible() ? "opacity-100" : "opacity-0"
+          }`}
+          data-slot="scrollbar"
+          data-scroll-bar="horizontal"
+          aria-hidden="true"
+        >
+          <div
+            ref={(el) => (hThumbRef = el)}
+            class={resolvedClasses().thumb}
+            data-scroll-thumb="horizontal"
+          />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSScrollArea

package/src/components/scroll-to-top/RLAScrollToTop.astro

@@ -21,6 +21,7 @@ const classes = scrollToTopTheme(Astro.props)
 <rla-scroll-to-top data-threshold={threshold} data-duration={duration} data-color={color} data-progress-width={progressWidth} data-theme={theme} {...rest}>
   <div
     class:list={["rla-scroll-to-top-inner", "fixed bottom-6 right-6 z-50", classes.root]}
+    data-slot="root"
   >
     <button
       type="button"