@herongxhr/ui-react 0.0.0-stage → 0.1.2

package/dist/classes.d.ts

@@ -0,0 +1 @@
+export declare function withClass<State>(base: string, className?: string | ((state: State) => string | undefined)): string | ((state: State) => string);

package/dist/classes.js

@@ -0,0 +1,5 @@
+export function withClass(base, className) {
+    return typeof className === 'function'
+        ? (state) => [base, className(state)].filter(Boolean).join(' ')
+        : [base, className].filter(Boolean).join(' ');
+}

package/dist/dialog.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+export declare const DialogRoot: <Payload>(props: BaseDialog.Root.Props<Payload>) => import("react").JSX.Element;
+export declare const DialogTrigger: BaseDialog.Trigger;
+export declare const DialogPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare function DialogBackdrop({ className, ...props }: ComponentProps<typeof BaseDialog.Backdrop>): import("react").JSX.Element;
+export declare function DialogViewport({ className, ...props }: ComponentProps<typeof BaseDialog.Viewport>): import("react").JSX.Element;
+export declare function DialogPopup({ className, ...props }: ComponentProps<typeof BaseDialog.Popup>): import("react").JSX.Element;
+export declare const Dialog: {
+    Root: <Payload>(props: BaseDialog.Root.Props<Payload>) => import("react").JSX.Element;
+    Trigger: BaseDialog.Trigger;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Backdrop: typeof DialogBackdrop;
+    Viewport: typeof DialogViewport;
+    Popup: typeof DialogPopup;
+};

package/dist/dialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { withClass } from './classes.js';
+export const DialogRoot = BaseDialog.Root;
+export const DialogTrigger = BaseDialog.Trigger;
+export const DialogPortal = BaseDialog.Portal;
+export const DialogClose = BaseDialog.Close;
+export const DialogTitle = BaseDialog.Title;
+export const DialogDescription = BaseDialog.Description;
+export function DialogBackdrop({ className, ...props }) {
+    return _jsx(BaseDialog.Backdrop, { ...props, className: withClass('hrui-dialog-backdrop', className) });
+}
+export function DialogViewport({ className, ...props }) {
+    return _jsx(BaseDialog.Viewport, { ...props, className: withClass('hrui-dialog-viewport', className) });
+}
+export function DialogPopup({ className, ...props }) {
+    return _jsx(BaseDialog.Popup, { ...props, className: withClass('hrui-dialog-popup', className) });
+}
+export const Dialog = {
+    Root: DialogRoot, Trigger: DialogTrigger, Portal: DialogPortal, Close: DialogClose,
+    Title: DialogTitle, Description: DialogDescription, Backdrop: DialogBackdrop,
+    Viewport: DialogViewport, Popup: DialogPopup,
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './select.js';
+export * from './dialog.js';
+export * from './theme-select.js';
+export * from './theme-toggle.js';
+export { CSPProvider } from '@base-ui/react/csp-provider';

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './select.js';
+export * from './dialog.js';
+export * from './theme-select.js';
+export * from './theme-toggle.js';
+export { CSPProvider } from '@base-ui/react/csp-provider';

package/dist/select.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentProps } from 'react';
+import { Select as BaseSelect } from '@base-ui/react/select';
+export declare const SelectRoot: typeof BaseSelect.Root;
+export declare const SelectValue: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SelectTrigger({ className, variant, ...props }: ComponentProps<typeof BaseSelect.Trigger> & {
+    variant?: 'field' | 'ghost';
+}): import("react").JSX.Element;
+export declare function SelectIcon({ className, ...props }: ComponentProps<typeof BaseSelect.Icon>): import("react").JSX.Element;
+export declare function SelectPositioner({ className, ...props }: ComponentProps<typeof BaseSelect.Positioner>): import("react").JSX.Element;
+export declare function SelectPopup({ className, ...props }: ComponentProps<typeof BaseSelect.Popup>): import("react").JSX.Element;
+export declare function SelectList({ className, ...props }: ComponentProps<typeof BaseSelect.List>): import("react").JSX.Element;
+export declare function SelectItem({ className, ...props }: ComponentProps<typeof BaseSelect.Item>): import("react").JSX.Element;
+export declare function SelectItemText({ className, ...props }: ComponentProps<typeof BaseSelect.ItemText>): import("react").JSX.Element;
+export declare function SelectItemIndicator({ className, ...props }: ComponentProps<typeof BaseSelect.ItemIndicator>): import("react").JSX.Element;
+export declare const Select: {
+    Root: typeof BaseSelect.Root;
+    Trigger: typeof SelectTrigger;
+    Value: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Icon: typeof SelectIcon;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: typeof SelectPositioner;
+    Popup: typeof SelectPopup;
+    List: typeof SelectList;
+    Item: typeof SelectItem;
+    ItemText: typeof SelectItemText;
+    ItemIndicator: typeof SelectItemIndicator;
+};
+export interface Option {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectControlProps {
+    label: string;
+    name?: string;
+    options: Option[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    labelledBy?: string;
+}
+export declare function SelectControl({ label, name, options, value, defaultValue, onValueChange, required, disabled, className, labelledBy }: SelectControlProps): import("react").JSX.Element;

package/dist/select.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { Check, ChevronDown } from 'lucide-react';
+import { withClass } from './classes.js';
+export const SelectRoot = BaseSelect.Root;
+export const SelectValue = BaseSelect.Value;
+export const SelectPortal = BaseSelect.Portal;
+export function SelectTrigger({ className, variant = 'field', ...props }) {
+    return _jsx(BaseSelect.Trigger, { ...props, "data-variant": variant, className: withClass('hrui-select-trigger', className) });
+}
+export function SelectIcon({ className, ...props }) {
+    return _jsx(BaseSelect.Icon, { ...props, className: withClass('hrui-select-icon', className) });
+}
+export function SelectPositioner({ className, ...props }) {
+    return _jsx(BaseSelect.Positioner, { alignItemWithTrigger: false, side: "bottom", align: "start", sideOffset: 4, ...props, className: withClass('hrui-select-positioner', className) });
+}
+export function SelectPopup({ className, ...props }) {
+    return _jsx(BaseSelect.Popup, { ...props, className: withClass('hrui-select-popup', className) });
+}
+export function SelectList({ className, ...props }) {
+    return _jsx(BaseSelect.List, { ...props, className: withClass('hrui-select-list', className) });
+}
+export function SelectItem({ className, ...props }) {
+    return _jsx(BaseSelect.Item, { ...props, className: withClass('hrui-select-item', className) });
+}
+export function SelectItemText({ className, ...props }) {
+    return _jsx(BaseSelect.ItemText, { ...props, className: withClass('hrui-select-item-text', className) });
+}
+export function SelectItemIndicator({ className, ...props }) {
+    return _jsx(BaseSelect.ItemIndicator, { ...props, className: withClass('hrui-select-item-indicator', className) });
+}
+export const Select = {
+    Root: SelectRoot, Trigger: SelectTrigger, Value: SelectValue, Icon: SelectIcon,
+    Portal: SelectPortal, Positioner: SelectPositioner, Popup: SelectPopup,
+    List: SelectList, Item: SelectItem, ItemText: SelectItemText, ItemIndicator: SelectItemIndicator,
+};
+export function SelectControl({ label, name, options, value, defaultValue = '', onValueChange, required, disabled, className, labelledBy }) {
+    const [ownValue, setOwnValue] = useState(defaultValue);
+    return _jsxs(Select.Root, { items: options, name: name, value: value === undefined ? ownValue : value, required: required, disabled: disabled, onValueChange: (next) => { const nextValue = next ?? ''; setOwnValue(nextValue); onValueChange?.(nextValue); }, children: [_jsxs(Select.Trigger, { className: className, "aria-label": labelledBy ? undefined : label, "aria-labelledby": labelledBy, children: [_jsx(Select.Value, {}), _jsx(Select.Icon, { children: _jsx(ChevronDown, { "aria-hidden": "true" }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Popup, { children: _jsx(Select.List, { children: options.map((option) => _jsxs(Select.Item, { value: option.value, label: option.label, disabled: option.disabled, children: [_jsx(Select.ItemText, { children: option.label }), _jsx(Select.ItemIndicator, { children: _jsx(Check, { "aria-hidden": "true" }) })] }, option.value)) }) }) }) })] });
+}

package/dist/styles.css

@@ -0,0 +1,174 @@
+/* Import @herongxhr/design-tokens/tokens.css before this file and the app brand adapter. */
+.hrui-select-trigger,
+.hrui-select-popup,
+.hrui-select-list,
+.hrui-select-item,
+.hrui-dialog-viewport,
+.hrui-dialog-popup { box-sizing: border-box; }
+.hrui-select-trigger {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hr-ui-space-3);
+  min-height: var(--hr-ui-control-height);
+  min-width: 0;
+  max-width: 100%;
+  padding: var(--hr-ui-space-2) var(--hr-ui-space-3);
+  border: var(--hr-ui-border-width) solid var(--hr-ui-color-border-strong);
+  border-radius: var(--hr-ui-radius-small);
+  background: var(--hr-ui-color-surface);
+  color: var(--hr-ui-color-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--hr-ui-transition-fast), color var(--hr-ui-transition-fast), border-color var(--hr-ui-transition-fast);
+}
+.hrui-select-trigger:hover:not([data-disabled]),
+.hrui-select-trigger[data-popup-open] { background: var(--hr-ui-color-surface-raised); border-color: var(--hr-ui-color-border-hover); }
+.hrui-select-trigger:focus-visible { outline: var(--hr-ui-focus-width-subtle) solid var(--hr-ui-color-focus); outline-offset: var(--hr-ui-focus-offset); }
+.hrui-select-trigger[data-disabled] { opacity: var(--hr-ui-opacity-disabled); cursor: not-allowed; }
+.hrui-select-trigger>span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hrui-select-trigger[data-variant="ghost"] {
+  gap: var(--hr-ui-space-2);
+  border-color: transparent;
+  border-radius: var(--hr-ui-radius-medium);
+  background: transparent;
+  color: var(--hr-ui-color-muted);
+  font-size: var(--hr-ui-font-small);
+  line-height: var(--hr-ui-leading-heading);
+  white-space: nowrap;
+}
+.hrui-select-trigger[data-variant="ghost"]:hover:not([data-disabled]),
+.hrui-select-trigger[data-variant="ghost"][data-popup-open] { color: var(--hr-ui-color-text); background: var(--hr-ui-color-surface-raised); }
+.hrui-select-trigger[data-variant="ghost"]:hover:not([data-disabled]):not([data-popup-open]) { border-color: transparent; }
+.hrui-select-trigger[data-variant="ghost"][data-popup-open] { border-color: var(--hr-ui-color-border); }
+.hrui-select-trigger>svg { width: var(--hr-ui-icon-small); height: var(--hr-ui-icon-small); flex-shrink: 0; }
+.hrui-select-icon { display: inline-flex; flex-shrink: 0; margin-left: auto; color: var(--hr-ui-color-subtle); transition: transform var(--hr-ui-transition-fast) var(--hr-ui-motion-easing-standard); }
+.hrui-select-icon[data-popup-open] { transform: rotate(180deg); }
+.hrui-select-icon svg,
+.hrui-select-item-indicator svg { width: var(--hr-ui-icon-medium); height: var(--hr-ui-icon-medium); }
+.hrui-select-trigger svg,
+.hrui-select-item svg { stroke-width: var(--hr-ui-icon-stroke); }
+.hrui-select-trigger[data-variant="ghost"] .hrui-select-icon svg { width: var(--hr-ui-icon-small); height: var(--hr-ui-icon-small); }
+.hrui-select-positioner { z-index: var(--hr-ui-layer-popover); outline: none; }
+.hrui-select-popup {
+  min-width: min(var(--anchor-width), var(--available-width));
+  width: max-content;
+  max-width: min(var(--available-width), var(--hr-ui-select-max-width));
+  max-height: var(--available-height);
+  padding: var(--hr-ui-space-1);
+  border: var(--hr-ui-border-width) solid var(--hr-ui-color-border);
+  border-radius: var(--hr-ui-radius-small);
+  background: var(--hr-ui-color-surface);
+  color: var(--hr-ui-color-text);
+  box-shadow: var(--hr-ui-shadow-popover);
+  font: var(--hr-ui-font-body)/var(--hr-ui-leading-body) var(--hr-ui-font-sans);
+  overflow: hidden;
+  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-select-popup[data-starting-style],
+.hrui-select-popup[data-ending-style] { opacity: 0; transform: translateY(calc(-1 * var(--hr-ui-space-1))) scale(var(--hr-ui-motion-scale-enter)); }
+.hrui-select-popup[data-ending-style] { transition-duration: var(--hr-ui-transition-fast); }
+.hrui-select-list {
+  max-height: max(0px, min(var(--hr-ui-select-max-height), calc(var(--available-height) - var(--hr-ui-space-1) * 2 - var(--hr-ui-border-width) * 2)));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0;
+  margin: 0;
+  outline: none;
+}
+.hrui-select-item {
+  display: flex;
+  align-items: center;
+  gap: var(--hr-ui-space-3);
+  min-height: var(--hr-ui-control-height);
+  padding: var(--hr-ui-space-2) var(--hr-ui-space-3);
+  border-radius: var(--hr-ui-radius-small);
+  color: var(--hr-ui-color-text);
+  cursor: default;
+  user-select: none;
+  outline: none;
+  transition: background-color var(--hr-ui-transition-fast), color var(--hr-ui-transition-fast);
+}
+.hrui-select-item[data-highlighted] { color: var(--hr-ui-color-highlight-text); background: var(--hr-ui-color-highlight); }
+.hrui-select-item[data-disabled] { color: var(--hr-ui-color-muted); opacity: var(--hr-ui-opacity-disabled); }
+.hrui-select-item>svg { width: var(--hr-ui-icon-medium); height: var(--hr-ui-icon-medium); flex-shrink: 0; }
+.hrui-select-item-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.hrui-select-item-indicator { display: inline-flex; margin-left: auto; color: var(--hr-ui-color-accent); }
+.hrui-theme-control { position: relative; }
+.hrui-theme-control .hrui-select-trigger { width: var(--hr-ui-control-width-theme); }
+.hrui-theme-popup { width: var(--hr-ui-popover-width-small); border-radius: var(--hr-ui-radius-medium); font-size: var(--hr-ui-font-small); line-height: var(--hr-ui-leading-heading); }
+.hrui-theme-popup .hrui-select-item { color: var(--hr-ui-color-muted); }
+.hrui-theme-popup .hrui-select-item[data-highlighted],
+.hrui-theme-popup .hrui-select-item[data-selected] { color: var(--hr-ui-color-text); }
+.hrui-theme-popup .hrui-select-item-indicator svg { width: var(--hr-ui-icon-small); height: var(--hr-ui-icon-small); }
+.hrui-theme-status:not([data-warning]) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.hrui-theme-status[data-warning] {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: var(--hr-ui-layer-popover);
+  width: max-content;
+  max-width: min(var(--hr-ui-warning-max-width), calc(100vw - var(--hr-ui-space-6) * 2));
+  padding: var(--hr-ui-space-2) var(--hr-ui-space-3);
+  border-radius: var(--hr-ui-radius-small);
+  background: var(--hr-ui-color-warning-bg);
+  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-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; }
+.hrui-dialog-viewport { position: fixed; inset: 0; z-index: var(--hr-ui-layer-dialog); display: flex; align-items: center; justify-content: center; padding: var(--hr-ui-space-4); overflow: auto; overscroll-behavior: contain; }
+.hrui-dialog-popup { display: flex; flex-direction: column; flex-shrink: 0; margin: 0; overflow: hidden; outline: none; 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-dialog-popup[data-starting-style],
+.hrui-dialog-popup[data-ending-style] { opacity: 0; transform: translateY(var(--hr-ui-space-2)) scale(var(--hr-ui-motion-scale-enter)); }
+.hrui-dialog-popup[data-ending-style] { transition-duration: var(--hr-ui-transition-fast); }
+/* This viewport breakpoint matches the existing compact admin layout. */
+@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, .hrui-theme-toggle-button, .hrui-theme-toggle-icon { transition: none; }
+}

package/dist/theme-select.d.ts

@@ -0,0 +1,7 @@
+export type ThemeChoice = 'system' | 'light' | 'dark';
+export interface ThemeSelectProps {
+    storageKey?: string;
+    className?: string;
+    defaultTheme?: ThemeChoice;
+}
+export declare function ThemeSelect({ storageKey, className, defaultTheme }: ThemeSelectProps): import("react").JSX.Element;

package/dist/theme-select.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from 'react';
+import { Check, ChevronDown, Monitor, Moon, Sun } from 'lucide-react';
+import { Select } from './select.js';
+const themeItems = [
+    { value: 'system', label: '跟随系统', icon: Monitor },
+    { value: 'light', label: '浅色', icon: Sun },
+    { value: 'dark', label: '深色', icon: Moon },
+];
+function isTheme(value) { return value === 'system' || value === 'light' || value === 'dark'; }
+export function ThemeSelect({ storageKey = 'herong-theme', className, defaultTheme = 'system' }) {
+    // Stable initial markup keeps server rendering and the hydration render equal.
+    // Each application's pre-paint theme adapter remains the source of truth.
+    const [theme, setTheme] = useState(defaultTheme);
+    const [status, setStatus] = useState({ message: '', warning: false });
+    const statusId = useId();
+    const CurrentIcon = themeItems.find((item) => item.value === theme).icon;
+    useEffect(() => {
+        const initial = document.documentElement.dataset.theme;
+        setTheme(isTheme(initial) ? initial : defaultTheme);
+        let storage;
+        try {
+            storage = window.localStorage;
+        }
+        catch { /* Storage can be unavailable while theme switching still works. */ }
+        const onStorage = (event) => {
+            if ((storage && event.storageArea !== storage) || (event.key !== storageKey && event.key !== null))
+                return;
+            const next = isTheme(event.newValue) ? event.newValue : defaultTheme;
+            document.documentElement.dataset.theme = next;
+            setTheme(next);
+        };
+        window.addEventListener('storage', onStorage);
+        return () => window.removeEventListener('storage', onStorage);
+    }, [storageKey, defaultTheme]);
+    const changeTheme = (value) => {
+        if (!isTheme(value))
+            return;
+        document.documentElement.dataset.theme = value;
+        setTheme(value);
+        try {
+            localStorage.setItem(storageKey, value);
+            setStatus({ message: '外观已保存', warning: false });
+        }
+        catch {
+            setStatus({ message: '外观已切换，但当前浏览器无法保存偏好。', warning: true });
+        }
+    };
+    return _jsxs("div", { className: ['hrui-theme-control', className].filter(Boolean).join(' '), "data-theme-choice": theme, children: [_jsxs(Select.Root, { items: themeItems, value: theme, onValueChange: changeTheme, children: [_jsxs(Select.Trigger, { variant: "ghost", "aria-label": "\u9875\u9762\u5916\u89C2", "aria-describedby": statusId, children: [_jsx(CurrentIcon, { "aria-hidden": "true" }), _jsx(Select.Value, {}), _jsx(Select.Icon, { children: _jsx(ChevronDown, { "aria-hidden": "true" }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Positioner, { align: "end", sideOffset: 8, children: _jsx(Select.Popup, { className: "hrui-theme-popup", children: _jsx(Select.List, { children: themeItems.map(({ value, label, icon: Icon }) => _jsxs(Select.Item, { value: value, children: [_jsx(Icon, { "aria-hidden": "true" }), _jsx(Select.ItemText, { children: label }), _jsx(Select.ItemIndicator, { children: _jsx(Check, { "aria-hidden": "true" }) })] }, value)) }) }) }) })] }), _jsx("span", { id: statusId, className: "hrui-theme-status", "data-warning": status.warning || undefined, role: "status", "aria-live": "polite", children: status.message })] });
+}

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,46 @@
 {
   "name": "@herongxhr/ui-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.2",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "description": "Shared accessible Base UI components for Herong applications.",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@base-ui/react": "1.9.0",
+    "lucide-react": "1.72.0"
+  },
+  "peerDependencies": {
+    "@herongxhr/design-tokens": "0.1.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "6.0.3",
+    "@herongxhr/design-tokens": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/copy-styles.mjs",
+    "check": "tsc -p tsconfig.json --noEmit"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.