@rimelight/ui 0.0.41 → 0.0.43

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

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

package/src/components/checkbox/RLACheckbox.astro

@@ -1,34 +1,19 @@
 ---
-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)
+import { checkboxTheme } from "./checkbox.theme"
 
 
-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);
+const classes = checkboxTheme(Astro.props);
 ---
 <label class={classes.root} data-slot="root">
   <input

package/src/components/checkbox/RLSCheckbox.tsx

@@ -0,0 +1,65 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { CheckboxProps } from "./checkbox"
+import { checkboxTheme } from "./checkbox.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSCheckboxProps extends CheckboxProps {
+  id?: string
+  onChange?: (e: Event & { currentTarget: HTMLInputElement }) => void
+  children?: JSX.Element
+}
+
+const RLSCheckbox: Component<RLSCheckboxProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "id",
+    "checked",
+    "disabled",
+    "name",
+    "label",
+    "size",
+    "color",
+    "theme",
+    "ui",
+    "class",
+    "onChange",
+    "children"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    checkboxTheme({
+      color: props.color ?? "primary",
+      size: props.size ?? "md",
+      theme: props.theme,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <label class={resolvedClasses().root} data-slot="root">
+      <input
+        id={props.id}
+        type="checkbox"
+        name={props.name}
+        checked={!!props.checked}
+        disabled={props.disabled}
+        onChange={props.onChange}
+        class={resolvedClasses().input}
+        data-slot="input"
+        {...rest}
+      />
+      <div class={resolvedClasses().box} data-slot="box">
+        <span class={resolvedClasses().indicator} data-slot="indicator">
+          <RLSIcon name="check" size="xs" aria-hidden="true" />
+        </span>
+      </div>
+      {props.label || props.children ? (
+        <span class={resolvedClasses().label} data-slot="label">
+          {props.children !== undefined && props.children !== null ? props.children : props.label}
+        </span>
+      ) : null}
+    </label>
+  )
+}
+
+export default RLSCheckbox

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

@@ -1,49 +1,38 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-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"
+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",
+    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",
+      "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-highlighted leading-none"
+  },
+  variants: {
+    color: "auto",
+    size: {
+      sm: { box: "size-3.5", label: "text-xs" },
+      md: { box: "size-4", label: "text-sm" },
+      lg: { box: "size-4.5", label: "text-base" }
     },
-    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 peer-checked:[&_[data-slot=indicator]]:scale-100`
-          }
-        ])
-      ),
-      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" }
-      }
+    checked: {
+      true: { indicator: "scale-100" },
+      false: { indicator: "scale-0" }
     },
-    defaultVariants: {
-      color: "primary",
-      size: "md",
-      checked: false
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
     }
-  })
-
-export default createCheckboxTheme()
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    checked: false
+  }
+})

package/src/components/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface CheckboxProps {
   /**

package/src/components/chip/RLAChip.astro

@@ -1,57 +1,33 @@
----
-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>
+---
+import type { ChipProps } from "./chip"
+import { chipTheme } from "./chip.theme"
+
+
+
+const {
+  text,
+  standalone = false,
+  show = true,
+  ...rest
+} = Astro.props as ChipProps
+
+
+
+const classes = chipTheme(Astro.props)
+---
+{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

@@ -1,76 +1,70 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-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"
+export const chipTheme = defineTheme("chip", {
+  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 bg-[var(--rl-bg)]"
+  },
+  variants: {
+    color: "auto",
+    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" }
     },
-    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" }
-      }
+    inset: {
+      false: { base: "" }
     },
-    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"
+    standalone: {
+      false: { base: "absolute" }
+    },
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
     }
-  })
-}
-
-export default createChipTheme()
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
+      classNames: { base: "bg-inverted" }
+    },
+    {
+      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"
+  }
+})

package/src/components/chip/chip.ts

@@ -1,6 +1,8 @@
-import type { Theme } from "../../types/component"
+import type { Theme } from "../../types"
 
 export interface ChipProps {
+  activeColor?: string
+  activeVariant?: string
   /**
    * Theme mode override — pins colors to flat, light, or dark mode.
    */

package/src/components/collapsible/RLACollapsible.astro

@@ -1,28 +1,18 @@
 ---
-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 { 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);
+const classes = collapsibleTheme(Astro.props);
 ---
 <details class={classes.root} open={open ? true : undefined} data-slot="root" {...rest}>
   <summary class={classes.trigger} data-slot="trigger">

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

@@ -1,22 +1,19 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-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 const collapsibleTheme = defineTheme("collapsible", {
+  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" }
     }
-  })
-
-export default createCollapsibleTheme()
+  },
+  defaultVariants: {
+    open: false
+  }
+})

package/src/components/collapsible/collapsible.ts

@@ -1,4 +1,4 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 export interface CollapsibleProps {
   /**
    * Controlled open state.

package/src/components/color-area/RLAColorArea.astro

@@ -1,12 +1,6 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveTheme } from "../../utils/resolveTheme"
-import colorAreaThemeDefault, { createColorAreaTheme } from "./color-area.theme"
-const colorAreaTheme = resolveTheme(colorAreaThemeDefault, createColorAreaTheme)
+import { colorAreaTheme } from "./color-area.theme"
 
-const colorArea = scv(colorAreaTheme)
 
 export interface Props {
   colorSpace?: "hsl" | "rgb" | "hsb"
@@ -38,15 +32,10 @@ const {
   yName,
   color = "primary",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as Props
 
-const classes = resolveClasses(colorArea, {
-  color,
-  theme
-}, useUi("colorArea", uiProp), className)
+const classes = colorAreaTheme(Astro.props)
 
 const initialValue = modelValue || defaultValue
 ---

package/src/components/color-area/color-area.theme.ts

@@ -1,33 +1,21 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createColorAreaTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "area", "thumb"],
-    base: {
-      root: "relative block touch-none select-none rounded-lg w-full aspect-square outline-none",
-      area: "relative w-full h-full rounded-lg cursor-crosshair bg-muted outline-none",
-      thumb:
-        "absolute block size-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            thumb: `focus-visible:ring-[var(--rl-ring)]/50`
-          }
-        ])
-      ),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary"
+export const colorAreaTheme = defineTheme("color-area", {
+  slots: ["root", "area", "thumb"],
+  base: {
+    root: "relative block touch-none select-none rounded-lg w-full aspect-square outline-none",
+    area: "relative w-full h-full rounded-lg cursor-crosshair bg-muted outline-none",
+    thumb:
+      "absolute block size-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]/50"
+  },
+  variants: {
+    color: "auto",
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
     }
-  })
-
-export default createColorAreaTheme()
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+})

package/src/components/color-area/color-area.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface ColorAreaProps {
   colorSpace?: "hsl" | "rgb" | "hsb"