@rimelight/ui 0.0.46 → 0.0.48

package/src/components/dashboard-search-button/RLSDashboardSearchButton.tsx

@@ -0,0 +1,82 @@
+import { createMemo, For, Show, splitProps, type Component, type JSX } from "solid-js"
+import type { DashboardSearchButtonProps } from "./dashboard-search-button"
+import { dashboardSearchButtonTheme } from "./dashboard-search-button.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSDashboardSearchButtonProps extends DashboardSearchButtonProps {
+  children?: JSX.Element
+  trailingSlot?: JSX.Element
+}
+
+const RLSDashboardSearchButton: Component<RLSDashboardSearchButtonProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "icon",
+    "label",
+    "kbds",
+    "collapsed",
+    "trailing",
+    "trailingSlot",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const labelText = () => props.label ?? "Search"
+  const kbdsList = () => props.kbds ?? [{ value: "meta" }, { value: "k" }]
+
+  const resolvedClasses = createMemo(() =>
+    dashboardSearchButtonTheme({
+      collapsed: props.collapsed ?? false,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <button
+      type="button"
+      data-dashboard-search-button
+      class={resolvedClasses().base}
+      data-slot="root"
+      {...rest}
+    >
+      {props.icon !== false && (
+        <RLSIcon
+          name={typeof props.icon === "string" ? props.icon : "search"}
+          class="size-5 shrink-0 text-muted"
+        />
+      )}
+
+      <span data-slot="label" class={resolvedClasses().label}>
+        {labelText()}
+      </span>
+
+      <span data-slot="trailing" class={resolvedClasses().trailing}>
+        {props.trailingSlot ? (
+          props.trailingSlot
+        ) : props.trailing ? (
+          (props.trailing as JSX.Element)
+        ) : (
+          <Show when={kbdsList().length > 0}>
+            <span class="flex items-center gap-0.5">
+              <For each={kbdsList()}>
+                {(kbd) => {
+                  const val = typeof kbd === "string" ? kbd : kbd.value
+                  const txt = val === "meta" ? "⌘" : val === "k" ? "K" : val
+                  return (
+                    <kbd class="inline-flex items-center justify-center rounded border border-default bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted min-w-[20px] h-5">
+                      {txt}
+                    </kbd>
+                  )
+                }}
+              </For>
+            </span>
+          </Show>
+        )}
+      </span>
+      {props.children}
+    </button>
+  )
+}
+
+export default RLSDashboardSearchButton

package/src/components/dashboard-sidebar/RLADashboardSidebar.astro

@@ -62,7 +62,7 @@ const classes = dashboardSidebarTheme({
     const sidebar = document.querySelector<HTMLElement>('[data-dashboard-sidebar]');
     if (!sidebar) return;
 
-    const collapsible = sidebar.dataset.collapsible === 'true';
+    const collapsible = sidebar.dataset["collapsible"] === 'true';
     const mobilePanel = document.querySelector<HTMLElement>('[data-dashboard-sidebar-mobile]');
     const overlay = document.querySelector<HTMLElement>('[data-dashboard-sidebar-overlay]');
 
@@ -91,8 +91,8 @@ const classes = dashboardSidebarTheme({
 
     const collapseSidebar = (val?: boolean) => {
       if (!collapsible) return;
-      const isCollapsed = val !== undefined ? val : sidebar.dataset.collapsed !== 'true';
-      sidebar.dataset.collapsed = isCollapsed ? 'true' : 'false';
+      const isCollapsed = val !== undefined ? val : sidebar.dataset["collapsed"] !== 'true';
+      sidebar.dataset["collapsed"] = isCollapsed ? 'true' : 'false';
       sidebar.setAttribute('data-collapsed', isCollapsed ? 'true' : 'false');
 
       document.querySelectorAll('[data-dashboard-toggle="collapse"]').forEach(btn => {
@@ -109,7 +109,7 @@ const classes = dashboardSidebarTheme({
       // Toggle buttons (mobile drawer + collapse)
       const toggle = target.closest<HTMLElement>('[data-dashboard-toggle]');
       if (toggle) {
-        const side = toggle.dataset.dashboardToggle;
+        const side = toggle.dataset["dashboardToggle"];
         if (side === 'mobile') toggleMobile();
         if (side === 'collapse') collapseSidebar();
         return;

package/src/components/dashboard-sidebar/RLSDashboardSidebar.tsx

@@ -0,0 +1,184 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { DashboardSidebarProps } from "./dashboard-sidebar"
+import { dashboardSidebarTheme } from "./dashboard-sidebar.theme"
+
+export interface RLSDashboardSidebarProps extends DashboardSidebarProps {
+  children?: JSX.Element
+  headerSlot?: JSX.Element
+  footerSlot?: JSX.Element
+  openMobile?: boolean
+  onOpenMobileChange?: (open: boolean) => void
+  onCollapseChange?: (collapsed: boolean) => void
+}
+
+const RLSDashboardSidebar: Component<RLSDashboardSidebarProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "side",
+    "collapsible",
+    "collapsed",
+    "openMobile",
+    "headerSlot",
+    "footerSlot",
+    "ui",
+    "class",
+    "children",
+    "onOpenMobileChange",
+    "onCollapseChange"
+  ])
+
+  const side = () => props.side ?? "left"
+  const isCollapsible = () => props.collapsible ?? false
+  const [isCollapsed, setIsCollapsed] = createSignal(props.collapsed ?? false)
+  const [isMobileOpen, setIsMobileOpen] = createSignal(props.openMobile ?? false)
+
+  createEffect(() => {
+    if (props.collapsed !== undefined) {
+      setIsCollapsed(props.collapsed)
+    }
+  })
+
+  createEffect(() => {
+    if (props.openMobile !== undefined) {
+      setIsMobileOpen(props.openMobile)
+    }
+  })
+
+  const setCollapsedState = (collapsed: boolean) => {
+    if (props.collapsed === undefined) {
+      setIsCollapsed(collapsed)
+    }
+    props.onCollapseChange?.(collapsed)
+  }
+
+  const setMobileOpenState = (open: boolean) => {
+    if (props.openMobile === undefined) {
+      setIsMobileOpen(open)
+    }
+    props.onOpenMobileChange?.(open)
+  }
+
+  onMount(() => {
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as Element | null
+      if (!target) return
+
+      const toggle = target.closest<HTMLElement>("[data-dashboard-toggle]")
+      if (toggle) {
+        const toggleType = toggle.dataset["dashboardToggle"]
+        if (toggleType === "mobile") {
+          setMobileOpenState(!isMobileOpen())
+        }
+        if (toggleType === "collapse" && isCollapsible()) {
+          setCollapsedState(!isCollapsed())
+        }
+        return
+      }
+
+      if (target.closest("[data-dashboard-sidebar-mobile] a")) {
+        setMobileOpenState(false)
+      }
+    }
+
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isMobileOpen()) {
+        setMobileOpenState(false)
+      }
+    }
+
+    document.addEventListener("click", handleClick)
+    document.addEventListener("keydown", handleKey)
+
+    onCleanup(() => {
+      document.removeEventListener("click", handleClick)
+      document.removeEventListener("keydown", handleKey)
+    })
+  })
+
+  const resolvedClasses = createMemo(() =>
+    dashboardSidebarTheme({
+      side: side(),
+      collapsed: isCollapsible() && isCollapsed(),
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <>
+      <div
+        data-dashboard-sidebar
+        data-side={side()}
+        data-collapsible={isCollapsible() ? "true" : "false"}
+        data-collapsed={isCollapsible() && isCollapsed() ? "true" : "false"}
+        data-slot="root"
+        class={resolvedClasses().root}
+        {...rest}
+      >
+        <Show when={props.headerSlot !== undefined}>
+          <div data-slot="header" class={resolvedClasses().header}>
+            {props.headerSlot}
+          </div>
+        </Show>
+
+        <div data-slot="body" class={resolvedClasses().body}>
+          {props.children}
+        </div>
+
+        <Show when={props.footerSlot !== undefined}>
+          <div data-slot="footer" class={resolvedClasses().footer}>
+            {props.footerSlot}
+          </div>
+        </Show>
+      </div>
+
+      <div
+        data-dashboard-sidebar-overlay
+        data-slot="overlay"
+        class={`${resolvedClasses().overlay} fixed inset-0 z-40 bg-default/80 backdrop-blur-sm transition-opacity duration-300 ${
+          isMobileOpen() ? "block" : "hidden"
+        }`}
+        onClick={() => setMobileOpenState(false)}
+      />
+
+      <div
+        data-dashboard-sidebar-mobile
+        data-slot="content"
+        class={`${resolvedClasses().content} fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] bg-default shadow-2xl border-e border-default transform transition-transform duration-300 flex flex-col h-full ${
+          isMobileOpen() ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <Show when={props.headerSlot !== undefined}>
+          <div data-slot="header" class={`${resolvedClasses().header} sm:px-6 shrink-0`} data-menu>
+            {props.headerSlot}
+          </div>
+        </Show>
+
+        <div
+          data-slot="body"
+          class={`${resolvedClasses().body} sm:px-6 overflow-y-auto flex-1`}
+          data-menu
+        >
+          {props.children}
+        </div>
+
+        <Show when={props.footerSlot !== undefined}>
+          <div data-slot="footer" class={`${resolvedClasses().footer} sm:px-6 shrink-0`} data-menu>
+            {props.footerSlot}
+          </div>
+        </Show>
+      </div>
+    </>
+  )
+}
+
+export default RLSDashboardSidebar

package/src/components/dashboard-sidebar-collapse/RLSDashboardSidebarCollapse.tsx

@@ -0,0 +1,46 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { DashboardSidebarCollapseProps } from "./dashboard-sidebar-collapse"
+import { dashboardSidebarCollapseTheme } from "./dashboard-sidebar-collapse.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSDashboardSidebarCollapseProps extends DashboardSidebarCollapseProps {
+  children?: JSX.Element
+}
+
+const RLSDashboardSidebarCollapse: Component<RLSDashboardSidebarCollapseProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["icon", "ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    dashboardSidebarCollapseTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <button
+      type="button"
+      data-dashboard-toggle="collapse"
+      class={resolvedClasses().root}
+      data-slot="root"
+      aria-label="Collapse sidebar"
+      {...rest}
+    >
+      <RLSIcon
+        name={props.icon || "i-lucide-panel-left"}
+        class="size-5"
+        data-dashboard-collapse-icon
+        data-expanded
+      />
+      <RLSIcon
+        name="i-lucide-panel-right"
+        class="size-5 hidden"
+        data-dashboard-collapse-icon
+        data-collapsed
+      />
+      {props.children}
+    </button>
+  )
+}
+
+export default RLSDashboardSidebarCollapse

package/src/components/dashboard-sidebar-toggle/RLSDashboardSidebarToggle.tsx

@@ -0,0 +1,35 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { DashboardSidebarToggleProps } from "./dashboard-sidebar-toggle"
+import { dashboardSidebarToggleTheme } from "./dashboard-sidebar-toggle.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSDashboardSidebarToggleProps extends DashboardSidebarToggleProps {
+  children?: JSX.Element
+}
+
+const RLSDashboardSidebarToggle: Component<RLSDashboardSidebarToggleProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["icon", "ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    dashboardSidebarToggleTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <button
+      type="button"
+      data-dashboard-toggle="mobile"
+      class={resolvedClasses().root}
+      data-slot="root"
+      aria-label="Toggle sidebar"
+      {...rest}
+    >
+      <RLSIcon name={props.icon || "menu"} class="size-5" />
+      {props.children}
+    </button>
+  )
+}
+
+export default RLSDashboardSidebarToggle

package/src/components/dashboard-toolbar/RLSDashboardToolbar.tsx

@@ -0,0 +1,49 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { DashboardToolbarProps } from "./dashboard-toolbar"
+import { dashboardToolbarTheme } from "./dashboard-toolbar.theme"
+
+export interface RLSDashboardToolbarProps extends DashboardToolbarProps {
+  children?: JSX.Element
+  leftSlot?: JSX.Element
+  rightSlot?: JSX.Element
+}
+
+const RLSDashboardToolbar: Component<RLSDashboardToolbarProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "as",
+    "ui",
+    "class",
+    "children",
+    "leftSlot",
+    "rightSlot"
+  ])
+
+  const Tag = () => props.as || "div"
+
+  const resolvedClasses = createMemo(() =>
+    dashboardToolbarTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <Dynamic component={Tag()} class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children !== undefined ? (
+        props.children
+      ) : (
+        <>
+          <div data-slot="left" class={resolvedClasses().left}>
+            {props.leftSlot}
+          </div>
+          <div data-slot="right" class={resolvedClasses().right}>
+            {props.rightSlot}
+          </div>
+        </>
+      )}
+    </Dynamic>
+  )
+}
+
+export default RLSDashboardToolbar

package/src/components/date/RLSDate.tsx

@@ -0,0 +1,34 @@
+import { splitProps, type Component } from "solid-js"
+
+export interface RLSDateProps {
+  date: Date | string | number
+  locale?: string
+  options?: Intl.DateTimeFormatOptions
+  class?: string
+  [key: string]: unknown
+}
+
+const defaultOptions: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "short",
+  day: "numeric"
+}
+
+const RLSDate: Component<RLSDateProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["date", "locale", "options"])
+
+  const resolvedDate = props.date instanceof Date ? props.date : new Date(props.date)
+  const valid = !isNaN(resolvedDate.getTime())
+  const formatted = valid
+    ? resolvedDate.toLocaleDateString(props.locale ?? "en-US", props.options ?? defaultOptions)
+    : ""
+  const datetime = valid ? resolvedDate.toISOString() : ""
+
+  return (
+    <time datetime={datetime} {...rest}>
+      {formatted}
+    </time>
+  )
+}
+
+export default RLSDate

package/src/components/dock/RLSDock.tsx

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

package/src/components/drawer/RLSDrawer.tsx

@@ -0,0 +1,177 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  splitProps,
+  Show,
+  onMount,
+  onCleanup,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { DrawerProps } from "./drawer"
+import { drawerTheme } from "./drawer.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSDrawerProps extends DrawerProps {
+  children?: JSX.Element
+  trigger?: JSX.Element
+  triggerSlot?: JSX.Element
+  titleSlot?: JSX.Element
+  descriptionSlot?: JSX.Element
+  footer?: JSX.Element
+  footerSlot?: JSX.Element
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+  lockScroll?: boolean
+}
+
+const RLSDrawer: Component<RLSDrawerProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "open",
+    "defaultOpen",
+    "direction",
+    "title",
+    "description",
+    "triggerLabel",
+    "ui",
+    "class",
+    "children",
+    "trigger",
+    "triggerSlot",
+    "titleSlot",
+    "descriptionSlot",
+    "footer",
+    "footerSlot",
+    "onOpenChange",
+    "closeOnClickOutside",
+    "closeOnEscape",
+    "lockScroll"
+  ])
+
+  const [isOpen, setIsOpen] = createSignal(props.open ?? props.defaultOpen ?? false)
+
+  const closeOnClickOutside = () => props.closeOnClickOutside !== false
+  const closeOnEscape = () => props.closeOnEscape !== false
+  const lockScroll = () => props.lockScroll !== false
+
+  const handleOpenChange = (next: boolean) => {
+    setIsOpen(next)
+    props.onOpenChange?.(next)
+  }
+
+  let dialogRef: HTMLDialogElement | undefined
+
+  createEffect(() => {
+    if (isOpen()) {
+      if (lockScroll()) {
+        document.body.style.overflow = "hidden"
+      }
+      if (dialogRef && !dialogRef.open) dialogRef.showModal()
+    } else {
+      document.body.style.overflow = ""
+      if (dialogRef && dialogRef.open) dialogRef.close()
+    }
+  })
+
+  onMount(() => {
+    const handleCancel = (e: Event) => {
+      if (e.target !== dialogRef) return
+      e.preventDefault()
+      if (closeOnEscape()) handleOpenChange(false)
+    }
+    const handleClick = (e: MouseEvent) => {
+      if (closeOnClickOutside() && e.target === dialogRef) {
+        handleOpenChange(false)
+      }
+    }
+    document.addEventListener("cancel", handleCancel)
+    document.addEventListener("click", handleClick)
+    onCleanup(() => {
+      document.removeEventListener("cancel", handleCancel)
+      document.removeEventListener("click", handleClick)
+      document.body.style.overflow = ""
+    })
+  })
+
+  const resolvedClasses = createMemo(() =>
+    drawerTheme({
+      direction: props.direction ?? "bottom",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const triggerContent = () => props.trigger ?? props.triggerSlot
+  const footerContent = () => props.footer ?? props.footerSlot
+
+  return (
+    <div class={resolvedClasses().root} data-slot="drawer-container">
+      {props.triggerLabel ? (
+        <button
+          class={resolvedClasses().trigger}
+          data-slot="trigger"
+          type="button"
+          onClick={() => handleOpenChange(true)}
+        >
+          {props.triggerLabel}
+        </button>
+      ) : triggerContent() ? (
+        <span onClick={() => handleOpenChange(true)}>{triggerContent()}</span>
+      ) : null}
+
+      <Show when={isOpen()}>
+        <dialog
+          ref={(el) => (dialogRef = el)}
+          class={`${resolvedClasses().content} ${isOpen() ? "" : "hidden"}`}
+          data-slot="content"
+          aria-modal="true"
+          data-state={isOpen() ? "open" : "closed"}
+          {...rest}
+        >
+          <div class={resolvedClasses().handle} data-slot="handle" />
+
+          <button
+            class={resolvedClasses().closeButton}
+            data-slot="close-button"
+            type="button"
+            aria-label="Close drawer"
+            onClick={() => handleOpenChange(false)}
+          >
+            <RLSIcon name="close" size="sm" aria-hidden="true" />
+          </button>
+
+          <div class={resolvedClasses().header} data-slot="header">
+            {props.titleSlot ? (
+              props.titleSlot
+            ) : props.title ? (
+              <h3 class={resolvedClasses().title} data-slot="title">
+                {props.title}
+              </h3>
+            ) : null}
+
+            {props.descriptionSlot ? (
+              props.descriptionSlot
+            ) : props.description ? (
+              <p class={resolvedClasses().description} data-slot="description">
+                {props.description}
+              </p>
+            ) : null}
+          </div>
+
+          {props.children}
+
+          {footerContent() ? (
+            <div class={resolvedClasses().footer} data-slot="footer">
+              {footerContent()}
+            </div>
+          ) : null}
+        </dialog>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSDrawer