@rimelight/ui 0.0.46 → 0.0.48

package/src/components/placeholder/RLSPlaceholder.tsx

@@ -0,0 +1,47 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { PlaceholderProps } from "./placeholder"
+import { placeholderTheme } from "./placeholder.theme"
+
+export interface RLSPlaceholderProps extends PlaceholderProps {
+  children?: JSX.Element
+}
+
+const RLSPlaceholder: Component<RLSPlaceholderProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const classes = createMemo(() =>
+    placeholderTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={classes()["base"]} {...rest}>
+      <svg class={classes()["svg"]}>
+        <defs>
+          <pattern
+            id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+            x="0"
+            y="0"
+            width="10"
+            height="10"
+            patternUnits="userSpaceOnUse"
+          >
+            <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+          </pattern>
+        </defs>
+        <rect
+          stroke="none"
+          fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+          width="100%"
+          height="100%"
+        />
+      </svg>
+
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSPlaceholder

package/src/components/popover/RLAPopover.astro

@@ -198,7 +198,7 @@ const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
    */
   function setupPopovers() {
     document.querySelectorAll<HTMLElement>('[data-slot="popover-container"]').forEach(container => {
-      const mode = container.dataset.mode || 'both';
+      const mode = container.dataset["mode"] || 'both';
       const popoverId = container.querySelector<HTMLElement>('[data-slot="content"]')?.id;
       if (!popoverId) return;
 
@@ -248,7 +248,7 @@ const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
         const ph = panel.offsetHeight;
         if (pw === 0 || ph === 0) return; // closed or not yet rendered
 
-        const parts = (container.dataset.placement || 'bottom').split('-');
+        const parts = (container.dataset["placement"] || 'bottom').split('-');
         const vert = parts[0];            // top | bottom
         const horiz = parts[1] || 'center'; // start | end | center
         const gap = 8;

package/src/components/popover/RLSPopover.tsx

@@ -0,0 +1,124 @@
+import {
+  createMemo,
+  createSignal,
+  splitProps,
+  Show,
+  onMount,
+  onCleanup,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { PopoverProps } from "./popover"
+import { popoverTheme } from "./popover.theme"
+
+export interface RLSPopoverProps extends PopoverProps {
+  children?: JSX.Element
+  trigger?: JSX.Element
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+const RLSPopover: Component<RLSPopoverProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "open",
+    "defaultOpen",
+    "triggerLabel",
+    "placement",
+    "mode",
+    "ui",
+    "class",
+    "children",
+    "trigger",
+    "onOpenChange"
+  ])
+
+  const [isOpen, setIsOpen] = createSignal(props.open ?? props.defaultOpen ?? false)
+  const [isHovered, setIsHovered] = createSignal(false)
+
+  const mode = () => props.mode ?? "both"
+  const isVisible = () => isOpen() || isHovered()
+
+  let containerRef: HTMLDivElement | undefined
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined
+
+  const handleOpenChange = (next: boolean) => {
+    setIsOpen(next)
+    props.onOpenChange?.(next)
+  }
+
+  const handleHoverShow = () => {
+    if (hoverTimer) clearTimeout(hoverTimer)
+    setIsHovered(true)
+  }
+
+  const handleHoverHide = () => {
+    if (hoverTimer) clearTimeout(hoverTimer)
+    hoverTimer = setTimeout(() => {
+      setIsHovered(false)
+    }, 150)
+  }
+
+  onMount(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (isOpen() && containerRef && !containerRef.contains(e.target as Node)) {
+        handleOpenChange(false)
+      }
+    }
+    document.addEventListener("click", handleOutsideClick)
+    onCleanup(() => document.removeEventListener("click", handleOutsideClick))
+  })
+
+  onCleanup(() => {
+    if (hoverTimer) clearTimeout(hoverTimer)
+  })
+
+  const resolvedClasses = createMemo(() =>
+    popoverTheme({
+      placement: props.placement ?? "bottom",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div
+      ref={(el) => (containerRef = el)}
+      class={`rla-popover-host ${resolvedClasses().root}`}
+      data-slot="popover-container"
+      data-placement={props.placement ?? "bottom"}
+      data-mode={mode()}
+      {...rest}
+    >
+      <div
+        class={resolvedClasses().trigger}
+        data-slot="trigger"
+        onClick={(e) => {
+          e.stopPropagation()
+          if (mode() === "click" || mode() === "both") handleOpenChange(!isOpen())
+        }}
+        onMouseEnter={() => {
+          if (mode() === "hover" || mode() === "both") handleHoverShow()
+        }}
+        onMouseLeave={() => {
+          if (mode() === "hover" || mode() === "both") handleHoverHide()
+        }}
+      >
+        {props.trigger ? (
+          props.trigger
+        ) : props.triggerLabel ? (
+          <button type="button" class="cursor-pointer">
+            {props.triggerLabel}
+          </button>
+        ) : null}
+      </div>
+
+      <Show when={isVisible()}>
+        <div class={resolvedClasses().content} data-slot="content">
+          {props.children}
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSPopover

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/RLAScrollArea.astro

@@ -66,7 +66,7 @@ const heightStyle = height
     const viewport = area.querySelector("[data-scroll-viewport]") as HTMLElement | null;
     if (!viewport) return;
 
-    const hideDelay = parseInt((area as HTMLElement).dataset.hideDelay ?? "600", 10);
+    const hideDelay = parseInt((area as HTMLElement).dataset["hideDelay"] ?? "600", 10);
 
     const vBar = area.querySelector("[data-scroll-bar='vertical']") as HTMLElement | null;
     const hBar = area.querySelector("[data-scroll-bar='horizontal']") as HTMLElement | null;