@endfield-ui/react 1.2.0 → 1.2.1

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

@@ -0,0 +1,3 @@
+
+import { Carousel, CarouselProps, CarouselRatio, CarouselSlide, CarouselSlideProps } from "./Carousel.js";
+export { Carousel, type CarouselProps, type CarouselRatio, CarouselSlide, type CarouselSlideProps };

package/dist/components/carousel/snap-track.js

@@ -0,0 +1,2 @@
+"use client";
+import{useCallback as e,useEffect as t,useRef as n}from"react";function r({index:r,count:i,onSettle:a}){let o=n(null),s=n(void 0),c=Math.max(0,i-1),l=n(r);l.current=r;let u=n(!1);return t(()=>{let e=!u.current;u.current=!0;let t=o.current;t&&t.clientWidth!==0&&Math.round(t.scrollLeft/t.clientWidth)!==r&&t.scrollTo?.({left:r*t.clientWidth,behavior:e?`instant`:`smooth`})},[r]),t(()=>{let e=o.current;if(!e||typeof ResizeObserver>`u`)return;let t=new ResizeObserver(()=>{e.scrollTo?.({left:l.current*e.clientWidth,behavior:`instant`})});return t.observe(e),()=>t.disconnect()},[]),t(()=>()=>clearTimeout(s.current),[]),{trackRef:o,onScroll:e(()=>{clearTimeout(s.current),s.current=setTimeout(()=>{let e=o.current;if(!e||e.clientWidth===0)return;let t=Math.round(e.scrollLeft/e.clientWidth);a(Math.min(Math.max(t,0),c))},120)},[a,c])}}export{r as useSnapTrack};

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,18 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/checkbox/Checkbox.d.ts
+export type CheckboxProps = Omit<ComponentProps<"input">, "type" | "size"> & {
+  /** 半选：一组子项只选了一部分。显示为短横，读屏读作"部分选中" */
+  indeterminate?: boolean;
+  /** 错误态：描边变红 */
+  invalid?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  /** 右侧的文字标签。不传时必须自己给 `aria-label` */
+  children?: ReactNode;
+};
+/**
+ * 复选框。原生 `<input type="checkbox">`，受控用 `checked`、非受控用 `defaultChecked`。
+ * `className` 给整行，其余属性与 `ref` 给 `<input>`。
+ */
+export declare function Checkbox({ indeterminate, invalid, onCheckedChange, onChange, className, children, ref, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,2 @@
+"use client";
+import{Minus as e}from"../../icons/Minus.js";import{cn as t}from"../../lib/cn.js";import{focusRing as n}from"../../lib/focus-ring.js";import{mergeRefs as r}from"../../lib/merge-refs.js";import{Check as i}from"../../icons/Check.js";import{choiceBox as a,choiceControl as o,choiceFrame as s,choiceLabel as c,choiceMark as l}from"./choice-style.js";import{useEffect as u,useRef as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";function m({indeterminate:m=!1,invalid:h=!1,onCheckedChange:g,onChange:_,className:v,children:y,ref:b,...x}){let S=d(null);u(()=>{S.current&&(S.current.indeterminate=m)},[m]);let C=e=>{_?.(e),g?.(e.target.checked)};return/* @__PURE__ */ p(`label`,{className:t(c,v),children:[/* @__PURE__ */ f(`span`,{className:o,children:/* @__PURE__ */ p(`span`,{className:s,children:[/* @__PURE__ */ f(`input`,{...x,ref:r(S,b),type:`checkbox`,"aria-invalid":h||void 0,onChange:C,className:t(a,`indeterminate:border-surface-inverse indeterminate:bg-surface-inverse`,`forced-colors:indeterminate:border-[Highlight] forced-colors:indeterminate:bg-[Highlight]`,n)}),/* @__PURE__ */ f(i,{size:14,strokeWidth:3,className:t(l,`peer-checked:opacity-100 peer-indeterminate:opacity-0 choice-diamond:hidden`)}),/* @__PURE__ */ f(e,{size:14,strokeWidth:3,className:t(l,`peer-indeterminate:opacity-100`)})]})}),y!==void 0&&/* @__PURE__ */ f(`span`,{className:`min-w-0`,children:y})]})}export{m as Checkbox};

package/dist/components/checkbox/choice-style.js

@@ -0,0 +1,2 @@
+"use client";
+const e=`group inline-flex min-h-10 items-start gap-2 py-2 text-base text-ink has-disabled:cursor-not-allowed has-disabled:text-ink-disabled forced-colors:has-disabled:text-[GrayText]`,t=`flex h-[1lh] shrink-0 items-center`,n=[`peer size-5 shrink-0 appearance-none border-2 choice-diamond:size-3.5 choice-diamond:rotate-45 choice-diamond:checked:disabled:bg-ink-disabled border-line-strong bg-surface-sunken transition-colors duration-(--duration-fast) ease-standard group-hover:border-ink-secondary checked:border-surface-inverse checked:bg-surface-inverse aria-invalid:border-danger disabled:cursor-not-allowed disabled:border-ink-disabled disabled:bg-surface-sunken`,`forced-colors:checked:border-[Highlight] forced-colors:checked:bg-[Highlight] forced-colors:disabled:border-[GrayText] forced-colors:disabled:bg-[Canvas] forced-colors:choice-diamond:checked:disabled:bg-[GrayText]`].join(` `),r=`relative inline-flex size-5 items-center justify-center`,i=`pointer-events-none absolute inset-0 m-auto text-accent-ink-inverse opacity-0 transition-opacity duration-(--duration-fast) ease-standard peer-disabled:text-ink-disabled forced-colors:text-[HighlightText] forced-colors:peer-disabled:text-[GrayText]`;export{n as choiceBox,t as choiceControl,r as choiceFrame,e as choiceLabel,i as choiceMark};

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

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

package/dist/components/chip/FilterChip.d.ts

@@ -0,0 +1,18 @@
+
+import { CapsuleSize } from "./capsule-style.js";
+import { ComponentProps } from "react";
+//#region src/components/chip/FilterChip.d.ts
+export type FilterChipProps = Omit<ComponentProps<"button">, "aria-pressed"> & {
+  /** 受控的选中状态 */
+  selected?: boolean;
+  /** 非受控时的初始状态 */
+  defaultSelected?: boolean;
+  onSelectedChange?: (selected: boolean) => void;
+  size?: CapsuleSize;
+};
+/**
+ * 筛选胶囊：一个可以独立开关的条件，几个并排就是多选筛选。
+ * 几项里只能选一项时用 `Tabs` 的 `capsule` 变体或单选。
+ */
+export declare function FilterChip({ selected, defaultSelected, onSelectedChange, size, disabled, type, className, onClick, ...props }: FilterChipProps): import("react").JSX.Element;
+//#endregion

package/dist/components/chip/FilterChip.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{useControllableState as n}from"../../hooks/useControllableState.js";import{capsuleBase as r,capsuleSize as i,capsuleState as a}from"./capsule-style.js";import{jsx as o}from"react/jsx-runtime";function s({selected:s,defaultSelected:c=!1,onSelectedChange:l,size:u=`md`,disabled:d=!1,type:f=`button`,className:p,onClick:m,...h}){let[g,_]=n({value:s,defaultValue:c,onChange:l});return/* @__PURE__ */ o(`button`,{...h,type:f,disabled:d,"aria-pressed":g,"data-selected":g?``:void 0,onClick:e=>{m?.(e),e.defaultPrevented||_(!g)},className:e(r,t,i[u],d?g?a.selectedDisabled:a.disabled:g?a.selected:a.rest,p)})}export{s as FilterChip};

package/dist/components/chip/ResourceChip.d.ts

@@ -0,0 +1,16 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/chip/ResourceChip.d.ts
+export type ResourceChipSize = "sm" | "md";
+export type ResourceChipProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 资源的图标，放进左端的圆形底托。本库不带资源图标，由使用方提供 */
+  icon?: ReactNode;
+  /** 数量，等宽数字 */
+  children: ReactNode;
+  /** 给读屏的完整说明，如"燃料 1,280"。提供后数字本身对辅助技术隐藏 */
+  label?: string;
+  size?: ResourceChipSize;
+};
+/** 资源胶囊：货币、材料的当前数量——会变的状态，所以是胶囊。 */
+export declare function ResourceChip({ icon, label, size, className, children, ...props }: ResourceChipProps): import("react").JSX.Element;
+//#endregion

package/dist/components/chip/ResourceChip.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";const r={sm:`h-6 gap-1 pr-2.5 text-xs`,md:`h-7 gap-1.5 pr-3 text-sm`},i={sm:`pl-0.5`,md:`pl-1`},a={sm:`pl-2.5`,md:`pl-3`};function o({icon:o,label:s,size:c=`md`,className:l,children:u,...d}){return/* @__PURE__ */ n(`span`,{...d,className:e(`inline-flex shrink-0 items-center rounded-full bg-control font-tech leading-none font-bold whitespace-nowrap text-on-control tabular-nums`,r[c],o?i[c]:a[c],l),children:[o&&/* @__PURE__ */ t(`span`,{"aria-hidden":`true`,className:`inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-on-control/15 [&_svg]:size-3`,children:o}),/* @__PURE__ */ t(`span`,{"aria-hidden":s?`true`:void 0,children:u}),s&&/* @__PURE__ */ t(`span`,{className:`sr-only`,children:s})]})}export{o as ResourceChip};

package/dist/components/chip/capsule-style.d.ts

@@ -0,0 +1,4 @@
+
+//#region src/components/chip/capsule-style.d.ts
+export type CapsuleSize = "sm" | "md";
+//#endregion

package/dist/components/chip/capsule-style.js

@@ -0,0 +1,2 @@
+"use client";
+const e=`inline-flex shrink-0 items-center rounded-full border leading-none font-medium whitespace-nowrap transition-colors duration-(--duration-fast) ease-standard`,t={sm:`h-7 px-3 text-xs`,md:`h-8 px-4 text-sm`},n=`forced-colors:forced-color-adjust-none forced-colors:focus-visible:outline-[Highlight]`,r={selected:[`border-transparent bg-surface-inverse text-ink-inverse`,`forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]`,n].join(` `),rest:`border-line-strong text-ink hover:bg-ink/5`,disabled:`cursor-not-allowed border-line text-ink-disabled`,selectedDisabled:[`cursor-not-allowed border-transparent bg-disabled text-on-disabled`,`forced-colors:border-[GrayText] forced-colors:bg-[GrayText] forced-colors:text-[Canvas]`,n].join(` `)};export{e as capsuleBase,t as capsuleSize,r as capsuleState};

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

@@ -0,0 +1,4 @@
+
+import { FilterChip, FilterChipProps } from "./FilterChip.js";
+import { ResourceChip, ResourceChipProps, ResourceChipSize } from "./ResourceChip.js";
+export { FilterChip, type FilterChipProps, ResourceChip, type ResourceChipProps, type ResourceChipSize };

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,105 @@
+
+import { MenuVariant } from "../dropdown-menu/menu-style.js";
+import { ControlSize, ControlVariant } from "../input/control-box.js";
+import { ReactNode, Ref } from "react";
+//#region src/components/combobox/Combobox.d.ts
+export type ComboboxSize = ControlSize;
+export type ComboboxVariant = ControlVariant;
+export type ComboboxOption = {
+  value: string;
+  /** 显示的文字，也是检索的对象，所以必须是字符串 */
+  label: string;
+  /** 别名：检索时一并匹配，不显示。编号、缩写、旧称 */
+  keywords?: readonly string[];
+  disabled?: boolean;
+};
+export type ComboboxOptionGroup = {
+  /** 分组的小标题 */
+  label: string;
+  items: readonly ComboboxOption[];
+};
+type ComboboxCommonProps = {
+  /** 选项，或者 `{ label, items }` 的分组。分组和不分组的不要混着传 */
+  items: readonly ComboboxOption[] | readonly ComboboxOptionGroup[];
+  /** 没选时输入框里的提示 */
+  placeholder?: string;
+  /** 表单字段名：选中的值会随表单提交 */
+  name?: string;
+  /**
+   * 外框的画法，和输入框相同：
+   * - `sunken` 凹陷的底 + 一条底边线，默认；
+   * - `outline` 四边描边，放在凹陷底色的区域里时用。
+   */
+  variant?: ComboboxVariant;
+  /** 32 / 40 / 56px 高。多选时这是最小高度，已选项多了会长高 */
+  size?: ComboboxSize;
+  /**
+   * 面板的画法：
+   * - `plain` 跟随主题，默认；
+   * - `strong` 固定的深色面板，当前项整行黄底墨字。
+   */
+  panelVariant?: MenuVariant;
+  /** 一个都没匹配上时面板里的说明 */
+  emptyText?: ReactNode;
+  /**
+   * 正在取选项：面板里出一行"正在查找…"，这时不显示 `emptyText`。
+   * 已经拿到的选项照常显示
+   */
+  loading?: boolean;
+  /** `loading` 时那一行的文字 */
+  loadingText?: ReactNode;
+  /**
+   * 关掉之后不在本地筛选：`items` 给什么就显示什么。
+   * 选项由服务器按输入的文字返回时用，配合 `onInputValueChange` 和 `loading`
+   */
+  filter?: boolean;
+  /** 清除钮的可访问名称 */
+  clearLabel?: string;
+  /** 右侧三角按钮的可访问名称 */
+  toggleLabel?: string;
+  /** 错误态。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 输入框里的文字变了：要自己去取选项（远程检索）时用 */
+  onInputValueChange?: (text: string) => void;
+  id?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  /** 给外框 */
+  className?: string;
+  /** 给里面的 `<input>` */
+  ref?: Ref<HTMLInputElement>;
+};
+export type ComboboxSingleProps = ComboboxCommonProps & {
+  multiple?: false;
+  value?: string | null;
+  defaultValue?: string | null;
+  /** 清除之后拿到的是 `null` */
+  onValueChange?: (value: string | null) => void;
+  removeLabel?: never;
+};
+export type ComboboxMultipleProps = ComboboxCommonProps & {
+  /**
+   * 可以选多项：值是数组，已选项在框里排成一个个小块。
+   * 没打字直接选时面板不关；打了字搜出来再选，文字清空、面板关上
+   */
+  multiple: true;
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** 小块上删除叉的可访问名称，拿到的是这一项的文字。默认"移除某某" */
+  removeLabel?: (label: string) => string;
+};
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+/**
+ * 组合框：一个能打字的下拉。选项多到要找的时候用它；只有几项时用 `Select`。
+ * 值只能是选项里有的——它不是"带建议的输入框"。
+ * 每个组合框都要有标签：放进 `Field`，或者自己传 `aria-label`。
+ */
+export declare function Combobox(props: ComboboxProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/combobox/Combobox.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{Close as t}from"../../icons/Close.js";import{StatusDanger as n}from"../../icons/StatusDanger.js";import{Spinner as ee}from"../spinner/Spinner.js";import{usePortalScope as te}from"../../hooks/usePortalScope.js";import{TriangleRight as ne}from"../../icons/TriangleRight.js";import{MenuCheck as re}from"../dropdown-menu/MenuCheck.js";import{menuGroupLabel as ie,menuItem as ae,menuItemCurrent as oe,menuItemHover as r,menuPanel as se}from"../dropdown-menu/menu-style.js";import{useFieldControl as ce}from"../field/Field.js";import{controlBox as le,controlElement as i,controlIconSize as a}from"../input/control-box.js";import{multiValueBox as o,valueChip as s,valueChipRemove as c,valueChipSize as l,valueInputHeight as ue}from"../input/value-chip.js";import{useMemo as de,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{Combobox as m}from"@base-ui/react/combobox";const h=e=>e.length>0&&`items`in e[0],fe={sm:`h-8 text-sm`,md:`h-10 text-base`,lg:`h-14 text-lg`},pe={plain:`data-highlighted:bg-line`,strong:`data-highlighted:bg-action-pressed`},g=`flex shrink-0 items-center justify-center self-stretch text-ink-secondary hover:text-ink disabled:cursor-not-allowed disabled:text-ink-disabled disabled:hover:text-ink-disabled`,me=(e,t)=>e?.value===t?.value;function _(_){let{items:v,placeholder:he,name:ge,variant:y=`sunken`,size:b=`md`,panelVariant:x=`plain`,emptyText:S=`没有匹配的选项`,loading:C=!1,loadingText:w=`正在查找…`,filter:T=!0,clearLabel:E=`清除`,toggleLabel:D=`展开选项`,invalid:O,disabled:k,required:A,open:j,defaultOpen:M,onOpenChange:N,onInputValueChange:P,id:F,"aria-label":I,"aria-describedby":L,className:_e,ref:ve}=_,{id:ye,disabled:R,required:be,invalid:z,...xe}=ce({id:F,disabled:k,required:A,invalid:O,"aria-describedby":L}),B=u(null),{anchorRef:Se,portalRef:Ce}=te(),V=a[b],H=_.multiple===!0,we=h(v),Te=de(()=>h(v)?v.flatMap(e=>e.items):v,[v]),U=u(/* @__PURE__ */ new Map);for(let e of Te)U.current.set(e.value,e);let W=e=>e==null?null:U.current.get(e)??null,G=e=>e.flatMap(e=>U.current.get(e)??[]),{contains:K}=m.useFilter({sensitivity:`base`}),Ee=(e,t)=>K(e.label,t)||(e.keywords?.some(e=>K(e,t))??!1),q=t=>/* @__PURE__ */ f(m.Item,{value:t,disabled:t.disabled,className:t=>e(ae,H?[r,t.selected&&`font-medium`]:t.selected?[oe[x],pe[x]]:r,`forced-colors:data-highlighted:outline-2 forced-colors:data-highlighted:-outline-offset-2 forced-colors:data-highlighted:outline-[Highlight]`),render:H?({children:e,...t},n)=>/* @__PURE__ */ p(`div`,{...t,children:[/* @__PURE__ */ f(re,{checked:n.selected,disabled:n.disabled}),e]}):void 0,children:/* @__PURE__ */ f(`span`,{className:`min-w-0 flex-1 truncate`,children:t.label})},t.value),J=t=>/* @__PURE__ */ f(m.Input,{ref:ve,id:ye,placeholder:t?void 0:he,"aria-label":I,"aria-invalid":z||void 0,"aria-describedby":xe[`aria-describedby`],className:e(i,H?[`min-w-12 px-1`,ue[b]]:`h-full pr-2 pl-3`)}),Y=/* @__PURE__ */ p(d,{children:[/* @__PURE__ */ p(`div`,{ref:e=>{B.current=e,Se(e)},"data-variant":y,"data-size":b,"data-invalid":z?``:void 0,className:e(le({variant:y,invalid:z,disabled:R,readOnly:!1}),`items-center`,H?o[b]:fe[b],_e),children:[_.multiple?/* @__PURE__ */ f(m.Chips,{className:`flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-2`,children:/* @__PURE__ */ f(m.Value,{children:n=>/* @__PURE__ */ p(d,{children:[n.map(n=>/* @__PURE__ */ p(m.Chip,{"aria-label":n.label,className:e(s,`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus`,`data-disabled:text-ink-disabled`,`forced-colors:data-disabled:border-[GrayText] forced-colors:data-disabled:text-[GrayText]`,l[b]),children:[/* @__PURE__ */ f(`span`,{className:`min-w-0 truncate`,children:n.label}),/* @__PURE__ */ f(m.ChipRemove,{"aria-label":(_.removeLabel??(e=>`移除${e}`))(n.label),className:c,children:/* @__PURE__ */ f(t,{size:12})})]},n.value)),J(n.length>0)]})})}):J(!1),z&&/* @__PURE__ */ f(n,{size:V,className:`shrink-0 text-danger`}),/* @__PURE__ */ f(m.Clear,{"aria-label":E,className:e(g,`w-7`),children:/* @__PURE__ */ f(t,{size:V-2})}),/* @__PURE__ */ f(m.Trigger,{"aria-label":D,className:e(g,`w-8 pr-1`),children:/* @__PURE__ */ f(`span`,{className:`flex rotate-90 transition-transform duration-(--duration-fast) ease-standard in-data-popup-open:-rotate-90`,children:/* @__PURE__ */ f(ne,{size:V-4})})})]}),/* @__PURE__ */ f(m.Portal,{ref:Ce,children:/* @__PURE__ */ f(m.Positioner,{anchor:B,side:`bottom`,align:`start`,sideOffset:4,className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ p(m.Popup,{"data-theme":x===`strong`?`dark`:void 0,"data-variant":x,className:e(se,`max-w-(--available-width) min-w-(--anchor-width)`),children:[/* @__PURE__ */ f(m.Status,{className:`flex items-center gap-2 text-sm text-ink-secondary not-empty:px-3 not-empty:py-2`,children:C&&/* @__PURE__ */ p(d,{children:[/* @__PURE__ */ f(ee,{size:`sm`,label:null}),w]})}),/* @__PURE__ */ f(m.Empty,{className:`text-sm text-ink-secondary not-empty:px-3 not-empty:py-2`,children:C?null:S}),/* @__PURE__ */ f(m.List,{"aria-busy":C||void 0,className:`max-h-[min(var(--available-height),20rem)] overflow-y-auto overscroll-contain empty:hidden`,children:we?e=>/* @__PURE__ */ p(m.Group,{items:e.items,children:[/* @__PURE__ */ f(m.GroupLabel,{className:ie,children:e.label}),/* @__PURE__ */ f(m.Collection,{children:q})]},e.label):q})]})})})]}),X={items:v,filter:T?Ee:null,name:ge,disabled:R,required:be,open:j,defaultOpen:M,onOpenChange:N&&(e=>N(e)),onInputValueChange:P&&(e=>P(e)),isItemEqualToValue:me};if(_.multiple){let{value:e,defaultValue:t,onValueChange:n}=_;return/* @__PURE__ */ f(m.Root,{...X,multiple:!0,value:e&&G(e),defaultValue:t&&G(t),onValueChange:n&&(e=>n(e.map(e=>e.value))),children:Y})}let{value:Z,defaultValue:Q,onValueChange:$}=_;return/* @__PURE__ */ f(m.Root,{...X,value:Z===void 0?void 0:W(Z),defaultValue:Q===void 0?void 0:W(Q),onValueChange:$&&(e=>$(e?.value??null)),children:Y})}export{_ as Combobox};

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

@@ -0,0 +1,3 @@
+
+import { Combobox, ComboboxMultipleProps, ComboboxOption, ComboboxOptionGroup, ComboboxProps, ComboboxSingleProps, ComboboxSize, ComboboxVariant } from "./Combobox.js";
+export { Combobox, type ComboboxMultipleProps, type ComboboxOption, type ComboboxOptionGroup, type ComboboxProps, type ComboboxSingleProps, type ComboboxSize, type ComboboxVariant };

package/dist/components/completion-banner/CompletionBanner.d.ts

@@ -0,0 +1,26 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/completion-banner/CompletionBanner.d.ts
+export type CompletionBannerProps = Omit<ComponentProps<"div">, "title"> & {
+  /** 一句话说明完成了什么："第三阶段已完成" */
+  title: ReactNode;
+  /** 背后的巨型描边词，默认 `COMPLETED`。纯装饰；传 `null` 去掉 */
+  word?: ReactNode;
+  /** 标题下的一行说明 */
+  description?: ReactNode;
+  /** 右侧的一个行动：领取、查看下一阶段 */
+  action?: ReactNode;
+  /** 标题层级，默认 3（`<h3>`） */
+  level?: 2 | 3 | 4 | 5 | 6;
+  /** 进入视口时播放一次入场：色带从左擦入，随后出字。默认开启 */
+  animate?: boolean;
+};
+/**
+ * 完成横幅：一个阶段全部完成时，头部区域做一次明暗反转。
+ * 只在真正的里程碑上用；日常的"保存成功"用提示条就够了。
+ *
+ * 底是反转块：亮色主题下是深底黄字，暗色主题下是浅底深字。
+ * 整块是一个 `data-theme="inverse"` 的局部主题，`action` 里的按钮按这块底色取值。
+ */
+export declare function CompletionBanner({ title, word, description, action, level, animate, className, children, ref, ...props }: CompletionBannerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/completion-banner/CompletionBanner.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{mergeRefs as t}from"../../lib/merge-refs.js";import{useInView as n}from"../../hooks/useInView.js";import{GhostText as r}from"../ghost-text/GhostText.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o({title:o,word:s=`COMPLETED`,description:c,action:l,level:u=3,animate:d=!0,className:f,children:p,ref:m,...h}){let g=`h${u}`,[_,v]=n({disabled:!d}),y=d&&!v,b=d&&v;return/* @__PURE__ */ a(`div`,{role:`status`,"data-theme":`inverse`,...h,ref:t(_,m),className:e(`@container relative isolate overflow-clip bg-surface text-ink`,y&&`[clip-path:inset(0_100%_0_0)]`,b&&`animate-wipe-in`,f),children:[s!==null&&/* @__PURE__ */ i(r,{variant:`outline`,className:`absolute -right-2 -bottom-3 -z-10 hidden text-5xl [--ghost-ink:color-mix(in_srgb,var(--ef-ink)_28%,transparent)] [mask-image:linear-gradient(to_left,black_45%,transparent)] @md:block`,children:s}),/* @__PURE__ */ a(`div`,{className:`flex flex-wrap items-center justify-between gap-x-6 gap-y-3 px-4 py-4 @md:px-6 @md:py-5`,children:[/* @__PURE__ */ a(`div`,{className:e(`min-w-0 border-l-4 border-accent-ink pl-3`,b&&`animate-shift-in [animation-delay:200ms] [--shift-x:calc(var(--motion-shift-lg)*-1)]`),children:[/* @__PURE__ */ i(g,{className:`text-lg font-bold wrap-anywhere text-accent-ink @md:text-xl`,children:o}),c&&/* @__PURE__ */ i(`p`,{className:`mt-1 text-sm text-ink/70`,children:c}),p]}),l&&/* @__PURE__ */ i(`div`,{className:e(`shrink-0`,b&&`animate-fade-in [animation-delay:200ms]`),children:l})]})]})}export{o as CompletionBanner};

package/dist/components/completion-banner/index.d.ts

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

package/dist/components/context-menu/ContextMenu.d.ts

@@ -0,0 +1,30 @@
+
+import { MenuVariant } from "../dropdown-menu/menu-style.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/components/context-menu/ContextMenu.d.ts
+export type ContextMenuVariant = MenuVariant;
+export type ContextMenuProps = {
+  /**
+   * 菜单里的内容：`DropdownMenuItem`、`DropdownMenuCheckboxItem`、
+   * `DropdownMenuGroup`、`DropdownMenuSeparator`、`DropdownMenuSub`
+   */
+  menu: ReactNode;
+  /** 被右键的区域：一个能接收 `ref` 与事件的元素 */
+  children: ReactElement<Record<string, unknown>>;
+  /**
+   * - `plain` 跟随主题的面板，默认；
+   * - `strong` 固定的深色面板。
+   */
+  variant?: ContextMenuVariant;
+  onOpenChange?: (open: boolean) => void;
+  /** 不再拦右键：回到浏览器自己的菜单 */
+  disabled?: boolean;
+  /** 给面板 */
+  className?: string;
+};
+/**
+ * 右键菜单：在一块区域上点右键（或按菜单键、触屏长按）时出现在指针处的下拉菜单。
+ * 它只是捷径——里面的操作在页面上必须另有入口。
+ */
+export declare function ContextMenu({ menu, children, variant, onOpenChange, disabled, className }: ContextMenuProps): import("react").JSX.Element;
+//#endregion

package/dist/components/context-menu/ContextMenu.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{usePortalScope as t}from"../../hooks/usePortalScope.js";import{getMenuVariantContext as n,menuPanel as r}from"../dropdown-menu/menu-style.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{ContextMenu as o}from"@base-ui/react/context-menu";function s({menu:s,children:c,variant:l=`plain`,onOpenChange:u,disabled:d,className:f}){let p=n(),{anchorRef:m,portalRef:h}=t();return/* @__PURE__ */ a(o.Root,{disabled:d,onOpenChange:u&&(e=>u(e)),children:[/* @__PURE__ */ i(o.Trigger,{ref:m,render:c}),/* @__PURE__ */ i(o.Portal,{ref:h,children:/* @__PURE__ */ i(o.Positioner,{className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ i(o.Popup,{"data-theme":l===`strong`?`dark`:void 0,"data-variant":l,className:e(r,`max-h-(--available-height) overflow-y-auto overscroll-contain`,f),children:/* @__PURE__ */ i(p.Provider,{value:l,children:s})})})})]})}export{s as ContextMenu};

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

@@ -0,0 +1,3 @@
+
+import { ContextMenu, ContextMenuProps, ContextMenuVariant } from "./ContextMenu.js";
+export { ContextMenu, type ContextMenuProps, type ContextMenuVariant };

package/dist/components/corner-brackets/CornerBrackets.d.ts

@@ -0,0 +1,20 @@
+
+import { ComponentProps } from "react";
+//#region src/components/corner-brackets/CornerBrackets.d.ts
+export type CornerBracketsSize = "sm" | "md";
+export type CornerBracketsProps = ComponentProps<"div"> & {
+  /** 要不要画括号，默认画。用作选中态时把选中状态传进来 */
+  visible?: boolean;
+  /** 臂长 12px 或 16px */
+  size?: CornerBracketsSize;
+};
+/**
+ * 角括号：四角各一个 L 形短线，把里面的东西框出来。
+ * 用于矩阵里的单选（物品格、名册卡、图鉴）；列表行用左缘色条，页签用底色，都不用它。
+ *
+ * 括号画在盒子之外 4px：它所在的容器不能贴着盒子裁切。
+ * 出现时八段短线从角的顶点伸到满长（200ms），消失是直接消失。
+ * 括号只是给眼睛看的，选中态另外要有 `aria-selected` / `aria-pressed`。
+ */
+export declare function CornerBrackets({ visible, size, className, ...props }: CornerBracketsProps): import("react").JSX.Element;
+//#endregion

package/dist/components/corner-brackets/CornerBrackets.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{jsx as t}from"react/jsx-runtime";const n={sm:`[--bracket-arm:12px]`,md:`[--bracket-arm:16px]`};function r({visible:r=!0,size:i=`sm`,className:a,...o}){return/* @__PURE__ */ t(`div`,{...o,"data-visible":r?``:void 0,className:e(`relative`,r&&`corner-brackets after:animate-bracket-in`,n[i],a)})}export{r as CornerBrackets};

package/dist/components/corner-brackets/index.d.ts

@@ -0,0 +1,3 @@
+
+import { CornerBrackets, CornerBracketsProps, CornerBracketsSize } from "./CornerBrackets.js";
+export { CornerBrackets, type CornerBracketsProps, type CornerBracketsSize };

package/dist/components/countdown/Countdown.d.ts

@@ -0,0 +1,26 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/countdown/Countdown.d.ts
+export type CountdownSize = "sm" | "md";
+export type CountdownState = "ample" | "urgent" | "expired";
+export type CountdownProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 截止时间：`Date`、时间戳或能被 `new Date()` 解析的字符串 */
+  to: Date | number | string;
+  /** 剩余时间不多于这个毫秒数时进入紧迫态，默认 24 小时 */
+  urgentWithin?: number;
+  /** 到期后显示的文字 */
+  expiredLabel?: ReactNode;
+  /** 到期的那一刻调用一次；挂载时就已过期则不调用 */
+  onExpire?: () => void;
+  /** 超过一天时"天"的写法，如 `3天 04:12:09` */
+  dayUnit?: string;
+  /** 给读屏的静态截止时间。默认是"截止 + 本地格式的日期时间" */
+  deadlineLabel?: ReactNode;
+  size?: CountdownSize;
+};
+/**
+ * 倒计时：充裕时是绿色胶囊，紧迫时变红并多一个 `!`。
+ * 不会每秒播报——读屏拿到的是静态的截止时间，走到这里时才读当前剩余。
+ */
+export declare function Countdown({ to, urgentWithin, expiredLabel, onExpire, dayUnit, deadlineLabel, size, className, ...props }: CountdownProps): import("react").JSX.Element;
+//#endregion

package/dist/components/countdown/Countdown.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{useEffect as t,useRef as n,useState as r}from"react";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";const s={sm:`h-5 gap-1 px-2 text-xs`,md:`h-7 gap-1.5 px-3 text-sm`},c={ample:`bg-success text-ink-inverse`,urgent:`bg-danger text-ink-inverse`,expired:`bg-surface-muted text-ink-secondary`};function l(e){return String(e).padStart(2,`0`)}function u(e,t){let n=Math.ceil(e/1e3),r=Math.floor(n/86400),i=[Math.floor(n%86400/3600),Math.floor(n%3600/60),n%60].map(l).join(`:`);return r>0?`${r}${t} ${i}`:i}function d({to:l,urgentWithin:d=864e5,expiredLabel:f=`已结束`,onExpire:p,dayUnit:m=`天`,deadlineLabel:h,size:g=`md`,className:_,...v}){let y=new Date(l).getTime(),[b,x]=r(()=>Date.now());t(()=>{if(x(Date.now()),!(y>Date.now()))return;let e=setInterval(()=>{let t=Date.now();x(t),t>=y&&clearInterval(e)},1e3);return()=>clearInterval(e)},[y]);let S=Number.isNaN(y)?0:Math.max(0,y-b),C=S===0?`expired`:S<=d?`urgent`:`ample`,w=n(p),T=n(C);t(()=>{w.current=p}),t(()=>{C===`expired`&&T.current!==`expired`&&w.current?.(),T.current=C},[C]);let E=!Number.isNaN(y);return/* @__PURE__ */ o(`span`,{...v,"data-state":C,className:e(`inline-flex shrink-0 items-center rounded-full font-tech leading-none font-bold whitespace-nowrap tabular-nums`,s[g],c[C],_),children:[C===`urgent`&&/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,children:`!`}),/* @__PURE__ */ a(`span`,{role:`timer`,"aria-live":`off`,suppressHydrationWarning:!0,children:C===`expired`?f:u(S,m)}),E&&/* @__PURE__ */ a(`span`,{className:`sr-only`,suppressHydrationWarning:!0,children:h??/* @__PURE__ */ o(i,{children:[`截止`,` `,/* @__PURE__ */ a(`time`,{dateTime:new Date(y).toISOString(),children:new Date(y).toLocaleString()})]})})]})}export{d as Countdown};

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

@@ -0,0 +1,3 @@
+
+import { Countdown, CountdownProps, CountdownSize, CountdownState } from "./Countdown.js";
+export { Countdown, type CountdownProps, type CountdownSize, type CountdownState };

package/dist/components/dash-indicator/DashIndicator.d.ts

@@ -0,0 +1,15 @@
+
+import { ComponentProps } from "react";
+//#region src/components/dash-indicator/DashIndicator.d.ts
+export type DashIndicatorProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 一共几项 */
+  count: number;
+  /** 当前是第几项，从 0 起 */
+  index: number;
+};
+/**
+ * 进度短横：一排短横线表示"共几项、在第几项"。只做指示，不可点击；
+ * 要能翻动，旁边配一个 `Navigator` 或一对翻页钮。
+ */
+export declare function DashIndicator({ count, index, className, ...props }: DashIndicatorProps): import("react").JSX.Element;
+//#endregion

package/dist/components/dash-indicator/DashIndicator.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{jsx as t}from"react/jsx-runtime";function n({count:n,index:r,className:i,...a}){let o=Math.max(0,Math.floor(n)),s=Math.min(Math.max(Math.floor(r),0),o-1);return/* @__PURE__ */ t(`span`,{role:`img`,"aria-label":`第 ${s+1} 项，共 ${o} 项`,...a,className:e(`inline-flex max-w-full min-w-0 items-center gap-1`,i),children:Array.from({length:o},(n,r)=>/* @__PURE__ */ t(`span`,{"data-current":r===s?``:void 0,className:e(`h-0.5 transition-[width,background-color] duration-(--duration-base) ease-standard`,r===s?`w-8 bg-accent-ink forced-colors:bg-[Highlight]`:`w-4 bg-line-strong forced-colors:bg-[CanvasText]`)},r))})}export{n as DashIndicator};

package/dist/components/dash-indicator/index.d.ts

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

package/dist/components/data-row/DataRow.d.ts

@@ -0,0 +1,58 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/data-row/DataRow.d.ts
+export type DataRowColumns = {
+  /** 名称那一列的列名 */
+  name: ReactNode;
+  /** 走势列的列名。不给就没有这一列 */
+  trend?: ReactNode;
+  /** 当前值那一列的列名 */
+  value: ReactNode;
+  /** 参考值列的列名。不给就没有这一列 */
+  reference?: ReactNode;
+};
+export type DataRowListProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 这张表的名称，读屏会读出来 */
+  label?: string;
+  /** 各列的列名；有没有走势列、参考值列也由它决定 */
+  columns: DataRowColumns;
+  /** `DataRow` */
+  children: ReactNode;
+};
+/**
+ * 数据行带：浅色画布上一条条深色的行，上面一条胶囊形的列头。
+ * 语义是一张表格；里面只放 `DataRow`。
+ */
+export declare function DataRowList({ label, columns, className, children, ...props }: DataRowListProps): import("react").JSX.Element;
+export type DataRowTone = "neutral" | "info" | "accent" | "danger";
+export type DataRowProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 这一行的名称 */
+  name: ReactNode;
+  /**
+   * 左缘的类目色条：一个 CSS 颜色值，通常传令牌变量（`var(--color-special)`）。
+   * 不要用黄色——黄色是"选中"和"收藏"
+   */
+  categoryColor?: string;
+  /** 收藏。只传它是一个静态的标记；同时传 `onFavoriteChange` 才是一个能点的切换按钮 */
+  favorite?: boolean;
+  onFavoriteChange?: (favorite: boolean) => void;
+  /** 收藏按钮的可访问名称，默认"收藏" */
+  favoriteLabel?: string;
+  /** 走势：一串数值，画成行内的小型面积图。表头没有走势列时不显示 */
+  series?: readonly number[];
+  /** 当前值。正负号连同数值一起传：颜色之外还要有符号 */
+  value: ReactNode;
+  /**
+   * 当前值的含义：
+   * - `info` 产出、正向（蓝）；
+   * - `accent` 消耗、关注（黄）；
+   * - `danger` 超支、异常（红），走势图也跟着变红；
+   * - `neutral` 不表态，默认。
+   */
+  tone?: DataRowTone;
+  /** 参考值（理论值、上限）。表头没有参考值列时不显示 */
+  reference?: ReactNode;
+};
+/** 数据行带里的一行。放在 `DataRowList` 里。 */
+export declare function DataRow({ name, categoryColor, favorite, onFavoriteChange, favoriteLabel, series, value, tone, reference, className, style, ...props }: DataRowProps): import("react").JSX.Element;
+//#endregion

package/dist/components/data-row/DataRow.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import"../../lib/focus-ring.js";import{createLazyContext as t}from"../../lib/create-lazy-context.js";import{bandCanvas as n,bandGap as r,bandRow as i}from"../list/band-style.js";import{Sparkline as a}from"../sparkline/Sparkline.js";import{useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=/* @__PURE__ */ t({trend:!1,reference:!1}),u=t=>e(`grid-cols-[minmax(0,1fr)_auto]`,t.reference&&`@sm:grid-cols-[minmax(0,1fr)_auto_auto]`,t.trend&&(t.reference?`@lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_auto_auto]`:`@lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_auto]`)),d=`hidden @lg:block`,f=`hidden @sm:block`,p=`col-span-full grid grid-cols-subgrid items-center gap-x-4`;function m({className:t,children:n}){return/* @__PURE__ */ s(`span`,{role:`columnheader`,className:e(`relative min-w-0 not-first:before:absolute not-first:before:top-1/2 not-first:before:-left-2 not-first:before:h-3 not-first:before:w-px not-first:before:-translate-y-1/2 not-first:before:bg-line-strong not-first:before:content-['']`,t),children:/* @__PURE__ */ s(`span`,{className:`block truncate`,children:n})})}function h({label:t,columns:i,className:a,children:o,...h}){let g=l(),_={trend:i.trend!==void 0,reference:i.reference!==void 0};return/* @__PURE__ */ s(`div`,{...h,className:e(`@container text-ink`,n,a),children:/* @__PURE__ */ c(`div`,{role:`table`,"aria-label":t,className:e(`grid`,r,u(_)),children:[/* @__PURE__ */ c(`div`,{role:`row`,className:e(p,`min-h-6 rounded-full border border-transparent bg-surface-muted pr-3 pl-4 text-xs`),children:[/* @__PURE__ */ s(m,{children:i.name}),_.trend&&/* @__PURE__ */ s(m,{className:d,children:i.trend}),/* @__PURE__ */ s(m,{className:`text-right`,children:i.value}),_.reference&&/* @__PURE__ */ s(m,{className:e(f,`text-right`),children:i.reference})]}),/* @__PURE__ */ s(g.Provider,{value:_,children:o})]})})}const g={neutral:`text-ink`,info:`text-info`,accent:`text-accent-ink`,danger:`text-danger`};function _({name:t,categoryColor:n,favorite:r,onFavoriteChange:u,favoriteLabel:m=`收藏`,series:h,value:_,tone:v=`neutral`,reference:y,className:b,style:x,...S}){let C=o(l()),w=r!==void 0||u!==void 0,T=e(`block size-4 rounded-full`,r?`bg-action forced-colors:bg-[Highlight]`:`border-2 border-ink-tertiary`);return/* @__PURE__ */ c(`div`,{role:`row`,"data-theme":`dark`,"data-tone":v,"data-favorite":r?``:void 0,...S,style:n?{"--data-row-category":n,...x}:x,className:e(p,i,`relative min-h-11 pr-3 pl-4`,b),children:[n&&/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,"data-category":``,className:`absolute inset-y-0 left-0 w-1 bg-(--data-row-category)`}),/* @__PURE__ */ c(`div`,{role:`rowheader`,className:`flex min-w-0 items-center gap-2.5`,children:[w&&(u?/* @__PURE__ */ s(`button`,{type:`button`,"aria-label":m,"aria-pressed":r??!1,onClick:()=>u(!r),className:e(`relative shrink-0 rounded-full after:absolute after:-inset-2.5 after:content-['']`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus`),children:/* @__PURE__ */ s(`span`,{className:T})}):/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:e(T,`shrink-0`)})),/* @__PURE__ */ c(`span`,{className:`min-w-0 truncate`,children:[t,r&&!u&&/* @__PURE__ */ s(`span`,{className:`sr-only`,children:`（已收藏）`})]})]}),C.trend&&/* @__PURE__ */ s(`div`,{role:`cell`,className:e(d,`h-8`),children:h&&/* @__PURE__ */ s(a,{data:h,tone:v===`danger`?`danger`:`info`,className:`h-full`})}),/* @__PURE__ */ s(`div`,{role:`cell`,className:e(`text-right font-tech font-bold whitespace-nowrap tabular-nums`,g[v]),children:_}),C.reference&&/* @__PURE__ */ s(`div`,{role:`cell`,className:e(f,`text-right font-tech whitespace-nowrap text-ink-secondary tabular-nums`),children:y})]})}export{_ as DataRow,h as DataRowList};

package/dist/components/data-row/index.d.ts

@@ -0,0 +1,3 @@
+
+import { DataRow, DataRowColumns, DataRowList, DataRowListProps, DataRowProps, DataRowTone } from "./DataRow.js";
+export { DataRow, type DataRowColumns, DataRowList, type DataRowListProps, type DataRowProps, type DataRowTone };

package/dist/components/date-picker/DateField.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{StatusDanger as n}from"../../icons/StatusDanger.js";import{usePortalScope as r}from"../../hooks/usePortalScope.js";import{menuPanel as i}from"../dropdown-menu/menu-style.js";import{controlBox as a,controlIconSize as o,controlSize as s}from"../input/control-box.js";import{CalendarIcon as c}from"../../icons/CalendarIcon.js";import{useRef as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{Popover as f}from"@base-ui/react/popover";const p=e=>e.replaceAll(`-`,`.`),m=/* @__PURE__ */ e(`px-2 py-1 text-sm font-medium text-ink underline underline-offset-4 hover:text-ink-secondary`,`disabled:cursor-not-allowed disabled:text-ink-disabled disabled:no-underline`,t);function h({display:t,placeholder:p,fields:m,variant:h,size:g,invalid:_,disabled:v,required:y,open:b,onOpenChange:x,panelLabel:S,id:C,"aria-label":w,"aria-describedby":T,className:E,ref:D,children:O}){let{anchorRef:k,portalRef:A}=r(),j=l(null),M=l(null),N=o[g];return/* @__PURE__ */ d(f.Root,{open:b,onOpenChange:e=>x(e),children:[/* @__PURE__ */ d(`div`,{ref:e=>{j.current=e,k(e)},"data-variant":h,"data-size":g,"data-invalid":_?``:void 0,className:e(a({variant:h,invalid:_,disabled:v,readOnly:!1}),s[g],E),children:[/* @__PURE__ */ d(f.Trigger,{ref:D,id:C,disabled:v,"aria-label":w,"aria-invalid":_||void 0,"aria-required":y||void 0,"aria-describedby":T,className:`flex h-full min-w-0 flex-1 cursor-default items-center gap-2 px-3 text-left outline-none disabled:cursor-not-allowed`,children:[t===null?/* @__PURE__ */ u(`span`,{className:`min-w-0 flex-1 truncate text-ink-tertiary`,children:p}):/* @__PURE__ */ u(`span`,{className:`min-w-0 flex-1 truncate font-tech tabular-nums`,children:t}),_&&/* @__PURE__ */ u(n,{size:N,className:`shrink-0 text-danger`}),/* @__PURE__ */ u(c,{size:N,className:e(`shrink-0`,v?`text-ink-disabled forced-colors:text-[GrayText]`:`text-ink-secondary forced-colors:text-[ButtonText]`)})]}),m]}),/* @__PURE__ */ u(f.Portal,{ref:A,children:/* @__PURE__ */ u(f.Positioner,{anchor:j,side:`bottom`,align:`start`,sideOffset:4,className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ u(f.Popup,{ref:M,"aria-label":S,initialFocus:()=>M.current?.querySelector(`[data-date][tabindex="0"]`)??!0,className:e(i,`flex flex-col gap-2 p-2`),children:O})})})]})}export{h as DateField,m as dateFooterButton,p as dottedDate};

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

@@ -0,0 +1,56 @@
+
+import { CalendarProps } from "../calendar/Calendar.js";
+import { ControlSize, ControlVariant } from "../input/control-box.js";
+import { ReactNode, Ref } from "react";
+//#region src/components/date-picker/DatePicker.d.ts
+export type DatePickerSize = ControlSize;
+export type DatePickerVariant = ControlVariant;
+export type DatePickerProps = Pick<CalendarProps, "min" | "max" | "isDateDisabled" | "weekStartsOn" | "locale" | "today"> & {
+  /** 选中的那一天，`YYYY-MM-DD`；没选是 `null` */
+  value?: string | null;
+  defaultValue?: string | null;
+  /** 清除之后拿到的是 `null` */
+  onValueChange?: (value: string | null) => void;
+  /** 没选时显示的提示 */
+  placeholder?: ReactNode;
+  /** 表单字段名：选中的值（`YYYY-MM-DD`）会随表单提交 */
+  name?: string;
+  /**
+   * 外框的画法，和输入框相同：
+   * - `sunken` 凹陷的底 + 一条底边线，默认；
+   * - `outline` 四边描边，放在凹陷底色的区域里时用。
+   */
+  variant?: DatePickerVariant;
+  /** 32 / 40 / 56px 高 */
+  size?: DatePickerSize;
+  /** 日期怎么写。默认 `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;
+  todayLabel?: string;
+  clearLabel?: string;
+  id?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  /** 给外框 */
+  className?: string;
+  /** 给触发按钮 */
+  ref?: Ref<HTMLButtonElement>;
+};
+/**
+ * 日期选择：一个字段，点开是一块带月历的面板。值是 `YYYY-MM-DD` 的字符串。
+ * 触发器是按钮，不能打字——要打字用原生的 `<Input type="date">`。
+ * 每个日期选择都要有标签：放进 `Field`，或者自己传 `aria-label`。
+ *
+ * 选一段（起止日期）用 `DateRangePicker`。
+ */
+export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, name, variant, size, format, invalid: invalidProp, disabled: disabledProp, required: requiredProp, open: openProp, defaultOpen, onOpenChange, panelLabel, todayLabel, clearLabel, min, max, isDateDisabled, weekStartsOn, locale, today: todayProp, id: idProp, "aria-label": ariaLabel, "aria-describedby": describedByProp, className, ref }: DatePickerProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,2 @@
+"use client";
+import{useControllableState as e}from"../../hooks/useControllableState.js";import{clampDate as t,today as n}from"../../lib/date.js";import{Calendar as r}from"../calendar/Calendar.js";import{useFieldControl as i}from"../field/Field.js";import{DateField as a,dateFooterButton as o,dottedDate as s}from"./DateField.js";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({value:u,defaultValue:d=null,onValueChange:f,placeholder:p=`选择日期`,name:m,variant:h=`sunken`,size:g=`md`,format:_=s,invalid:v,disabled:y,required:b,open:x,defaultOpen:S=!1,onOpenChange:C,panelLabel:w=`选择日期`,todayLabel:T=`今天`,clearLabel:E=`清除`,min:D,max:O,isDateDisabled:k,weekStartsOn:A,locale:j,today:M,id:N,"aria-label":P,"aria-describedby":F,className:I,ref:L}){let{id:R,disabled:z,required:B,invalid:V,...H}=i({id:N,disabled:y,required:b,invalid:v,"aria-describedby":F}),[U,W]=e({value:u,defaultValue:d,onChange:f}),[G,K]=e({value:x,defaultValue:S,onChange:C}),q=e=>{W(e),K(!1)},J=M??n(),Y=t(J,D,O)!==J||(k?.(J)??!1);return/* @__PURE__ */ l(a,{ref:L,id:R,display:U===null?null:_(U),placeholder:p,variant:h,size:g,invalid:V,disabled:z,required:B,open:G,onOpenChange:K,panelLabel:w,"aria-label":P,"aria-describedby":H[`aria-describedby`],className:I,fields:m!==void 0&&/* @__PURE__ */ c(`input`,{type:`hidden`,name:m,value:U??``,disabled:z}),children:[/* @__PURE__ */ c(r,{value:U,onValueChange:q,min:D,max:O,isDateDisabled:k,weekStartsOn:A,locale:j,today:M}),/* @__PURE__ */ l(`div`,{className:`flex items-center justify-between border-t border-line pt-2`,children:[/* @__PURE__ */ c(`button`,{type:`button`,disabled:Y,onClick:()=>q(J),className:o,children:T}),!B&&/* @__PURE__ */ c(`button`,{type:`button`,disabled:U===null,onClick:()=>q(null),className:o,children:E})]})]})}export{u as DatePicker};