@rimelight/ui 0.0.42 → 0.0.43

package/src/components/dropdown-menu/RLADropdownMenu.astro

@@ -1,67 +1,119 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DropdownMenuProps } from "./dropdown-menu"
-import dropdownMenuTheme from "./dropdown-menu.theme"
+import type { DropdownMenuProps, DropdownMenuItem } from "./dropdown-menu"
+import { dropdownMenuTheme } from "./dropdown-menu.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const dropdownMenu = scv(dropdownMenuTheme)
-
 const {
   items = [],
-  label = "Options",
+  label,
   icon,
   size = "md",
   color = "primary",
-  ui: uiProp,
-  class: className,
+  arrow = false,
+  content: contentProp = {},
+  disabled = false,
   ...rest
 } = Astro.props as DropdownMenuProps
 
-const classes = resolveClasses(dropdownMenu, {
-  size
-}, useUi("dropdownMenu", uiProp), className);
+const align = contentProp?.align || "start"
+const side = contentProp?.side || "bottom"
+
+const classes = dropdownMenuTheme(Astro.props)
+
+// Standardize item groups: array of arrays vs array of items
+const itemGroups: DropdownMenuItem[][] = Array.isArray(items) && items.length > 0 && Array.isArray(items[0])
+  ? (items as DropdownMenuItem[][])
+  : [items as DropdownMenuItem[]]
 ---
-<rla-dropdown-menu {...rest}>
+<rla-dropdown-menu data-align={align} data-side={side} {...rest}>
   <div class={classes.root} data-slot="root" data-dropdown-menu>
     <button
       type="button"
       class={classes.trigger}
       data-slot="trigger"
       data-dropdown-trigger
+      disabled={disabled}
     >
       <slot name="trigger">
-        {icon && <span class={icon} />}
-        {label}
-        <RLAIcon name="chevronDown" class="ml-2 opacity-50" />
+        <slot>
+          {icon && <span class={icon + " shrink-0"} />}
+          {label && <span>{label}</span>}
+          {!icon && !label && <RLAIcon name="i-lucide-ellipsis-vertical" class="size-4" />}
+        </slot>
       </slot>
     </button>
 
-    <div class={classes.content + " hidden"} data-slot="content" data-dropdown-content>
-      <slot>
-        {items.map(item => {
-          if (item.type === "separator") {
-            return <div class={classes.separator} />
-          }
-          if (item.type === "label") {
-            return <div class={classes.label}>{item.label}</div>
-          }
-          return (
-            <button
-              type="button"
-              class={classes.item}
-              data-slot="item"
-              disabled={item.disabled}
-            >
-              {item.icon && <span class={item.icon + " mr-2 size-4 text-muted-foreground"} />}
-              <span>{item.label}</span>
-              {item.shortcut && <span class={classes.shortcut}>{item.shortcut}</span>}
-            </button>
-          )
-        })}
-      </slot>
+    <div
+      class={`${classes.content} hidden`}
+      data-slot="content"
+      data-dropdown-content
+    >
+
+      {arrow && <div class={classes.arrow} />}
+      <div class={classes.viewport}>
+        {itemGroups.map((group, groupIdx) => (
+          <div class={classes.group}>
+            {groupIdx > 0 && <div class={classes.separator} />}
+            {group.map((item) => {
+              if (item.type === "separator") {
+                return <div class={classes.separator} />
+              }
+              if (item.type === "label") {
+                return <div class={classes.label}>{item.label}</div>
+              }
+
+              const itemColorClass = item.color === "error"
+                ? "text-destructive hover:bg-destructive/10 hover:text-destructive"
+                : item.color === "primary"
+                ? "text-primary hover:bg-primary/10"
+                : ""
+
+              const ItemTag = item.to ? "a" : "button"
+
+              return (
+                <ItemTag
+                  href={item.to}
+                  target={item.target}
+                  type={item.to ? undefined : "button"}
+                  class={`${classes.item} ${itemColorClass} ${item.class || ""}`}
+                  data-slot="item"
+                  data-dropdown-item
+                  data-item-type={item.type}
+                  data-item-id={item.id || item.label}
+                  data-item-action={item.label}
+                  disabled={item.disabled}
+                >
+                  {item.type === "checkbox" && (
+                    <span class="shrink-0 size-4 flex items-center justify-center border border-default rounded bg-default" data-checkbox-box>
+                      <RLAIcon name="i-lucide-check" class={`size-3 text-primary ${item.checked !== false ? "" : "hidden"}`} data-checkbox-check />
+                    </span>
+                  )}
+
+                  {item.avatar && (
+                    <img src={item.avatar.src} alt={item.avatar.alt || item.label || ""} class={classes.itemLeadingAvatar} />
+                  )}
+
+                  {item.icon && !item.avatar && (
+                    <span class={`${item.icon} ${classes.itemLeadingIcon}`} />
+                  )}
+
+                  <span class={classes.itemLabel}>{item.label}</span>
+
+                  {(item.shortcut || (item.kbds && item.kbds.length > 0)) && (
+                    <span class={classes.itemTrailing}>
+                      {item.shortcut && <span class={classes.shortcut}>{item.shortcut}</span>}
+                      {item.kbds && item.kbds.map(kbd => (
+                        <kbd class={classes.itemTrailingKbds}>{kbd}</kbd>
+                      ))}
+                    </span>
+                  )}
+                </ItemTag>
+              )
+            })}
+          </div>
+        ))}
+      </div>
     </div>
   </div>
 </rla-dropdown-menu>
@@ -71,26 +123,107 @@ const classes = resolveClasses(dropdownMenu, {
     private dropdownCleanup: (() => void) | null = null;
 
     connectedCallback() {
-      this.style.display = 'contents';
+      this.style.display = 'inline-block';
       const trigger = this.querySelector("[data-dropdown-trigger]") as HTMLElement | null;
       const content = this.querySelector("[data-dropdown-content]") as HTMLElement | null;
 
       if (!trigger || !content) return;
 
-      const onTriggerClick = (e: MouseEvent) => {
+      const updatePosition = () => {
+        if (content.classList.contains("hidden")) return;
+        const rect = trigger.getBoundingClientRect();
+        const align = this.getAttribute("data-align") || "start";
+        const side = this.getAttribute("data-side") || "bottom";
+
+        content.style.position = "fixed";
+        content.style.zIndex = "9999";
+
+        if (side === "top") {
+          content.style.top = `${rect.top - content.offsetHeight - 4}px`;
+        } else {
+          content.style.top = `${rect.bottom + 4}px`;
+        }
+
+        if (align === "end") {
+          content.style.left = `${rect.right - content.offsetWidth}px`;
+        } else if (align === "center") {
+          content.style.left = `${rect.left + (rect.width / 2) - (content.offsetWidth / 2)}px`;
+        } else {
+          content.style.left = `${rect.left}px`;
+        }
+      };
+
+      const toggleMenu = (e: MouseEvent) => {
         e.stopPropagation();
-        content.classList.toggle("hidden");
+        const isHidden = content.classList.contains("hidden");
+
+        document.querySelectorAll("[data-dropdown-content]").forEach(el => {
+          if (el !== content) el.classList.add("hidden");
+        });
+
+        if (isHidden) {
+          content.classList.remove("hidden");
+          updatePosition();
+        } else {
+          content.classList.add("hidden");
+        }
       };
-      trigger.addEventListener("click", onTriggerClick);
 
-      const onDocumentClick = () => {
-        content.classList.add("hidden");
+      trigger.addEventListener("click", toggleMenu);
+
+      const onDocumentClick = (e: MouseEvent) => {
+        if (!this.contains(e.target as Node) && !content.contains(e.target as Node)) {
+          content.classList.add("hidden");
+        }
       };
       document.addEventListener("click", onDocumentClick);
 
+      const onScrollOrResize = () => {
+        if (!content.classList.contains("hidden")) {
+          updatePosition();
+        }
+      };
+      window.addEventListener("scroll", onScrollOrResize, true);
+      window.addEventListener("resize", onScrollOrResize);
+
+      const onItemClick = (e: MouseEvent) => {
+        const itemEl = (e.target as HTMLElement).closest("[data-dropdown-item]") as HTMLElement | null;
+        if (itemEl && !itemEl.hasAttribute("disabled")) {
+          const itemType = itemEl.getAttribute("data-item-type");
+          if (itemType === "checkbox") {
+            e.stopPropagation();
+            const checkIcon = itemEl.querySelector("[data-checkbox-check]");
+            const isCurrentlyChecked = checkIcon ? !checkIcon.classList.contains("hidden") : false;
+            const newChecked = !isCurrentlyChecked;
+            if (checkIcon) {
+              if (newChecked) {
+                checkIcon.classList.remove("hidden");
+              } else {
+                checkIcon.classList.add("hidden");
+              }
+            }
+            this.dispatchEvent(new CustomEvent("rla-dropdown-checkbox-change", {
+              detail: {
+                id: itemEl.getAttribute("data-item-id"),
+                action: itemEl.getAttribute("data-item-action"),
+                checked: newChecked,
+                event: e
+              },
+              bubbles: true
+            }));
+          } else {
+            content.classList.add("hidden");
+          }
+        }
+      };
+      content.addEventListener("click", onItemClick);
+
       this.dropdownCleanup = () => {
-        trigger.removeEventListener("click", onTriggerClick);
+        trigger.removeEventListener("click", toggleMenu);
         document.removeEventListener("click", onDocumentClick);
+        window.removeEventListener("scroll", onScrollOrResize, true);
+        window.removeEventListener("resize", onScrollOrResize);
+        content.removeEventListener("click", onItemClick);
       };
     }
 

package/src/components/dropdown-menu/RLSDropdownMenu.tsx

@@ -0,0 +1,196 @@
+import {
+  createSignal,
+  createMemo,
+  splitProps,
+  onMount,
+  onCleanup,
+  For,
+  Show,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { DropdownMenuProps, DropdownMenuItem } from "./dropdown-menu"
+import { dropdownMenuTheme } from "./dropdown-menu.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSDropdownMenuProps extends DropdownMenuProps {
+  children?: JSX.Element
+  trigger?: JSX.Element
+}
+
+const RLSDropdownMenu: Component<RLSDropdownMenuProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "items",
+    "label",
+    "icon",
+    "size",
+    "color",
+    "arrow",
+    "content",
+    "disabled",
+    "ui",
+    "class",
+    "children",
+    "trigger"
+  ])
+
+  const [isOpen, setIsOpen] = createSignal(false)
+  let menuContainer: HTMLDivElement | undefined
+
+  onMount(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (isOpen() && menuContainer && !menuContainer.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener("click", handleOutsideClick)
+    onCleanup(() => document.removeEventListener("click", handleOutsideClick))
+  })
+
+  const resolvedClasses = createMemo(() =>
+    dropdownMenuTheme({
+      size: props.size ?? "md",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const itemGroups = createMemo<DropdownMenuItem[][]>(() => {
+    if (!props.items) return []
+    if (props.items.length > 0 && Array.isArray(props.items[0])) {
+      return props.items as DropdownMenuItem[][]
+    }
+    return [props.items as DropdownMenuItem[]]
+  })
+
+  const alignClass = () => {
+    const align = props.content?.align || "start"
+    if (align === "end") return "right-0"
+    if (align === "center") return "left-1/2 -translate-x-1/2"
+    return "left-0"
+  }
+
+  return (
+    <div
+      ref={(el) => (menuContainer = el)}
+      class={resolvedClasses().root}
+      data-slot="root"
+      {...rest}
+    >
+      <button
+        type="button"
+        disabled={props.disabled}
+        onClick={(e) => {
+          e.stopPropagation()
+          setIsOpen(!isOpen())
+        }}
+        class={resolvedClasses().trigger}
+        data-slot="trigger"
+      >
+        {props.trigger ? (
+          props.trigger
+        ) : props.children ? (
+          props.children
+        ) : (
+          <>
+            {props.icon && <RLSIcon name={props.icon} size="sm" class="shrink-0" />}
+            {props.label && <span>{props.label}</span>}
+            {!props.icon && !props.label && <RLSIcon name="ellipsisVertical" size="sm" />}
+          </>
+        )}
+      </button>
+
+      <Show when={isOpen()}>
+        <div
+          class={`${resolvedClasses().content}  ${alignClass()}`}
+          data-slot="content"
+          role="menu"
+        >
+          {props.arrow && <div class={resolvedClasses().arrow} />}
+          <div class={resolvedClasses().viewport}>
+            <For each={itemGroups()}>
+              {(group, groupIdx) => (
+                <div class={resolvedClasses().group}>
+                  {groupIdx() > 0 && <div class={resolvedClasses().separator} />}
+                  <For each={group}>
+                    {(item) => {
+                      if (item.type === "separator") {
+                        return <div class={resolvedClasses().separator} />
+                      }
+                      if (item.type === "label") {
+                        return <div class={resolvedClasses().label}>{item.label}</div>
+                      }
+
+                      const itemColor = () =>
+                        item.color === "error"
+                          ? "text-destructive hover:bg-destructive/10"
+                          : item.color === "primary"
+                            ? "text-primary hover:bg-primary/10"
+                            : ""
+
+                      if (item.to) {
+                        return (
+                          <a
+                            href={item.to}
+                            target={item.target}
+                            class={`${resolvedClasses().item}  ${itemColor()}  ${item.class || ""}`}
+                            data-slot="item"
+                            role="menuitem"
+                            onClick={(e) => {
+                              setIsOpen(false)
+                              item.onSelect?.(e)
+                            }}
+                          >
+                            {item.icon && (
+                              <RLSIcon
+                                name={item.icon}
+                                size="sm"
+                                class={resolvedClasses().itemLeadingIcon}
+                              />
+                            )}
+                            <span class={resolvedClasses().itemLabel}>{item.label}</span>
+                            {item.shortcut && (
+                              <span class={resolvedClasses().shortcut}>{item.shortcut}</span>
+                            )}
+                          </a>
+                        )
+                      }
+
+                      return (
+                        <button
+                          type="button"
+                          disabled={item.disabled}
+                          class={`${resolvedClasses().item}  ${itemColor()}  ${item.class || ""}`}
+                          data-slot="item"
+                          role="menuitem"
+                          onClick={(e) => {
+                            setIsOpen(false)
+                            item.onSelect?.(e)
+                          }}
+                        >
+                          {item.icon && (
+                            <RLSIcon
+                              name={item.icon}
+                              size="sm"
+                              class={resolvedClasses().itemLeadingIcon}
+                            />
+                          )}
+                          <span class={resolvedClasses().itemLabel}>{item.label}</span>
+                          {item.shortcut && (
+                            <span class={resolvedClasses().shortcut}>{item.shortcut}</span>
+                          )}
+                        </button>
+                      )
+                    }}
+                  </For>
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSDropdownMenu

package/src/components/dropdown-menu/dropdown-menu.theme.ts

@@ -1,29 +1,53 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDropdownMenuTheme = () =>
-  defineTheme({
-    slots: ["root", "trigger", "content", "item", "shortcut", "separator", "label"],
-    base: {
-      root: "relative inline-block text-left",
-      trigger:
-        "inline-flex justify-center w-full rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-      content:
-        "absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md border bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none",
-      item: "group flex w-full items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50",
-      shortcut: "ml-auto text-xs tracking-widest opacity-60",
-      separator: "-mx-1 my-1 h-px bg-muted",
-      label: "px-2 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase"
-    },
-    variants: {
-      size: {
-        sm: { trigger: "px-3 py-1.5 text-xs", item: "px-2 py-1 text-xs" },
-        md: { trigger: "px-4 py-2 text-sm", item: "px-2 py-1.5 text-sm" },
-        lg: { trigger: "px-5 py-2.5 text-base", item: "px-3 py-2 text-base" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
+export const dropdownMenuTheme = defineTheme("dropdown-menu", {
+  slots: [
+    "root",
+    "trigger",
+    "content",
+    "viewport",
+    "group",
+    "item",
+    "itemLeadingIcon",
+    "itemLeadingAvatar",
+    "itemLabel",
+    "itemTrailing",
+    "itemTrailingKbds",
+    "shortcut",
+    "separator",
+    "label",
+    "arrow"
+  ],
+  base: {
+    root: "relative inline-block text-left",
+    trigger:
+      "inline-flex justify-center items-center w-full rounded-md border border-default bg-default px-3 py-1.5 text-sm font-medium shadow-sm hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+    content:
+      "absolute z-50 mt-1 min-w-32 rounded-md border border-default bg-elevated p-1 text-highlighted shadow-md ring-1 ring-black/5 focus:outline-none flex flex-col gap-0.5",
+    viewport: "flex flex-col gap-0.5",
+    group: "p-0.5 isolate flex flex-col gap-0.5",
+    item: "group relative flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50 select-none transition-colors",
+    itemLeadingIcon: "shrink-0 size-4 text-muted group-hover:text-highlighted",
+    itemLeadingAvatar: "shrink-0 size-4 rounded-full object-cover",
+    itemLabel: "truncate flex-1 text-left",
+    itemTrailing: "ms-auto inline-flex gap-1.5 items-center text-xs text-muted",
+    itemTrailingKbds:
+      "hidden lg:inline-flex items-center gap-0.5 text-[10px] font-mono opacity-70 bg-muted px-1 rounded border border-default",
+    shortcut: "ml-auto text-xs tracking-widest text-muted",
+    separator: "-mx-1 my-1 h-px bg-border",
+    label: "px-2 py-1.5 text-xs font-semibold tracking-wider text-muted uppercase",
+    arrow: "absolute -top-1.5 left-4 size-3 rotate-45 border-l border-t border-default bg-elevated"
+  },
+  variants: {
+    size: {
+      xs: { trigger: "px-2 py-1 text-xs gap-1", item: "px-1.5 py-1 text-xs gap-1" },
+      sm: { trigger: "px-2.5 py-1.5 text-xs gap-1.5", item: "px-2 py-1 text-xs gap-1.5" },
+      md: { trigger: "px-3 py-2 text-sm gap-2", item: "px-2 py-1.5 text-sm gap-2" },
+      lg: { trigger: "px-4 py-2.5 text-base gap-2", item: "px-3 py-2 text-base gap-2" },
+      xl: { trigger: "px-5 py-3 text-lg gap-2.5", item: "px-3.5 py-2.5 text-lg gap-2.5" }
     }
-  })
-
-export default createDropdownMenuTheme()
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})

package/src/components/dropdown-menu/dropdown-menu.ts

@@ -1,20 +1,42 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
+
 export interface DropdownMenuItem {
-  label: string
-  value?: string
+  label?: string
   icon?: string
+  avatar?: {
+    src: string
+    loading?: "lazy" | "eager"
+    alt?: string
+  }
   shortcut?: string
-  disabled?: boolean
-  type?: "item" | "checkbox" | "radio" | "separator" | "label"
+  kbds?: string[]
+  type?: "link" | "label" | "separator" | "checkbox" | "item"
+  color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
   checked?: boolean
-  group?: string
+  disabled?: boolean
+  slot?: string
+  onSelect?: (e: Event) => void
+  onUpdateChecked?: (checked: boolean) => void
+  children?: DropdownMenuItem[] | DropdownMenuItem[][]
+  to?: string
+  target?: string
+  class?: any
+  ui?: any
+  [key: string]: any
+}
+
+export interface DropdownMenuContentProps {
+  align?: "start" | "center" | "end"
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+  [key: string]: any
 }
 
 export interface DropdownMenuProps {
   /**
-   * The menu items array.
+   * The menu items array (single level or grouped array).
    */
-  items?: DropdownMenuItem[]
+  items?: DropdownMenuItem[] | DropdownMenuItem[][]
   /**
    * The trigger button label.
    */
@@ -26,11 +48,27 @@ export interface DropdownMenuProps {
   /**
    * Size scale.
    */
-  size?: "sm" | "md" | "lg"
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
   /**
    * Color theme of the trigger.
    */
   color?: ThemeColor
+  /**
+   * Display an arrow alongside the menu.
+   */
+  arrow?: boolean
+  /**
+   * Content options like align and sideOffset.
+   */
+  content?: DropdownMenuContentProps
+  /**
+   * Modal interaction lock.
+   */
+  modal?: boolean
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/editor/RLAEditor.astro

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

package/src/components/editor/blocks/AddBlockModal.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, inject } from "vue"
-import { BLOCK_DEFINITIONS, CATEGORY_ORDER, type BlockDefinition } from "./utils/blocks"
-import { useI18n } from "./utils/editorHelpers"
+import { BLOCK_DEFINITIONS, CATEGORY_ORDER, type BlockDefinition } from "../utils/blocks"
+import { useI18n } from "../utils/editorHelpers"
 import { scv, cx } from "css-variants"
-import { SECTION_LEVEL_KEY } from "./composables/injectionKeys"
+import { SECTION_LEVEL_KEY } from "../composables/injectionKeys"
 import RLVButton from "../../button/RLVButton.vue"
 import RLVInput from "../../input/RLVInput.vue"