@rimelight/ui 0.0.37 → 0.0.39

package/src/components/chat-messages/RLAChatMessages.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ChatMessagesProps } from "./chat-messages"
+import chatMessagesTheme from "./chat-messages.theme"
+
+
+const chatMessages = scv(chatMessagesTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatMessagesProps
+
+const classes = resolveClasses(chatMessages, {}, useUi("chatMessages", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/chat-messages/chat-messages.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createChatMessagesTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatMessagesTheme()

package/src/components/chat-palette/RLAChatPalette.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ChatPaletteProps } from "./chat-palette"
+import chatPaletteTheme from "./chat-palette.theme"
+
+
+const chatPalette = scv(chatPaletteTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatPaletteProps
+
+const classes = resolveClasses(chatPalette, {}, useUi("chatPalette", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/chat-palette/chat-palette.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createChatPaletteTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatPaletteTheme()

package/src/components/chat-prompt/RLAChatPrompt.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ChatPromptProps } from "./chat-prompt"
+import chatPromptTheme from "./chat-prompt.theme"
+
+
+const chatPrompt = scv(chatPromptTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatPromptProps
+
+const classes = resolveClasses(chatPrompt, {}, useUi("chatPrompt", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/chat-prompt/chat-prompt.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createChatPromptTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatPromptTheme()

package/src/components/chat-prompt-submit/RLAChatPromptSubmit.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ChatPromptSubmitProps } from "./chat-prompt-submit"
+import chatPromptSubmitTheme from "./chat-prompt-submit.theme"
+
+
+const chatPromptSubmit = scv(chatPromptSubmitTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatPromptSubmitProps
+
+const classes = resolveClasses(chatPromptSubmit, {}, useUi("chatPromptSubmit", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/chat-prompt-submit/chat-prompt-submit.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createChatPromptSubmitTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatPromptSubmitTheme()

package/src/components/chat-reasoning/RLAChatReasoning.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ChatReasoningProps } from "./chat-reasoning"
+import chatReasoningTheme from "./chat-reasoning.theme"
+
+
+const chatReasoning = scv(chatReasoningTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatReasoningProps
+
+const classes = resolveClasses(chatReasoning, {}, useUi("chatReasoning", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/chat-reasoning/chat-reasoning.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createChatReasoningTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatReasoningTheme()

package/src/components/chat-shimmer/RLAChatShimmer.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ChatShimmerProps } from "./chat-shimmer"
+import chatShimmerTheme from "./chat-shimmer.theme"
+
+
+const chatShimmer = scv(chatShimmerTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatShimmerProps
+
+const classes = resolveClasses(chatShimmer, {}, useUi("chatShimmer", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/chat-shimmer/chat-shimmer.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createChatShimmerTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatShimmerTheme()

package/src/components/chat-tool/RLAChatTool.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ChatToolProps } from "./chat-tool"
+import chatToolTheme from "./chat-tool.theme"
+
+
+const chatTool = scv(chatToolTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChatToolProps
+
+const classes = resolveClasses(chatTool, {}, useUi("chatTool", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/chat-tool/chat-tool.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createChatToolTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatToolTheme()

package/src/components/checkbox/RLACheckbox.astro

@@ -0,0 +1,53 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { CheckboxProps } from "./checkbox"
+import { resolveTheme } from "../../utils/resolveTheme"
+import checkboxThemeDefault, { createCheckboxTheme } from "./checkbox.theme"
+const checkboxTheme = resolveTheme(checkboxThemeDefault, createCheckboxTheme)
+
+
+const checkbox = scv(checkboxTheme)
+
+const {
+  checked = false,
+  disabled = false,
+  name,
+  label,
+  color = "primary",
+  size = "md",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CheckboxProps
+
+const classes = resolveClasses(checkbox, {
+  color,
+  size,
+  checked,
+  theme
+}, useUi("checkbox", uiProp), className);
+---
+<label class={classes.root} data-slot="root">
+  <input
+    type="checkbox"
+    class={classes.input}
+    checked={checked}
+    disabled={disabled}
+    name={name}
+    {...rest}
+  />
+  <div class={classes.box} data-slot="box">
+    <div class={classes.indicator} data-slot="indicator">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-3"><path d="M20 6 9 17l-5-5"/></svg>
+    </div>
+  </div>
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+</label>

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

@@ -0,0 +1,49 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createCheckboxTheme = (colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    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",
+      box: [
+        "size-4 shrink-0 rounded border border-border bg-background transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+      ],
+      indicator:
+        "flex items-center justify-center text-white scale-0 transition-transform duration-150",
+      label: "text-sm text-foreground leading-none"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            box: `peer-checked:bg-[var(--rl-bg)] peer-checked:border-[var(--rl-border)] focus-within:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
+      size: {
+        sm: { box: "size-3.5", label: "text-xs" },
+        md: { box: "size-4", label: "text-sm" },
+        lg: { box: "size-4.5", label: "text-base" }
+      },
+      checked: {
+        true: { indicator: "scale-100" },
+        false: { indicator: "scale-0" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md",
+      checked: false
+    }
+  })
+
+export default createCheckboxTheme()

package/src/components/checkbox/checkbox.ts

@@ -0,0 +1,41 @@
+import type { Theme, ThemeColor } from "../../types/component"
+
+export interface CheckboxProps {
+  /**
+   * Controlled checked state.
+   */
+  checked?: boolean
+  /**
+   * Disabled input interaction state.
+   */
+  disabled?: boolean
+  /**
+   * Input name for forms.
+   */
+  name?: string
+  /**
+   * Form label.
+   */
+  label?: string
+  /**
+   * Size scale.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/chip/RLAChip.astro

@@ -0,0 +1,57 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ChipProps } from "./chip"
+import { resolveTheme } from "../../utils/resolveTheme"
+import chipThemeDefault, { createChipTheme } from "./chip.theme"
+const chipTheme = resolveTheme(chipThemeDefault, createChipTheme)
+
+
+const chip = scv(chipTheme)
+
+const {
+  text,
+  color = "primary",
+  size = "md",
+  position = "top-right",
+  inset = false,
+  standalone = false,
+  show = true,
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChipProps & {
+  color?: string
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  position?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
+  inset?: boolean
+  standalone?: boolean
+}
+
+const classes = resolveClasses(chip, {
+  color: color as "neutral",
+  size: size as "md",
+  position: position as "top-right",
+  inset,
+  standalone,
+  theme
+}, useUi("chip", uiProp), className)
+---
+{standalone ? (
+  show && (
+    <span class={classes.base} data-slot="base">
+      <slot>{text}</slot>
+    </span>
+  )
+) : (
+  <div class={classes.root} data-slot="root" {...rest}>
+    <slot />
+    {show && (
+      <span class={classes.base} data-slot="base">
+        <slot name="content">{text}</slot>
+      </span>
+    )}
+  </div>
+)}

package/src/components/chip/chip.theme.ts

@@ -0,0 +1,76 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createChipTheme = (colors: readonly string[] = colorConfig.colors) => {
+  const colorVariants: Record<string, { base: string }> = { neutral: { base: "bg-inverted" } }
+  for (const c of colors) {
+    colorVariants[c] = { base: `bg-${c}` }
+  }
+
+  return defineTheme({
+    slots: ["root", "base"],
+    base: {
+      root: "relative inline-flex items-center justify-center shrink-0",
+      base: "rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap"
+    },
+    variants: {
+      color: colorVariants,
+      size: {
+        "3xs": { base: "h-[4px] min-w-[4px] text-[4px]" },
+        "2xs": { base: "h-[5px] min-w-[5px] text-[5px]" },
+        "xs": { base: "h-[6px] min-w-[6px] text-[6px]" },
+        "sm": { base: "h-[7px] min-w-[7px] text-[7px]" },
+        "md": { base: "h-[8px] min-w-[8px] text-[8px]" },
+        "lg": { base: "h-[9px] min-w-[9px] text-[9px]" },
+        "xl": { base: "h-[10px] min-w-[10px] text-[10px]" },
+        "2xl": { base: "h-[11px] min-w-[11px] text-[11px]" },
+        "3xl": { base: "h-[12px] min-w-[12px] text-[12px]" }
+      },
+      position: {
+        "top-right": { base: "top-0 right-0" },
+        "bottom-right": { base: "bottom-0 right-0" },
+        "top-left": { base: "top-0 left-0" },
+        "bottom-left": { base: "bottom-0 left-0" }
+      },
+      inset: {
+        false: { base: "" }
+      },
+      standalone: {
+        false: { base: "absolute" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      {
+        position: "top-right",
+        inset: false,
+        classNames: { base: "-translate-y-1/2 translate-x-1/2 transform" }
+      },
+      {
+        position: "bottom-right",
+        inset: false,
+        classNames: { base: "translate-y-1/2 translate-x-1/2 transform" }
+      },
+      {
+        position: "top-left",
+        inset: false,
+        classNames: { base: "-translate-y-1/2 -translate-x-1/2 transform" }
+      },
+      {
+        position: "bottom-left",
+        inset: false,
+        classNames: { base: "translate-y-1/2 -translate-x-1/2 transform" }
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      position: "top-right"
+    }
+  })
+}
+
+export default createChipTheme()

package/src/components/chip/chip.ts

@@ -0,0 +1,17 @@
+import type { Theme } from "../../types/component"
+
+export interface ChipProps {
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/collapsible/RLACollapsible.astro

@@ -0,0 +1,40 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { CollapsibleProps } from "./collapsible"
+import collapsibleTheme from "./collapsible.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const collapsible = scv(collapsibleTheme)
+
+const {
+  open = false,
+  label = "Toggle",
+  icon,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CollapsibleProps
+
+const classes = resolveClasses(collapsible, {
+  open
+}, useUi("collapsible", uiProp), className);
+---
+<details class={classes.root} open={open ? true : undefined} data-slot="root" {...rest}>
+  <summary class={classes.trigger} data-slot="trigger">
+    <slot name="trigger">
+      <span class="flex items-center gap-2">
+        {icon && <span class={icon} />}
+        {label}
+      </span>
+      <RLAIcon name="chevronDown" class="transition-transform duration-200 group-open:rotate-180" />
+    </slot>
+  </summary>
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</details>

package/src/components/collapsible/collapsible.theme.ts

@@ -0,0 +1,22 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createCollapsibleTheme = () =>
+  defineTheme({
+    slots: ["root", "trigger", "content"],
+    base: {
+      root: "w-full",
+      trigger: "flex items-center justify-between w-full font-medium transition-all",
+      content: "overflow-hidden transition-all duration-300"
+    },
+    variants: {
+      open: {
+        true: { trigger: "", content: "h-auto" },
+        false: { trigger: "", content: "h-0 invisible" }
+      }
+    },
+    defaultVariants: {
+      open: false
+    }
+  })
+
+export default createCollapsibleTheme()

package/src/components/collapsible/collapsible.ts

@@ -0,0 +1,32 @@
+import type { ThemeColor } from "../../types/component"
+export interface CollapsibleProps {
+  /**
+   * Controlled open state.
+   */
+  open?: boolean
+  /**
+   * The trigger button label (or use 'trigger' slot)
+   */
+  label?: string
+  /**
+   * An optional leading icon for the trigger button
+   */
+  icon?: string
+  /**
+   * Size scale of the trigger.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Color theme of the trigger.
+   */
+  color?: ThemeColor
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}