@rimelight/ui 0.0.47 → 0.0.49

package/src/components/page/RLSPage.tsx

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

package/src/components/page-aside/RLSPageAside.tsx

@@ -0,0 +1,21 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { PageAsideProps } from "./page-aside"
+import { pageAsideTheme } from "./page-aside.theme"
+
+export interface RLSPageAsideProps extends PageAsideProps {
+  children?: JSX.Element
+}
+
+const RLSPageAside: Component<RLSPageAsideProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() => pageAsideTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSPageAside

package/src/components/page-body/RLSPageBody.tsx

@@ -0,0 +1,21 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { PageBodyProps } from "./page-body"
+import { pageBodyTheme } from "./page-body.theme"
+
+export interface RLSPageBodyProps extends PageBodyProps {
+  children?: JSX.Element
+}
+
+const RLSPageBody: Component<RLSPageBodyProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() => pageBodyTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSPageBody

package/src/components/page-header/RLSPageHeader.tsx

@@ -0,0 +1,21 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { PageHeaderProps } from "./page-header"
+import { pageHeaderTheme } from "./page-header.theme"
+
+export interface RLSPageHeaderProps extends PageHeaderProps {
+  children?: JSX.Element
+}
+
+const RLSPageHeader: Component<RLSPageHeaderProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() => pageHeaderTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSPageHeader

package/src/components/page-section/RLSPageSection.tsx

@@ -0,0 +1,201 @@
+import { createMemo, splitProps, For, type Component, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { PageSectionProps } from "./page-section"
+import { pageSectionTheme } from "./page-section.theme"
+import RLSIcon from "../icon/RLSIcon"
+import RLSButton from "../button/RLSButton"
+
+export interface RLSPageSectionProps extends PageSectionProps {
+  background?: JSX.Element
+  top?: JSX.Element
+  header?: JSX.Element
+  leading?: JSX.Element
+  headlineSlot?: JSX.Element
+  titleSlot?: JSX.Element
+  descriptionSlot?: JSX.Element
+  body?: JSX.Element
+  footer?: JSX.Element
+  linksSlot?: JSX.Element
+  content?: JSX.Element
+  bottom?: JSX.Element
+  children?: JSX.Element
+}
+
+const RLSPageSection: Component<RLSPageSectionProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "as",
+    "variant",
+    "ctaVariant",
+    "headline",
+    "icon",
+    "title",
+    "description",
+    "links",
+    "orientation",
+    "reverse",
+    "contentVisibility",
+    "containIntrinsicSize",
+    "ui",
+    "class",
+    "background",
+    "top",
+    "header",
+    "leading",
+    "headlineSlot",
+    "titleSlot",
+    "descriptionSlot",
+    "body",
+    "footer",
+    "linksSlot",
+    "content",
+    "bottom",
+    "children"
+  ])
+
+  const resolvedVariant = () =>
+    props.variant === "default" || props.variant === "hero" || props.variant === "cta"
+      ? props.variant
+      : "default"
+
+  const resolvedClasses = createMemo(() =>
+    pageSectionTheme({
+      variant: resolvedVariant(),
+      ...(resolvedVariant() === "cta" ? { ctaVariant: props.ctaVariant ?? "solid" } : {}),
+      orientation: props.orientation ?? "vertical",
+      reverse: !!props.reverse,
+      headline: !!(props.headlineSlot || props.headline),
+      title: !!(props.titleSlot || props.title),
+      description: !!(props.descriptionSlot || props.description),
+      body: !!props.body,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const tag = () => props.as ?? "section"
+  const titleTag = () => (resolvedVariant() === "hero" ? "h1" : "h2")
+
+  const showHeader = () =>
+    !!(
+      props.header ||
+      props.icon ||
+      props.headline ||
+      props.headlineSlot ||
+      props.title ||
+      props.titleSlot ||
+      props.description ||
+      props.descriptionSlot
+    )
+
+  const showWrapper = () =>
+    !!(
+      showHeader() ||
+      props.body ||
+      props.footer ||
+      props.linksSlot ||
+      (props.links?.length ?? 0) > 0
+    )
+
+  return (
+    <Dynamic
+      component={tag()}
+      data-orientation={props.orientation ?? "vertical"}
+      class={`${resolvedClasses().root}  ${
+        props.contentVisibility === "auto"
+          ? "[content-visibility:auto] [contain-intrinsic-size:var(--rla-contain-intrinsic-size,auto_500px)]"
+          : ""
+      }`}
+      style={
+        props.containIntrinsicSize
+          ? { "--rla-contain-intrinsic-size": props.containIntrinsicSize }
+          : undefined
+      }
+      {...rest}
+    >
+      {props.background ? (
+        <div class={resolvedClasses().background} data-slot="background">
+          {props.background}
+        </div>
+      ) : null}
+
+      {props.top}
+
+      <div class={resolvedClasses().container}>
+        {showWrapper() ? (
+          <div class={resolvedClasses().wrapper}>
+            {showHeader() ? (
+              <div class={resolvedClasses().header}>
+                {props.header ? (
+                  props.header
+                ) : (
+                  <>
+                    {props.icon || props.leading ? (
+                      <div class={resolvedClasses().leading}>
+                        {props.leading ? (
+                          props.leading
+                        ) : props.icon ? (
+                          <RLSIcon
+                            name={props.icon}
+                            size="md"
+                            ui={{ root: resolvedClasses().leadingIcon }}
+                          />
+                        ) : null}
+                      </div>
+                    ) : null}
+
+                    {props.headline || props.headlineSlot ? (
+                      <div class={resolvedClasses().headline}>
+                        {props.headlineSlot ?? props.headline}
+                      </div>
+                    ) : null}
+
+                    {props.title || props.titleSlot ? (
+                      <Dynamic component={titleTag()} class={resolvedClasses().title}>
+                        {props.titleSlot ?? props.title}
+                      </Dynamic>
+                    ) : null}
+
+                    {props.description || props.descriptionSlot ? (
+                      <div class={resolvedClasses().description}>
+                        {props.descriptionSlot ?? props.description}
+                      </div>
+                    ) : null}
+                  </>
+                )}
+              </div>
+            ) : null}
+
+            {props.body ? <div class={resolvedClasses().body}>{props.body}</div> : null}
+
+            {props.footer || props.linksSlot || (props.links?.length ?? 0) > 0 ? (
+              <div class={resolvedClasses().footer}>
+                {props.footer ? (
+                  props.footer
+                ) : (
+                  <div class={resolvedClasses().links}>
+                    <For each={props.links ?? []}>
+                      {(link) => <RLSButton size="lg" {...link} />}
+                    </For>
+                    {props.linksSlot}
+                  </div>
+                )}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {props.children !== undefined && props.children !== null ? (
+          props.children
+        ) : (props.orientation ?? "vertical") === "horizontal" ? (
+          <div class="hidden lg:block" />
+        ) : null}
+
+        {props.content ? <div class="col-span-full w-full">{props.content}</div> : null}
+      </div>
+
+      {props.bottom}
+    </Dynamic>
+  )
+}
+
+export default RLSPageSection

package/src/components/pagination/RLSPagination.tsx

@@ -0,0 +1,114 @@
+import { createMemo, splitProps, For, type Component } from "solid-js"
+import type { PaginationProps } from "./pagination"
+import { paginationTheme } from "./pagination.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSPaginationProps extends PaginationProps {
+  page?: number
+  onPageChange?: (page: number) => void
+}
+
+const RLSPagination: Component<RLSPaginationProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "currentPage",
+    "page",
+    "totalPages",
+    "baseUrl",
+    "onPageChange",
+    "ui",
+    "class"
+  ])
+
+  const currentPage = () => props.page ?? props.currentPage ?? 1
+  const totalPages = () => props.totalPages ?? 1
+
+  const resolvedClasses = createMemo(() =>
+    paginationTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const pageNumbers = createMemo<(number | "ellipsis")[]>(() => {
+    const total = totalPages()
+    const current = currentPage()
+    const pages: (number | "ellipsis")[] = []
+    const maxVisible = 5
+    if (total <= maxVisible) {
+      for (let i = 1; i <= total; i++) pages.push(i)
+    } else {
+      pages.push(1)
+      if (current > 3) pages.push("ellipsis")
+      const start = Math.max(2, current - 1)
+      const end = Math.min(total - 1, current + 1)
+      for (let i = start; i <= end; i++) {
+        if (!pages.includes(i)) pages.push(i)
+      }
+      if (current < total - 2) pages.push("ellipsis")
+      if (!pages.includes(total)) pages.push(total)
+    }
+    return pages
+  })
+
+  const itemLinkClasses = (isActive: boolean) => paginationTheme({ active: isActive }).link
+
+  return (
+    <nav
+      class={resolvedClasses().root}
+      data-slot="pagination-root"
+      aria-label="pagination"
+      {...rest}
+    >
+      <ul class={resolvedClasses().list} data-slot="list">
+        <li class={resolvedClasses().item}>
+          <button
+            type="button"
+            class={`${resolvedClasses().link} ${currentPage() === 1 ? "pointer-events-none opacity-50" : ""}`}
+            aria-label="Go to previous page"
+            aria-disabled={currentPage() === 1}
+            disabled={currentPage() === 1}
+            onClick={() => props.onPageChange?.(currentPage() - 1)}
+          >
+            <RLSIcon name="chevronLeft" size="sm" aria-hidden="true" />
+          </button>
+        </li>
+
+        <For each={pageNumbers()}>
+          {(p) => (
+            <li class={resolvedClasses().item}>
+              {p === "ellipsis" ? (
+                <span class={resolvedClasses().ellipsis} aria-hidden="true">
+                  &hellip;
+                </span>
+              ) : (
+                <button
+                  type="button"
+                  class={itemLinkClasses(p === currentPage())}
+                  aria-current={p === currentPage() ? "page" : undefined}
+                  onClick={() => props.onPageChange?.(p)}
+                >
+                  {p}
+                </button>
+              )}
+            </li>
+          )}
+        </For>
+
+        <li class={resolvedClasses().item}>
+          <button
+            type="button"
+            class={`${resolvedClasses().link} ${currentPage() === totalPages() ? "pointer-events-none opacity-50" : ""}`}
+            aria-label="Go to next page"
+            aria-disabled={currentPage() === totalPages()}
+            disabled={currentPage() === totalPages()}
+            onClick={() => props.onPageChange?.(currentPage() + 1)}
+          >
+            <RLSIcon name="chevronRight" size="sm" aria-hidden="true" />
+          </button>
+        </li>
+      </ul>
+    </nav>
+  )
+}
+
+export default RLSPagination

package/src/components/password/RLSPassword.tsx

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

package/src/components/phone-mockup/RLSPhoneMockup.tsx

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

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/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