@rimelight/ui 0.0.47 → 0.0.49

package/src/components/header/RLSHeader.tsx

@@ -0,0 +1,87 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { HeaderProps } from "./header"
+import { headerTheme } from "./header.theme"
+
+export interface RLSHeaderProps extends HeaderProps {
+  layerType?: "header" | "banner"
+  left?: JSX.Element
+  center?: JSX.Element
+  right?: JSX.Element
+  children?: JSX.Element
+}
+
+const RLSHeader: Component<RLSHeaderProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "as",
+    "layerType",
+    "contain",
+    "sticky",
+    "fixed",
+    "stackIndex",
+    "hideOnScroll",
+    "id",
+    "ui",
+    "class",
+    "left",
+    "center",
+    "right",
+    "children"
+  ])
+
+  const tag = () => props.as ?? "header"
+
+  const contain = () => props.contain ?? true
+  const sticky = () => props.sticky ?? true
+  const fixed = () => props.fixed ?? false
+  const stackIndex = () => props.stackIndex ?? 0
+  const hideOnScroll = () => props.hideOnScroll ?? false
+  const layerType = () => props.layerType ?? "header"
+  const isBanner = () => layerType() === "banner"
+
+  const layerId =
+    typeof props.id === "string" ? props.id : `rla-header-${Math.random().toString(36).slice(2, 8)}`
+
+  const resolvedClasses = createMemo(() =>
+    headerTheme({
+      contain: contain(),
+      sticky: fixed() ? false : sticky(),
+      fixed: fixed(),
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <Dynamic
+      component={tag()}
+      id={layerId}
+      data-slot="root"
+      class={resolvedClasses().root}
+      data-contain={contain() ? "true" : "false"}
+      data-rla-header={isBanner() ? undefined : "true"}
+      data-rla-banner={isBanner() ? "true" : undefined}
+      data-stack-index={stackIndex()}
+      data-hide-on-scroll={String(hideOnScroll())}
+      data-header-layer-id={layerId}
+      data-layer-type={layerType()}
+      {...rest}
+    >
+      <div class={resolvedClasses().content} data-header-content>
+        <div class={resolvedClasses().container} data-slot="container">
+          <div class={resolvedClasses().left} data-slot="left">
+            {props.left}
+          </div>
+          <div class={resolvedClasses().center} data-slot="center">
+            {props.center ?? props.children}
+          </div>
+          <div class={resolvedClasses().right} data-slot="right">
+            {props.right}
+          </div>
+        </div>
+      </div>
+    </Dynamic>
+  )
+}
+
+export default RLSHeader

package/src/components/hover-card/RLSHoverCard.tsx

@@ -0,0 +1,72 @@
+import { createMemo, createSignal, splitProps, type Component, type JSX } from "solid-js"
+import type { HoverCardProps } from "./hover-card"
+import { hoverCardTheme } from "./hover-card.theme"
+
+export interface RLSHoverCardProps extends HoverCardProps {
+  children?: JSX.Element
+  trigger?: JSX.Element
+}
+
+const RLSHoverCard: Component<RLSHoverCardProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "triggerLabel",
+    "placement",
+    "ui",
+    "class",
+    "children",
+    "trigger"
+  ])
+
+  const [isOpen, setIsOpen] = createSignal(false)
+
+  const resolvedClasses = createMemo(() =>
+    hoverCardTheme({
+      placement: props.placement ?? "bottom",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const contentClass = () =>
+    resolvedClasses()["content"].replace(
+      /\s*(invisible|opacity-0|scale-95|pointer-events-none|group-hover\/hover-card:(visible|opacity-100|scale-100|pointer-events-auto))/g,
+      ""
+    )
+
+  return (
+    <div
+      class={resolvedClasses().root}
+      data-slot="hover-card-container"
+      onMouseEnter={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+      {...rest}
+    >
+      <div
+        class={resolvedClasses().trigger}
+        data-slot="trigger"
+        tabindex="0"
+        onFocus={() => setIsOpen(true)}
+        onBlur={() => setIsOpen(false)}
+      >
+        {props.trigger ? (
+          props.trigger
+        ) : props.triggerLabel ? (
+          <span class="cursor-help underline decoration-dotted">{props.triggerLabel}</span>
+        ) : null}
+      </div>
+
+      <div
+        class={`${contentClass()} ${
+          isOpen()
+            ? "visible opacity-100 scale-100 pointer-events-auto"
+            : "invisible opacity-0 scale-95 pointer-events-none"
+        }`}
+        data-slot="content"
+      >
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default RLSHoverCard

package/src/components/icon/RLSIcon.tsx

@@ -3,7 +3,9 @@ import { resolveIcon } from "../../icons"
 import type { IconProps } from "./icon"
 import { iconTheme } from "./icon.theme"
 
-const RLSIcon: Component<IconProps> = (allProps) => {
+export interface RLSIconProps extends IconProps {}
+
+const RLSIcon: Component<RLSIconProps> = (allProps) => {
   const [props, rest] = splitProps(allProps, ["name", "size", "ui", "class"])
   const resolved = createMemo(() => resolveIcon(props.name))
   const classes = createMemo(() =>