@rimelight/ui 0.0.31 → 0.0.33

package/src/components/astro/RLAChatPrompt.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatPromptProps } from "../../types"
+import chatPromptThemeDefault, { createChatPromptTheme } from "../../themes/chat-prompt.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatPromptTheme = uiConfig.colors ? createChatPromptTheme() : chatPromptThemeDefault
+
+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/astro/RLAChatPromptSubmit.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatPromptSubmitProps } from "../../types"
+import chatPromptSubmitThemeDefault, { createChatPromptSubmitTheme } from "../../themes/chat-prompt-submit.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatPromptSubmitTheme = uiConfig.colors ? createChatPromptSubmitTheme() : chatPromptSubmitThemeDefault
+
+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/astro/RLAChatReasoning.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatReasoningProps } from "../../types"
+import chatReasoningThemeDefault, { createChatReasoningTheme } from "../../themes/chat-reasoning.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatReasoningTheme = uiConfig.colors ? createChatReasoningTheme() : chatReasoningThemeDefault
+
+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/astro/RLAChatShimmer.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatShimmerProps } from "../../types"
+import chatShimmerThemeDefault, { createChatShimmerTheme } from "../../themes/chat-shimmer.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatShimmerTheme = uiConfig.colors ? createChatShimmerTheme() : chatShimmerThemeDefault
+
+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/astro/RLAChatTool.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatToolProps } from "../../types"
+import chatToolThemeDefault, { createChatToolTheme } from "../../themes/chat-tool.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chatToolTheme = uiConfig.colors ? createChatToolTheme() : chatToolThemeDefault
+
+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/astro/RLACheckbox.astro

@@ -17,6 +17,7 @@ const {
   label,
   color = "primary",
   size = "md",
+  theme,
   ui: uiProp,
   class: className,
   ...rest
@@ -25,7 +26,8 @@ const {
 const classes = resolveClasses(checkbox, {
   color,
   size,
-  checked
+  checked,
+  theme
 }, useUi("checkbox", uiProp), className);
 ---
 <label class={classes.root} data-slot="root">

package/src/components/astro/RLAChip.astro

@@ -0,0 +1,51 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChipProps } from "../../types"
+import chipThemeDefault, { createChipTheme } from "../../themes/chip.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chipTheme = uiConfig.colors ? createChipTheme() : chipThemeDefault
+
+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
+
+const classes = resolveClasses(chip, {
+  color,
+  size,
+  position,
+  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/astro/RLAColorPicker.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ColorPickerProps } from "../../types"
+import colorPickerThemeDefault, { createColorPickerTheme } from "../../themes/color-picker.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const colorPickerTheme = uiConfig.colors ? createColorPickerTheme() : colorPickerThemeDefault
+
+const colorPicker = scv(colorPickerTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ColorPickerProps
+
+const classes = resolveClasses(colorPicker, {}, useUi("colorPicker", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLACommandPalette.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CommandPaletteProps } from "../../types"
+import commandPaletteThemeDefault, { createCommandPaletteTheme } from "../../themes/command-palette.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const commandPaletteTheme = uiConfig.colors ? createCommandPaletteTheme() : commandPaletteThemeDefault
+
+const commandPalette = scv(commandPaletteTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CommandPaletteProps
+
+const classes = resolveClasses(commandPalette, {}, useUi("commandPalette", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLACompare.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CompareProps } from "../../types"
+import compareThemeDefault, { createCompareTheme } from "../../themes/compare.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const compareTheme = uiConfig.colors ? createCompareTheme() : compareThemeDefault
+
+const compare = scv(compareTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CompareProps
+
+const classes = resolveClasses(compare, {}, useUi("compare", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/{RLAAlertDialog.astro → RLAConfirm.astro}

@@ -1,86 +1,117 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AlertDialogProps } from "../../types"
-import alertDialogTheme from "../../themes/alertDialog.theme"
-import RLAButton from "./RLAButton.astro"
-
-const alertDialog = scv(alertDialogTheme)
-
-const {
-  variant = "default",
-  title,
-  description,
-  actionLabel = "Confirm",
-  cancelLabel = "Cancel",
-  triggerLabel,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AlertDialogProps
-
-const classes = resolveClasses(alertDialog, {
-  variant
-}, useUi("alertDialog", uiProp), className)
-
-const dialogId = `rla-alert-dialog-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="alert-dialog-container">
-  {triggerLabel ? (
-    <RLAButton
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      onclick={`document.getElementById('${dialogId}').showModal()`}
-    >
-      {triggerLabel}
-    </RLAButton>
-  ) : (
-    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={dialogId}
-    class={classes.content}
-    data-slot="content"
-    data-lock-scroll="true"
-    data-close-on-escape="false"
-    data-close-on-click-outside="false"
-    {...rest}
-  >
-    <div class={classes.header} data-slot="header">
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-      <slot name="title" />
-      
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-      <slot name="description" />
-    </div>
-
-    <slot />
-
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer">
-        <RLAButton
-          class={classes.cancelButton}
-          data-slot="cancel"
-          variant="outline"
-          type="button"
-          onclick={`document.getElementById('${dialogId}').close()`}
-        >
-          {cancelLabel}
-        </RLAButton>
-        <RLAButton
-          class={classes.actionButton}
-          data-slot="action"
-          color={variant === "destructive" ? "error" : "primary"}
-          type="button"
-          onclick={`document.getElementById('${dialogId}').close()`}
-        >
-          {actionLabel}
-        </RLAButton>
-      </slot>
-    </div>
-  </dialog>
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ConfirmProps } from "../../types"
+import confirmTheme from "../../themes/confirm.theme"
+import RLAButton from "./RLAButton.astro"
+
+const alertDialog = scv(confirmTheme)
+
+const {
+  variant = "default",
+  title,
+  description,
+  actionLabel = "Confirm",
+  cancelLabel = "Cancel",
+  triggerLabel,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ConfirmProps
+
+const classes = resolveClasses(alertDialog, {
+  variant
+}, useUi("alertDialog", uiProp), className)
+
+const dialogId = `rla-alert-dialog-${Math.random().toString(36).substring(2, 9)}`
+const isDestructive = variant === "destructive"
+---
+
+<div class={classes.root} data-slot="alert-dialog-container">
+  {triggerLabel ? (
+    <RLAButton
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').showModal()`}
+    >
+      {triggerLabel}
+    </RLAButton>
+  ) : (
+    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    class={classes.content}
+    data-slot="content"
+    data-lock-scroll="true"
+    {...rest}
+  >
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer">
+        <RLAButton
+          class={classes.cancelButton}
+          data-slot="cancel"
+          variant="outline"
+          color={isDestructive ? "error" : "neutral"}
+          type="button"
+          onclick={`document.getElementById('${dialogId}').close()`}
+        >
+          {cancelLabel}
+        </RLAButton>
+        <RLAButton
+          class={classes.actionButton}
+          data-slot="action"
+          color={isDestructive ? "error" : "primary"}
+          variant={isDestructive ? "subtle" : "solid"}
+          type="button"
+          onclick={`document.getElementById('${dialogId}').close()`}
+        >
+          {actionLabel}
+        </RLAButton>
+      </slot>
+    </div>
+  </dialog>
+</div>
+
+<script>
+(function() {
+  if (window.__rlConfirm) return;
+  var pendingResolve = null;
+
+  document.addEventListener("click", function(e) {
+    var btn = e.target.closest("[data-slot='cancel'], [data-slot='action']");
+    if (!btn || !pendingResolve) return;
+    pendingResolve(btn.getAttribute("data-slot") === "action");
+    pendingResolve = null;
+  }, true);
+
+  window.__rlConfirm = function() {
+    return new Promise(function(resolve) {
+      var dialog = document.querySelector("[data-slot='alert-dialog-container'] dialog");
+      if (!dialog) { resolve(false); return; }
+      pendingResolve = resolve;
+      dialog.addEventListener("close", function() {
+        if (pendingResolve) {
+          pendingResolve(false);
+          pendingResolve = null;
+        }
+      }, { once: true });
+      dialog.showModal();
+    });
+  };
+})();
+</script>

package/src/components/astro/RLAContainer.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ContainerProps } from "../../types"
+import containerThemeDefault, { createContainerTheme } from "../../themes/container.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const containerTheme = uiConfig.colors ? createContainerTheme() : containerThemeDefault
+
+const container = scv(containerTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ContainerProps
+
+const classes = resolveClasses(container, {}, useUi("container", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAContextMenu.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ContextMenuProps } from "../../types"
+import contextMenuThemeDefault, { createContextMenuTheme } from "../../themes/context-menu.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const contextMenuTheme = uiConfig.colors ? createContextMenuTheme() : contextMenuThemeDefault
+
+const contextMenu = scv(contextMenuTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ContextMenuProps
+
+const classes = resolveClasses(contextMenu, {}, useUi("contextMenu", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLADashboardGroup.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardGroupProps } from "../../types"
+import dashboardGroupThemeDefault, { createDashboardGroupTheme } from "../../themes/dashboard-group.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardGroupTheme = uiConfig.colors ? createDashboardGroupTheme() : dashboardGroupThemeDefault
+
+const dashboardGroup = scv(dashboardGroupTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardGroupProps
+
+const classes = resolveClasses(dashboardGroup, {}, useUi("dashboardGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLADashboardNavbar.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardNavbarProps } from "../../types"
+import dashboardNavbarThemeDefault, { createDashboardNavbarTheme } from "../../themes/dashboard-navbar.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardNavbarTheme = uiConfig.colors ? createDashboardNavbarTheme() : dashboardNavbarThemeDefault
+
+const dashboardNavbar = scv(dashboardNavbarTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardNavbarProps
+
+const classes = resolveClasses(dashboardNavbar, {}, useUi("dashboardNavbar", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLADashboardPanel.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardPanelProps } from "../../types"
+import dashboardPanelThemeDefault, { createDashboardPanelTheme } from "../../themes/dashboard-panel.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardPanelTheme = uiConfig.colors ? createDashboardPanelTheme() : dashboardPanelThemeDefault
+
+const dashboardPanel = scv(dashboardPanelTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardPanelProps
+
+const classes = resolveClasses(dashboardPanel, {}, useUi("dashboardPanel", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLADashboardResizeHandle.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardResizeHandleProps } from "../../types"
+import dashboardResizeHandleThemeDefault, { createDashboardResizeHandleTheme } from "../../themes/dashboard-resize-handle.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardResizeHandleTheme = uiConfig.colors ? createDashboardResizeHandleTheme() : dashboardResizeHandleThemeDefault
+
+const dashboardResizeHandle = scv(dashboardResizeHandleTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardResizeHandleProps
+
+const classes = resolveClasses(dashboardResizeHandle, {}, useUi("dashboardResizeHandle", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLADashboardSearch.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardSearchProps } from "../../types"
+import dashboardSearchThemeDefault, { createDashboardSearchTheme } from "../../themes/dashboard-search.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardSearchTheme = uiConfig.colors ? createDashboardSearchTheme() : dashboardSearchThemeDefault
+
+const dashboardSearch = scv(dashboardSearchTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardSearchProps
+
+const classes = resolveClasses(dashboardSearch, {}, useUi("dashboardSearch", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLADashboardSearchButton.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardSearchButtonProps } from "../../types"
+import dashboardSearchButtonThemeDefault, { createDashboardSearchButtonTheme } from "../../themes/dashboard-search-button.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardSearchButtonTheme = uiConfig.colors ? createDashboardSearchButtonTheme() : dashboardSearchButtonThemeDefault
+
+const dashboardSearchButton = scv(dashboardSearchButtonTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardSearchButtonProps
+
+const classes = resolveClasses(dashboardSearchButton, {}, useUi("dashboardSearchButton", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>