@endfield-ui/react 1.2.0 → 1.2.1

package/dist/components/date-picker/DateRangePicker.d.ts

@@ -0,0 +1,57 @@
+
+import { CalendarProps, DateRange } from "../calendar/Calendar.js";
+import { ControlSize, ControlVariant } from "../input/control-box.js";
+import { ReactNode, Ref } from "react";
+//#region src/components/date-picker/DateRangePicker.d.ts
+export type DateRangePickerProps = Pick<CalendarProps, "min" | "max" | "isDateDisabled" | "weekStartsOn" | "locale" | "today"> & {
+  /** 选中的那一段，`[起, 止]`，两头都包含；没选是 `null` */
+  value?: DateRange | null;
+  defaultValue?: DateRange | null;
+  /** 一段选完才触发；清除之后拿到的是 `null` */
+  onValueChange?: (value: DateRange | null) => void;
+  /** 没选时显示的提示 */
+  placeholder?: ReactNode;
+  /** 表单字段名：起始日和结束日各一个，值是 `YYYY-MM-DD` */
+  startName?: string;
+  endName?: string;
+  /**
+   * 外框的画法，和输入框相同：
+   * - `sunken` 凹陷的底 + 一条底边线，默认；
+   * - `outline` 四边描边，放在凹陷底色的区域里时用。
+   */
+  variant?: ControlVariant;
+  /** 32 / 40 / 56px 高 */
+  size?: ControlSize;
+  /** 每个日期怎么写。默认 `2026.10.09` */
+  format?: (date: string) => ReactNode;
+  /** 错误态。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+  disabled?: boolean;
+  /** 必填：面板里没有"清除" */
+  required?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 面板的可访问名称 */
+  panelLabel?: string;
+  /** 面板底下那句提示 */
+  hint?: ReactNode;
+  clearLabel?: string;
+  /** 读屏在两端那两天的名称后面听到的词 */
+  startLabel?: string;
+  endLabel?: string;
+  id?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  /** 给外框 */
+  className?: string;
+  /** 给触发按钮 */
+  ref?: Ref<HTMLButtonElement>;
+};
+/**
+ * 日期范围：一个字段，点开是一块带月历的面板，点两下选出起止两天。
+ * 值是 `[起, 止]`，两头都包含；结束日选完面板才关。
+ * 每个字段都要有标签：放进 `Field`，或者自己传 `aria-label`。
+ */
+export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, startName, endName, variant, size, format, invalid: invalidProp, disabled: disabledProp, required: requiredProp, open: openProp, defaultOpen, onOpenChange, panelLabel, hint, clearLabel, startLabel, endLabel, min, max, isDateDisabled, weekStartsOn, locale, today, id: idProp, "aria-label": ariaLabel, "aria-describedby": describedByProp, className, ref }: DateRangePickerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/date-picker/DateRangePicker.js

@@ -0,0 +1,2 @@
+"use client";
+import{useControllableState as e}from"../../hooks/useControllableState.js";import{Calendar as t}from"../calendar/Calendar.js";import{useFieldControl as n}from"../field/Field.js";import{DateField as r,dateFooterButton as i,dottedDate as a}from"./DateField.js";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l({value:l,defaultValue:u=null,onValueChange:d,placeholder:f=`选择起止日期`,startName:p,endName:m,variant:h=`sunken`,size:g=`md`,format:_=a,invalid:v,disabled:y,required:b,open:x,defaultOpen:S=!1,onOpenChange:C,panelLabel:w=`选择起止日期`,hint:T=`先选起始日，再选结束日`,clearLabel:E=`清除`,startLabel:D,endLabel:O,min:k,max:A,isDateDisabled:j,weekStartsOn:M,locale:N,today:P,id:F,"aria-label":I,"aria-describedby":L,className:R,ref:z}){let{id:B,disabled:V,required:H,invalid:U,...W}=n({id:F,disabled:y,required:b,invalid:v,"aria-describedby":L}),[G,K]=e({value:l,defaultValue:u,onChange:d}),[q,J]=e({value:x,defaultValue:S,onChange:C}),Y=e=>{K(e),J(!1)};return/* @__PURE__ */ c(r,{ref:z,id:B,display:G===null?null:G[0]===G[1]?_(G[0]):/* @__PURE__ */ c(o,{children:[_(G[0]),/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:`mx-1.5 text-ink-tertiary`,children:`–`}),/* @__PURE__ */ s(`span`,{className:`sr-only`,children:`至`}),_(G[1])]}),placeholder:f,variant:h,size:g,invalid:U,disabled:V,required:H,open:q,onOpenChange:J,panelLabel:w,"aria-label":I,"aria-describedby":W[`aria-describedby`],className:R,fields:/* @__PURE__ */ c(o,{children:[p!==void 0&&/* @__PURE__ */ s(`input`,{type:`hidden`,name:p,value:G?.[0]??``,disabled:V}),m!==void 0&&/* @__PURE__ */ s(`input`,{type:`hidden`,name:m,value:G?.[1]??``,disabled:V})]}),children:[/* @__PURE__ */ s(t,{range:!0,value:G,onValueChange:Y,min:k,max:A,isDateDisabled:j,weekStartsOn:M,locale:N,today:P,startLabel:D,endLabel:O}),/* @__PURE__ */ c(`div`,{className:`flex items-center justify-between gap-3 border-t border-line pt-2`,children:[/* @__PURE__ */ s(`p`,{className:`px-2 text-xs text-ink-secondary`,children:T}),!H&&/* @__PURE__ */ s(`button`,{type:`button`,disabled:G===null,onClick:()=>Y(null),className:i,children:E})]})]})}export{l as DateRangePicker};

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,4 @@
+
+import { DatePicker, DatePickerProps, DatePickerSize, DatePickerVariant } from "./DatePicker.js";
+import { DateRangePicker, DateRangePickerProps } from "./DateRangePicker.js";
+export { DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, DateRangePicker, type DateRangePickerProps };

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,55 @@
+
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/dialog/Dialog.d.ts
+export type DialogSize = "sm" | "md" | "lg";
+type PopupProps = ComponentProps<typeof Dialog.Popup>;
+export type DialogProps = Omit<ComponentProps<"div">, "title" | "children" | "className" | "style"> & {
+  /** 触发按钮。不传就用 `open` / `onOpenChange` 自己控制 */
+  trigger?: ReactElement<Record<string, unknown>>;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 标题，在深色标题带里居中。它也是弹窗的可访问名称 */
+  title: ReactNode;
+  /** 标题下的一段说明，会关联给读屏 */
+  description?: ReactNode;
+  /** 底部的行动区：按钮靠右，主要行动在最右 */
+  footer?: ReactNode;
+  /** 最大宽度 480 / 640 / 1040px，窄屏上通宽。默认 `md` */
+  size?: DialogSize;
+  /**
+   * 需要用户明确回应的确认（破坏性操作）：角色是 `alertdialog`，点遮罩不关。
+   * `Esc` 和关闭图标仍然可用。
+   */
+  alert?: boolean;
+  /** 标题下方加一排小方点。纯装饰 */
+  ornament?: boolean;
+  /**
+   * 左下角的线稿，纯装饰。本库不带线稿：传自己的原创图形，
+   * 用 `currentColor` 画会跟着取低对比的墨色。高 48px
+   */
+  cornerArt?: ReactNode;
+  /** 关闭图标的可访问名称 */
+  closeLabel?: string;
+  /** 打开时焦点落在哪。默认是内容区里第一个可聚焦的元素：第一个字段，或者行动区的第一个按钮 */
+  initialFocus?: PopupProps["initialFocus"];
+  /** 关闭后焦点回到哪。默认是触发按钮 */
+  finalFocus?: PopupProps["finalFocus"];
+  /** 给弹窗本身 */
+  className?: string;
+  children?: ReactNode;
+};
+/**
+ * 弹窗：深色斜纹标题带 + 点阵底的内容区。打开时焦点移入并被限制在内，
+ * 关闭后回到触发按钮；背景不可滚动、不可交互。不要弹窗套弹窗。
+ */
+declare function Dialog$1({ trigger, open, defaultOpen, onOpenChange, title, description, footer, size, alert, ornament, cornerArt, closeLabel, initialFocus, finalFocus, className, children, ...props }: DialogProps): import("react").JSX.Element;
+export type DialogCloseProps = {
+  /** 点了就关掉弹窗的按钮，比如"取消" */
+  children: ReactElement<Record<string, unknown>>;
+};
+/** 包住行动区里"点了就关"的按钮。弹窗和抽屉里都能用。 */
+export declare function DialogClose({ children }: DialogCloseProps): import("react").JSX.Element;
+//#endregion
+export { Dialog$1 as Dialog };

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{Close as t}from"../../icons/Close.js";import{usePortalScope as n}from"../../hooks/usePortalScope.js";import{Texture as r}from"../texture/Texture.js";import{firstFocusableIn as i}from"./initial-focus.js";import{overlayBackdrop as a,overlayClose as o,overlayHeader as s,overlaySurface as c}from"./overlay-style.js";import{useRef as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{AlertDialog as f}from"@base-ui/react/alert-dialog";import{Dialog as p}from"@base-ui/react/dialog";const m=[0,1,2,3,4,5],h={sm:`max-w-[30rem]`,md:`max-w-[40rem]`,lg:`max-w-[65rem]`};function g({trigger:g,open:_,defaultOpen:v,onOpenChange:y,title:b,description:x,footer:S,size:C=`md`,alert:w=!1,ornament:T=!1,cornerArt:E,closeLabel:D=`关闭`,initialFocus:O,finalFocus:k,className:A,children:j,...M}){let{anchorRef:N,portalRef:P}=n(),F=l(null),I=w?f:p;return/* @__PURE__ */ d(I.Root,{open:_,defaultOpen:v,onOpenChange:y&&(e=>y(e)),children:[g&&/* @__PURE__ */ u(I.Trigger,{ref:N,render:g}),/* @__PURE__ */ d(I.Portal,{ref:P,children:[/* @__PURE__ */ u(I.Backdrop,{className:a}),/* @__PURE__ */ u(I.Viewport,{className:`fixed inset-0 z-(--z-overlay) flex items-center justify-center overflow-hidden p-4`,children:/* @__PURE__ */ d(I.Popup,{...M,initialFocus:O??i(F),finalFocus:k,"data-size":C,className:e(c,`relative flex max-h-full min-h-0 w-full flex-col`,`transition-[opacity,translate] duration-[var(--duration-fast),var(--duration-base)] ease-[var(--ease-standard),var(--ease-exit)]`,`data-ending-style:opacity-0 data-starting-style:translate-y-(--motion-shift-lg) data-starting-style:opacity-0`,h[C],A),children:[/* @__PURE__ */ d(`div`,{"data-theme":`dark`,className:e(s,`min-h-16 justify-center px-12`),children:[/* @__PURE__ */ d(`div`,{className:`flex flex-col items-center gap-1.5 py-3`,children:[/* @__PURE__ */ u(I.Title,{className:`text-center text-xl font-normal wrap-anywhere`,children:b}),T&&/* @__PURE__ */ u(`span`,{"aria-hidden":`true`,"data-ornament":``,className:`flex gap-1`,children:m.map(e=>/* @__PURE__ */ u(`span`,{className:`size-1 bg-ink/50`},e))})]}),/* @__PURE__ */ u(I.Close,{"aria-label":D,className:o,children:/* @__PURE__ */ u(t,{size:24})})]}),/* @__PURE__ */ d(`div`,{ref:F,className:`relative flex min-h-0 flex-auto flex-col`,children:[/* @__PURE__ */ u(r,{}),/* @__PURE__ */ d(`div`,{className:`relative min-h-0 flex-auto overflow-y-auto overscroll-contain p-4`,children:[/* @__PURE__ */ d(`div`,{className:`bg-surface-raised p-5 wrap-anywhere`,children:[x&&/* @__PURE__ */ u(I.Description,{className:e(`text-ink-secondary`,j!==void 0&&`mb-4`),children:x}),j]}),E&&/* @__PURE__ */ u(`div`,{"aria-hidden":`true`,"data-corner-art":``,className:`pointer-events-none mt-3 flex h-12 items-end text-ink-tertiary [&_svg]:h-full [&_svg]:w-auto`,children:E})]}),S&&/* @__PURE__ */ u(`div`,{className:`relative flex shrink-0 flex-wrap justify-end gap-3 border-t border-line bg-surface-raised px-5 py-4`,children:S})]})]})})]})]})}function _({children:e}){return/* @__PURE__ */ u(p.Close,{render:e})}export{g as Dialog,_ as DialogClose};

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Dialog, DialogClose, DialogCloseProps, DialogProps, DialogSize } from "./Dialog.js";
+export { Dialog, DialogClose, type DialogCloseProps, type DialogProps, type DialogSize };

package/dist/components/dialog/initial-focus.js

@@ -0,0 +1,2 @@
+"use client";
+const e=[`a[href]`,`button:not([disabled])`,`input:not([disabled]):not([type="hidden"])`,`select:not([disabled])`,`textarea:not([disabled])`,`[tabindex]:not([tabindex="-1"])`].join(`,`);function t(t){return()=>t.current?.querySelector(e)??!0}export{t as firstFocusableIn};

package/dist/components/dialog/overlay-style.js

@@ -0,0 +1,2 @@
+"use client";
+import{focusRingInset as e}from"../../lib/focus-ring.js";const t=`fixed inset-0 z-(--z-overlay) bg-scrim transition-opacity duration-(--duration-fast) ease-standard data-ending-style:opacity-0 data-starting-style:opacity-0`,n=`hatch relative flex shrink-0 items-center border-b border-line bg-surface-raised text-ink`,r=[`absolute top-1/2 right-1 inline-flex size-10 -translate-y-1/2 items-center justify-center text-ink`,`active:text-neutral-300`,`[&_svg]:transition-transform [&_svg]:duration-(--duration-base) [&_svg]:ease-standard hover:[&_svg]:rotate-90`,e].join(` `),i=`bg-surface-raised text-ink shadow-lg outline-none forced-colors:border`;export{t as overlayBackdrop,r as overlayClose,n as overlayHeader,i as overlaySurface};

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,48 @@
+
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/drawer/Drawer.d.ts
+export type DrawerSide = "right" | "left" | "bottom";
+export type DrawerSize = "sm" | "md" | "lg";
+type PopupProps = ComponentProps<typeof Drawer.Popup>;
+export type DrawerProps = Omit<ComponentProps<"div">, "title" | "children" | "className" | "style"> & {
+  /** 触发按钮。不传就用 `open` / `onOpenChange` 自己控制 */
+  trigger?: ReactElement<Record<string, unknown>>;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 标题，在深色标题带里左对齐。它也是抽屉的可访问名称 */
+  title: ReactNode;
+  /** 标题下的一段说明，会关联给读屏 */
+  description?: ReactNode;
+  /** 底部的行动区，不随内容滚动 */
+  footer?: ReactNode;
+  /**
+   * 从哪一边滑入：
+   * - `right` 详情、设置，默认；
+   * - `left` 导航；
+   * - `bottom` 移动端的操作菜单，带拖动把手。
+   * 都可以朝来的方向划走。
+   */
+  side?: DrawerSide;
+  /** 侧边抽屉的宽度 320 / 400 / 480px，窄屏上通宽。默认 `md`。底部抽屉不用 */
+  size?: DrawerSize;
+  /** 靠页面内容的一侧加一条行动色的细条 */
+  accent?: boolean;
+  /** 关闭图标的可访问名称 */
+  closeLabel?: string;
+  /** 打开时焦点落在哪。默认是内容区里第一个可聚焦的元素 */
+  initialFocus?: PopupProps["initialFocus"];
+  /** 关闭后焦点回到哪。默认是触发按钮 */
+  finalFocus?: PopupProps["finalFocus"];
+  /** 给抽屉本身 */
+  className?: string;
+  children?: ReactNode;
+};
+/**
+ * 抽屉：从屏幕一侧滑入的面板。在不离开当前页面的前提下查看、编辑一个条目，
+ * 或者在窄屏上替代侧栏。焦点与背景的处理和弹窗相同。
+ */
+declare function Drawer$1({ trigger, open, defaultOpen, onOpenChange, title, description, footer, side, size, accent, closeLabel, initialFocus, finalFocus, className, children, ...props }: DrawerProps): import("react").JSX.Element;
+//#endregion
+export { Drawer$1 as Drawer };

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{Close as t}from"../../icons/Close.js";import{usePortalScope as n}from"../../hooks/usePortalScope.js";import{firstFocusableIn as r}from"../dialog/initial-focus.js";import{overlayBackdrop as i,overlayClose as a,overlayHeader as o,overlaySurface as s}from"../dialog/overlay-style.js";import{useRef as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{Drawer as d}from"@base-ui/react/drawer";const f={right:`right`,left:`left`,bottom:`down`},p={right:`justify-end`,left:`justify-start`,bottom:`items-end`},m={sm:`max-w-80`,md:`max-w-100`,lg:`max-w-120`},h={right:`translate-x-[var(--drawer-swipe-movement-x,0px)] data-ending-style:translate-x-full data-starting-style:translate-x-full`,left:`translate-x-[var(--drawer-swipe-movement-x,0px)] data-ending-style:-translate-x-full data-starting-style:-translate-x-full`,bottom:`translate-y-[var(--drawer-swipe-movement-y,0px)] data-ending-style:translate-y-full data-starting-style:translate-y-full`},g={right:`border-l-4 border-l-action`,left:`border-r-4 border-r-action`,bottom:`border-t-4 border-t-action`};function _({trigger:_,open:v,defaultOpen:y,onOpenChange:b,title:x,description:S,footer:C,side:w=`right`,size:T=`md`,accent:E=!1,closeLabel:D=`关闭`,initialFocus:O,finalFocus:k,className:A,children:j,...M}){let{anchorRef:N,portalRef:P}=n(),F=c(null),I=w===`bottom`;return/* @__PURE__ */ u(d.Root,{open:v,defaultOpen:y,onOpenChange:b&&(e=>b(e)),swipeDirection:f[w],children:[_&&/* @__PURE__ */ l(d.Trigger,{ref:N,render:_}),/* @__PURE__ */ u(d.Portal,{ref:P,children:[/* @__PURE__ */ l(d.Backdrop,{className:e(i,`opacity-[calc(1-var(--drawer-swipe-progress,0))] data-swiping:duration-0`)}),/* @__PURE__ */ l(d.Viewport,{className:e(`fixed inset-0 z-(--z-overlay) flex overflow-hidden`,p[w]),children:/* @__PURE__ */ u(d.Popup,{...M,initialFocus:O??r(F),finalFocus:k,"data-side":w,className:e(s,`flex min-h-0 w-full flex-col`,I?`max-h-[85dvh]`:[`h-full`,m[T]],`transition-[translate] duration-(--duration-base) ease-exit data-swiping:duration-0 data-swiping:select-none`,h[w],E&&g[w],A),children:[/* @__PURE__ */ u(`div`,{"data-theme":`dark`,className:e(o,`min-h-12 pr-12 pl-4`,I&&`pt-2`),children:[I&&/* @__PURE__ */ l(`span`,{"aria-hidden":`true`,className:`absolute top-1.5 left-1/2 h-1 w-8 -translate-x-1/2 bg-line-strong`}),/* @__PURE__ */ l(d.Title,{className:`py-2.5 text-lg font-normal wrap-anywhere`,children:x}),/* @__PURE__ */ l(d.Close,{"aria-label":D,className:a,children:/* @__PURE__ */ l(t,{size:24})})]}),/* @__PURE__ */ u(`div`,{ref:F,className:`flex min-h-0 flex-auto flex-col`,children:[/* @__PURE__ */ u(d.Content,{className:`min-h-0 flex-auto overflow-y-auto overscroll-contain p-4 wrap-anywhere`,children:[S&&/* @__PURE__ */ l(d.Description,{className:e(`text-ink-secondary`,j!==void 0&&`mb-4`),children:S}),j]}),C&&/* @__PURE__ */ l(`div`,{className:`flex shrink-0 flex-wrap justify-end gap-3 border-t border-line px-4 py-3`,children:C})]})]})})]})]})}export{_ as Drawer};

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Drawer, DrawerProps, DrawerSide, DrawerSize } from "./Drawer.js";
+export { Drawer, type DrawerProps, type DrawerSide, type DrawerSize };

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,115 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { MenuVariant } from "./menu-style.js";
+import { ComponentProps, MouseEvent, ReactElement, ReactNode } from "react";
+//#region src/components/dropdown-menu/DropdownMenu.d.ts
+export type DropdownMenuVariant = MenuVariant;
+export type DropdownMenuSide = "top" | "bottom" | "left" | "right";
+export type DropdownMenuAlign = "start" | "center" | "end";
+export type DropdownMenuProps = {
+  /** 触发按钮 */
+  trigger: ReactElement<Record<string, unknown>>;
+  /**
+   * - `plain` 跟随主题的面板，默认；
+   * - `strong` 固定的深色面板，当前项整行黄底墨字。
+   */
+  variant?: DropdownMenuVariant;
+  /** 面板出现在触发按钮的哪一侧，放不下时自动翻到对面。默认 `bottom` */
+  side?: DropdownMenuSide;
+  /** 和触发按钮的哪一边对齐。默认 `start` */
+  align?: DropdownMenuAlign;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 给面板 */
+  className?: string;
+  /**
+   * `DropdownMenuItem`、`DropdownMenuCheckboxItem`、`DropdownMenuGroup`、
+   * `DropdownMenuSeparator`、`DropdownMenuRadioGroup`、`DropdownMenuSub`
+   */
+  children: ReactNode;
+};
+/**
+ * 点击触发的一组操作或选项。方向键移动、回车选择、`Esc` 关闭、按首字母跳转。
+ * 危险项放在最后并和其他项隔开。
+ */
+export declare function DropdownMenu({ trigger, variant, side, align, open, defaultOpen, onOpenChange, className, children }: DropdownMenuProps): import("react").JSX.Element;
+export type DropdownMenuItemTone = "neutral" | "danger";
+type ItemOwnProps = {
+  /** `danger` 用于删除一类的操作：文字变红，放在最后并和其他项隔开 */
+  tone?: DropdownMenuItemTone;
+  /** 文字左侧的图标 */
+  iconStart?: ReactNode;
+  /** 行尾的补充：快捷键、计数 */
+  end?: ReactNode;
+  disabled?: boolean;
+  /** 点了之后是否关掉菜单。操作项默认关，链接项默认不关 */
+  closeOnClick?: boolean;
+  /** 传了就渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type DropdownMenuItemProps = ItemOwnProps & Omit<ComponentProps<"div">, keyof ItemOwnProps | "id" | "style">;
+/** 菜单里的一个操作；传 `href` 就是一个链接。 */
+export declare function DropdownMenuItem({ tone, iconStart, end, disabled, closeOnClick, href, target, rel, render, onClick, className, children, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
+export type DropdownMenuGroupProps = Omit<ComponentProps<"div">, "style"> & {
+  /** 分组的小标题 */
+  label?: ReactNode;
+};
+export declare function DropdownMenuGroup({ label, children, ...props }: DropdownMenuGroupProps): import("react").JSX.Element;
+export type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style">;
+export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
+export type DropdownMenuRadioGroupProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** 这一组的小标题 */
+  label?: ReactNode;
+  disabled?: boolean;
+  children: ReactNode;
+};
+/** 一组里只有一个"当前项"的选项，比如语言、排序方式。 */
+export declare function DropdownMenuRadioGroup({ value, defaultValue, onValueChange, label, disabled, children }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export type DropdownMenuRadioItemProps = Omit<ComponentProps<"div">, "id" | "style" | "onClick"> & {
+  value: string;
+  disabled?: boolean;
+  /** 行尾的补充 */
+  end?: ReactNode;
+  /** 选了之后是否关掉菜单，默认关 */
+  closeOnClick?: boolean;
+};
+export declare function DropdownMenuRadioItem({ value, disabled, end, closeOnClick, className, children, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+export type DropdownMenuCheckboxItemProps = Omit<ComponentProps<"div">, "id" | "style" | "onClick"> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  /** 行尾的补充 */
+  end?: ReactNode;
+  /** 勾了之后是否关掉菜单。默认不关：可以连着改几项 */
+  closeOnClick?: boolean;
+};
+/** 能开能关的一项设置，比如"显示缩略图"。行首是一个小方格，没勾的时候也看得见。 */
+export declare function DropdownMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, disabled, end, closeOnClick, className, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
+export type DropdownMenuSubProps = {
+  /** 这一行的文字 */
+  label: ReactNode;
+  /** 文字左侧的图标 */
+  iconStart?: ReactNode;
+  disabled?: boolean;
+  /** 给子面板 */
+  className?: string;
+  /** 子面板里的选项 */
+  children: ReactNode;
+};
+/**
+ * 子菜单：菜单里的一行，停留或按 `→` 时在侧边展开另一块面板。
+ * 只做一层，不要在子菜单里再套子菜单。
+ */
+export declare function DropdownMenuSub({ label, iconStart, disabled, className, children }: DropdownMenuSubProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{defined as t}from"../../lib/defined.js";import{usePortalScope as n}from"../../hooks/usePortalScope.js";import{TriangleRight as r}from"../../icons/TriangleRight.js";import{MenuCheck as i}from"./MenuCheck.js";import{getMenuVariantContext as a,menuGroupLabel as o,menuItem as s,menuItemCurrent as c,menuItemHover as l,menuPanel as u,menuSeparator as d}from"./menu-style.js";import{useContext as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{Menu as g}from"@base-ui/react/menu";function _({trigger:t,variant:r=`plain`,side:i=`bottom`,align:o=`start`,open:s,defaultOpen:c,onOpenChange:l,className:d,children:f}){let p=a(),{anchorRef:_,portalRef:v}=n();return/* @__PURE__ */ h(g.Root,{open:s,defaultOpen:c,onOpenChange:l&&(e=>l(e)),children:[/* @__PURE__ */ m(g.Trigger,{ref:_,render:t}),/* @__PURE__ */ m(g.Portal,{ref:v,children:/* @__PURE__ */ m(g.Positioner,{side:i,align:o,sideOffset:4,className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ m(g.Popup,{"data-theme":r===`strong`?`dark`:void 0,"data-variant":r,className:e(u,`max-h-(--available-height) overflow-y-auto overscroll-contain`,d),children:/* @__PURE__ */ m(p.Provider,{value:r,children:f})})})})]})}function v(e,t,n){return/* @__PURE__ */ h(p,{children:[e&&/* @__PURE__ */ m(`span`,{"aria-hidden":`true`,className:`flex shrink-0 items-center [&_svg]:size-4`,children:e}),/* @__PURE__ */ m(`span`,{className:`min-w-0 flex-1 truncate`,children:t}),n&&/* @__PURE__ */ m(`span`,{className:`ml-4 flex shrink-0 items-center text-xs text-ink-secondary`,children:n})]})}function y({tone:n=`neutral`,iconStart:r,end:i,disabled:a,closeOnClick:o,href:c,target:u,rel:d,render:f,onClick:p,className:h,children:_,...y}){let b=e(s,l,n===`danger`&&`text-danger`,h),x=v(r,_,i);return c!==void 0||f!==void 0?/* @__PURE__ */ m(g.LinkItem,{render:f,...t({href:c,target:u,rel:d}),closeOnClick:o,onClick:p,"data-tone":n,className:b,children:x}):/* @__PURE__ */ m(g.Item,{...y,disabled:a,closeOnClick:o,onClick:p,"data-tone":n,className:b,children:x})}function b({label:e,children:t,...n}){return/* @__PURE__ */ h(g.Group,{...n,children:[e&&/* @__PURE__ */ m(g.GroupLabel,{className:`px-3 pt-2 pb-1 text-xs text-ink-tertiary`,children:e}),t]})}function x({className:t,...n}){return/* @__PURE__ */ m(g.Separator,{...n,className:e(d,t)})}function S({value:e,defaultValue:t,onValueChange:n,label:r,disabled:i,children:a}){let s=/* @__PURE__ */ m(g.RadioGroup,{value:e,defaultValue:t,onValueChange:n&&(e=>n(String(e))),disabled:i,children:a});return r?/* @__PURE__ */ h(g.Group,{children:[/* @__PURE__ */ m(g.GroupLabel,{className:o,children:r}),s]}):s}function C({value:t,disabled:n,end:r,closeOnClick:i=!0,className:o,children:u,...d}){let p=f(a());return/* @__PURE__ */ m(g.RadioItem,{...d,value:t,disabled:n,closeOnClick:i,className:t=>e(s,t.checked?c[p]:l,o),children:v(null,u,r)})}function w({checked:t,defaultChecked:n,onCheckedChange:r,disabled:a,end:o,closeOnClick:c=!1,className:u,children:d,...f}){return/* @__PURE__ */ m(g.CheckboxItem,{...f,checked:t,defaultChecked:n,onCheckedChange:r&&(e=>r(e)),disabled:a,closeOnClick:c,className:e(s,l,u),render:(e,t)=>/* @__PURE__ */ h(`div`,{...e,children:[/* @__PURE__ */ m(i,{checked:t.checked,disabled:t.disabled}),v(null,d,o)]})})}function T({label:t,iconStart:i,disabled:o,className:c,children:d}){let p=f(a()),{anchorRef:_,portalRef:y}=n();return/* @__PURE__ */ h(g.SubmenuRoot,{disabled:o,children:[/* @__PURE__ */ m(g.SubmenuTrigger,{ref:_,className:e(s,l,`data-popup-open:bg-ink/5`),children:v(i,t,/* @__PURE__ */ m(r,{size:10}))}),/* @__PURE__ */ m(g.Portal,{ref:y,children:/* @__PURE__ */ m(g.Positioner,{sideOffset:2,alignOffset:-5,className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ m(g.Popup,{"data-theme":p===`strong`?`dark`:void 0,"data-variant":p,className:e(u,`max-h-(--available-height) overflow-y-auto overscroll-contain`,c),children:d})})})]})}export{_ as DropdownMenu,w as DropdownMenuCheckboxItem,b as DropdownMenuGroup,y as DropdownMenuItem,S as DropdownMenuRadioGroup,C as DropdownMenuRadioItem,x as DropdownMenuSeparator,T as DropdownMenuSub};

package/dist/components/dropdown-menu/MenuCheck.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{Check as t}from"../../icons/Check.js";import{jsx as n}from"react/jsx-runtime";function r({checked:r,disabled:i=!1}){return/* @__PURE__ */ n(`span`,{"aria-hidden":`true`,"data-checked":r?``:void 0,className:`flex size-4 shrink-0 items-center justify-center`,children:/* @__PURE__ */ n(`span`,{className:e(`flex size-4 items-center justify-center border-2 transition-colors duration-(--duration-fast) ease-standard choice-diamond:size-3 choice-diamond:rotate-45`,i?[`border-ink-disabled bg-surface-sunken text-ink-disabled`,r&&`choice-diamond:bg-ink-disabled forced-colors:choice-diamond:bg-[GrayText]`]:r?`border-surface-inverse bg-surface-inverse text-accent-ink-inverse forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]`:`border-line-strong bg-surface-sunken`),children:r&&/* @__PURE__ */ n(t,{size:10,strokeWidth:4,className:`choice-diamond:hidden`})})})}export{r as MenuCheck};

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1,3 @@
+
+import { DropdownMenu, DropdownMenuAlign, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuItemTone, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSide, DropdownMenuSub, DropdownMenuSubProps, DropdownMenuVariant } from "./DropdownMenu.js";
+export { DropdownMenu, type DropdownMenuAlign, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemTone, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, type DropdownMenuSide, DropdownMenuSub, type DropdownMenuSubProps, type DropdownMenuVariant };

package/dist/components/dropdown-menu/menu-style.d.ts

@@ -0,0 +1,4 @@
+
+//#region src/components/dropdown-menu/menu-style.d.ts
+export type MenuVariant = "plain" | "strong";
+//#endregion

package/dist/components/dropdown-menu/menu-style.js

@@ -0,0 +1,2 @@
+"use client";
+import{focusRingInset as e}from"../../lib/focus-ring.js";import{createLazyContext as t}from"../../lib/create-lazy-context.js";import{enterFromSide as n}from"../../lib/motion.js";const r=/* @__PURE__ */ t(`plain`),i=[`relative min-w-40 border border-line bg-surface-raised py-1 text-ink shadow-sm outline-none`,`origin-(--transform-origin) transition-[opacity,translate] duration-[var(--duration-fast),var(--duration-base)] ease-[var(--ease-standard),var(--ease-exit)]`,`data-ending-style:opacity-0 data-starting-style:opacity-0`,n,`before:pointer-events-none before:absolute before:-top-px before:-left-px before:z-1 before:h-[7px] before:w-1/2 before:origin-left before:bg-action before:content-['']`,`before:[clip-path:polygon(0_0,100%_0,100%_3px,36px_3px,32px_100%,28px_3px,0_3px)]`,`before:transition-transform before:duration-(--duration-base) before:ease-exit data-starting-style:before:scale-x-0`,`forced-colors:before:hidden`].join(` `),a=[`relative flex min-h-9 cursor-default items-center gap-2 px-3 py-1.5 text-sm select-none`,`data-disabled:text-ink-disabled`,e].join(` `),o=`data-highlighted:bg-ink/5`,s={plain:`bg-surface-muted font-medium before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-ink before:content-[''] forced-colors:before:bg-[Highlight]`,strong:`bg-action font-medium text-on-action focus-visible:-outline-offset-4 focus-visible:outline-on-action forced-colors:before:absolute forced-colors:before:inset-y-0 forced-colors:before:left-0 forced-colors:before:w-[3px] forced-colors:before:bg-[Highlight] forced-colors:before:content-['']`},c=`px-3 pt-2 pb-1 text-xs text-ink-tertiary`,l=`my-1 h-px bg-line`;export{r as getMenuVariantContext,c as menuGroupLabel,a as menuItem,s as menuItemCurrent,o as menuItemHover,i as menuPanel,l as menuSeparator};

package/dist/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,22 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/empty-state/EmptyState.d.ts
+export type EmptyStateProps = Omit<ComponentProps<"div">, "title"> & {
+  /** 一句话说明现状："暂无记录" */
+  title: ReactNode;
+  /** 一句话说明原因或下一步 */
+  description?: ReactNode;
+  /** 可选的一个行动，通常是一个 `control` 按钮 */
+  action?: ReactNode;
+  /** 图形。默认是取景角 + 准星；传 `null` 去掉 */
+  icon?: ReactNode;
+  /** 虚线描边，默认有 */
+  bordered?: boolean;
+  /** 标题层级，默认 3（`<h3>`） */
+  level?: 2 | 3 | 4 | 5 | 6;
+  /** 挂上时淡入一次，不"啪"地一下出现。默认开启 */
+  animate?: boolean;
+};
+/** 没有内容时的占位。说清楚为什么为空、接下来能做什么；不要用大幅插画填满。 */
+export declare function EmptyState({ title, description, action, icon, bordered, level, animate, className, children, ...props }: EmptyStateProps): import("react").JSX.Element;
+//#endregion

package/dist/components/empty-state/EmptyState.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";function r(){return/* @__PURE__ */ n(`svg`,{width:56,height:56,viewBox:`0 0 48 48`,fill:`none`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`butt`,strokeLinejoin:`miter`,"aria-hidden":`true`,focusable:`false`,children:[/* @__PURE__ */ t(`path`,{d:`M4 14V4h10M34 4h10v10M44 34v10H34M14 44H4V34`}),/* @__PURE__ */ t(`path`,{d:`M24 18v12M18 24h12`})]})}function i({title:i,description:a,action:o,icon:s,bordered:c=!0,level:l=3,animate:u=!0,className:d,children:f,...p}){let m=`h${l}`,h=s===void 0?/* @__PURE__ */ t(r,{}):s;return/* @__PURE__ */ n(`div`,{...p,className:e(`flex flex-col items-center px-6 py-10 text-center text-ink`,c&&`border border-dashed border-line-strong`,u&&`animate-fade-in`,d),children:[h!==null&&/* @__PURE__ */ t(`div`,{"aria-hidden":`true`,className:`mb-4 text-ink-tertiary`,children:h}),/* @__PURE__ */ t(m,{className:`text-base font-medium`,children:i}),a&&/* @__PURE__ */ t(`p`,{className:`mt-1 max-w-[40ch] text-sm text-ink-secondary`,children:a}),f,o&&/* @__PURE__ */ t(`div`,{className:`mt-5`,children:o})]})}export{i as EmptyState};

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1,3 @@
+
+import { EmptyState, EmptyStateProps } from "./EmptyState.js";
+export { EmptyState, type EmptyStateProps };

package/dist/components/field/Field.d.ts

@@ -0,0 +1,58 @@
+
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/field/Field.d.ts
+type FieldContextValue = {
+  /** 单个控件的 id；`group` 字段里有多个控件，不提供 */
+  controlId: string | undefined;
+  labelId: string;
+  describedBy: string | undefined;
+  invalid: boolean;
+  disabled: boolean;
+  required: boolean;
+  group: boolean;
+};
+/** 给成组的控件（单选组）读取所在字段的状态。不在 `Field` 里时返回 `null`。 */
+export declare function useFieldContext(): FieldContextValue | null;
+type ControlProps = {
+  id?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** 错误态。不传时跟随所在的 `Field` */
+  invalid?: boolean;
+  "aria-describedby"?: string;
+};
+/**
+ * 把所在 `Field` 的 id、说明文字、错误态、禁用、必填并进控件自己的属性。
+ * 控件上显式传的值优先。自定义控件用它接入 `Field`。
+ */
+export declare function useFieldControl({ id, disabled, required, invalid, "aria-describedby": describedBy }: ControlProps): {
+  id: string | undefined;
+  disabled: boolean;
+  required: boolean;
+  invalid: boolean;
+  "aria-describedby": string | undefined;
+};
+export type FieldProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+  /** 标签，在控件上方。不要用占位文字代替它 */
+  label: ReactNode;
+  /** 帮助文字，在控件下方 */
+  help?: ReactNode;
+  /** 错误说明：写"哪里不对、怎么改"。有值即为错误态 */
+  error?: ReactNode;
+  /** 必填：标签后加一个小菱形，并交给里面的控件 */
+  required?: boolean;
+  /** 禁用：标签变浅，并交给里面的控件 */
+  disabled?: boolean;
+  /**
+   * 里面是一组控件（几个复选、一个单选组）而不是单个输入框时打开：
+   * 渲染成 `<fieldset>` + `<legend>`。
+   */
+  group?: boolean;
+  /** 单个控件的 id，缺省自动生成 */
+  controlId?: string;
+  children: ReactNode;
+};
+/** 表单字段：标签在上、控件在下，下面是帮助与错误文字，三者自动关联。 */
+export declare function Field({ label, help, error, required, disabled, group, controlId, className, children, ...props }: FieldProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/field/Field.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{createLazyContext as t}from"../../lib/create-lazy-context.js";import{usePresence as n}from"../../hooks/usePresence.js";import{StatusDanger as r}from"../../icons/StatusDanger.js";import{collapse as i}from"../../lib/motion.js";import{useContext as a,useId as o,useMemo as s,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f=/* @__PURE__ */ t(null);function p(){return a(f())}function m({id:e,disabled:t,required:n,invalid:r,"aria-describedby":i}){let o=a(f()),s=[i,o?.describedBy].filter(Boolean).join(` `)||void 0;return{id:e??o?.controlId,disabled:t??o?.disabled??!1,required:n??o?.required??!1,invalid:r??o?.invalid??!1,"aria-describedby":s}}function h({label:t,help:a,error:p,required:m=!1,disabled:h=!1,group:g=!1,controlId:_,className:v,children:y,...b}){let x=f(),S=o(),C=_??`${S}-control`,w=`${S}-label`,T=`${S}-help`,E=`${S}-error`,D=p!=null&&p!==!1,O=a!=null&&a!==!1,k=[D&&E,O&&T].filter(Boolean).join(` `)||void 0,{ref:A,mounted:j,leaving:M,entered:N}=n(D),[P,F]=c(p);D&&!Object.is(P,p)&&F(p);let I=s(()=>({controlId:g?void 0:C,labelId:w,describedBy:k,invalid:D,disabled:h,required:m,group:g}),[g,C,w,k,D,h,m]),L=e(`block text-sm font-medium`,h?`text-ink-disabled`:`text-ink`),R=/* @__PURE__ */ d(l,{children:[t,m&&/* @__PURE__ */ u(`span`,{"aria-hidden":`true`,"data-required":``,className:e(`ml-1.5 inline-block size-1.5 rotate-45 align-middle`,h?`bg-ink-disabled`:`bg-accent-ink`)})]}),z=/* @__PURE__ */ d(l,{children:[j&&/* @__PURE__ */ u(`div`,{ref:A,"data-leaving":M?``:void 0,"aria-hidden":M||void 0,className:e(i,`transition-[grid-template-rows,opacity] duration-(--duration-fast) data-leaving:opacity-0`,N&&[`starting:grid-rows-[0fr]`,`starting:opacity-0`]),children:/* @__PURE__ */ u(`div`,{className:`min-h-0 min-w-0 overflow-y-clip`,children:/* @__PURE__ */ d(`p`,{id:E,className:`flex items-start gap-1.5 pt-1.5 text-sm text-danger`,children:[/* @__PURE__ */ u(r,{size:16,className:`mt-0.5 shrink-0`}),/* @__PURE__ */ u(`span`,{className:`min-w-0 wrap-anywhere`,children:D?p:P})]})})}),O&&/* @__PURE__ */ u(`p`,{id:T,className:e(`mt-1.5 text-sm`,h?`text-ink-disabled`:`text-ink-secondary`),children:a})]});return g?/* @__PURE__ */ d(`fieldset`,{...b,disabled:h,"aria-describedby":k,"data-invalid":D?``:void 0,className:e(`min-w-0`,v),children:[/* @__PURE__ */ u(`legend`,{id:w,className:e(L,`mb-1.5`),children:R}),/* @__PURE__ */ u(`div`,{className:`flex flex-col items-start`,children:/* @__PURE__ */ u(x.Provider,{value:I,children:y})}),z]}):/* @__PURE__ */ d(`div`,{...b,"data-invalid":D?``:void 0,className:e(`min-w-0`,v),children:[/* @__PURE__ */ u(`label`,{id:w,htmlFor:C,className:e(L,`mb-1.5`),children:R}),/* @__PURE__ */ u(x.Provider,{value:I,children:y}),z]})}export{h as Field,p as useFieldContext,m as useFieldControl};

package/dist/components/field/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Field, FieldProps, useFieldContext, useFieldControl } from "./Field.js";
+export { Field, type FieldProps, useFieldContext, useFieldControl };

package/dist/components/file-upload/FileItem.d.ts

@@ -0,0 +1,50 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/file-upload/FileItem.d.ts
+export type FileItemStatus = "uploading" | "done" | "error";
+type OwnProps = {
+  /** 文件名。前面的扩展名标签是从它里面取的 */
+  name: string;
+  /** 大小，字节 */
+  size?: number;
+  /**
+   * 传到哪一步了，由使用方给：
+   * - 不传：只是列出来；
+   * - `uploading` 行底一条进度条，大小的位置换成百分比；
+   * - `done` 多一个成功图标；
+   * - `error` 文件名下面一行错误说明。
+   */
+  status?: FileItemStatus;
+  /** `uploading` 时的进度，0 – 100。不传就是不确定进度 */
+  progress?: number;
+  /** `error` 时的说明：写"怎么了、怎么办" */
+  error?: ReactNode;
+  /** 传了右端就有移除钮 */
+  onRemove?: () => void;
+  /** 传了、且是 `error` 时，多一个"重试" */
+  onRetry?: () => void;
+  /** 移除钮的可访问名称，默认"移除某某" */
+  removeLabel?: string;
+  /** "重试"两个字 */
+  retryLabel?: ReactNode;
+  /** `done` 时读屏多听到的一句，默认"已上传" */
+  doneLabel?: string;
+  /** 进度条的可访问名称，默认"某某的上传进度" */
+  progressLabel?: string;
+  /** 传了文件名就是链接：已有的附件可以点开 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  disabled?: boolean;
+};
+export type FileItemProps = OwnProps & Omit<ComponentProps<"div">, keyof OwnProps | "children">;
+/**
+ * 一个文件一行：扩展名、文件名、大小、状态、移除钮。
+ * `FileUpload` 里每个文件默认渲染一行；也可以单独拿去列"已有的附件"。
+ */
+export declare function FileItem({ name, size, status, progress, error, onRemove, onRetry, removeLabel, retryLabel, doneLabel, progressLabel, href, target, rel, render, disabled, className, ...props }: FileItemProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/file-upload/FileItem.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRing as t}from"../../lib/focus-ring.js";import{Close as n}from"../../icons/Close.js";import{StatusDanger as r}from"../../icons/StatusDanger.js";import{StatusSuccess as i}from"../../icons/StatusSuccess.js";import{LinkElement as a}from"../link-element/LinkElement.js";import{fileExtension as o,formatFileSize as s}from"../../lib/file.js";import{Progress as c}from"../progress/Progress.js";import{Tag as l}from"../tag/Tag.js";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";function p({name:p,size:m,status:h,progress:g,error:_,onRemove:v,onRetry:y,removeLabel:b=`移除${p}`,retryLabel:x=`重试`,doneLabel:S=`已上传`,progressLabel:C=`${p}的上传进度`,href:w,target:T,rel:E,render:D,disabled:O=!1,className:k,...A}){let j=h===`uploading`,M=h===`error`,N=w!==void 0||D!==void 0,P=null;return j&&g!==void 0?P=`${Math.round(Math.min(Math.max(g,0),100))}%`:!j&&m!==void 0&&(P=s(m)),/* @__PURE__ */ f(`div`,{...A,"data-status":h,className:e(`relative flex min-h-10 items-center gap-3 bg-surface-muted pl-2 text-sm`,O?`text-ink-disabled`:`text-ink`,!v&&`pr-3`,k),children:[/* @__PURE__ */ d(l,{variant:O?`muted`:`inverse`,size:`sm`,"aria-hidden":`true`,"data-extension":``,className:e(`min-w-10 justify-center font-tech font-bold`,O&&`text-ink-disabled`),children:o(p)||`FILE`}),/* @__PURE__ */ f(`span`,{className:`flex min-w-0 flex-1 flex-col py-1.5`,children:[N?/* @__PURE__ */ d(a,{render:D,href:w,target:T,rel:E,title:p,className:e(`truncate underline underline-offset-4`,t),children:p}):/* @__PURE__ */ d(`span`,{title:p,className:`truncate`,children:p}),M&&_&&/* @__PURE__ */ f(`span`,{className:`flex items-start gap-1 text-xs text-danger`,children:[/* @__PURE__ */ d(r,{size:12,className:`mt-0.5 shrink-0`}),/* @__PURE__ */ d(`span`,{className:`min-w-0 wrap-anywhere`,children:_})]})]}),P!==null&&/* @__PURE__ */ d(`span`,{"data-meta":``,className:e(`shrink-0 font-tech text-xs tabular-nums`,O?`text-ink-disabled`:`text-ink-secondary`),children:P}),h===`done`&&/* @__PURE__ */ f(u,{children:[/* @__PURE__ */ d(i,{size:16,className:`shrink-0 text-success`}),/* @__PURE__ */ d(`span`,{className:`sr-only`,children:S})]}),M&&y&&/* @__PURE__ */ d(`button`,{type:`button`,disabled:O,onClick:y,className:e(`shrink-0 font-medium underline underline-offset-4`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus`),children:x}),v&&/* @__PURE__ */ d(`button`,{type:`button`,"data-file-remove":``,"aria-label":b,disabled:O,onClick:v,className:e(`flex size-8 shrink-0 items-center justify-center self-center`,`transition-colors duration-(--duration-fast) ease-standard`,O?`cursor-not-allowed text-ink-disabled`:`text-ink-secondary hover:bg-line hover:text-ink`,`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus`),children:/* @__PURE__ */ d(n,{size:14})}),j&&/* @__PURE__ */ d(c,{size:`sm`,value:g,"aria-label":C,className:`absolute inset-x-0 bottom-0`})]})}export{p as FileItem};

package/dist/components/file-upload/FileUpload.d.ts

@@ -0,0 +1,82 @@
+
+import { ReactNode, Ref } from "react";
+//#region src/components/file-upload/FileUpload.d.ts
+export type FileUploadSize = "sm" | "md";
+/** 没收的原因：类型不对、太大、个数超了 */
+export type FileRejectReason = "type" | "size" | "count";
+export type FileRejection = {
+  file: File;
+  reason: FileRejectReason;
+};
+/** 文件列表的名称、没收时的那几句话 */
+export type FileUploadLabels = {
+  /** 文件列表的可访问名称 */
+  list: string;
+  /** 选了几个：读屏的播报 */
+  selected: (count: number) => string;
+  /** 没收了几个：那一行说明的开头 */
+  rejected: (count: number) => string;
+  type: string;
+  size: (limit: string) => string;
+  count: (max: number) => string;
+};
+export type FileUploadProps = {
+  /** 受控的值 */
+  value?: File[];
+  /** 非受控时的初始值 */
+  defaultValue?: File[];
+  onValueChange?: (files: File[]) => void;
+  /** 可以选几个。不开时新选的替掉原来的 */
+  multiple?: boolean;
+  /** 收哪些类型，写法和原生的一样：`.pdf,image/*` */
+  accept?: string;
+  /** 单个文件最大多少字节 */
+  maxSize?: number;
+  /** 最多几个（`multiple` 时） */
+  maxFiles?: number;
+  /** 有文件没收：拿到每个文件和原因 */
+  onReject?: (rejections: FileRejection[]) => void;
+  /** 表单字段名：列表里的文件随表单提交 */
+  name?: string;
+  /** 投放区的第一行字，后面跟着 `browseLabel` */
+  title?: ReactNode;
+  /** 带下划线的那几个字 */
+  browseLabel?: ReactNode;
+  /** 文件拖到上面时换成的字 */
+  dropLabel?: ReactNode;
+  /** 第二行：把限制写清楚——"PDF 或图片，单个不超过 10 MB" */
+  description?: ReactNode;
+  /** `md` 两行，默认；`sm` 是 40px 高的一行 */
+  size?: FileUploadSize;
+  /** 错误态。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  /**
+   * 自己画每个文件的那一行：选了就要传、要显示进度时用，返回一个带 `status` 的 `FileItem`。
+   * 不传就是一行不带状态的 `FileItem`
+   */
+  renderFile?: (file: File, actions: {
+    remove: () => void;
+    index: number;
+  }) => ReactNode;
+  /** 移除钮的可访问名称，拿到的是文件名。默认"移除某某" */
+  removeLabel?: (name: string) => string;
+  /** 文件列表的名称、没收时的那几句话，换哪句传哪句 */
+  labels?: Partial<FileUploadLabels>;
+  id?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  /** 给最外面那一层 */
+  className?: string;
+  /** 给里面的 `<input type="file">` */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * 文件上传：选文件，或者把文件拖进来。它只管"选"和"列"——发请求、算进度是使用方的事。
+ *
+ * 里面是一个真的 `<input type="file">`，铺满整个投放区：点哪儿都是打开系统的文件框。
+ * 每个文件上传都要有标签：放进 `Field`，或者自己传 `aria-label`。
+ */
+export declare function FileUpload({ value, defaultValue, onValueChange, multiple, accept, maxSize, maxFiles, onReject, name, title, browseLabel, dropLabel, description, size, invalid: invalidProp, disabled: disabledProp, required: requiredProp, renderFile, removeLabel, labels: labelsProp, id: idProp, "aria-label": ariaLabel, "aria-describedby": describedByProp, className, ref }: FileUploadProps): import("react").JSX.Element;
+//#endregion