@rimelight/ui 0.0.32 → 0.0.33

package/src/components/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/confirm.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

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ContainerProps } from "../../types"
-import containerThemeDefault from "../../themes/container.theme"
-
-const container = scv(containerThemeDefault)
-
-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 />
+---
+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

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ContextMenuProps } from "../../types"
-import contextMenuThemeDefault from "../../themes/context-menu.theme"
-
-const contextMenu = scv(contextMenuThemeDefault)
-
-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 />
+---
+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

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardGroupProps } from "../../types"
-import dashboardGroupThemeDefault from "../../themes/dashboard-group.theme"
-
-const dashboardGroup = scv(dashboardGroupThemeDefault)
-
-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 />
+---
+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

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardNavbarProps } from "../../types"
-import dashboardNavbarThemeDefault from "../../themes/dashboard-navbar.theme"
-
-const dashboardNavbar = scv(dashboardNavbarThemeDefault)
-
-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 />
+---
+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

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardPanelProps } from "../../types"
-import dashboardPanelThemeDefault from "../../themes/dashboard-panel.theme"
-
-const dashboardPanel = scv(dashboardPanelThemeDefault)
-
-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 />
+---
+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

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardResizeHandleProps } from "../../types"
-import dashboardResizeHandleThemeDefault from "../../themes/dashboard-resize-handle.theme"
-
-const dashboardResizeHandle = scv(dashboardResizeHandleThemeDefault)
-
-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 />
+---
+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

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardSearchProps } from "../../types"
-import dashboardSearchThemeDefault from "../../themes/dashboard-search.theme"
-
-const dashboardSearch = scv(dashboardSearchThemeDefault)
-
-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 />
+---
+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

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardSearchButtonProps } from "../../types"
-import dashboardSearchButtonThemeDefault from "../../themes/dashboard-search-button.theme"
-
-const dashboardSearchButton = scv(dashboardSearchButtonThemeDefault)
-
-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 />
+---
+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>

package/src/components/astro/RLADashboardSidebar.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardSidebarProps } from "../../types"
-import dashboardSidebarThemeDefault from "../../themes/dashboard-sidebar.theme"
-
-const dashboardSidebar = scv(dashboardSidebarThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSidebarProps
-
-const classes = resolveClasses(dashboardSidebar, {}, useUi("dashboardSidebar", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardSidebarProps } from "../../types"
+import dashboardSidebarThemeDefault, { createDashboardSidebarTheme } from "../../themes/dashboard-sidebar.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardSidebarTheme = uiConfig.colors ? createDashboardSidebarTheme() : dashboardSidebarThemeDefault
+
+const dashboardSidebar = scv(dashboardSidebarTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardSidebarProps
+
+const classes = resolveClasses(dashboardSidebar, {}, useUi("dashboardSidebar", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLADashboardSidebarCollapse.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardSidebarCollapseProps } from "../../types"
-import dashboardSidebarCollapseThemeDefault from "../../themes/dashboard-sidebar-collapse.theme"
-
-const dashboardSidebarCollapse = scv(dashboardSidebarCollapseThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSidebarCollapseProps
-
-const classes = resolveClasses(dashboardSidebarCollapse, {}, useUi("dashboardSidebarCollapse", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardSidebarCollapseProps } from "../../types"
+import dashboardSidebarCollapseThemeDefault, { createDashboardSidebarCollapseTheme } from "../../themes/dashboard-sidebar-collapse.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardSidebarCollapseTheme = uiConfig.colors ? createDashboardSidebarCollapseTheme() : dashboardSidebarCollapseThemeDefault
+
+const dashboardSidebarCollapse = scv(dashboardSidebarCollapseTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardSidebarCollapseProps
+
+const classes = resolveClasses(dashboardSidebarCollapse, {}, useUi("dashboardSidebarCollapse", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>