@rimelight/ui 0.0.47 → 0.0.48

package/src/components/chat-prompt-submit/RLSChatPromptSubmit.tsx

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

package/src/components/chat-reasoning/RLSChatReasoning.tsx

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

package/src/components/chat-shimmer/RLSChatShimmer.tsx

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

package/src/components/chat-tool/RLSChatTool.tsx

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

package/src/components/checkbox/RLACheckbox.astro

@@ -20,6 +20,7 @@ const classes = checkboxTheme(Astro.props);
   <input
     type="checkbox"
     class={classes.input}
+    data-slot="input"
     checked={checked}
     disabled={disabled}
     name={name}

package/src/components/checkbox/RLSCheckbox.tsx

@@ -36,7 +36,7 @@ const RLSCheckbox: Component<RLSCheckboxProps> = (allProps) => {
   )
 
   return (
-    <label class={resolvedClasses().root} data-slot="root">
+    <label class={resolvedClasses().root} data-slot="root" data-theme={props.theme}>
       <input
         id={props.id}
         type="checkbox"

package/src/components/checkbox/checkbox.theme.ts

@@ -3,8 +3,8 @@ import { defineTheme } from "../../resolver"
 export const checkboxTheme = defineTheme("checkbox", {
   slots: ["root", "input", "box", "indicator", "label"],
   base: {
-    root: "inline-flex items-center gap-2 cursor-pointer select-none",
-    input: "absolute opacity-0 size-0 pointer-events-none peer",
+    root: "relative inline-flex items-center gap-2 cursor-pointer select-none",
+    input: "sr-only peer",
     box: [
       "size-4 shrink-0 rounded border border-default bg-default transition-all focus-within:ring-2 focus-within:ring-[var(--rl-ring)]/50 focus-within:ring-offset-2",
       "peer-checked:bg-[var(--rl-bg)] peer-checked:border-[var(--rl-border)] peer-checked:[&_[data-slot=indicator]]:scale-100",

package/src/components/chip/RLSChip.tsx

@@ -0,0 +1,65 @@
+import { createMemo, splitProps, Show, type Component, type JSX } from "solid-js"
+import type { ChipProps } from "./chip"
+import { chipTheme } from "./chip.theme"
+
+export interface RLSChipProps extends ChipProps {
+  children?: JSX.Element
+  content?: JSX.Element
+  text?: any
+  standalone?: boolean
+  show?: boolean
+}
+
+const RLSChip: Component<RLSChipProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "text",
+    "standalone",
+    "show",
+    "theme",
+    "color",
+    "size",
+    "position",
+    "inset",
+    "ui",
+    "class",
+    "children",
+    "content"
+  ])
+
+  const classes = createMemo(() =>
+    chipTheme({
+      color: props.color,
+      size: props.size,
+      position: props.position,
+      inset: props.inset,
+      standalone: props.standalone ?? false,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const show = props.show ?? true
+
+  if (props.standalone) {
+    return (
+      <Show when={show}>
+        <span class={classes()["base"]} data-slot="base">
+          {props.children !== undefined ? props.children : props.text}
+        </span>
+      </Show>
+    )
+  }
+
+  return (
+    <div class={classes()["root"]} data-slot="root" data-theme={props.theme} {...rest}>
+      {props.children}
+      {show && (
+        <span class={classes()["base"]} data-slot="base">
+          {props.content !== undefined ? props.content : props.text}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default RLSChip

package/src/components/collapsible/RLSCollapsible.tsx

@@ -0,0 +1,89 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { CollapsibleProps } from "./collapsible"
+import { collapsibleTheme } from "./collapsible.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSCollapsibleProps extends CollapsibleProps {
+  children?: JSX.Element
+  triggerSlot?: JSX.Element
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+const RLSCollapsible: Component<RLSCollapsibleProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "open",
+    "defaultOpen",
+    "label",
+    "icon",
+    "size",
+    "color",
+    "ui",
+    "class",
+    "children",
+    "triggerSlot",
+    "onOpenChange"
+  ])
+
+  const [isOpen, setIsOpen] = createSignal(props.open ?? props.defaultOpen ?? false)
+
+  createEffect(() => {
+    if (props.open !== undefined) setIsOpen(props.open)
+  })
+
+  const resolvedClasses = createMemo(() =>
+    collapsibleTheme({
+      open: isOpen(),
+      size: props.size,
+      color: props.color,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const handleToggle = (e: Event) => {
+    const target = e.currentTarget as HTMLDetailsElement
+    setIsOpen(target.open)
+    props.onOpenChange?.(target.open)
+  }
+
+  return (
+    <details
+      class={resolvedClasses().root}
+      open={isOpen()}
+      onToggle={handleToggle}
+      data-slot="root"
+      {...rest}
+    >
+      <summary class={resolvedClasses().trigger} data-slot="trigger">
+        {props.triggerSlot ? (
+          props.triggerSlot
+        ) : (
+          <>
+            <span class="flex items-center gap-2">
+              {props.icon ? <span class={props.icon} aria-hidden="true" /> : null}
+              {props.label ?? "Toggle"}
+            </span>
+            <RLSIcon
+              name="chevronDown"
+              size="sm"
+              class={`transition-transform duration-200 ${isOpen() ? "rotate-180" : ""}`}
+            />
+          </>
+        )}
+      </summary>
+      <div class={resolvedClasses().content} data-slot="content">
+        {props.children}
+      </div>
+    </details>
+  )
+}
+
+export default RLSCollapsible