paper-ink 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Paper Ink contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,150 @@
-# Temporary Holding Version
+# Paper Ink
 
-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.
+**以黑白为底、语义为色的轻量 React 组件库。**
+
+Paper Ink 追求清晰、克制的水墨风格：足够对比度的黑白、淡色边界，以及简洁的交互。常用组件 API 参考 Ant Design，提供组件包和 CLI 源码安装两种使用方式，既能直接使用，也能将源码带回项目自由修改。
+
+[![Paper Ink 中文组件总览](https://raw.githubusercontent.com/tingxi8087/paper-ink/main/apps/website/public/images/components-overview.png)](https://tingxi8087.github.io/paper-ink/#/showcase)
+
+[在线文档](https://tingxi8087.github.io/paper-ink/) · [组件画廊](https://tingxi8087.github.io/paper-ink/#/showcase) · [快速开始](https://tingxi8087.github.io/paper-ink/#/guide) · [主题实验室](https://tingxi8087.github.io/paper-ink/#/theme)
+
+> 当前版本为 **0.2.0**。面向 React 18+、ReactDOM 和 TypeScript 项目。
+
+## 为什么选择 Paper Ink
+
+- **聚焦常用能力。** 精简 API 的重复配置，支持组件 JS 与 CSS 按需引入；React 和 ReactDOM 为 peer dependencies，不打包进组件库。
+- **追求更少的包装层。** 使用简洁的 DOM 与 CSS，减少不必要的节点嵌套，便于理解结构、覆盖样式和调试。这是设计原则，不代表所有组件都比其他库节点更少。
+- **包与源码两种分发。** 包引入方便统一升级；CLI 按需安装组件源码、共享模块和所需依赖，适合二次开发。
+- **极简的默认风格。** 黑白主色、清晰对比度、统一 SVG 图标与克制动效，链接和状态保留必要的语义色。
+- **熟悉的 API，明确的范围。** 常用属性参考 Ant Design；复杂的 Form、Table、布局和 Upload 按轻量思路独立设计，各组件文档列出支持的 API 与边界。
+- **清晰的主题结构。** 按视觉用途组织主题变量，支持 ConfigProvider、嵌套继承和组件覆盖；主题实验室可以直接试验与导出配置。
+- **可以实际体验的文档。** 交互案例、在线 JSX 编辑预览、组件画廊与主题工具，帮助你确认组件是否适合自己的项目。
+- **MIT 开源。** TypeScript 源码、公开类型与行为测试，使用和修改自由。
+
+“轻量”指聚焦能力、按需分发与可理解的实现。当前 Button 示例测量为 JS **1,944 bytes**、CSS **1,318 bytes**（gzip；JS 经 esbuild 打包压缩，React / ReactDOM 外置，CSS 为构建后的独立样式）。可用 `pnpm check:size` 复测；不同组件会带入各自需要的依赖，这不是与其他库的对比基准。
+
+## 安装与使用
+
+### 方式一：组件包
+
+在已有 React 项目中，选择项目使用的包管理器安装：
+
+```bash
+npm install paper-ink
+# 或 cnpm install paper-ink
+# 或 yarn add paper-ink
+# 或 pnpm add paper-ink
+```
+
+React 和 ReactDOM 需要由项目提供；已有 React 项目一般已安装。
+
+在应用中导入组件和样式：
+
+```tsx
+import { Button, Input, Stack } from 'paper-ink';
+import 'paper-ink/style.css';
+
+export default function App() {
+  return (
+    <Stack gap="medium">
+      <Input placeholder="输入一些文字" />
+      <Button type="primary">保存</Button>
+    </Stack>
+  );
+}
+```
+
+也可以只引入需要的组件与样式：
+
+```tsx
+import { Button } from 'paper-ink/button';
+import 'paper-ink/button/style.css';
+```
+
+组件 CSS 子路径包含该组件所需的样式依赖。全量样式和按需样式选择一种即可。React 与 ReactDOM 由消费项目提供。
+
+### 方式二：CLI 安装源码
+
+在你的 React + TypeScript 项目根目录执行：
+
+```bash
+npx @tingxi8087/paper-ink-cli init
+npx @tingxi8087/paper-ink-cli add button input --dry-run
+npx @tingxi8087/paper-ink-cli add button input
+```
+
+也可以使用 `pnpm dlx @tingxi8087/paper-ink-cli`。CLI 需要 Node.js 20+，无需安装组件包即可使用本地源码。
+
+从目标项目的 `src/App.tsx` 引入：
+
+```tsx
+import { Button, Input } from './components/paper-ink';
+import './components/paper-ink/style.css';
+
+export default function App() {
+  return <><Input placeholder="可以直接修改组件源码" /><Button>保存</Button></>;
+}
+```
+
+有 `src` 时默认安装到 `src/components/paper-ink`，否则为 `components/paper-ink`。可用 `init --path src/ui/paper-ink` 自定义目录；已有 `@/` 别名也可用于引入，CLI 不修改项目别名。
+
+CLI 自动解析共享模块与组件依赖，支持 `list`、`--dry-run` 和 `--no-install`。再次安装保留已修改文件；无归属的冲突文件会停止安装，明确传入 `--overwrite` 才覆盖。请将源码、`paper-ink.json` 与 `paper-ink.lock.json` 一起提交。当前没有自动合并上游修改的更新命令。
+
+包与源码分别拥有主题上下文，同一个组件树中建议保持一种来源。源码分发细节见 [分发说明](https://github.com/tingxi8087/paper-ink/blob/main/doc/distribution.md) 和 [CLI 文档](https://github.com/tingxi8087/paper-ink/blob/main/packages/cli/README.md)。
+
+<details>
+<summary>从仓库构建安装（组件开发与离线分发）</summary>
+
+要求 Node.js 22.12+、pnpm 10：
+
+```bash
+git clone https://github.com/tingxi8087/paper-ink.git
+cd paper-ink
+pnpm install
+pnpm --filter paper-ink build
+pnpm --dir packages/paper-ink pack --pack-destination ../../.artifacts
+```
+
+将生成的 tgz 文件复制到消费项目后执行 `npm install ./paper-ink-0.2.0.tgz`。本仓库也可通过 `pnpm build:registry` 与 `pnpm cli` 使用未发布的本地 CLI 源码。
+
+</details>
+
+## 组件与工具
+
+| 类型 | 代表组件 |
+| --- | --- |
+| 通用与布局 | Button、Typography、Divider、Stack、Inline、SimpleGrid、Layout、Splitter |
+| 数据录入 | Input / Search / Password / TextArea、Select、AutoComplete、Checkbox、Radio、Switch、InputNumber、Slider、Rate、DatePicker、TimePicker、ColorPicker、Upload |
+| 数据展示 | Card、Avatar、Badge、Tag、Descriptions、Statistic、Image、Timeline、Table |
+| 导航与反馈 | Menu、Tabs、Breadcrumb、Steps、Pagination、Dropdown、Tooltip、Popover、Popconfirm、Modal、Drawer、Alert、Message、Notification、Progress、Spin、Skeleton、Empty、Result |
+| 状态与业务工具 | Form、ConfigProvider、App、useBasePageTable、useTableChecked、useRefState、useLocalstorageState、useUpload |
+
+这是概览，不代表完整实现对应 Ant Design API。具体用法、示例与支持范围以 [在线文档](https://tingxi8087.github.io/paper-ink/) 为准。组件规划见 [状态清单](https://github.com/tingxi8087/paper-ink/blob/main/doc/component-priorities.md)。
+
+## 图标
+
+公开图标库采用 [Tabler Icons](https://tabler.io/icons)，MIT 许可。安装 Paper Ink 时会自动安装依赖，不需要单独安装图标包：
+
+```tsx
+import { IconSearch, IconPlus } from 'paper-ink/icons';
+import { Button } from 'paper-ink';
+
+<IconSearch size={20} stroke={2} />;
+<Button icon={<IconPlus size={16} />}>新建</Button>;
+```
+
+保留 Tabler 官方组件名称和属性，支持按需打包，无图标 CSS 和额外包装节点。[图标目录](https://tingxi8087.github.io/paper-ink/#/icons)支持搜索、筛选、复制代码与居中辅助线。
+
+源码安装：`npx @tingxi8087/paper-ink-cli add tabler-icons`，CLI 自动处理依赖。
+
+## 与 Ant Design 的关系
+
+Paper Ink 的常用组件 API 与交互习惯参考 [Ant Design](https://ant.design/)，采用独立实现，不依赖 `antd`；提供常用 API 子集，主题及部分复杂组件采用独立设计。它不是 Ant Design 的完整替代，也不保证直接迁移所有现有用法。
+
+感谢 Ant Design 提供的设计与 API 参考。项目使用的 Day.js、@ctrl/tinycolor 和 @rc-component/mini-decimal 等依赖各自遵循其开源许可证。
+
+## 开发与贡献
+
+源码、设计文档与贡献说明见 [GitHub 仓库](https://github.com/tingxi8087/paper-ink)。
+
+[MIT License](LICENSE)。

package/dist/alert/index.d.ts

@@ -0,0 +1,44 @@
+import { Component, type AriaAttributes, type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
+export interface AlertClosable extends AriaAttributes {
+    closeIcon?: ReactNode;
+    disabled?: boolean;
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    afterClose?: () => void;
+}
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: ReactNode;
+    message?: ReactNode;
+    description?: ReactNode;
+    type?: 'success' | 'info' | 'warning' | 'error';
+    showIcon?: boolean;
+    icon?: ReactNode;
+    banner?: boolean;
+    action?: ReactNode;
+    variant?: 'outlined' | 'filled';
+    closable?: boolean | AlertClosable;
+    closeIcon?: ReactNode;
+    closeText?: ReactNode;
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    afterClose?: () => void;
+}
+export interface AlertErrorBoundaryProps {
+    title?: ReactNode;
+    message?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+}
+declare class ErrorBoundary extends Component<AlertErrorBoundaryProps, {
+    error: Error | null;
+}> {
+    state: {
+        error: Error | null;
+    };
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+}
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>> & {
+    ErrorBoundary: typeof ErrorBoundary;
+};
+export {};

package/dist/alert/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseIcon, StatusIcon } from '../internal/icons.js';
+import { Component, forwardRef, useEffect, useRef, useState } from 'react';
+import { useTheme } from '../config-provider/index.js';
+import { themeVariables } from '../theme/variables.js';
+const AlertRoot = forwardRef(function Alert({ title, message, description, type, showIcon, icon, banner = false, action, variant = 'outlined', closable = false, closeIcon, closeText, onClose, afterClose, className, style, ...rest }, ref) {
+    const theme = useTheme();
+    const [closed, setClosed] = useState(false);
+    const resolvedType = type ?? (banner ? 'warning' : 'info');
+    const tone = theme.token.color[resolvedType];
+    const close = typeof closable === 'object' ? closable : {};
+    const onAfter = close.afterClose ?? afterClose;
+    const notified = useRef(false);
+    useEffect(() => { if (closed && !notified.current) {
+        notified.current = true;
+        onAfter?.();
+    } }, [closed, onAfter]);
+    if (closed)
+        return null;
+    const { closeIcon: objectIcon, disabled, onClose: objectOnClose, afterClose: ignored, ...closeAria } = close;
+    return _jsxs("div", { ...rest, ref: ref, role: rest.role ?? 'alert', className: ['pi-alert', banner && 'pi-alert--banner', className].filter(Boolean).join(' '), style: { ...themeVariables(theme), background: tone.subtle, borderColor: variant === 'filled' || banner ? 'transparent' : tone.border, ...style }, children: [(showIcon ?? banner) && _jsx("span", { className: "pi-alert__icon", "aria-hidden": "true", style: { color: tone.solid }, children: icon ?? _jsx(StatusIcon, { type: resolvedType, circle: true, width: 20, height: 20 }) }), _jsxs("div", { className: "pi-alert__content", children: [_jsx("div", { className: "pi-alert__title", children: title ?? message }), description != null && _jsx("div", { className: "pi-alert__description", children: description })] }), action != null && _jsx("div", { className: "pi-alert__action", children: action }), (closable || closeText != null) && _jsx("button", { ...closeAria, type: "button", "aria-label": closeAria['aria-label'] ?? '关闭提示', className: "pi-alert__close", disabled: disabled, onClick: event => { (objectOnClose ?? onClose)?.(event); if (!event.defaultPrevented)
+                    setClosed(true); }, children: objectIcon ?? closeIcon ?? closeText ?? _jsx(CloseIcon, {}) })] });
+});
+class ErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) { return { error }; }
+    render() { return this.state.error ? _jsx(AlertRoot, { type: "error", showIcon: true, title: this.props.title ?? this.props.message ?? this.state.error.message, description: this.props.description }) : this.props.children; }
+}
+export const Alert = Object.assign(AlertRoot, { ErrorBoundary });

package/dist/alert/style.css

@@ -0,0 +1,10 @@
+.pi-theme { display: contents; }
+
+.pi-alert { display: flex; align-items: flex-start; gap: var(--pi-spacing-medium); min-width: 0; padding: 8px 12px; border: 1px solid; border-radius: var(--pi-radius-control); color: var(--pi-color-text-primary); font-family: var(--pi-font-family); font-size: var(--pi-font-size); line-height: 1.5; }
+.pi-alert--banner { border-radius: 0; }
+.pi-alert__icon { display: inline-flex; justify-content: center; align-items: center; flex: none; font-weight: 600; width: 20px; height: 20px; font-size: 12px; }
+.pi-alert__content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.pi-alert__description { margin-top: 4px; color: var(--pi-color-text-secondary); font-size: 13px; }
+.pi-alert__action { flex: none; }
+.pi-alert__close { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; width: 20px; min-height: 20px; background: transparent; color: var(--pi-color-text-secondary); font: inherit; cursor: pointer; }
+.pi-alert__close:disabled { cursor: not-allowed; opacity: .5; }

package/dist/app/index.d.ts

@@ -0,0 +1,39 @@
+import { type HTMLAttributes, type ReactNode, type ElementType } from 'react';
+import type { ModalProps } from '../modal/types.js';
+import type { MessageConfig, MessageInstance } from '../message/types.js';
+import type { NotificationConfig, NotificationInstance } from '../notification/types.js';
+export interface ModalConfirmConfig extends Omit<ModalProps, 'children' | 'content' | 'open' | 'onOk' | 'onCancel' | 'afterClose'> {
+    content?: ReactNode;
+    icon?: ReactNode;
+    afterClose?: () => void;
+    onOk?: () => void | Promise<unknown>;
+    onCancel?: () => void | Promise<unknown>;
+}
+export interface ModalConfirmHandle extends PromiseLike<boolean> {
+    destroy: () => void;
+    update: (config: Partial<ModalConfirmConfig> | ((previous: ModalConfirmConfig) => Partial<ModalConfirmConfig>)) => void;
+}
+export interface AppModalInstance {
+    confirm: (config: ModalConfirmConfig) => ModalConfirmHandle;
+    info: (config: ModalConfirmConfig) => ModalConfirmHandle;
+    success: (config: ModalConfirmConfig) => ModalConfirmHandle;
+    error: (config: ModalConfirmConfig) => ModalConfirmHandle;
+    warning: (config: ModalConfirmConfig) => ModalConfirmHandle;
+    destroyAll: () => void;
+}
+export interface AppInstance {
+    message: MessageInstance;
+    modal: AppModalInstance;
+    notification: NotificationInstance;
+}
+export interface AppProps extends HTMLAttributes<HTMLDivElement> {
+    component?: ElementType | false;
+    message?: MessageConfig;
+    notification?: NotificationConfig;
+}
+declare function AppRoot({ children, component, message: config, notification: notificationConfig, className, style, ...rest }: AppProps): import("react").JSX.Element;
+declare function useApp(): AppInstance;
+export declare const App: typeof AppRoot & {
+    useApp: typeof useApp;
+};
+export {};

package/dist/app/index.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../button/button.js';
+import { Modal } from '../modal/modal.js';
+import { useMessage } from '../message/message.js';
+import { useNotification } from '../notification/index.js';
+import { useTheme } from '../config-provider/index.js';
+import { themeVariables } from '../theme/variables.js';
+import { StatusIcon } from '../internal/icons.js';
+const Context = createContext(null);
+function ConfirmDialog({ entry, close, complete }) {
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(false);
+    const alive = useRef(true);
+    const busy = useRef(false);
+    useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []);
+    const { content, icon, onOk, onCancel, afterClose, ...props } = entry.config;
+    async function act(confirmed) {
+        if (busy.current || entry.closing !== undefined)
+            return;
+        busy.current = true;
+        setPending(true);
+        setError(false);
+        try {
+            await (confirmed ? onOk?.() : onCancel?.());
+            if (alive.current)
+                close(entry.key, confirmed);
+        }
+        catch {
+            if (alive.current)
+                setError(true);
+        }
+        finally {
+            busy.current = false;
+            if (alive.current)
+                setPending(false);
+        }
+    }
+    const status = entry.type === 'confirm' ? 'warning' : entry.type;
+    return _jsx(Modal, { ...props, open: entry.closing === undefined, afterClose: () => complete(entry.key), centered: props.centered ?? true, closable: props.closable ?? false, maskClosable: props.maskClosable ?? false, onOk: () => { void act(true); }, onCancel: () => { void act(false); }, confirmLoading: pending, cancelButtonProps: { ...props.cancelButtonProps, disabled: pending || props.cancelButtonProps?.disabled }, footer: props.footer === undefined ? (entry.type !== 'confirm' ? _jsx(Button, { type: "primary", ...props.okButtonProps, loading: pending, onClick: event => { props.okButtonProps?.onClick?.(event); if (!event.defaultPrevented)
+                void act(true); }, children: props.okText ?? '知道了' }) : undefined) : props.footer, children: _jsxs("div", { className: "pi-app-confirm-content", children: [icon !== null && _jsx("span", { className: `pi-app-confirm-icon pi-app-confirm-icon--${status}`, "aria-hidden": "true", children: icon ?? _jsx(StatusIcon, { type: status, circle: true, width: 20, height: 20 }) }), _jsxs("div", { children: [content, error && _jsx("p", { role: "alert", className: "pi-app-confirm-error", children: "\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5\u3002" })] })] }) });
+}
+function AppRoot({ children, component = 'div', message: config, notification: notificationConfig, className, style, ...rest }) {
+    const theme = useTheme();
+    const [api, holder] = useMessage(config);
+    const [entries, setEntries] = useState([]);
+    const [notificationApi, notificationHolder] = useNotification(notificationConfig);
+    const afterCloseQueue = useRef([]);
+    const entriesRef = useRef([]);
+    const sequence = useRef(0);
+    const mounted = useRef(true);
+    const lifecycle = useRef(0);
+    function close(key, confirmed) {
+        const entry = entriesRef.current.find(item => item.key === key);
+        if (!entry || entry.closing !== undefined)
+            return;
+        entriesRef.current = entriesRef.current.map(item => item.key === key ? { ...item, closing: confirmed } : item);
+        setEntries(entriesRef.current);
+    }
+    function complete(key) {
+        const entry = entriesRef.current.find(item => item.key === key);
+        if (!entry)
+            return;
+        entriesRef.current = entriesRef.current.filter(item => item.key !== key);
+        setEntries(entriesRef.current);
+        entry.finish(entry.closing ?? false);
+        afterCloseQueue.current.push(entry);
+    }
+    const modal = useMemo(() => {
+        const open = (type, config) => {
+            let finish;
+            const promise = new Promise(resolve => { finish = resolve; });
+            const key = ++sequence.current;
+            if (!mounted.current)
+                finish(false);
+            else {
+                entriesRef.current = [...entriesRef.current, { key, type, config, finish }];
+                setEntries(entriesRef.current);
+            }
+            return { destroy: () => close(key, false), update: (update) => {
+                    entriesRef.current = entriesRef.current.map(entry => entry.key === key ? { ...entry, config: { ...entry.config, ...(typeof update === 'function' ? update(entry.config) : update) } } : entry);
+                    if (mounted.current)
+                        setEntries(entriesRef.current);
+                }, then: promise.then.bind(promise) };
+        };
+        return { confirm: config => open('confirm', config), info: config => open('info', config), success: config => open('success', config), error: config => open('error', config), warning: config => open('warning', config), destroyAll: () => { for (const entry of [...entriesRef.current])
+                close(entry.key, false); } };
+    }, []);
+    useEffect(() => {
+        const closed = afterCloseQueue.current;
+        afterCloseQueue.current = [];
+        for (const entry of closed)
+            entry.config.afterClose?.();
+    }, [entries]);
+    useEffect(() => {
+        mounted.current = true;
+        const generation = ++lifecycle.current;
+        return () => {
+            queueMicrotask(() => {
+                if (lifecycle.current !== generation)
+                    return;
+                mounted.current = false;
+                const pending = entriesRef.current;
+                entriesRef.current = [];
+                for (const entry of pending)
+                    entry.finish(false);
+            });
+        };
+    }, []);
+    const instance = useMemo(() => ({ message: api, modal, notification: notificationApi }), [api, modal, notificationApi]);
+    const content = _jsxs(_Fragment, { children: [children, holder, notificationHolder, entries.map(entry => _jsx(ConfirmDialog, { entry: entry, close: close, complete: complete }, entry.key))] });
+    const Wrapper = component;
+    return _jsx(Context.Provider, { value: instance, children: Wrapper === false ? content : _jsx(Wrapper, { ...rest, className: ['pi-app', className].filter(Boolean).join(' '), style: { ...themeVariables(theme), ...style }, children: content }) });
+}
+function useApp() { const instance = useContext(Context); if (!instance)
+    throw new Error('App.useApp() must be used inside <App>.'); return instance; }
+export const App = Object.assign(AppRoot, { useApp });

package/dist/app/style.css

@@ -0,0 +1,130 @@
+.pi-theme { display: contents; }
+
+.pi-button {
+  --btn-color: var(--pi-color-primary-solid); --btn-hover: var(--pi-color-primary-solid-hover); --btn-active: var(--pi-color-primary-solid-active); --btn-on: var(--pi-color-primary-on-solid);
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px; vertical-align: middle;
+  box-sizing: border-box; height: var(--pi-control-height-middle); padding-inline: var(--pi-button-padding-inline, 15px);
+  border: 1px solid var(--pi-color-border-default); border-radius: var(--pi-button-radius, var(--pi-radius-control));
+  font: inherit; font-family: var(--pi-font-family); font-size: var(--pi-font-size); line-height: 1; white-space: nowrap;
+  color: var(--pi-color-text-primary); background: var(--pi-color-surface-container); text-decoration: none; cursor: pointer;
+  transition: background var(--pi-motion-duration), color var(--pi-motion-duration), border-color var(--pi-motion-duration);
+}
+.pi-button:hover:not(:disabled):not([aria-disabled=true]) { color: var(--btn-hover); border-color: var(--btn-hover); }
+.pi-button:active:not(:disabled):not([aria-disabled=true]) { color: var(--btn-active); border-color: var(--btn-active); }
+.pi-button:focus { outline: none; }
+/* Color and appearance are independent; legacy type resolves to these classes. */
+.pi-button { --btn-subtle: var(--pi-color-primary-subtle); }
+.pi-button--color-danger { --btn-color: var(--pi-color-error-solid); --btn-hover: var(--pi-color-error-solid-hover); --btn-active: var(--pi-color-error-solid-active); --btn-on: var(--pi-color-error-on-solid); --btn-subtle: var(--pi-color-error-subtle); }
+.pi-button--color-primary, .pi-button--color-danger { color: var(--btn-color); border-color: var(--btn-color); }
+.pi-button--variant-solid { background: var(--btn-color); border-color: var(--btn-color); color: var(--btn-on); }
+.pi-button--variant-solid:hover:not(:disabled):not([aria-disabled=true]) { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-on); }
+.pi-button--variant-solid:active:not(:disabled):not([aria-disabled=true]) { background: var(--btn-active); border-color: var(--btn-active); color: var(--btn-on); }
+.pi-button--variant-dashed { border-style: dashed; }
+.pi-button--variant-text, .pi-button--variant-link, .pi-button--variant-filled { border-color: transparent; background: transparent; }
+.pi-button--color-default.pi-button--variant-link { --btn-color: var(--pi-color-link-default); --btn-hover: var(--pi-color-link-hover); --btn-active: var(--pi-color-link-active); }
+.pi-button--variant-link { color: var(--btn-color); }
+.pi-button--variant-filled { background: var(--btn-subtle); color: var(--btn-color); }
+.pi-button--color-default.pi-button--variant-filled { background: var(--pi-color-surface-muted); color: var(--pi-color-text-primary); }
+.pi-button--variant-text:hover:not(:disabled):not([aria-disabled=true]), .pi-button--variant-text:active:not(:disabled):not([aria-disabled=true]), .pi-button--variant-filled:hover:not(:disabled):not([aria-disabled=true]), .pi-button--variant-filled:active:not(:disabled):not([aria-disabled=true]) { background: var(--btn-subtle); border-color: transparent; }
+.pi-button--color-default.pi-button--variant-text:hover:not(:disabled):not([aria-disabled=true]), .pi-button--color-default.pi-button--variant-text:active:not(:disabled):not([aria-disabled=true]) { background: var(--pi-color-surface-muted); }
+.pi-button--variant-link:hover:not(:disabled):not([aria-disabled=true]), .pi-button--variant-link:active:not(:disabled):not([aria-disabled=true]) { border-color: transparent; }
+.pi-button--ghost:not(.pi-button--variant-text):not(.pi-button--variant-link) { background: transparent; color: white; border-color: white; }
+.pi-button--ghost.pi-button--color-primary, .pi-button--ghost.pi-button--color-danger { color: var(--btn-color); border-color: var(--btn-color); }
+.pi-button--ghost:hover:not(:disabled):not([aria-disabled=true]) { background: transparent; color: var(--btn-hover); border-color: var(--btn-hover); }
+.pi-button--ghost:active:not(:disabled):not([aria-disabled=true]) { background: transparent; color: var(--btn-active); border-color: var(--btn-active); }
+.pi-button--small { height: var(--pi-control-height-small); padding-inline: var(--pi-button-padding-inline, 7px); font-size: 12px; }
+.pi-button--large { height: var(--pi-control-height-large); padding-inline: var(--pi-button-padding-inline, 19px); font-size: 16px; }
+.pi-button--round { border-radius: 999px; }
+.pi-button--circle { border-radius: 50%; width: var(--pi-control-height-middle); padding: 0; }
+.pi-button--circle.pi-button--small { width: var(--pi-control-height-small); }
+.pi-button--circle.pi-button--large { width: var(--pi-control-height-large); }
+.pi-button--icon-only { padding-inline: 0; aspect-ratio: 1; }
+.pi-button--block { display: flex; width: 100%; }
+.pi-button:disabled, .pi-button[aria-disabled=true] { cursor: not-allowed; color: var(--pi-color-text-disabled); background: var(--pi-color-surface-muted); border-color: var(--pi-color-border-subtle); }
+.pi-button--loading:not(.pi-button--disabled) { opacity: .65; cursor: default; }
+.pi-button--loading.pi-button--variant-solid:not(.pi-button--disabled) { color: var(--btn-on); background: var(--btn-color); border-color: var(--btn-color); }
+.pi-button--loading.pi-button--variant-outlined:not(.pi-button--disabled), .pi-button--loading.pi-button--variant-dashed:not(.pi-button--disabled) { color: var(--pi-color-text-primary); background: var(--pi-color-surface-container); border-color: var(--pi-color-border-default); }
+.pi-button--variant-text:disabled, .pi-button--variant-link:disabled, .pi-button--variant-text[aria-disabled=true], .pi-button--variant-link[aria-disabled=true] { background: transparent; border-color: transparent; }
+.pi-button__content--spaced { letter-spacing: .3em; margin-inline-end: -.3em; }
+.pi-button__icon { display: inline-flex; align-items: center; }
+.pi-button__spinner { display: block; width: 1em; height: 1em; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pi-spin .7s linear infinite; }
+@keyframes pi-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .pi-button { transition: none; } .pi-button__spinner { animation-duration: 1.5s; } }
+
+
+.pi-modal-root { position: fixed; inset: 0; color: var(--pi-color-text-primary); font-family: var(--pi-font-family); font-size: var(--pi-font-size); }
+.pi-modal-root[hidden] { display: none; }
+.pi-modal-mask { position: absolute; inset: 0; background: rgb(0 0 0 / 42%); }
+.pi-modal-wrap { position: absolute; inset: 0; box-sizing: border-box; overflow-y: auto; overscroll-behavior: none; padding: 80px 16px 24px; }
+.pi-modal-wrap--centered { display: flex; align-items: flex-start; justify-content: center; padding-top: 24px; }
+.pi-modal-root--no-mask { pointer-events: none; }
+.pi-modal-root--no-mask .pi-modal { pointer-events: auto; }
+.pi-modal { position: relative; box-sizing: border-box; max-width: 100%; margin: 0 auto; padding: var(--pi-modal-padding, 24px); border: 1px solid var(--pi-color-border-subtle); border-radius: var(--pi-modal-radius, var(--pi-radius-control)); background: var(--pi-color-surface-elevated); box-shadow: 0 12px 48px rgb(0 0 0 / 16%); outline: none; line-height: 1.6; }
+.pi-modal-wrap--centered .pi-modal { margin-block: auto; }
+.pi-modal-title { padding-right: 28px; margin-bottom: 16px; font-size: 16px; font-weight: 600; line-height: 1.5; }
+.pi-modal-close { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--pi-radius-control); color: var(--pi-color-text-secondary); background: transparent; cursor: pointer; }
+.pi-modal-close:hover { color: var(--pi-color-text-primary); background: var(--pi-color-surface-muted); }
+.pi-modal-close:focus-visible { outline: 2px solid var(--pi-color-primary-solid); outline-offset: 2px; }
+.pi-modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+@media (max-width: 600px) { .pi-modal-wrap { padding: 24px 12px; } }
+
+.pi-modal-root--enter > .pi-modal-wrap > .pi-modal { animation:pi-modal-enter 180ms ease-out both; }
+.pi-modal-root--leave > .pi-modal-wrap > .pi-modal { pointer-events:none; animation:pi-modal-leave 180ms ease-in both; }
+.pi-modal-root--enter > .pi-modal-mask { animation:pi-modal-mask-enter 180ms ease-out both; }
+.pi-modal-root--leave > .pi-modal-mask { animation:pi-modal-mask-leave 180ms ease-in both; }
+@keyframes pi-modal-enter { from { opacity:0; } to { opacity:1; } }
+@keyframes pi-modal-leave { from { opacity:1; } to { opacity:0; } }
+@keyframes pi-modal-mask-enter { from { opacity:0; } to { opacity:1; } }
+@keyframes pi-modal-mask-leave { from { opacity:1; } to { opacity:0; } }
+@media(prefers-reduced-motion:reduce) { .pi-modal-root--enter > .pi-modal-wrap > .pi-modal,.pi-modal-root--leave > .pi-modal-wrap > .pi-modal,.pi-modal-root--enter > .pi-modal-mask,.pi-modal-root--leave > .pi-modal-mask { animation:none; } }
+
+.pi-message-holder { position: fixed; inset-inline: 12px; z-index: 1300; display: flex; flex-direction: column; align-items: center; pointer-events: none; font-family: var(--pi-font-family); font-size: var(--pi-font-size); }
+.pi-message { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; max-width: min(560px, 100%); padding: 10px 16px; border: 1px solid var(--pi-color-border-subtle); border-radius: var(--pi-radius-control); background: var(--pi-color-surface-elevated); color: var(--pi-color-text-primary); box-shadow: 0 4px 20px rgb(0 0 0 / 10%); line-height: 1.5; overflow-wrap: anywhere; pointer-events: auto; }
+.pi-message-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--pi-color-info-solid); color: var(--pi-color-info-on-solid); font-size: 12px; font-weight: 600; }
+.pi-message--success .pi-message-icon { background: var(--pi-color-success-solid); }
+.pi-message--error .pi-message-icon { background: var(--pi-color-error-solid); }
+.pi-message--warning .pi-message-icon { background: var(--pi-color-warning-solid); }
+.pi-message-icon--loading { box-sizing: border-box; border: 2px solid var(--pi-color-primary-solid); border-right-color: transparent; background: transparent; animation: pi-message-spin .8s linear infinite; }
+@keyframes pi-message-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .pi-message-icon--loading { animation-duration: 1.6s; } }
+
+.pi-message-shell { display:grid; grid-template-rows:1fr; max-width:100%; margin-bottom:8px; }
+.pi-message-clip { min-height:0; overflow:hidden; padding:4px 8px; margin:-4px -8px; }
+.pi-message-shell[data-motion=enter] { animation:pi-message-expand 180ms ease-out both; }
+.pi-message-shell[data-motion=enter] .pi-message { animation:pi-message-enter 180ms ease-out both; }
+.pi-message-shell[data-motion=leave] { animation:pi-message-collapse 180ms ease-in both; }
+.pi-message-shell[data-motion=leave] .pi-message { animation:pi-message-leave 180ms ease-in both; pointer-events:none; }
+@keyframes pi-message-expand { from { grid-template-rows:0fr; margin-bottom:0; } to { grid-template-rows:1fr; margin-bottom:8px; } }
+@keyframes pi-message-collapse { from { grid-template-rows:1fr; margin-bottom:8px; } to { grid-template-rows:0fr; margin-bottom:0; } }
+@keyframes pi-message-enter { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
+@keyframes pi-message-leave { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-4px); } }
+@media(prefers-reduced-motion:reduce) { .pi-message-shell[data-motion],.pi-message-shell[data-motion] .pi-message { animation:none; } }
+
+.pi-notification-holder { position:fixed; z-index:1300; display:flex; flex-direction:column; gap:8px; width:min(360px,calc(100vw - 32px)); pointer-events:none; font:var(--pi-font-size)/1.5 var(--pi-font-family); }
+.pi-notification-holder--topLeft,.pi-notification-holder--bottomLeft { left:16px; }
+.pi-notification-holder--topRight,.pi-notification-holder--bottomRight { right:16px; }
+.pi-notification { position:relative; display:flex; gap:12px; box-sizing:border-box; padding:16px 36px 16px 16px; border:1px solid var(--pi-color-border-subtle); border-radius:var(--pi-radius-control); background:var(--pi-color-surface-elevated); color:var(--pi-color-text-primary); box-shadow:0 4px 20px rgb(0 0 0 / 10%); pointer-events:auto; overflow-wrap:anywhere; }
+.pi-notification-content { min-width:0; flex:1; }
+.pi-notification-title { font-size:16px; font-weight:600; }
+.pi-notification-description { margin-top:4px; color:var(--pi-color-text-secondary); }
+.pi-notification-actions { display:flex; justify-content:flex-end; margin-top:12px; }
+.pi-notification-close { position:absolute; right:10px; top:12px; display:grid; place-items:center; width:24px; height:24px; border:0; background:transparent; color:var(--pi-color-text-secondary); cursor:pointer; border-radius:var(--pi-radius-control); }
+.pi-notification-close:hover { background:var(--pi-color-surface-muted); color:var(--pi-color-text-primary); }
+.pi-notification-close:focus-visible { outline:1px solid var(--pi-color-primary-solid); }
+.pi-notification-icon { display:inline-flex; padding-top:1px; flex:none; color:var(--pi-color-info-solid); }
+.pi-notification-icon--success { color:var(--pi-color-success-solid); }.pi-notification-icon--warning { color:var(--pi-color-warning-solid); }.pi-notification-icon--error { color:var(--pi-color-error-solid); }
+.pi-notification[data-motion=enter] { animation:pi-notification-enter 180ms ease-out both; }.pi-notification[data-motion=leave] { animation:pi-notification-leave 180ms ease-in both; pointer-events:none; }
+@keyframes pi-notification-enter { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
+@keyframes pi-notification-leave { to { opacity:0; transform:translateY(-6px); } }
+@media(prefers-reduced-motion:reduce) { .pi-notification[data-motion] { animation:none; } }
+
+.pi-app { color: var(--pi-color-text-primary); font-family: var(--pi-font-family); font-size: var(--pi-font-size); }
+.pi-app-confirm-content { display: flex; gap: 12px; align-items: flex-start; }
+.pi-app-confirm-icon { display: inline-flex; flex: none; padding-top: 1px; }
+.pi-app-confirm-icon--success { color: var(--pi-color-success-solid); }
+.pi-app-confirm-icon--info { color: var(--pi-color-info-solid); }
+.pi-app-confirm-icon--warning { color: var(--pi-color-warning-solid); }
+.pi-app-confirm-icon--error, .pi-app-confirm-error { color: var(--pi-color-error-solid); }
+.pi-app-confirm-error { margin: 8px 0 0; font-size: 12px; }
+.pi-app-confirm-ok { padding: 4px 12px; min-height: var(--pi-control-height-middle); border: 0; border-radius: var(--pi-radius-control); background: var(--pi-color-primary-solid); color: var(--pi-color-primary-on-solid); cursor: pointer; font: inherit; }
+.pi-app-confirm-ok:disabled { opacity: .5; cursor: not-allowed; }

package/dist/auto-complete/index.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import { type InputProps, type InputRef } from '../input/index.js';
+export interface AutoCompleteOption {
+    value: string;
+    label?: ReactNode;
+    disabled?: boolean;
+}
+export interface AutoCompleteProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange' | 'onSelect'> {
+    value?: string;
+    defaultValue?: string;
+    options?: AutoCompleteOption[];
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onSelect?: (value: string, option: AutoCompleteOption) => void;
+    filterOption?: boolean | ((input: string, option: AutoCompleteOption) => boolean);
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    notFoundContent?: ReactNode;
+}
+export type AutoCompleteRef = InputRef;
+export declare const AutoComplete: import("react").ForwardRefExoticComponent<AutoCompleteProps & import("react").RefAttributes<InputRef>>;