@rimelight/ui 0.0.46 → 0.0.48

package/src/components/confirm/RLSConfirm.tsx

@@ -0,0 +1,173 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { ConfirmProps } from "./confirm"
+import { confirmTheme } from "./confirm.theme"
+import RLSButton from "../button/RLSButton"
+
+export interface RLSConfirmProps extends ConfirmProps {
+  children?: JSX.Element
+  trigger?: JSX.Element
+  titleSlot?: JSX.Element
+  descriptionSlot?: JSX.Element
+  footer?: JSX.Element
+  footerSlot?: JSX.Element
+  onOpenChange?: (open: boolean) => void
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+
+const RLSConfirm: Component<RLSConfirmProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "variant",
+    "title",
+    "description",
+    "actionLabel",
+    "cancelLabel",
+    "triggerLabel",
+    "open",
+    "ui",
+    "class",
+    "children",
+    "trigger",
+    "titleSlot",
+    "descriptionSlot",
+    "footer",
+    "footerSlot",
+    "onOpenChange",
+    "onConfirm",
+    "onCancel"
+  ])
+
+  const [isOpen, setIsOpen] = createSignal(props.open ?? false)
+  let dialogRef: HTMLDialogElement | undefined
+
+  const resolvedClasses = createMemo(() =>
+    confirmTheme({
+      variant: props.variant ?? "default",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  createEffect(() => {
+    if (!dialogRef) return
+    if (isOpen()) {
+      if (!dialogRef.open) dialogRef.showModal()
+    } else {
+      if (dialogRef.open) dialogRef.close()
+    }
+  })
+
+  createEffect(() => {
+    if (props.open !== undefined) {
+      setIsOpen(props.open)
+    }
+  })
+
+  const openDialog = () => {
+    setIsOpen(true)
+    props.onOpenChange?.(true)
+  }
+
+  const handleCancel = () => {
+    setIsOpen(false)
+    props.onOpenChange?.(false)
+    props.onCancel?.()
+  }
+
+  const handleAction = () => {
+    setIsOpen(false)
+    props.onOpenChange?.(false)
+    props.onConfirm?.()
+  }
+
+  const isDestructive = () => props.variant === "destructive"
+
+  return (
+    <div class={resolvedClasses().root} data-slot="alert-dialog-container">
+      {props.triggerLabel ? (
+        <RLSButton
+          class={resolvedClasses().trigger}
+          data-slot="trigger"
+          type="button"
+          onClick={openDialog}
+        >
+          {props.triggerLabel}
+        </RLSButton>
+      ) : props.trigger ? (
+        <span onClick={openDialog}>{props.trigger}</span>
+      ) : null}
+
+      <dialog
+        ref={(el) => (dialogRef = el)}
+        class={resolvedClasses().content}
+        data-slot="content"
+        aria-modal="true"
+        data-lock-scroll="true"
+        data-state={isOpen() ? "open" : "closed"}
+        onCancel={(e) => {
+          e.preventDefault()
+          handleCancel()
+        }}
+        onClick={(e) => {
+          if (e.target === dialogRef) handleCancel()
+        }}
+        {...rest}
+      >
+        <div class={resolvedClasses().header} data-slot="header">
+          {props.title ? (
+            <h3 class={resolvedClasses().title} data-slot="title">
+              {props.title}
+            </h3>
+          ) : null}
+          {props.titleSlot}
+          {props.description ? (
+            <p class={resolvedClasses().description} data-slot="description">
+              {props.description}
+            </p>
+          ) : null}
+          {props.descriptionSlot}
+        </div>
+
+        {props.children}
+
+        <div class={resolvedClasses().footer} data-slot="footer">
+          {props.footer !== undefined || props.footerSlot !== undefined ? (
+            (props.footer ?? props.footerSlot)
+          ) : (
+            <>
+              <RLSButton
+                class={resolvedClasses().cancelButton}
+                data-slot="cancel"
+                variant="outline"
+                color={isDestructive() ? "error" : "neutral"}
+                type="button"
+                onClick={handleCancel}
+              >
+                {props.cancelLabel ?? "Cancel"}
+              </RLSButton>
+              <RLSButton
+                class={resolvedClasses().actionButton}
+                data-slot="action"
+                color={isDestructive() ? "error" : "primary"}
+                variant={isDestructive() ? "subtle" : "solid"}
+                type="button"
+                onClick={handleAction}
+              >
+                {props.actionLabel ?? "Confirm"}
+              </RLSButton>
+            </>
+          )}
+        </div>
+      </dialog>
+    </div>
+  )
+}
+
+export default RLSConfirm

package/src/components/container/RLSContainer.tsx

@@ -0,0 +1,24 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { ContainerProps } from "./container"
+import { containerTheme } from "./container.theme"
+
+export interface RLSContainerProps extends ContainerProps {
+  children?: JSX.Element
+}
+
+const RLSContainer: Component<RLSContainerProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["as", "ui", "class", "children"])
+
+  const tag = () => props.as ?? "div"
+
+  const resolvedClasses = createMemo(() => containerTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <Dynamic component={tag()} class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </Dynamic>
+  )
+}
+
+export default RLSContainer

package/src/components/context-menu/RLSContextMenu.tsx

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

package/src/components/copy-markdown/RLSCopyMarkdown.tsx

@@ -0,0 +1,57 @@
+import { createSignal, onCleanup, splitProps, type Component } from "solid-js"
+import type { ButtonProps } from "../button/button"
+import RLSButton from "../button/RLSButton"
+
+export interface RLSCopyMarkdownProps extends Omit<
+  ButtonProps,
+  | "href"
+  | "label"
+  | "leadingIcon"
+  | "trailingIcon"
+  | "loading"
+  | "loadingAuto"
+  | "square"
+  | "active"
+  | "activeColor"
+  | "activeVariant"
+> {
+  raw: string
+}
+
+const RLSCopyMarkdown: Component<RLSCopyMarkdownProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["raw", "class", "ui"])
+  const [copied, setCopied] = createSignal(false)
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+  onCleanup(() => {
+    if (timeoutId !== undefined) clearTimeout(timeoutId)
+  })
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(props.raw)
+      setCopied(true)
+      if (timeoutId !== undefined) clearTimeout(timeoutId)
+      timeoutId = setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error("Failed to copy:", err)
+    }
+  }
+
+  return (
+    <RLSButton
+      class={`rl-copy-markdown ${typeof props.class === "string" ? props.class : ""}`.trim()}
+      color="neutral"
+      variant="outline"
+      size="sm"
+      leadingIcon="copy"
+      label={copied() ? "Copied!" : "Copy Markdown"}
+      data-raw={props.raw}
+      ui={props.ui}
+      onClick={handleCopy}
+      {...rest}
+    />
+  )
+}
+
+export default RLSCopyMarkdown

package/src/components/dashboard-group/RLSDashboardGroup.tsx

@@ -0,0 +1,29 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { DashboardGroupProps } from "./dashboard-group"
+import { dashboardGroupTheme } from "./dashboard-group.theme"
+
+export interface RLSDashboardGroupProps extends DashboardGroupProps {
+  children?: JSX.Element
+}
+
+const RLSDashboardGroup: Component<RLSDashboardGroupProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["as", "ui", "class", "children"])
+
+  const Tag = () => props.as || "div"
+
+  const resolvedClasses = createMemo(() =>
+    dashboardGroupTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <Dynamic component={Tag()} class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </Dynamic>
+  )
+}
+
+export default RLSDashboardGroup

package/src/components/dashboard-navbar/RLSDashboardNavbar.tsx

@@ -0,0 +1,116 @@
+import { createMemo, Show, splitProps, type Component, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { DashboardNavbarProps } from "./dashboard-navbar"
+import { dashboardNavbarTheme } from "./dashboard-navbar.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSDashboardNavbarProps extends DashboardNavbarProps {
+  children?: JSX.Element
+  leftSlot?: JSX.Element
+  rightSlot?: JSX.Element
+  centerSlot?: JSX.Element
+  titleSlot?: JSX.Element
+  leadingSlot?: JSX.Element
+  trailingSlot?: JSX.Element
+}
+
+const RLSDashboardNavbar: Component<RLSDashboardNavbarProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "as",
+    "icon",
+    "title",
+    "toggle",
+    "toggleSide",
+    "ui",
+    "class",
+    "children",
+    "leftSlot",
+    "rightSlot",
+    "centerSlot",
+    "titleSlot",
+    "leadingSlot",
+    "trailingSlot"
+  ])
+
+  const Tag = () => props.as || "header"
+  const showToggle = () => props.toggle ?? true
+  const toggleSide = () => props.toggleSide ?? "left"
+
+  const resolvedClasses = createMemo(() =>
+    dashboardNavbarTheme({
+      toggleSide: toggleSide(),
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <Dynamic
+      component={Tag()}
+      class={resolvedClasses().root}
+      data-slot="root"
+      style={{
+        "height": "4rem",
+        "min-height": "4rem",
+        "padding": "1rem 1.5rem",
+        "display": "flex",
+        "align-items": "center",
+        "justify-content": "space-between",
+        "box-sizing": "border-box"
+      }}
+      {...rest}
+    >
+      <div data-slot="left" class={resolvedClasses().left}>
+        <Show when={showToggle() && toggleSide() === "left"}>
+          <button
+            type="button"
+            data-dashboard-toggle="mobile"
+            class={`${resolvedClasses().toggle} lg:hidden`}
+            data-slot="toggle"
+            aria-label="Toggle sidebar"
+          >
+            <RLSIcon name="menu" class="size-5" />
+          </button>
+        </Show>
+
+        <Show when={props.leftSlot === undefined} fallback={props.leftSlot}>
+          {props.leadingSlot !== undefined ? (
+            props.leadingSlot
+          ) : props.icon ? (
+            <RLSIcon name={props.icon} class={resolvedClasses().icon} data-slot="icon" />
+          ) : null}
+
+          <h1 data-slot="title" class={resolvedClasses().title}>
+            {props.titleSlot !== undefined ? props.titleSlot : props.title}
+          </h1>
+
+          {props.trailingSlot}
+        </Show>
+      </div>
+
+      <Show when={props.children !== undefined || props.centerSlot !== undefined}>
+        <div data-slot="center" class={resolvedClasses().center}>
+          {props.centerSlot !== undefined ? props.centerSlot : props.children}
+        </div>
+      </Show>
+
+      <div data-slot="right" class={resolvedClasses().right}>
+        {props.rightSlot}
+
+        <Show when={showToggle() && toggleSide() === "right"}>
+          <button
+            type="button"
+            data-dashboard-toggle="mobile"
+            class={`${resolvedClasses().toggle} lg:hidden`}
+            data-slot="toggle"
+            aria-label="Toggle sidebar"
+          >
+            <RLSIcon name="menu" class="size-5" />
+          </button>
+        </Show>
+      </div>
+    </Dynamic>
+  )
+}
+
+export default RLSDashboardNavbar

package/src/components/dashboard-panel/RLSDashboardPanel.tsx

@@ -0,0 +1,84 @@
+import { createMemo, Show, splitProps, type Component, type JSX } from "solid-js"
+import type { DashboardPanelProps } from "./dashboard-panel"
+import { dashboardPanelTheme } from "./dashboard-panel.theme"
+
+export interface RLSDashboardPanelProps extends DashboardPanelProps {
+  children?: JSX.Element
+  header?: JSX.Element
+  headerSlot?: JSX.Element
+  body?: JSX.Element
+  bodySlot?: JSX.Element
+  footer?: JSX.Element
+  footerSlot?: JSX.Element
+  resizeHandle?: JSX.Element
+  resizeHandleSlot?: JSX.Element
+}
+
+const RLSDashboardPanel: Component<RLSDashboardPanelProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "resizable",
+    "ui",
+    "class",
+    "children",
+    "header",
+    "headerSlot",
+    "body",
+    "bodySlot",
+    "footer",
+    "footerSlot",
+    "resizeHandle",
+    "resizeHandleSlot"
+  ])
+
+  const resizable = () => props.resizable ?? false
+
+  const resolvedClasses = createMemo(() =>
+    dashboardPanelTheme({
+      size: false,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const headerContent = () => props.header ?? props.headerSlot
+  const bodyContent = () =>
+    props.body !== undefined
+      ? props.body
+      : props.bodySlot !== undefined
+        ? props.bodySlot
+        : props.children
+  const footerContent = () => props.footer ?? props.footerSlot
+  const resizeHandleContent = () => props.resizeHandle ?? props.resizeHandleSlot
+
+  return (
+    <>
+      <div
+        class={resolvedClasses().root}
+        data-slot="root"
+        style={{ "flex": "1 1 0%", "min-width": "0" }}
+        {...rest}
+      >
+        {headerContent()}
+
+        <div data-slot="body" class={resolvedClasses().body}>
+          {bodyContent()}
+        </div>
+
+        {footerContent()}
+      </div>
+
+      <Show when={resizable()}>
+        {resizeHandleContent() !== undefined ? (
+          resizeHandleContent()
+        ) : (
+          <div
+            data-slot="handle"
+            class={`${resolvedClasses().handle} hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1`}
+          />
+        )}
+      </Show>
+    </>
+  )
+}
+
+export default RLSDashboardPanel

package/src/components/dashboard-resize-handle/RLSDashboardResizeHandle.tsx

@@ -0,0 +1,35 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { DashboardResizeHandleProps } from "./dashboard-resize-handle"
+import { dashboardResizeHandleTheme } from "./dashboard-resize-handle.theme"
+
+export interface RLSDashboardResizeHandleProps extends DashboardResizeHandleProps {
+  children?: JSX.Element
+}
+
+const RLSDashboardResizeHandle: Component<RLSDashboardResizeHandleProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["as", "ui", "class", "children"])
+
+  const Tag = () => props.as || "div"
+
+  const resolvedClasses = createMemo(() =>
+    dashboardResizeHandleTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <Dynamic
+      component={Tag()}
+      data-slot="root"
+      class={resolvedClasses().root}
+      role="separator"
+      {...rest}
+    >
+      {props.children}
+    </Dynamic>
+  )
+}
+
+export default RLSDashboardResizeHandle

package/src/components/dashboard-search/RLADashboardSearch.astro

@@ -37,7 +37,7 @@ const classes = dashboardSearchTheme({
   </div>
 </template>
 
-<div data-dashboard-search-target>
+<div data-dashboard-search-target data-slot="root">
   <slot />
 </div>
 

package/src/components/dashboard-search/RLSDashboardSearch.tsx

@@ -0,0 +1,125 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { DashboardSearchProps } from "./dashboard-search"
+import { dashboardSearchTheme } from "./dashboard-search.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSDashboardSearchProps extends DashboardSearchProps {
+  children?: JSX.Element
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+const RLSDashboardSearch: Component<RLSDashboardSearchProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children", "open", "onOpenChange"])
+
+  const [isOpen, setIsOpen] = createSignal(props.open ?? false)
+  let inputRef: HTMLInputElement | null = null
+
+  createEffect(() => {
+    if (props.open !== undefined) {
+      setIsOpen(props.open)
+    }
+  })
+
+  const setOpenState = (open: boolean) => {
+    if (props.open === undefined) {
+      setIsOpen(open)
+    }
+    props.onOpenChange?.(open)
+    if (open) {
+      setTimeout(() => inputRef?.focus(), 50)
+    }
+  }
+
+  onMount(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault()
+        setOpenState(!isOpen())
+      } else if (e.key === "Escape" && isOpen()) {
+        setOpenState(false)
+      }
+    }
+
+    const onClick = (e: MouseEvent) => {
+      const target = e.target as Element | null
+      const btn = target?.closest("[data-dashboard-search-button]")
+      if (btn) {
+        setOpenState(!isOpen())
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown)
+    document.addEventListener("click", onClick)
+
+    onCleanup(() => {
+      document.removeEventListener("keydown", onKeyDown)
+      document.removeEventListener("click", onClick)
+    })
+  })
+
+  const resolvedClasses = createMemo(() =>
+    dashboardSearchTheme({
+      ui: props.ui,
+      class: props.class,
+      fullscreen: false,
+      size: "md"
+    })
+  )
+
+  return (
+    <div data-dashboard-search-target data-slot="root" {...rest}>
+      {props.children}
+
+      <Show when={isOpen()}>
+        <div
+          data-dashboard-search
+          data-slot="modal"
+          class={`${resolvedClasses().modal} fixed inset-0 z-50 flex items-start justify-center sm:pt-16`}
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setOpenState(false)
+          }}
+        >
+          <div
+            class="fixed inset-0 bg-default/80 backdrop-blur-sm"
+            onClick={() => setOpenState(false)}
+          />
+          <div
+            class={`relative w-full bg-default border border-default sm:rounded-xl shadow-2xl overflow-hidden ${resolvedClasses().modal}`}
+          >
+            <div class="flex items-center gap-2 border-b border-default px-4">
+              <RLSIcon name="search" class="size-5 shrink-0 text-muted" />
+              <input
+                ref={(el) => (inputRef = el)}
+                type="text"
+                data-dashboard-search-input
+                placeholder="Search..."
+                class="flex-1 h-12 bg-transparent border-0 outline-none text-default placeholder:text-muted"
+              />
+              <button
+                type="button"
+                class="shrink-0 size-8 flex items-center justify-center rounded-md hover:bg-muted text-muted"
+                onClick={() => setOpenState(false)}
+              >
+                <RLSIcon name="close" class="size-4" />
+              </button>
+            </div>
+            <div class="p-4 text-sm text-muted text-center">Type to search...</div>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSDashboardSearch