@rimelight/ui 0.0.46 → 0.0.48

package/src/components/package-managers/RLSPackageManagers.tsx

@@ -0,0 +1,204 @@
+import { createMemo, createSignal, For, Show, splitProps, type Component } from "solid-js"
+import RLSButton from "../button/RLSButton"
+
+type Manager = "npm" | "pnpm" | "yarn" | "deno" | "bun" | "vp"
+type CommandType = "add" | "create" | "dlx" | "exec" | "install" | "remove" | "run"
+
+export interface RLSPackageManagersProps {
+  pkg?: string
+  type?: CommandType
+  dev?: boolean
+  args?: string
+  comment?: string
+  prefix?: string
+  managers?: Manager[]
+}
+
+const commands: Record<Manager, Partial<Record<CommandType, string>> & { dev: string }> = {
+  npm: {
+    add: "npm i",
+    create: "npm create",
+    dlx: "npx",
+    exec: "npx",
+    install: "npm install",
+    run: "npm run",
+    remove: "npm uninstall",
+    dev: "-D"
+  },
+  yarn: {
+    add: "yarn add",
+    create: "yarn create",
+    dlx: "yarn dlx",
+    exec: "yarn",
+    install: "yarn install",
+    run: "yarn run",
+    remove: "yarn remove",
+    dev: "-D"
+  },
+  pnpm: {
+    add: "pnpm add",
+    create: "pnpm create",
+    dlx: "pnpx",
+    exec: "pnpm",
+    install: "pnpm install",
+    run: "pnpm run",
+    remove: "pnpm remove",
+    dev: "-D"
+  },
+  deno: {
+    add: "deno add",
+    create: "deno run -A",
+    dlx: "deno run",
+    exec: "deno run",
+    install: "deno install",
+    run: "deno task",
+    remove: "deno remove",
+    dev: "--dev"
+  },
+  bun: {
+    add: "bun add",
+    create: "bun create",
+    install: "bun install",
+    run: "bun run",
+    remove: "bun remove",
+    dev: "-d"
+  },
+  vp: {
+    add: "vp add",
+    create: "vp create",
+    dlx: "vp dlx",
+    exec: "vp exec",
+    install: "vp install",
+    run: "vp run",
+    remove: "vp remove",
+    dev: "-D"
+  }
+}
+
+const RLSPackageManagers: Component<RLSPackageManagersProps> = (allProps) => {
+  const [props] = splitProps(allProps, [
+    "pkg",
+    "type",
+    "dev",
+    "args",
+    "comment",
+    "prefix",
+    "managers"
+  ])
+
+  const getCommand = (mgr: Manager, cmdType: CommandType): string | undefined => {
+    let cmd = commands[mgr][cmdType]
+    if (cmd === undefined) return undefined
+
+    if (props.prefix) cmd = `${props.prefix} ${cmd}`
+    if (props.comment) cmd = `# ${props.comment.replaceAll("{PKG}", mgr)}\n${cmd}`
+    if (props.dev && cmdType === "add") cmd += ` ${commands[mgr].dev}`
+
+    if (props.pkg) {
+      const processedPkg =
+        cmdType === "create" && mgr === "yarn"
+          ? props.pkg.replace(/@(?![^@]*\/)\S*$/, "")
+          : props.pkg
+      cmd += ` ${processedPkg}`
+    }
+
+    if (props.args) {
+      const needsDoubleDash = mgr === "npm" && !["dlx", "exec", "run"].includes(cmdType)
+      cmd += `${needsDoubleDash ? " --" : ""} ${props.args}`
+    }
+
+    return cmd
+  }
+
+  const tabs = createMemo(() =>
+    (props.managers ?? ["npm", "pnpm", "yarn", "deno", "bun", "vp"])
+      .map((mgr) => ({ mgr, cmd: getCommand(mgr, props.type ?? "add") }))
+      .filter((tab) => tab.cmd !== undefined)
+  )
+
+  const [activeIdx, setActiveIdx] = createSignal(0)
+  const [copied, setCopied] = createSignal<string | null>(null)
+
+  const copyCommand = async (mgr: string, cmd: string) => {
+    try {
+      await navigator.clipboard.writeText(cmd)
+      setCopied(mgr)
+      setTimeout(() => {
+        setCopied((current) => (current === mgr ? null : current))
+      }, 2000)
+    } catch {
+      setCopied(null)
+    }
+  }
+
+  return (
+    <div
+      class="w-full overflow-hidden rounded-xl border border-default bg-elevated/60"
+      data-slot="root"
+    >
+      <div
+        class="flex flex-wrap items-center gap-1 border-b border-default bg-elevated/80 px-2 pt-2"
+        role="tablist"
+        data-slot="list"
+      >
+        <For each={tabs()}>
+          {(tab, idx) => {
+            const active = idx() === activeIdx()
+            return (
+              <button
+                type="button"
+                role="tab"
+                class={`px-3 py-1.5 text-sm font-semibold rounded-t-lg transition-colors ${
+                  active
+                    ? "bg-default text-highlighted border border-default border-b-transparent"
+                    : "text-muted hover:text-highlighted"
+                }`}
+                data-slot="trigger"
+                data-state={active ? "active" : "inactive"}
+                data-value={tab.mgr}
+                aria-selected={active ? "true" : "false"}
+                onClick={() => setActiveIdx(idx())}
+              >
+                {tab.mgr}
+              </button>
+            )
+          }}
+        </For>
+      </div>
+
+      <For each={tabs()}>
+        {(tab, idx) => (
+          <div
+            role="tabpanel"
+            data-value={tab.mgr}
+            data-slot="content"
+            hidden={idx() !== activeIdx() ? "until-found" : undefined}
+          >
+            <Show when={idx() === activeIdx()}>
+              <div class="relative">
+                <pre class="overflow-x-auto bg-[#0a0a0f] px-4 py-3 pr-16 text-sm font-mono leading-6 text-[#e4e4e7] whitespace-pre">
+                  <code aria-hidden="true">{tab.cmd!}</code>
+                </pre>
+                <RLSButton
+                  type="button"
+                  variant="ghost"
+                  color="neutral"
+                  size="sm"
+                  class="absolute right-2 top-2"
+                  leadingIcon={copied() === tab.mgr ? "check" : "copy"}
+                  aria-label="Copy command"
+                  data-slot="copy-button"
+                  onClick={() => copyCommand(tab.mgr, tab.cmd!)}
+                >
+                  {copied() === tab.mgr ? "Copied" : "Copy"}
+                </RLSButton>
+              </div>
+            </Show>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+
+export default RLSPackageManagers

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