@herongxhr/ui-react 0.1.1 → 0.1.3

package/dist/account-menu.d.ts

@@ -0,0 +1,10 @@
+export interface AccountMenuProps {
+    name: string;
+    description?: string;
+    avatarUrl?: string;
+    loggingOut?: boolean;
+    logoutDisabled?: boolean;
+    onLogout: () => void;
+    className?: string;
+}
+export declare function AccountMenu({ name, description, avatarUrl, loggingOut, logoutDisabled, onLogout, className }: AccountMenuProps): import("react").JSX.Element;

package/dist/account-menu.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from '@base-ui/react/menu';
+import { ChevronDown, LogOut } from 'lucide-react';
+import { Avatar } from './avatar.js';
+export function AccountMenu({ name, description, avatarUrl, loggingOut = false, logoutDisabled = false, onLogout, className }) {
+    const displayName = name.trim() || '已登录账号';
+    const detail = description?.trim();
+    return _jsx("div", { className: ['hrui-account-menu', className].filter(Boolean).join(' '), children: _jsxs(Menu.Root, { modal: false, children: [_jsxs(Menu.Trigger, { className: "hrui-account-trigger", "aria-label": `打开${displayName}的账号菜单`, children: [_jsx(Avatar, { src: avatarUrl, alt: "", size: "small" }), _jsx("span", { className: "hrui-account-trigger-name", children: displayName }), _jsx(ChevronDown, { className: "hrui-account-chevron", "aria-hidden": "true" })] }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { className: "hrui-account-positioner", side: "bottom", align: "end", sideOffset: 8, children: _jsxs(Menu.Popup, { className: "hrui-account-popup", "aria-label": `${displayName}的账号菜单`, children: [_jsxs("div", { className: "hrui-account-summary", children: [_jsx(Avatar, { src: avatarUrl, alt: "" }), _jsxs("div", { className: "hrui-account-identity", children: [_jsx("strong", { children: displayName }), detail && _jsx("span", { children: detail })] })] }), _jsx(Menu.Separator, { className: "hrui-account-separator" }), _jsxs(Menu.Item, { className: "hrui-account-logout", closeOnClick: false, disabled: loggingOut || logoutDisabled, "aria-busy": loggingOut || undefined, label: "\u9000\u51FA\u767B\u5F55", onClick: () => { if (!loggingOut && !logoutDisabled)
+                                        onLogout(); }, children: [_jsx(LogOut, { "aria-hidden": "true" }), _jsx("span", { children: loggingOut ? '正在退出…' : '退出登录' })] })] }) }) })] }) });
+}

package/dist/avatar.d.ts

@@ -0,0 +1,7 @@
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    size?: 'small' | 'medium';
+    className?: string;
+}
+export declare function Avatar({ src, alt, size, className }: AvatarProps): import("react").JSX.Element;

package/dist/avatar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { UserRound } from 'lucide-react';
+export function Avatar({ src, alt = '用户头像', size = 'medium', className }) {
+    return _jsxs(BaseAvatar.Root, { className: ['hrui-avatar', className].filter(Boolean).join(' '), "data-size": size, "aria-hidden": alt === '' || undefined, children: [src && _jsx(BaseAvatar.Image, { className: "hrui-avatar-image", src: src, alt: alt, referrerPolicy: "no-referrer" }), _jsx(BaseAvatar.Fallback, { className: "hrui-avatar-fallback", role: alt ? 'img' : undefined, "aria-label": alt || undefined, children: _jsx(UserRound, { "aria-hidden": "true" }) })] }, src || '');
+}

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export * from './select.js';
 export * from './dialog.js';
 export * from './theme-select.js';
+export * from './theme-toggle.js';
+export * from './avatar.js';
+export * from './account-menu.js';
 export { CSPProvider } from '@base-ui/react/csp-provider';

package/dist/index.js

@@ -1,4 +1,7 @@
 export * from './select.js';
 export * from './dialog.js';
 export * from './theme-select.js';
+export * from './theme-toggle.js';
+export * from './avatar.js';
+export * from './account-menu.js';
 export { CSPProvider } from '@base-ui/react/csp-provider';

package/dist/styles.css

@@ -123,6 +123,68 @@
   color: var(--hr-ui-color-warning);
   font-size: var(--hr-ui-font-caption);
 }
+.hrui-theme-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--hr-ui-space-1); }
+.hrui-theme-toggle-button {
+  appearance: none;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--hr-ui-control-height);
+  height: var(--hr-ui-control-height);
+  min-width: var(--hr-ui-control-height);
+  min-height: var(--hr-ui-control-height);
+  padding: 0;
+  border: 0;
+  border-radius: var(--hr-ui-radius-medium);
+  background: transparent;
+  color: var(--hr-ui-color-muted);
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: color var(--hr-ui-transition-fast), background-color var(--hr-ui-transition-fast);
+}
+.hrui-theme-toggle-button:hover:not(:disabled) { color: var(--hr-ui-color-text); background: var(--hr-ui-color-surface-raised); }
+.hrui-theme-toggle-button:focus-visible { outline: var(--hr-ui-focus-width-subtle) solid var(--hr-ui-color-focus); outline-offset: var(--hr-ui-focus-offset); }
+.hrui-theme-toggle-button:disabled { cursor: default; }
+.hrui-theme-toggle-icons { position: relative; display: block; width: var(--hr-ui-icon-medium); height: var(--hr-ui-icon-medium); }
+.hrui-theme-toggle-icon { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: var(--hr-ui-icon-stroke); transition: opacity var(--hr-ui-transition-fast) var(--hr-ui-motion-easing-standard), transform var(--hr-ui-transition-normal) var(--hr-ui-motion-easing-standard); }
+.hrui-theme-toggle-sun { opacity: 0; transform: translateY(var(--hr-ui-space-1)) scale(var(--hr-ui-motion-scale-enter)); }
+.hrui-theme-toggle-moon { opacity: 1; transform: translateY(0) scale(1); }
+:root[data-theme="dark"] .hrui-theme-toggle-sun { opacity: 1; transform: translateY(0) scale(1); }
+:root[data-theme="dark"] .hrui-theme-toggle-moon { opacity: 0; transform: translateY(calc(-1 * var(--hr-ui-space-1))) scale(var(--hr-ui-motion-scale-enter)); }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) .hrui-theme-toggle-sun { opacity: 1; transform: translateY(0) scale(1); }
+  :root:not([data-theme="light"]):not([data-theme="dark"]) .hrui-theme-toggle-moon { opacity: 0; transform: translateY(calc(-1 * var(--hr-ui-space-1))) scale(var(--hr-ui-motion-scale-enter)); }
+}
+.hrui-theme-toggle-system>svg { width: var(--hr-ui-icon-medium); height: var(--hr-ui-icon-medium); stroke-width: var(--hr-ui-icon-stroke); }
+.hrui-theme-toggle-system[aria-pressed="true"] { color: var(--hr-ui-color-accent); background: var(--hr-ui-color-accent-soft); }
+.hrui-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--hr-ui-space-10); height: var(--hr-ui-space-10); overflow: hidden; border-radius: var(--hr-ui-radius-round); background: var(--hr-ui-color-surface-raised); color: var(--hr-ui-color-muted); }
+.hrui-avatar[data-size="small"] { width: var(--hr-ui-space-8); height: var(--hr-ui-space-8); }
+.hrui-avatar-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
+.hrui-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
+.hrui-avatar-fallback svg { width: var(--hr-ui-icon-medium); height: var(--hr-ui-icon-medium); stroke-width: var(--hr-ui-icon-stroke); }
+.hrui-account-menu { display: inline-flex; align-items: center; min-width: 0; }
+.hrui-account-trigger { appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--hr-ui-space-2); min-height: var(--hr-ui-control-height); min-width: var(--hr-ui-control-height); max-width: 100%; padding: var(--hr-ui-space-1) var(--hr-ui-space-2); border: 0; border-radius: var(--hr-ui-radius-medium); background: transparent; color: var(--hr-ui-color-text); font: var(--hr-ui-font-small)/var(--hr-ui-leading-heading) var(--hr-ui-font-sans); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--hr-ui-transition-fast), color var(--hr-ui-transition-fast); }
+.hrui-account-trigger:hover,.hrui-account-trigger[data-popup-open] { background: var(--hr-ui-color-surface-raised); }
+.hrui-account-trigger:focus-visible { outline: var(--hr-ui-focus-width-subtle) solid var(--hr-ui-color-focus); outline-offset: var(--hr-ui-focus-offset); }
+.hrui-account-trigger-name { min-width: 0; max-width: var(--hr-ui-popover-width-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--hr-ui-weight-medium); }
+.hrui-account-chevron { width: var(--hr-ui-icon-small); height: var(--hr-ui-icon-small); flex-shrink: 0; color: var(--hr-ui-color-subtle); stroke-width: var(--hr-ui-icon-stroke); transition: transform var(--hr-ui-transition-fast) var(--hr-ui-motion-easing-standard); }
+.hrui-account-trigger[data-popup-open] .hrui-account-chevron { transform: rotate(180deg); }
+.hrui-account-positioner { z-index: var(--hr-ui-layer-popover); outline: none; }
+.hrui-account-popup { box-sizing: border-box; width: calc(var(--hr-ui-popover-width-small) + var(--hr-ui-space-8)); max-width: var(--available-width); max-height: var(--available-height); overflow-y: auto; overscroll-behavior: contain; padding: var(--hr-ui-space-1); border: var(--hr-ui-border-width) solid var(--hr-ui-color-border); border-radius: var(--hr-ui-radius-medium); background: var(--hr-ui-color-surface); color: var(--hr-ui-color-text); box-shadow: var(--hr-ui-shadow-popover); font: var(--hr-ui-font-small)/var(--hr-ui-leading-body) var(--hr-ui-font-sans); outline: none; transform-origin: var(--transform-origin); opacity: 1; transform: translateY(0) scale(1); transition: opacity var(--hr-ui-transition-fast) var(--hr-ui-motion-easing-standard), transform var(--hr-ui-transition-normal) var(--hr-ui-motion-easing-standard); }
+.hrui-account-popup[data-starting-style],.hrui-account-popup[data-ending-style] { opacity: 0; transform: translateY(calc(-1 * var(--hr-ui-space-1))) scale(var(--hr-ui-motion-scale-enter)); }
+.hrui-account-popup[data-ending-style] { transition-duration: var(--hr-ui-transition-fast); }
+.hrui-account-summary { display: flex; align-items: center; gap: var(--hr-ui-space-3); padding: var(--hr-ui-space-3); }
+.hrui-account-identity { display: flex; flex-direction: column; min-width: 0; gap: var(--hr-ui-space-1); overflow-wrap: anywhere; }
+.hrui-account-identity strong { font-size: var(--hr-ui-font-small); font-weight: var(--hr-ui-weight-semibold); line-height: var(--hr-ui-leading-heading); }
+.hrui-account-identity>span { color: var(--hr-ui-color-subtle); font-size: var(--hr-ui-font-caption); }
+.hrui-account-separator { height: var(--hr-ui-border-width); margin: var(--hr-ui-space-1) 0; background: var(--hr-ui-color-border); }
+.hrui-account-logout { box-sizing: border-box; display: flex; align-items: center; gap: var(--hr-ui-space-3); min-height: var(--hr-ui-control-height); padding: var(--hr-ui-space-3); border-radius: var(--hr-ui-radius-small); outline: none; cursor: pointer; user-select: none; color: var(--hr-ui-color-text); transition: color var(--hr-ui-transition-fast), background-color var(--hr-ui-transition-fast); }
+.hrui-account-logout[data-highlighted] { color: var(--hr-ui-color-highlight-text); background: var(--hr-ui-color-highlight); }
+.hrui-account-logout:focus-visible { outline: var(--hr-ui-focus-width-subtle) solid var(--hr-ui-color-focus); outline-offset: calc(-1 * var(--hr-ui-focus-width-subtle)); }
+.hrui-account-logout[data-disabled] { opacity: var(--hr-ui-opacity-disabled); cursor: not-allowed; }
+.hrui-account-logout svg { width: var(--hr-ui-icon-medium); height: var(--hr-ui-icon-medium); stroke-width: var(--hr-ui-icon-stroke); flex-shrink: 0; }
+@media (max-width: 760px) { .hrui-account-trigger-name { display: none; } }
 .hrui-dialog-backdrop { position: fixed; inset: 0; z-index: var(--hr-ui-layer-backdrop); background: var(--hr-ui-color-scrim); transition: opacity var(--hr-ui-transition-fast) var(--hr-ui-motion-easing-standard); }
 .hrui-dialog-backdrop[data-starting-style],
 .hrui-dialog-backdrop[data-ending-style] { opacity: 0; }
@@ -135,5 +197,6 @@
 @media (max-width: 760px) { .hrui-dialog-viewport { padding: var(--hr-ui-space-2); } }
 @media (prefers-reduced-motion: reduce) {
   .hrui-select-trigger, .hrui-select-icon, .hrui-select-popup, .hrui-select-item,
-  .hrui-dialog-backdrop, .hrui-dialog-popup { transition: none; }
+  .hrui-dialog-backdrop, .hrui-dialog-popup, .hrui-theme-toggle-button, .hrui-theme-toggle-icon,
+  .hrui-account-trigger, .hrui-account-chevron, .hrui-account-popup, .hrui-account-logout { transition: none; }
 }

package/dist/theme-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { ThemeChoice } from './theme-select.js';
+export type ResolvedTheme = 'light' | 'dark';
+export interface ThemeToggleProps {
+    storageKey?: string;
+    defaultTheme?: ThemeChoice;
+    className?: string;
+    showSystemControl?: boolean;
+    /** Runs only after a user action. A boolean result reports adapter persistence. */
+    onThemeChange?: (choice: ThemeChoice, resolved: ResolvedTheme) => boolean | void;
+}
+export declare function ThemeToggle({ storageKey, defaultTheme, className, showSystemControl, onThemeChange }: ThemeToggleProps): import("react").JSX.Element;

package/dist/theme-toggle.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { Monitor, Moon, Sun } from 'lucide-react';
+const CHANGE_EVENT = 'herong:ui-theme-change';
+function choice(value) {
+    return value === 'auto' ? 'system' : value === 'light' || value === 'dark' || value === 'system' ? value : null;
+}
+export function ThemeToggle({ storageKey = 'herong-theme', defaultTheme = 'system', className, showSystemControl = false, onThemeChange }) {
+    const [mounted, setMounted] = useState(false);
+    const [preference, setPreference] = useState(defaultTheme);
+    const [resolved, setResolved] = useState('light');
+    const [status, setStatus] = useState({ message: '', warning: false });
+    const preferenceRef = useRef(defaultTheme);
+    const callbackRef = useRef(onThemeChange);
+    const changeRef = useRef(null);
+    const statusId = useId();
+    callbackRef.current = onThemeChange;
+    useEffect(() => {
+        const root = document.documentElement;
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        let storage;
+        let saved = null;
+        try {
+            storage = window.localStorage;
+            saved = choice(storage.getItem(storageKey));
+        }
+        catch { /* The current page can still change its theme. */ }
+        const resolveChoice = (next) => next === 'system' ? media.matches ? 'dark' : 'light' : next;
+        const rootPreference = () => choice(root.dataset.hrThemePreference) || choice(root.dataset.themePreference);
+        const rootResolved = () => {
+            const current = choice(root.dataset.theme);
+            return current === 'light' || current === 'dark' ? current : resolveChoice(preferenceRef.current);
+        };
+        function apply(next) {
+            preferenceRef.current = next;
+            setPreference(next);
+            const actual = resolveChoice(next);
+            root.dataset.themePreference = next;
+            // Keep the established Herong pre-paint preference meaningful; its adapter
+            // synchronizes the legacy controller and storage keys after user actions.
+            if (root.dataset.hrThemePreference !== undefined)
+                root.dataset.hrThemePreference = next === 'system' ? 'auto' : next;
+            root.dataset.theme = actual;
+            setResolved(actual);
+            return actual;
+        }
+        apply(rootPreference() || saved || (root.dataset.theme === 'system' ? 'system' : defaultTheme));
+        function onSystemChange() { if (preferenceRef.current === 'system')
+            apply('system'); }
+        function onStorage(event) {
+            if ((storage && event.storageArea !== storage) || (event.key !== storageKey && event.key !== null))
+                return;
+            apply(choice(event.newValue) || defaultTheme);
+            setStatus({ message: '', warning: false });
+        }
+        function onSharedChange(event) {
+            const detail = event.detail;
+            const next = choice(detail?.choice);
+            if (detail?.storageKey !== storageKey || !next)
+                return;
+            apply(next);
+            if (detail.saved)
+                setStatus({ message: '', warning: false });
+        }
+        const observer = new MutationObserver(() => {
+            // A resolved dark/light attribute changing does not turn a system
+            // preference into an explicit choice. Observe preference separately.
+            const next = rootPreference();
+            if (next) {
+                preferenceRef.current = next;
+                setPreference(next);
+            }
+            setResolved(rootResolved());
+        });
+        observer.observe(root, { attributes: true, attributeFilter: ['data-theme', 'data-theme-preference', 'data-hr-theme-preference'] });
+        media.addEventListener('change', onSystemChange);
+        window.addEventListener('storage', onStorage);
+        window.addEventListener(CHANGE_EVENT, onSharedChange);
+        changeRef.current = (requested) => {
+            const next = requested === 'toggle' ? rootResolved() === 'dark' ? 'light' : 'dark' : requested;
+            const actual = apply(next);
+            let persisted = true;
+            try {
+                window.localStorage.setItem(storageKey, next);
+            }
+            catch {
+                persisted = false;
+            }
+            try {
+                const adapted = callbackRef.current?.(next, actual);
+                if (typeof adapted === 'boolean')
+                    persisted = adapted;
+            }
+            catch {
+                persisted = false;
+            }
+            // Notify other controls in this document without synthesizing native
+            // storage events or rereading stale storage after a failed save.
+            window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: { storageKey, choice: next, saved: persisted } }));
+            setStatus(persisted
+                ? { message: next === 'system' ? '已跟随系统主题' : next === 'dark' ? '已切换为深色模式' : '已切换为浅色模式', warning: false }
+                : { message: '外观已切换，但当前浏览器无法保存偏好。', warning: true });
+        };
+        setMounted(true);
+        return () => {
+            changeRef.current = null;
+            observer.disconnect();
+            media.removeEventListener('change', onSystemChange);
+            window.removeEventListener('storage', onStorage);
+            window.removeEventListener(CHANGE_EVENT, onSharedChange);
+        };
+    }, [storageKey, defaultTheme]);
+    const action = mounted ? resolved === 'dark' ? '切换为浅色模式' : '切换为深色模式' : '切换外观';
+    return _jsxs("div", { className: ['hrui-theme-toggle', className].filter(Boolean).join(' '), "data-theme-choice": preference, children: [_jsx("button", { type: "button", className: "hrui-theme-toggle-button", disabled: !mounted, "aria-label": action, title: action, "aria-describedby": statusId, onClick: () => changeRef.current?.('toggle'), children: _jsxs("span", { className: "hrui-theme-toggle-icons", "aria-hidden": "true", children: [_jsx(Sun, { className: "hrui-theme-toggle-icon hrui-theme-toggle-sun" }), _jsx(Moon, { className: "hrui-theme-toggle-icon hrui-theme-toggle-moon" })] }) }), showSystemControl && _jsx("button", { type: "button", className: "hrui-theme-toggle-button hrui-theme-toggle-system", disabled: !mounted, "aria-label": "\u8DDF\u968F\u7CFB\u7EDF\u4E3B\u9898", title: "\u8DDF\u968F\u7CFB\u7EDF\u4E3B\u9898", "aria-pressed": mounted && preference === 'system', "aria-describedby": statusId, onClick: () => changeRef.current?.('system'), children: _jsx(Monitor, { "aria-hidden": "true" }) }), _jsx("span", { id: statusId, className: "hrui-theme-status", "data-warning": status.warning || undefined, role: "status", "aria-live": "polite", "aria-atomic": "true", children: status.message })] });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herongxhr/ui-react",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "UNLICENSED",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",