@pactor-app/ui 1.13.0 → 1.15.0

package/dist/components/index.cjs

@@ -3528,18 +3528,49 @@ function FieldError({ className, ...props }) {
 
 // src/components/components/Field/index.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
-function Field2({ label, required, description, error, children, className, style }) {
+function Field2({
+  label,
+  required,
+  description,
+  error,
+  children,
+  className,
+  style,
+  labelClassName,
+  labelStyle,
+  controlClassName,
+  controlStyle,
+  descriptionClassName,
+  descriptionStyle,
+  errorClassName,
+  errorStyle
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Field, { className, style, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(FieldLabel, { children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(FieldLabel, { className: labelClassName, style: labelStyle, children: [
       required ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { "aria-hidden": true, className: "text-destructive", children: [
         "*",
         " "
       ] }) : null,
       label
     ] }) : null,
-    children,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FieldDescription, { children: description }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FieldError, { match: true, children: error }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      "div",
+      {
+        "data-slot": "field-control",
+        className: cn(label ? "mt-2" : void 0, controlClassName),
+        style: controlStyle,
+        children
+      }
+    ),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      FieldDescription,
+      {
+        className: descriptionClassName,
+        style: descriptionStyle,
+        children: description
+      }
+    ) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FieldError, { match: true, className: errorClassName, style: errorStyle, children: error }) : null
   ] });
 }
 
@@ -3730,6 +3761,7 @@ function Grid({ columns = 1, gap, className, style, children }) {
 // src/components/components/Header/index.tsx
 var import_runtime11 = require("@pactor-app/runtime");
 var import_lucide_react16 = require("lucide-react");
+var import_react15 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var menuItemClass = "flex items-center gap-1 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:bg-accent/50 hover:text-foreground";
 function Header({
@@ -3740,6 +3772,8 @@ function Header({
   menu,
   user,
   locales,
+  themeToggle = false,
+  onThemeChange,
   onMenuSelect,
   onDropdownSelect,
   onUserSelect,
@@ -3760,7 +3794,7 @@ function Header({
     "flex h-14 shrink-0 items-center gap-4 border-b bg-card px-4",
     className
   );
-  if (!hasBrand && !dropdown && !hasMenu && !hasUser && !hasLocales) {
+  if (!hasBrand && !dropdown && !hasMenu && !hasUser && !hasLocales && !themeToggle) {
     return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("header", { "data-slot": "layout-header", className: rootClass, style, children });
   }
   const brandNode = hasBrand && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { "data-slot": "header-brand", className: "flex items-center gap-2", children: [
@@ -3777,7 +3811,7 @@ function Header({
   ] });
   const dropdownNode = dropdown !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(HeaderDropdownArea, { dropdown, onSelect: onDropdownSelect });
   const showLeft = brandLeft || dropdownLeft || hasMenu;
-  const showRight = dropdownRight || brandRight || hasLocales || hasUser;
+  const showRight = dropdownRight || brandRight || hasLocales || hasUser || themeToggle;
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("header", { "data-slot": "layout-header", className: rootClass, style, children: [
     showLeft && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { "data-slot": "header-left", className: "flex items-center gap-4", children: [
       brandLeft && brandNode,
@@ -3788,6 +3822,7 @@ function Header({
     showRight && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { "data-slot": "header-right", className: "flex items-center gap-4", children: [
       dropdownRight && dropdownNode,
       brandRight && brandNode,
+      themeToggle && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(HeaderThemeToggle, { onSelect: onThemeChange }),
       hasLocales && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(HeaderLocalesArea, { locales, onSelect: onLocaleChange }),
       hasUser && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(HeaderUserArea, { user, onSelect: onUserSelect })
     ] })
@@ -3935,6 +3970,39 @@ function HeaderLocalesArea({
     )) })
   ] });
 }
+function readCurrentTheme() {
+  if (typeof document === "undefined") {
+    return "light";
+  }
+  return document.documentElement.getAttribute("data-pactor-theme") === "dark" ? "dark" : "light";
+}
+function HeaderThemeToggle({
+  onSelect
+}) {
+  const [theme, setTheme] = (0, import_react15.useState)(readCurrentTheme);
+  const handleToggle = () => {
+    const next = readCurrentTheme() === "dark" ? "light" : "dark";
+    if (next === "dark") {
+      document.documentElement.setAttribute("data-pactor-theme", "dark");
+    } else {
+      document.documentElement.removeAttribute("data-pactor-theme");
+    }
+    setTheme(next);
+    onSelect?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "header-theme-toggle",
+      className: "flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground",
+      title: theme === "dark" ? "\u5207\u6362\u4E3A\u6D45\u8272" : "\u5207\u6362\u4E3A\u6DF1\u8272",
+      "aria-label": "\u5207\u6362\u660E\u6697\u4E3B\u9898",
+      onClick: handleToggle,
+      children: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "sun", size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "moon", size: "sm" })
+    }
+  );
+}
 
 // src/components/components/HoverCard/index.tsx
 var import_runtime12 = require("@pactor-app/runtime");
@@ -3996,7 +4064,7 @@ function HoverCard2({ content, children, className, style }) {
 
 // src/components/components/Input/index.tsx
 var import_runtime13 = require("@pactor-app/runtime");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function Input2({
   name,
@@ -4014,9 +4082,9 @@ function Input2({
 }) {
   const form = useFormContext();
   const { t } = (0, import_runtime13.useI18n)();
-  const controlId = (0, import_react15.useId)();
+  const controlId = (0, import_react16.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -4133,7 +4201,7 @@ function InputGroup2({ className, style, children }) {
 }
 
 // src/components/components/InputOTP/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/ui/input-otp.tsx
 var import_input_otp = require("input-otp");
@@ -4209,15 +4277,15 @@ function InputOTP2({
 }) {
   const form = useFormContext();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
     }
     return void 0;
   });
-  const [innerValue, setInnerValue] = (0, import_react16.useState)(typeof value === "string" ? value : "");
-  (0, import_react16.useEffect)(() => {
+  const [innerValue, setInnerValue] = (0, import_react17.useState)(typeof value === "string" ? value : "");
+  (0, import_react17.useEffect)(() => {
     if (!inForm) setInnerValue(typeof value === "string" ? value : "");
   }, [inForm, value]);
   const current = inForm && form && name ? typeof form.values[name] === "string" ? form.values[name] : "" : innerValue;
@@ -4455,7 +4523,7 @@ function Link2({ href, text, target, className, style, children }) {
 }
 
 // src/components/components/Menu/index.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/components/Sidebar/rail-tooltip.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
@@ -4471,7 +4539,7 @@ function RailTooltip({
 
 // src/components/components/Sidebar/index.tsx
 var import_runtime16 = require("@pactor-app/runtime");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/ui/sidebar.tsx
 var React5 = __toESM(require("react"), 1);
@@ -4479,13 +4547,13 @@ var import_class_variance_authority5 = require("class-variance-authority");
 var import_lucide_react19 = require("lucide-react");
 
 // src/hooks/use-mobile.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
 function useIsMobile() {
-  const [isMobile, setIsMobile] = (0, import_react17.useState)(
+  const [isMobile, setIsMobile] = (0, import_react18.useState)(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_MEDIA_QUERY).matches
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (typeof window.matchMedia !== "function") {
       return;
     }
@@ -4817,7 +4885,12 @@ function SidebarRoot({
             className: cn(
               "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
               side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : (
+                // 边框色显式声明：不能只给宽度——宿主引入 Tailwind 时其
+                // preflight（同为 base 层且后加载）会把默认 border-color
+                // 重置为 currentColor，宽度型边框会脱离皮肤令牌
+                "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l"
+              ),
               className
             ),
             ...props,
@@ -5118,14 +5191,14 @@ function SidebarInner({
   const isMobile = useIsMobile();
   const { state, setOpenMobile, toggleSidebar } = useSidebar();
   const collapsed = state === "collapsed";
-  const prevCollapsed = (0, import_react18.useRef)(collapsed);
-  (0, import_react18.useEffect)(() => {
+  const prevCollapsed = (0, import_react19.useRef)(collapsed);
+  (0, import_react19.useEffect)(() => {
     if (prevCollapsed.current !== collapsed) {
       prevCollapsed.current = collapsed;
       onCollapse?.(collapsed);
     }
   }, [collapsed, onCollapse]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (locationKey !== void 0) {
       setOpenMobile(false);
     }
@@ -5223,7 +5296,7 @@ function Menu2({
   const drawer = useSidebarDrawer();
   const collapsed = mode === "inline" && drawer?.collapsed === true;
   const collapsibleOn = collapsible && mode === "inline" && !collapsed;
-  const [expandedKeys, setExpandedKeys] = (0, import_react19.useState)(() => {
+  const [expandedKeys, setExpandedKeys] = (0, import_react20.useState)(() => {
     const initial = new Set(defaultExpandedKeys ?? []);
     if (selectedKey !== void 0) {
       collectAncestors(items, selectedKey, initial);
@@ -5303,8 +5376,8 @@ function MenuEntry({
   const isDirectory = collapsible && hasChildren;
   const expanded = isDirectory && expandedKeys?.has(item.key) === true;
   const railDirectory = collapsed && hasChildren;
-  const [flyoutOpen, setFlyoutOpen] = (0, import_react19.useState)(false);
-  const flyoutTimer = (0, import_react19.useRef)(void 0);
+  const [flyoutOpen, setFlyoutOpen] = (0, import_react20.useState)(false);
+  const flyoutTimer = (0, import_react20.useRef)(void 0);
   const flyoutOpenNow = () => {
     window.clearTimeout(flyoutTimer.current);
     setFlyoutOpen(true);
@@ -5313,7 +5386,7 @@ function MenuEntry({
     window.clearTimeout(flyoutTimer.current);
     flyoutTimer.current = window.setTimeout(() => setFlyoutOpen(false), 200);
   };
-  (0, import_react19.useEffect)(() => () => window.clearTimeout(flyoutTimer.current), []);
+  (0, import_react20.useEffect)(() => () => window.clearTimeout(flyoutTimer.current), []);
   const button = /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "button",
     {
@@ -5712,7 +5785,7 @@ function Page({ title, className, style, children }) {
 }
 
 // src/components/components/Pagination/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/ui/pagination.tsx
 var import_lucide_react21 = require("lucide-react");
@@ -5840,7 +5913,7 @@ function Pagination2({
   className,
   style
 }) {
-  const [innerPage, setInnerPage] = (0, import_react20.useState)(1);
+  const [innerPage, setInnerPage] = (0, import_react21.useState)(1);
   const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
   const current = Math.min(Math.max(1, page ?? innerPage), pageCount);
   const goTo = (next) => {
@@ -5960,7 +6033,7 @@ function Progress2({ value, className, style }) {
 }
 
 // src/components/components/RadioGroup/index.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/ui/radio-group.tsx
 var import_radio = require("@base-ui/react/radio");
@@ -6046,9 +6119,9 @@ function RadioGroup2({
   style
 }) {
   const form = useFormContext();
-  const controlId = (0, import_react21.useId)();
+  const controlId = (0, import_react22.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -6120,7 +6193,7 @@ function RadioGroup2({
 
 // src/components/components/Resizable/index.tsx
 var import_runtime18 = require("@pactor-app/runtime");
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/ui/resizable.tsx
 var import_lucide_react22 = require("lucide-react");
@@ -6173,7 +6246,7 @@ function Resizable({
   style
 }) {
   const { renderChildren } = (0, import_runtime18.useRenderer)();
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_react22.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_react23.Fragment, { children: [
     index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ResizableHandle, { withHandle: true }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       Panel,
@@ -6265,7 +6338,7 @@ function ScrollArea2({
 
 // src/components/components/Select/index.tsx
 var import_runtime19 = require("@pactor-app/runtime");
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/ui/select.tsx
 var import_select = require("@base-ui/react/select");
@@ -6415,9 +6488,9 @@ function Select2({
 }) {
   const form = useFormContext();
   const { t } = (0, import_runtime19.useI18n)();
-  const controlId = (0, import_react23.useId)();
+  const controlId = (0, import_react24.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -6612,7 +6685,7 @@ function Skeleton2({ shape = "line", width, height, className, style }) {
 }
 
 // src/components/components/Slider/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/ui/slider.tsx
 var import_slider = require("@base-ui/react/slider");
@@ -6694,7 +6767,7 @@ function Slider2({
 }) {
   const form = useFormContext();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -6745,7 +6818,7 @@ function Slider2({
 
 // src/components/components/Sonner/index.tsx
 var import_runtime20 = require("@pactor-app/runtime");
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/ui/toast.tsx
 var import_toast = require("@base-ui/react/toast");
@@ -6825,7 +6898,7 @@ function Toaster({ className }) {
 var import_jsx_runtime111 = require("react/jsx-runtime");
 function Sonner({ className, style }) {
   const { context } = (0, import_runtime20.useRenderer)();
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const { actions } = context;
     if (actions.has("toast")) {
       return;
@@ -6883,7 +6956,7 @@ function Statistic({ title, value, precision, suffix, className, style }) {
 }
 
 // src/components/components/Switch/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/ui/switch.tsx
 var import_switch = require("@base-ui/react/switch");
@@ -6922,9 +6995,9 @@ function Switch2({
   style
 }) {
   const form = useFormContext();
-  const controlId = (0, import_react26.useId)();
+  const controlId = (0, import_react27.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -6978,7 +7051,7 @@ function Switch2({
 
 // src/components/components/Table/index.tsx
 var import_runtime21 = require("@pactor-app/runtime");
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime117 = require("react/jsx-runtime");
 function renderCellValue2(value) {
   if (value === void 0 || value === null) {
@@ -7001,7 +7074,7 @@ function Table3({
 }) {
   const { renderChildren } = (0, import_runtime21.useRenderer)();
   const { t } = (0, import_runtime21.useI18n)();
-  const [current, setCurrent] = (0, import_react27.useState)(1);
+  const [current, setCurrent] = (0, import_react28.useState)(1);
   const pageSize = pagination === false ? void 0 : pagination?.pageSize;
   const total = dataSource.length;
   const pageCount = pageSize !== void 0 && pageSize > 0 ? Math.max(1, Math.ceil(total / pageSize)) : 1;
@@ -7236,7 +7309,7 @@ function Text({
 }
 
 // src/components/components/Textarea/index.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime121 = require("react/jsx-runtime");
 function Textarea2({
   name,
@@ -7251,9 +7324,9 @@ function Textarea2({
   style
 }) {
   const form = useFormContext();
-  const controlId = (0, import_react28.useId)();
+  const controlId = (0, import_react29.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);

package/dist/components/index.d.cts

@@ -760,13 +760,27 @@ interface FieldProps {
     className?: string;
     /** 通用：根节点内联样式 */
     style?: CSSProperties;
+    /** label 节点 class / style（必填星号随 label 节点） */
+    labelClassName?: string;
+    labelStyle?: CSSProperties;
+    /** 控件容器（label 下方）class / style；缺省有 label 时容器自带 mt-2 */
+    controlClassName?: string;
+    controlStyle?: CSSProperties;
+    /** 辅助说明节点 class / style */
+    descriptionClassName?: string;
+    descriptionStyle?: CSSProperties;
+    /** 错误节点 class / style */
+    errorClassName?: string;
+    errorStyle?: CSSProperties;
 }
 /**
- * Field 适配器（shadcn kit）：通用表单项容器（Base UI Field 封装）；
- * label / description / error 为框架级 props，error 声明式强制展示；
- * `required` 在 label 前渲染必填星号（对齐 antd Form.Item required 语义）。
+ * Field 适配器（shadcn kit）：通用表单项容器（Base UI Field 封装，
+ * 上下结构：label 在上、控件容器在下）；label / description / error 为
+ * 框架级 props，error 声明式强制展示；`required` 在 label 前渲染必填星号
+ * （对齐 antd Form.Item required 语义）；label 与控件容器之间默认 mt-2，
+ * 四个节点（label / 控件容器 / description / error）均可独立加样式。
  */
-declare function Field({ label, required, description, error, children, className, style }: FieldProps): React.JSX.Element;
+declare function Field({ label, required, description, error, children, className, style, labelClassName, labelStyle, controlClassName, controlStyle, descriptionClassName, descriptionStyle, errorClassName, errorStyle, }: FieldProps): React.JSX.Element;
 
 interface FlexProps {
     /** 主轴方向，默认 horizontal */
@@ -892,6 +906,8 @@ interface HeaderLocale {
     label: string;
     value: string;
 }
+/** 深浅色主题（themeToggle 切换结果） */
+type HeaderTheme = 'light' | 'dark';
 interface HeaderProps {
     /** 品牌区 logo 图片地址（可含表达式） */
     logo?: string;
@@ -907,6 +923,10 @@ interface HeaderProps {
     user?: HeaderUser;
     /** 国际化切换选项 */
     locales?: HeaderLocale[];
+    /** 右侧展示深浅色切换按钮（缺省 false）；点击切换 documentElement 的 data-pactor-theme */
+    themeToggle?: boolean;
+    /** 主题切换事件，传出切换后的主题（'light' | 'dark'） */
+    onThemeChange?: (theme: HeaderTheme) => void;
     /** 菜单选中事件，传出选中项 key */
     onMenuSelect?: (key: string) => void;
     /** 通用下拉选中事件，传出选中项 value */
@@ -923,15 +943,15 @@ interface HeaderProps {
 }
 /**
  * Header 顶部区域（shadcn kit，语义对齐 antd Layout.Header）：
- * 横向 flex、垂直居中、默认下边框。除 children 外可携带五个可选结构
- * 区域（品牌区 / 通用下拉 / 横向菜单 / 用户区 / 国际化切换）；全部区域
- * props 缺省时退化为纯容器。
+ * 横向 flex、垂直居中、默认下边框。除 children 外可携带六个可选结构
+ * 区域（品牌区 / 通用下拉 / 横向菜单 / 深浅色切换 / 用户区 / 国际化切换）；
+ * 全部区域 props 缺省时退化为纯容器。
  *
  * 排布固定：左区（品牌?→下拉?→菜单?）— flex-1 中区（children）—
- * 右区（下拉?→品牌?→locales→user）。区域内部直接组合 src/ui 原语
+ * 右区（下拉?→品牌?→主题切换?→locales→user）。区域内部直接组合 src/ui 原语
  * （dropdown-menu / avatar），事件值透传给 Header 自身的事件 props。
  */
-declare function Header({ logo, title, brandPosition, dropdown, menu, user, locales, onMenuSelect, onDropdownSelect, onUserSelect, onLocaleChange, className, style, children, }: HeaderProps): React.JSX.Element;
+declare function Header({ logo, title, brandPosition, dropdown, menu, user, locales, themeToggle, onThemeChange, onMenuSelect, onDropdownSelect, onUserSelect, onLocaleChange, className, style, children, }: HeaderProps): React.JSX.Element;
 
 interface HoverCardProps {
     /** 悬浮卡片内容：DSL 子树（对象，原样保留至渲染层求值）或纯文本 */
@@ -1984,4 +2004,4 @@ interface FormContextValue {
 /** 在字段组件内探测 Form 上下文；不在 Form 内时返回 null */
 declare function useFormContext(): FormContextValue | null;
 
-export { Accordion, type AccordionItemData, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Carousel, type CarouselImage, type CarouselItemData, type CarouselProps, Chart, type ChartProps, type ChartType, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandGroupData, type CommandItemData, type CommandProps, Content, type ContentProps, ContextMenu, type ContextMenuItemData, type ContextMenuProps, DataTable, type DataTableColumn, type DataTablePagination, type DataTableProps, type DataTableSort, type DataTableSortOrder, DatePicker, type DatePickerPreset, type DatePickerPresetKey, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRangeValue, Dialog, type DialogProps, Drawer, type DrawerPlacement, type DrawerProps, DropdownMenu, type DropdownMenuItemData, type DropdownMenuProps, Empty, type EmptyProps, Field, type FieldProps, type FieldRule, Flex, type FlexProps, Footer, type FooterProps, Form, type FormContextValue, type FormProps, Grid, type GridProps, Header, type HeaderBrandPosition, type HeaderDropdown, type HeaderDropdownItem, type HeaderLocale, type HeaderMenuItem, type HeaderProps, type HeaderUser, type HeaderUserItem, HoverCard, type HoverCardProps, ICONS, Icon, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, InputOTP, type InputOTPProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Menu, type MenuItem, type MenuProps, Menubar, type MenubarLeafItem, type MenubarMenuData, type MenubarProps, NavigationMenu, type NavigationMenuChildItem, type NavigationMenuItemData, type NavigationMenuProps, Page, type PageProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, RailTooltip, Resizable, type ResizablePanelData, type ResizableProps, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type SheetSide, Sidebar, type SidebarBrand, type SidebarNavItem, type SidebarProps, Sider, type SiderProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sonner, type SonnerProps, Spinner, type SpinnerProps, type SpinnerSize, Statistic, type StatisticProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, Text, type TextProps, type TextType, Textarea, type TextareaProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, builtinComponents, createComponentRegistry, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer };
+export { Accordion, type AccordionItemData, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Carousel, type CarouselImage, type CarouselItemData, type CarouselProps, Chart, type ChartProps, type ChartType, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandGroupData, type CommandItemData, type CommandProps, Content, type ContentProps, ContextMenu, type ContextMenuItemData, type ContextMenuProps, DataTable, type DataTableColumn, type DataTablePagination, type DataTableProps, type DataTableSort, type DataTableSortOrder, DatePicker, type DatePickerPreset, type DatePickerPresetKey, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRangeValue, Dialog, type DialogProps, Drawer, type DrawerPlacement, type DrawerProps, DropdownMenu, type DropdownMenuItemData, type DropdownMenuProps, Empty, type EmptyProps, Field, type FieldProps, type FieldRule, Flex, type FlexProps, Footer, type FooterProps, Form, type FormContextValue, type FormProps, Grid, type GridProps, Header, type HeaderBrandPosition, type HeaderDropdown, type HeaderDropdownItem, type HeaderLocale, type HeaderMenuItem, type HeaderProps, type HeaderTheme, type HeaderUser, type HeaderUserItem, HoverCard, type HoverCardProps, ICONS, Icon, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, InputOTP, type InputOTPProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Menu, type MenuItem, type MenuProps, Menubar, type MenubarLeafItem, type MenubarMenuData, type MenubarProps, NavigationMenu, type NavigationMenuChildItem, type NavigationMenuItemData, type NavigationMenuProps, Page, type PageProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, RailTooltip, Resizable, type ResizablePanelData, type ResizableProps, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type SheetSide, Sidebar, type SidebarBrand, type SidebarNavItem, type SidebarProps, Sider, type SiderProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sonner, type SonnerProps, Spinner, type SpinnerProps, type SpinnerSize, Statistic, type StatisticProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, Text, type TextProps, type TextType, Textarea, type TextareaProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, builtinComponents, createComponentRegistry, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer };

package/dist/components/index.d.ts

@@ -760,13 +760,27 @@ interface FieldProps {
     className?: string;
     /** 通用：根节点内联样式 */
     style?: CSSProperties;
+    /** label 节点 class / style（必填星号随 label 节点） */
+    labelClassName?: string;
+    labelStyle?: CSSProperties;
+    /** 控件容器（label 下方）class / style；缺省有 label 时容器自带 mt-2 */
+    controlClassName?: string;
+    controlStyle?: CSSProperties;
+    /** 辅助说明节点 class / style */
+    descriptionClassName?: string;
+    descriptionStyle?: CSSProperties;
+    /** 错误节点 class / style */
+    errorClassName?: string;
+    errorStyle?: CSSProperties;
 }
 /**
- * Field 适配器（shadcn kit）：通用表单项容器（Base UI Field 封装）；
- * label / description / error 为框架级 props，error 声明式强制展示；
- * `required` 在 label 前渲染必填星号（对齐 antd Form.Item required 语义）。
+ * Field 适配器（shadcn kit）：通用表单项容器（Base UI Field 封装，
+ * 上下结构：label 在上、控件容器在下）；label / description / error 为
+ * 框架级 props，error 声明式强制展示；`required` 在 label 前渲染必填星号
+ * （对齐 antd Form.Item required 语义）；label 与控件容器之间默认 mt-2，
+ * 四个节点（label / 控件容器 / description / error）均可独立加样式。
  */
-declare function Field({ label, required, description, error, children, className, style }: FieldProps): React.JSX.Element;
+declare function Field({ label, required, description, error, children, className, style, labelClassName, labelStyle, controlClassName, controlStyle, descriptionClassName, descriptionStyle, errorClassName, errorStyle, }: FieldProps): React.JSX.Element;
 
 interface FlexProps {
     /** 主轴方向，默认 horizontal */
@@ -892,6 +906,8 @@ interface HeaderLocale {
     label: string;
     value: string;
 }
+/** 深浅色主题（themeToggle 切换结果） */
+type HeaderTheme = 'light' | 'dark';
 interface HeaderProps {
     /** 品牌区 logo 图片地址（可含表达式） */
     logo?: string;
@@ -907,6 +923,10 @@ interface HeaderProps {
     user?: HeaderUser;
     /** 国际化切换选项 */
     locales?: HeaderLocale[];
+    /** 右侧展示深浅色切换按钮（缺省 false）；点击切换 documentElement 的 data-pactor-theme */
+    themeToggle?: boolean;
+    /** 主题切换事件，传出切换后的主题（'light' | 'dark'） */
+    onThemeChange?: (theme: HeaderTheme) => void;
     /** 菜单选中事件，传出选中项 key */
     onMenuSelect?: (key: string) => void;
     /** 通用下拉选中事件，传出选中项 value */
@@ -923,15 +943,15 @@ interface HeaderProps {
 }
 /**
  * Header 顶部区域（shadcn kit，语义对齐 antd Layout.Header）：
- * 横向 flex、垂直居中、默认下边框。除 children 外可携带五个可选结构
- * 区域（品牌区 / 通用下拉 / 横向菜单 / 用户区 / 国际化切换）；全部区域
- * props 缺省时退化为纯容器。
+ * 横向 flex、垂直居中、默认下边框。除 children 外可携带六个可选结构
+ * 区域（品牌区 / 通用下拉 / 横向菜单 / 深浅色切换 / 用户区 / 国际化切换）；
+ * 全部区域 props 缺省时退化为纯容器。
  *
  * 排布固定：左区（品牌?→下拉?→菜单?）— flex-1 中区（children）—
- * 右区（下拉?→品牌?→locales→user）。区域内部直接组合 src/ui 原语
+ * 右区（下拉?→品牌?→主题切换?→locales→user）。区域内部直接组合 src/ui 原语
  * （dropdown-menu / avatar），事件值透传给 Header 自身的事件 props。
  */
-declare function Header({ logo, title, brandPosition, dropdown, menu, user, locales, onMenuSelect, onDropdownSelect, onUserSelect, onLocaleChange, className, style, children, }: HeaderProps): React.JSX.Element;
+declare function Header({ logo, title, brandPosition, dropdown, menu, user, locales, themeToggle, onThemeChange, onMenuSelect, onDropdownSelect, onUserSelect, onLocaleChange, className, style, children, }: HeaderProps): React.JSX.Element;
 
 interface HoverCardProps {
     /** 悬浮卡片内容：DSL 子树（对象，原样保留至渲染层求值）或纯文本 */
@@ -1984,4 +2004,4 @@ interface FormContextValue {
 /** 在字段组件内探测 Form 上下文；不在 Form 内时返回 null */
 declare function useFormContext(): FormContextValue | null;
 
-export { Accordion, type AccordionItemData, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Carousel, type CarouselImage, type CarouselItemData, type CarouselProps, Chart, type ChartProps, type ChartType, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandGroupData, type CommandItemData, type CommandProps, Content, type ContentProps, ContextMenu, type ContextMenuItemData, type ContextMenuProps, DataTable, type DataTableColumn, type DataTablePagination, type DataTableProps, type DataTableSort, type DataTableSortOrder, DatePicker, type DatePickerPreset, type DatePickerPresetKey, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRangeValue, Dialog, type DialogProps, Drawer, type DrawerPlacement, type DrawerProps, DropdownMenu, type DropdownMenuItemData, type DropdownMenuProps, Empty, type EmptyProps, Field, type FieldProps, type FieldRule, Flex, type FlexProps, Footer, type FooterProps, Form, type FormContextValue, type FormProps, Grid, type GridProps, Header, type HeaderBrandPosition, type HeaderDropdown, type HeaderDropdownItem, type HeaderLocale, type HeaderMenuItem, type HeaderProps, type HeaderUser, type HeaderUserItem, HoverCard, type HoverCardProps, ICONS, Icon, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, InputOTP, type InputOTPProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Menu, type MenuItem, type MenuProps, Menubar, type MenubarLeafItem, type MenubarMenuData, type MenubarProps, NavigationMenu, type NavigationMenuChildItem, type NavigationMenuItemData, type NavigationMenuProps, Page, type PageProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, RailTooltip, Resizable, type ResizablePanelData, type ResizableProps, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type SheetSide, Sidebar, type SidebarBrand, type SidebarNavItem, type SidebarProps, Sider, type SiderProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sonner, type SonnerProps, Spinner, type SpinnerProps, type SpinnerSize, Statistic, type StatisticProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, Text, type TextProps, type TextType, Textarea, type TextareaProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, builtinComponents, createComponentRegistry, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer };
+export { Accordion, type AccordionItemData, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Carousel, type CarouselImage, type CarouselItemData, type CarouselProps, Chart, type ChartProps, type ChartType, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandGroupData, type CommandItemData, type CommandProps, Content, type ContentProps, ContextMenu, type ContextMenuItemData, type ContextMenuProps, DataTable, type DataTableColumn, type DataTablePagination, type DataTableProps, type DataTableSort, type DataTableSortOrder, DatePicker, type DatePickerPreset, type DatePickerPresetKey, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRangeValue, Dialog, type DialogProps, Drawer, type DrawerPlacement, type DrawerProps, DropdownMenu, type DropdownMenuItemData, type DropdownMenuProps, Empty, type EmptyProps, Field, type FieldProps, type FieldRule, Flex, type FlexProps, Footer, type FooterProps, Form, type FormContextValue, type FormProps, Grid, type GridProps, Header, type HeaderBrandPosition, type HeaderDropdown, type HeaderDropdownItem, type HeaderLocale, type HeaderMenuItem, type HeaderProps, type HeaderTheme, type HeaderUser, type HeaderUserItem, HoverCard, type HoverCardProps, ICONS, Icon, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, InputOTP, type InputOTPProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Menu, type MenuItem, type MenuProps, Menubar, type MenubarLeafItem, type MenubarMenuData, type MenubarProps, NavigationMenu, type NavigationMenuChildItem, type NavigationMenuItemData, type NavigationMenuProps, Page, type PageProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, RailTooltip, Resizable, type ResizablePanelData, type ResizableProps, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type SheetSide, Sidebar, type SidebarBrand, type SidebarNavItem, type SidebarProps, Sider, type SiderProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sonner, type SonnerProps, Spinner, type SpinnerProps, type SpinnerSize, Statistic, type StatisticProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, Text, type TextProps, type TextType, Textarea, type TextareaProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, builtinComponents, createComponentRegistry, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer };

package/dist/components/index.js

@@ -71,7 +71,7 @@ import {
   createComponentRegistry,
   registerBuiltinComponents,
   useFormContext
-} from "../chunk-CFUWF54N.js";
+} from "../chunk-E3BFTXSJ.js";
 import {
   ICONS,
   Icon,
@@ -80,10 +80,10 @@ import {
   Sidebar,
   normalizeIconName,
   useSidebarDrawer
-} from "../chunk-GQE62HDV.js";
-import "../chunk-NQQAPB7Q.js";
+} from "../chunk-5PTCPU2F.js";
+import "../chunk-VFPLY2GI.js";
 import "../chunk-XUHJ5YSG.js";
-import "../chunk-AUSWAD26.js";
+import "../chunk-HGVZUEZG.js";
 import "../chunk-WKJUCGV4.js";
 export {
   Accordion,