@herongxhr/ui-react 0.0.0-stage → 0.1.1

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,4 @@
+export * from './select.js';
+export * from './dialog.js';
+export * from './theme-select.js';
+export { CSPProvider } from '@base-ui/react/csp-provider';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './select.js';
+export * from './dialog.js';
+export * from './theme-select.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,139 @@
+/* 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-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 { 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/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.1",
+  "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.