@robert-stackflow/oneui 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+## 0.3.0 — 2026-10-28
+
+- AppShell 新增 brandName、brandIcon、brand、homePath、basePath 和 showHeader；支持无顶部栏的移动导航，可省略设置入口及侧栏折叠回调。普通点击向宿主传递内部路径，链接和新标签页使用完整基础路径。
+- 新增 createToaster 独立通知控制器，可由 React 组件外代码调用；ToastProvider 可接收 controller，保留原 useToast API 和单条通知替换行为。
+- IconPicker 支持 valuePrefix、自定义图标目录与 React 图标内容，保留存储 ID；统一字段、只读、禁用和表单值行为。
+- DatePicker 支持 timeZone、clearable、placeholder；指定时区影响今天/此刻及日历当天标记，输入的日历时间保持原值，不隐式转换为 UTC。
+- React/React DOM peer 范围调整为 ^19.2.0，独立消费验证覆盖 React 19.3.0 + TypeScript 5.9.3 和现有 React 19.3.1。
+- 两端示例增加前缀/自定义图标和指定时区日期示例；未迁移或修改 Moment 业务代码。
+- 修复极简深色导航选中文字过暗的问题。
+
+## 0.2.0 — 2026-10-28
+
+- 新增 MessageDialog、ConfirmDialog、FormDialog 与统一 LoadingState，复用表单校验、异步提交、错误反馈和焦点管理。
+- TreeSelect 新增 category 图标、数量、层级连线样式；保留 tree 风格，支持父子联动多选。
+- 新增 TreeTable，复用 Table 列定义，支持受控展开、多级连线和键盘导航；列支持 align、width。
+- Combobox 新增 mode="input" 触发框补全；保留弹层搜索，支持异步加载、取消、创建与失败重试。
+- MultiSelect 新增 display="tags"，与 TagInput 共用标签实现；保留摘要模式及选择限制。
+- 蓝白主题采用 Moment 对应色板、输入 hover 混色和深色参数；修复默认色板迁移与选择器分类栏底色。
+- 统一菜单项 1px 间距，修复快捷键右对齐、宿主 kbd 边框干扰、关闭的 Popover 被布局样式显示等问题。
+- 树选择器底部清空/完成操作使用独立的 8px 按钮间距。
+- 共享应用外壳与示例布局统一，修复图标尺寸、链接文字、动效示例、表单间距、弹层和移动布局。
+- 发布构建使用干净输出并检查包内引用；增加独立 tarball 消费项目的类型、生产与交互验证。
+
+## 0.1.0 — 2026-10-28
+
+- 首次发布 React 组件、应用外壳、极简/蓝白主题与图标字符资源。

package/README.md

@@ -30,17 +30,73 @@ export function App() {
 
 `ThemeProvider` 管理当前文档的主题，应用根部放置一个即可。颜色模式、动效、字体、密度、圆角和自定义配色均由共享层应用。
 
+蓝白默认色板取自 Moment 的 `admin/src/styles.css` 最终变量及 `admin/src/main.tsx` 的 victoria 色阶：浅色背景 `#F5F7FB`、面板 `#FFFFFF`、正文 `#25324A`、次级文字 `#8592A8`、边框 `#E3E8F1`。导航/焦点蓝为 `#5067B8`，主按钮为 `#4059AA`，开关为 `#526EDB`；深色同样使用 Moment 的对应值。各颜色用途分开配置，不再共用一种近似蓝。
+
+`normalizeAppearance` 使用 `paletteVersion: 2` 兼容旧蓝白默认值；非默认自定义配色保留，已带版本的显式颜色也不会被迁移。Desktop 与 Web 共用该规范化函数。参考值和源码摘要保存在 `tests/fixtures/moment-palette.json`，验证不依赖 Moment 或 Mantine 安装。
+
+蓝白输入与选择控件的 hover 边框复用 Moment 的混色规则：强调色 35% 与基础边框色混合。聚焦或展开时使用完整强调色，错误状态保持错误色；禁用、只读控件不响应 hover。图标、Emoji 和符号选择器的分类栏使用透明背景与主题选中块，不继承普通块状标签页的底板和投影。
+
 ## 边界
 
 - `AppShell` 通过导航数据和 `onNavigate` 接入任何路由或状态机制。
 - `headerActions`、`sidebarFooter`、`windowControls` 为应用能力插槽；`draggable` 仅标记 header 的拖动区域。
 - `UIProvider` 配置 Toast 位置、Tooltip 位置和必填标记；组件不读取宿主设置。
 - 普通组件也支持子路径导入，例如 `@robert-stackflow/oneui/Input`。
+- 页面直接复用 Form / FormField / useFormState 的校验与提交状态、Alert 的错误反馈和 ConfirmDialog 的确认流程；避免另写原生表单、按钮样式或错误提示。
+- Button 支持 `href`，渲染标准链接并沿用按钮样式；禁用或加载时阻止导航。Card 传入 `onClick` 后渲染可通过键盘激活的按钮卡片。导航与业务回调由消费应用提供。
 - CSS Modules 随组件分发，由消费项目的构建工具处理。图标/字符目录通过标准 `new URL(..., import.meta.url)` 加载随包资源。
-- React 和 React DOM 为 peer dependencies，不打入组件包。当前验证版本为 React 19.3.1，浏览器验证使用 Chromium。
+- React 和 React DOM 为 peer dependencies（^19.2.0），不打入组件包。独立消费验证覆盖 React 19.3.1，以及 React 19.3.0 + TypeScript 5.9.3；浏览器验证使用 Chromium。
+
+## 弹窗与加载状态
+
+`Dialog` 用于自定义内容，支持 small / medium / large。`MessageDialog` 提供纯文字消息与确认按钮，`ConfirmDialog` 提供普通、危险操作确认，`FormDialog` 提供有统一字段间距的表单及保存操作。三者均可从根入口或对应组件子路径导入。
+
+确认与表单支持异步回调，等待期间禁止重复提交及关闭，失败时保留内容并显示错误；回调返回 `false` 可保留弹窗。`FormDialog` 接收共享 `useFormState` 的 controller，字段使用 `FormField`，`onSubmit` 接收校验后的 values，错误样式与普通 Form 一致。
+
+`LoadingState` 复用 Spinner；`showLabel={false}` 仅显示动画，`fullPage` 用于页面内容区域。应用自行放置等待边界，保留路由外壳。
+
+以上 API 从 0.2.0 起提供。
+
+## 层级选择、补全与标签
+
+- `TreeSelect variant="category"` 在原有树选择交互上增加图标底块、子项数量与层级连线；默认 `variant="tree"` 保留简洁样式。两种样式均支持搜索、父子联动、多选、禁用、异步加载及键盘操作。`HierarchyOption.count` 可单独提供数量。
+- `TreeTable` 复用 `Table` 的列定义，接收 `rows`、`rowKey`、`getChildren`、`rowLabel`；通过 `expanded` / `onExpandedChange` 控制展开，或使用 `defaultExpanded` / `defaultExpandAll`。`treeColumn` 默认为第一列，支持多级连线、方向键导航及独立行操作。`Column.align`、`Column.width` 可用于对齐和列宽。
+- `Combobox mode="input"` 直接在触发框输入并在下方显示候选，保留 `loadOptions`、`onCreate` 和键盘选择。输入中的文本只用于搜索；选择候选或创建成功才提交选项值，关闭时恢复已选标签。默认 `mode="panel"` 继续使用弹层内搜索。
+- `MultiSelect display="tags"` 在触发框内展示可移除标签，复用 `TagInput` 的标签样式；默认 `display="summary"` 保留文字摘要。两种模式共享连续选择、搜索、数量限制和表单值。只读标签不可移除，禁用选项保持不可操作。
+
+菜单项间距统一为 `--menu-item-spacing: 1px`，菜单快捷键为靠右的纯文字提示，不预留空的指示器位置。Desktop 与 Web 共用示例：`/pickers?view=hierarchy`、`/forms?view=advanced`、`/data?view=hierarchy`；层级表格中的增删改仅更新示例内存数据。以上扩展从 0.2.0 起提供。
+
+## 接入现有应用（0.3.0）
+
+`AppShell` 默认仍显示 OneUI 品牌和顶部栏。可通过 `brandName`、`brandIcon` 设置品牌，或用 `brand` 替换完整品牌内容；`homePath` 指定宿主内部首页，`basePath="/admin"` 为实际链接添加基础路径。`onNavigate` 收到未加基础路径的内部路径，适合 React Router basename；Ctrl/Cmd 点击和新标签页使用完整 href。`showHeader={false}` 保留移动端浮动导航按钮。`settingsItem` 和 `onCollapsedChange` 可省略。自定义完整品牌内容由宿主负责紧凑侧栏适配。
+
+```tsx
+<AppShell brandName="Moment" brandIcon={<Brand />} homePath="/workbench"
+  basePath="/admin" showHeader={false} navigation={navigation}
+  active={active} title={title} onNavigate={navigate}>
+  {children}
+</AppShell>
+```
+
+组件外通知使用独立服务，并将同一实例交给 Provider；不需要在 API 模块调用 Hook。未挂载时保留最新消息；`notify` 返回该消息的关闭函数，旧消息的关闭函数不会关闭新消息。`dismiss` 触发关闭动画，`clear` 立即清除。默认仍只显示最新一条通知，多个控制器相互隔离；服务端渲染时应为每个应用/请求创建实例。
+
+```tsx
+// notifications.ts
+export const notifications = createToaster();
+export const notifyError = (error: Error) =>
+  notifications.notify(error.message, { tone: 'error' });
+// application root
+<ToastProvider controller={notifications}>{children}</ToastProvider>
+```
+
+`IconPicker valuePrefix="lucide:"` 将内置图标名转换为带前缀的存储值；`options` 可提供 `{ value, label, icon, keywords?, category? }` 自定义目录，选择后原样返回 value。自定义目录不加载内置图标资源，设置 options 时不应用 valuePrefix。`IconPickerProps`、`IconPickerOption` 可从根入口或组件子路径导入。
+
+`DatePicker mode="datetime" timeZone="Asia/Shanghai" seconds clearable` 使用指定 IANA 时区的今天/此刻，并支持清空及 placeholder。value 始终是 `YYYY-MM-DDTHH:mm[:ss]` 日历字段字符串；时区参数不把输入值变成时间戳，也不校验夏令时缺口/重复时间。定时发布、UTC 换算和时区歧义规则由宿主业务负责。无 timeZone 时继续使用设备本地时间。
+
+分类迁移时，如原应用父子分类独立选择，使用 `TreeSelect multiple checkStrictly`；图片上传的 EXIF/GPS、接口结果转换、串行策略（concurrency=1）与未保存状态属于宿主逻辑。
 
 ## 构建与打包
 
-在 General 根目录运行 `npm run pack:ui`。源码工作区供两端即时开发使用；发布内容单独生成到本目录 `dist`，含 ESM、TypeScript 声明、CSS 和资源。`dist/package.json` 只导出生成内容。
+在仓库根目录运行 `npm run pack:ui`。源码工作区供两端即时开发使用；发布内容单独生成到本目录 `dist`，含 ESM、TypeScript 声明、CSS 和资源。构建使用干净的临时目录并检查所有包内引用，成功后替换 dist，避免旧文件混入。`dist/package.json` 只导出生成内容。
 
 发布内容已通过独立 Vite 消费项目验证。包的许可为 UNLICENSED；资源目录内保留图标许可文件。

package/components/AppShell.d.ts

@@ -14,17 +14,24 @@ export declare function ShellHeader({ title, collapsed, onToggle, onMenu, action
     windowControls?: ReactNode;
     draggable?: boolean;
 }): import("react").JSX.Element;
-export declare function AppShell({ navigation, settingsItem, active, title, collapsed, onCollapsedChange, onNavigate, children, headerActions, sidebarFooter, windowControls, draggable, }: {
+export interface AppShellProps {
     navigation: readonly NavigationItem[];
-    settingsItem: NavigationItem;
+    settingsItem?: NavigationItem;
     active: string;
     title: string;
     collapsed?: boolean;
-    onCollapsedChange(value: boolean): void;
+    onCollapsedChange?(value: boolean): void;
     onNavigate(path: string): void;
     children: ReactNode;
     headerActions?: ReactNode;
     sidebarFooter?: ReactNode;
     windowControls?: ReactNode;
     draggable?: boolean;
-}): import("react").JSX.Element;
+    brandName?: string;
+    brandIcon?: ReactNode;
+    brand?: ReactNode;
+    homePath?: string;
+    basePath?: string;
+    showHeader?: boolean;
+}
+export declare function AppShell({ navigation, settingsItem, active, title, collapsed, onCollapsedChange, onNavigate, children, headerActions, sidebarFooter, windowControls, draggable, brandName, brandIcon, brand, homePath, basePath, showHeader, }: AppShellProps): import("react").JSX.Element;

package/components/AppShell.js

@@ -1,5 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { Layers2, Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { Drawer } from "./Drawer.js";
 import { IconButton } from "./IconButton.js";
@@ -63,10 +67,24 @@ function AppShell({
   headerActions,
   sidebarFooter,
   windowControls,
-  draggable = false
+  draggable = false,
+  brandName = "OneUI",
+  brandIcon = /* @__PURE__ */ jsx(Layers2, { size: 20 }),
+  brand,
+  homePath = "/",
+  basePath = "",
+  showHeader = true
 }) {
   const [mobile, setMobile] = useState(false);
   const scroll = useRef(null);
+  const base = basePath.replace(/^\/+|\/+$/g, ""), href = (path) => (base ? "/" + base : "") + (path.startsWith("/") ? path : "/" + path);
+  const navigate = (event, path) => {
+    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+      return;
+    event.preventDefault();
+    onNavigate(path);
+    setMobile(false);
+  };
   useEffect(() => {
     setMobile(false);
     scroll.current?.scrollTo({ top: 0 });
@@ -74,16 +92,10 @@ function AppShell({
   const item = (n) => /* @__PURE__ */ jsxs(
     "a",
     {
-      href: n.path,
+      href: href(n.path),
       "aria-current": active === n.id ? "page" : void 0,
       title: collapsed ? n.label : void 0,
-      onClick: (e) => {
-        if (e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey) {
-          e.preventDefault();
-          onNavigate(n.path);
-          setMobile(false);
-        }
-      },
+      onClick: (event) => navigate(event, n.path),
       children: [
         n.icon,
         /* @__PURE__ */ jsx("span", { children: n.label })
@@ -92,59 +104,72 @@ function AppShell({
     n.id
   );
   const nav = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "a",
       {
-        href: "/",
+        href: href(homePath),
         className: s.brand,
-        "aria-label": "OneUI \u9996\u9875",
-        onClick: (e) => {
-          e.preventDefault();
-          onNavigate("/");
-          setMobile(false);
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { className: s.mark, children: /* @__PURE__ */ jsx(Layers2, { size: 20 }) }),
-          /* @__PURE__ */ jsx("strong", { children: "OneUI" })
-        ]
+        "aria-label": brandName + " \u9996\u9875",
+        onClick: (event) => navigate(event, homePath),
+        children: brand ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: s.mark, children: brandIcon }),
+          /* @__PURE__ */ jsx("strong", { children: brandName })
+        ] })
       }
     ),
     /* @__PURE__ */ jsx("nav", { "aria-label": "\u4E3B\u5BFC\u822A", className: s.navigation, children: navigation.map(item) }),
-    /* @__PURE__ */ jsxs("div", { className: s.bottom, children: [
-      /* @__PURE__ */ jsx("nav", { "aria-label": "\u8BBE\u7F6E", className: s.navigation, children: item(settingsItem) }),
+    (settingsItem || sidebarFooter) && /* @__PURE__ */ jsxs("div", { className: s.bottom, children: [
+      settingsItem && /* @__PURE__ */ jsx("nav", { "aria-label": "\u8BBE\u7F6E", className: s.navigation, children: item(settingsItem) }),
       sidebarFooter
     ] })
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: s.shell, "data-collapsed": collapsed, children: [
-    /* @__PURE__ */ jsx("a", { className: s.skip, href: "#main", children: "\u8DF3\u8F6C\u5230\u5185\u5BB9" }),
-    /* @__PURE__ */ jsx("aside", { className: s.sidebar, children: nav }),
-    /* @__PURE__ */ jsx(
-      Drawer,
-      {
-        placement: "left",
-        size: 280,
-        open: mobile,
-        onClose: () => setMobile(false),
-        title: "\u5BFC\u822A",
-        children: /* @__PURE__ */ jsx("div", { className: s.mobileNav, children: nav })
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: s.workspace, children: [
-      /* @__PURE__ */ jsx(
-        ShellHeader,
-        {
-          title,
-          collapsed,
-          onToggle: () => onCollapsedChange(!collapsed),
-          onMenu: () => setMobile(true),
-          actions: headerActions,
-          windowControls,
-          draggable
-        }
-      ),
-      /* @__PURE__ */ jsx("main", { ref: scroll, id: "main", tabIndex: -1, className: s.main, children: /* @__PURE__ */ jsx("div", { className: s.page, children }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.shell,
+      "data-collapsed": collapsed,
+      "data-header": showHeader,
+      children: [
+        /* @__PURE__ */ jsx("a", { className: s.skip, href: "#main", children: "\u8DF3\u8F6C\u5230\u5185\u5BB9" }),
+        /* @__PURE__ */ jsx("aside", { className: s.sidebar, children: nav }),
+        /* @__PURE__ */ jsx(
+          Drawer,
+          {
+            placement: "left",
+            size: 280,
+            open: mobile,
+            onClose: () => setMobile(false),
+            title: "\u5BFC\u822A",
+            children: /* @__PURE__ */ jsx("div", { className: s.mobileNav, children: nav })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: s.workspace, children: [
+          showHeader ? /* @__PURE__ */ jsx(
+            ShellHeader,
+            {
+              title,
+              collapsed,
+              onToggle: onCollapsedChange ? () => onCollapsedChange(!collapsed) : void 0,
+              onMenu: () => setMobile(true),
+              actions: headerActions,
+              windowControls,
+              draggable
+            }
+          ) : /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: `${s.mobileToggle} ${s.floatingNavigation}`,
+              label: "\u6253\u5F00\u5BFC\u822A",
+              variant: "ghost",
+              onClick: () => setMobile(true),
+              children: /* @__PURE__ */ jsx(Menu, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ jsx("main", { ref: scroll, id: "main", tabIndex: -1, className: s.main, children: /* @__PURE__ */ jsx("div", { className: s.page, children }) })
+        ] })
+      ]
+    }
+  );
 }
 export {
   AppShell,

package/components/AppShell.module.css

@@ -78,12 +78,12 @@
 }
 .navigation a[aria-current="page"] {
   background: var(--selected);
-  color: var(--accent);
+  color: var(--navigation-selected-color, var(--accent));
 }
 .bottom {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 8px;
   margin-top: auto;
   flex-shrink: 0;
 }
@@ -100,7 +100,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 0 12px;
+  padding: 0 8px;
   border-bottom: 1px solid var(--line);
   background: var(--surface);
   color: var(--fg);
@@ -172,6 +172,15 @@
 .mobileToggle {
   display: none;
 }
+.floatingNavigation {
+  position: fixed;
+  z-index: 50;
+  top: 12px;
+  left: 12px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-sm);
+}
 .mobileNav {
   display: flex;
   flex-direction: column;
@@ -219,6 +228,9 @@
   .page {
     padding: 28px 24px 40px;
   }
+  .shell[data-header="false"] .page {
+    padding-top: 64px;
+  }
 }
 @media (max-width: 540px) {
   .page {
@@ -235,5 +247,5 @@
 }
 
 .header[data-window-controls="true"] {
-  padding-right: 4px;
+  padding-right: 8px;
 }

package/components/AppearanceSettings.js

@@ -55,7 +55,7 @@ function AppearanceSettings({
     ),
     /* @__PURE__ */ jsxs(SettingsCard, { children: [
       /* @__PURE__ */ jsx(SettingRow, { title: "\u5F3A\u8C03\u8272", children: /* @__PURE__ */ jsx("div", { className: s.swatches, children: [
-        settings.designTheme === "blue" ? "#5269b6" : "#303030",
+        appearanceDefaults(settings.designTheme).accent,
         "#4479d8",
         "#6d61bd",
         settings.designTheme === "blue" ? "#397c67" : "#41886c",

package/components/Button.d.ts

@@ -1,6 +1,13 @@
 import type { ComponentPropsWithRef } from "react";
-export declare function Button({ variant, size, loading, children, className, ...props }: ComponentPropsWithRef<"button"> & {
+type ButtonProps = {
     variant?: "primary" | "secondary" | "ghost" | "danger";
     size?: "normal" | "small";
     loading?: boolean;
-}): import("react").JSX.Element;
+} & ((ComponentPropsWithRef<"button"> & {
+    href?: never;
+}) | (ComponentPropsWithRef<"a"> & {
+    href: string;
+    disabled?: boolean;
+}));
+export declare function Button({ variant, size, loading, children, className, ...props }: ButtonProps): import("react").JSX.Element;
+export {};

package/components/Button.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Spinner } from "./Spinner.js";
 import s from "./Button.module.css";
 function Button({
@@ -9,18 +9,41 @@ function Button({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: s.content, style: { opacity: loading ? 0 : 1 }, children }),
+    loading && /* @__PURE__ */ jsx("span", { className: s.loader, children: /* @__PURE__ */ jsx(Spinner, { decorative: true }) })
+  ] });
+  const classes = `${s.button} ${s[variant]} ${size === "small" ? s.small : ""} ${className}`;
+  if (typeof props.href === "string") {
+    const { disabled, onClick, ...link } = props;
+    const blocked = disabled || loading;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...link,
+        className: classes,
+        "aria-disabled": blocked || void 0,
+        "aria-busy": loading || void 0,
+        tabIndex: blocked ? -1 : link.tabIndex,
+        onClick: (event) => {
+          if (blocked) {
+            event.preventDefault();
+            event.stopPropagation();
+          } else onClick?.(event);
+        },
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       ...props,
       disabled: props.disabled || loading,
       "aria-busy": loading || void 0,
-      className: `${s.button} ${s[variant]} ${size === "small" ? s.small : ""} ${className}`,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: s.content, style: { opacity: loading ? 0 : 1 }, children }),
-        loading && /* @__PURE__ */ jsx("span", { className: s.loader, children: /* @__PURE__ */ jsx(Spinner, { decorative: true }) })
-      ]
+      className: classes,
+      children: content
     }
   );
 }

package/components/Button.module.css

@@ -14,21 +14,30 @@
     transform var(--motion-hover),
     border-color var(--motion-hover);
   font-size: 12px;
+  text-decoration: none;
+  color: var(--fg);
 }
-.button:hover:not(:disabled) {
+.button[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.button:hover:not(:disabled):not([aria-disabled="true"]) {
   background: var(--hover);
   border-color: color-mix(in srgb, var(--fg) 18%, var(--surface));
 }
-.button:active:not(:disabled) {
+.button:active:not(:disabled):not([aria-disabled="true"]) {
   transform: translateY(1px);
 }
 .primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: var(--on-accent);
+  background: var(--accent-fill, var(--accent));
+  border-color: var(--accent-fill, var(--accent));
+  color: var(--on-accent-fill, var(--on-accent));
 }
-.primary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent) 86%, var(--surface));
+.primary:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(
+    --accent-fill-hover,
+    color-mix(in srgb, var(--accent) 86%, var(--surface))
+  );
   border-color: transparent;
 }
 .secondary {

package/components/Calendar.d.ts

@@ -6,5 +6,6 @@ export type CalendarProps = DateConstraints & {
     range?: DateRange;
     preview?: string;
     onHover?(value: string): void;
+    today?: string;
 };
-export declare function Calendar({ value, onChange, range, preview, onHover, minDate, maxDate, disabledDate, }: CalendarProps): import("react").JSX.Element;
+export declare function Calendar({ value, onChange, range, preview, onHover, minDate, maxDate, disabledDate, today, }: CalendarProps): import("react").JSX.Element;

package/components/Calendar.js

@@ -20,14 +20,15 @@ function Calendar({
   onHover,
   minDate,
   maxDate,
-  disabledDate
+  disabledDate,
+  today = dateKey(/* @__PURE__ */ new Date())
 }) {
   const constraints = { minDate, maxDate, disabledDate };
   const [month, setMonth] = useState(
-    () => readDate(boundedDate(value, constraints))
+    () => readDate(boundedDate(value || today, constraints))
   ), [view, setView] = useState("days"), [focused, setFocused] = useState(value);
   const grid = useRef(null), choices = useRef(null), pending = useRef(null), pendingView = useRef(false);
-  const year = month.getFullYear(), index = month.getMonth(), start = (calendarDate(year, index).getDay() + 6) % 7, base = Math.floor(year / 12) * 12, today = dateKey(/* @__PURE__ */ new Date());
+  const year = month.getFullYear(), index = month.getMonth(), start = (calendarDate(year, index).getDay() + 6) % 7, base = Math.floor(year / 12) * 12;
   const allowed = (key) => isDateAllowed(key, constraints);
   const monthAllowed = (y, m) => y >= 1 && y <= 9999 && !(minDate && parseDate(minDate) && dateKey(calendarDate(y, m + 1, 0)) < minDate) && !(maxDate && parseDate(maxDate) && dateKey(calendarDate(y, m)) > maxDate);
   const periodAllowed = (amount) => {

package/components/Card.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
-export declare function Card({ title, action, children, className, }: {
+export declare function Card({ title, action, children, className, onClick, }: {
     title?: string;
     action?: ReactNode;
     children: ReactNode;
     className?: string;
+    onClick?(): void;
 }): import("react").JSX.Element;

package/components/Card.js

@@ -1,18 +1,28 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import s from "./Card.module.css";
 function Card({
   title,
   action,
   children,
-  className = ""
+  className = "",
+  onClick
 }) {
-  return /* @__PURE__ */ jsxs("section", { className: s.card + " " + className, children: [
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     (title || action) && /* @__PURE__ */ jsxs("header", { className: s.header, children: [
       /* @__PURE__ */ jsx("h2", { children: title }),
       action
     ] }),
     /* @__PURE__ */ jsx("div", { className: s.body, "data-card-body": true, children })
   ] });
+  return onClick ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `${s.card} ${s.interactive} ${className}`,
+      onClick,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx("section", { className: s.card + " " + className, children: content });
 }
 export {
   Card

package/components/Card.module.css

@@ -5,6 +5,25 @@
   min-width: 0;
   box-shadow: var(--card-shadow, none);
 }
+.interactive {
+  display: block;
+  width: 100%;
+  padding: 0;
+  color: var(--fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    box-shadow var(--motion-hover),
+    transform var(--motion-hover);
+}
+.interactive:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-2px);
+}
+.interactive:active {
+  transform: none;
+}
 .header {
   display: flex;
   align-items: center;

package/components/Checkbox.module.css

@@ -54,9 +54,9 @@
   transform: scale(0.92);
 }
 .checkbox input:checked + .checkMark {
-  background: var(--accent);
-  color: var(--on-accent);
-  border-color: var(--accent);
+  background: var(--accent-fill, var(--accent));
+  color: var(--on-accent-fill, var(--on-accent));
+  border-color: var(--accent-fill, var(--accent));
 }
 .checkbox input:checked + .checkMark path {
   stroke-dashoffset: 0;

package/components/Combobox.d.ts

@@ -1,6 +1,6 @@
 import { type FieldOptions } from "./field";
 import type { SelectOption } from "./types";
-export declare function Combobox({ value, onChange, options, loadOptions, onCreate, label, placeholder, ...props }: FieldOptions & {
+export type ComboboxProps = FieldOptions & {
     value: string;
     onChange(value: string): void;
     options?: SelectOption[];
@@ -8,4 +8,6 @@ export declare function Combobox({ value, onChange, options, loadOptions, onCrea
     onCreate?(label: string): string | void | Promise<string | void>;
     label?: string;
     placeholder?: string;
-}): import("react").JSX.Element;
+    mode?: "panel" | "input";
+};
+export declare function Combobox({ value, onChange, options, loadOptions, onCreate, label, placeholder, mode, ...props }: ComboboxProps): import("react").JSX.Element;