@endfield-ui/react 1.1.0 → 1.2.1

package/dist/components/play-button/PlayButton.d.ts

@@ -0,0 +1,20 @@
+
+import { ComponentProps } from "react";
+//#region src/components/play-button/PlayButton.d.ts
+export type PlayMarkSize = "sm" | "md" | "lg";
+export type PlayMarkProps = Omit<ComponentProps<"span">, "children"> & {
+  size?: PlayMarkSize;
+};
+/**
+ * 播放记号：只是一个记号，不能点，对读屏隐藏。
+ * 整张卡已经是一个链接时用它（媒体卡的 `video`）；要它自己能点用 `PlayButton`。
+ */
+export declare function PlayMark({ size, className, ...props }: PlayMarkProps): import("react").JSX.Element;
+export type PlayButtonProps = Omit<ComponentProps<"button">, "children" | "aria-label"> & {
+  /** 默认"播放"。一页有好几个时写明播的是什么 */
+  "aria-label"?: string;
+  size?: PlayMarkSize;
+};
+/** 播放钮：和播放记号同一个画法的按钮，给"点了就在原地播放"的封面用。 */
+export declare function PlayButton({ "aria-label": ariaLabel, size, type, disabled, className, ...props }: PlayButtonProps): import("react").JSX.Element;
+//#endregion

package/dist/components/play-button/PlayButton.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{TriangleRight as n}from"../../icons/TriangleRight.js";import{jsx as r}from"react/jsx-runtime";const i={sm:`size-6 [&_svg]:size-3`,md:`size-8 [&_svg]:size-4`,lg:`size-10 [&_svg]:size-5`},a=`inline-flex shrink-0 items-center justify-center rounded-xs bg-action text-on-action`;function o({size:t=`md`,className:o,...s}){return/* @__PURE__ */ r(`span`,{"aria-hidden":`true`,...s,"data-size":t,className:e(a,i[t],o),children:/* @__PURE__ */ r(n,{})})}function s({"aria-label":o=`播放`,size:s=`md`,type:c=`button`,disabled:l=!1,className:u,...d}){return/* @__PURE__ */ r(`button`,{...d,type:c,disabled:l,"aria-label":o,"data-size":s,className:e(`group relative`,a,i[s],`transition-colors duration-(--duration-fast) ease-standard`,t,s===`sm`&&`after:absolute after:-inset-2 after:content-['']`,l?`cursor-not-allowed bg-disabled text-on-disabled`:`active:bg-action-pressed`,u),children:/* @__PURE__ */ r(n,{className:e(`transition-[translate] duration-(--duration-base) ease-standard`,!l&&`group-hover:translate-x-0.5 group-active:translate-x-0.5`)})})}export{s as PlayButton,o as PlayMark};

package/dist/components/play-button/index.d.ts

@@ -0,0 +1,3 @@
+
+import { PlayButton, PlayButtonProps, PlayMark, PlayMarkProps, PlayMarkSize } from "./PlayButton.js";
+export { PlayButton, type PlayButtonProps, PlayMark, type PlayMarkProps, type PlayMarkSize };

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,36 @@
+
+import { ComponentProps, ReactElement, ReactNode } from "react";
+//#region src/components/popover/Popover.d.ts
+export type PopoverSide = "top" | "bottom" | "left" | "right";
+export type PopoverAlign = "start" | "center" | "end";
+export type PopoverProps = Omit<ComponentProps<"div">, "title" | "children" | "className" | "style"> & {
+  /** 触发按钮 */
+  trigger: ReactElement<Record<string, unknown>>;
+  /** 标题。有它时它就是面板的可访问名称；没有时自己传 `aria-label` */
+  title?: ReactNode;
+  /** 标题下的一行说明，会关联给读屏 */
+  description?: ReactNode;
+  /** 面板出现在触发按钮的哪一侧，放不下时自动翻到对面。默认 `bottom` */
+  side?: PopoverSide;
+  /** 和触发按钮的哪一边对齐。默认 `start` */
+  align?: PopoverAlign;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 给面板 */
+  className?: string;
+  children?: ReactNode;
+};
+/**
+ * 气泡卡片：点击触发、里面可以操作的一小块面板。不是模态——页面其余部分照常可用，
+ * 点别处、按 `Esc`、焦点移出去都会关。只是一句说明用 `Tooltip`，
+ * 必须做完才能继续的用 `Dialog`。
+ */
+export declare function Popover({ trigger, title, description, side, align, open, defaultOpen, onOpenChange, className, children, ...props }: PopoverProps): import("react").JSX.Element;
+export type PopoverCloseProps = {
+  /** 点了就关掉面板的按钮，比如"完成" */
+  children: ReactElement<Record<string, unknown>>;
+};
+/** 包住面板里"点了就关"的按钮。 */
+export declare function PopoverClose({ children }: PopoverCloseProps): import("react").JSX.Element;
+//#endregion

package/dist/components/popover/Popover.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{usePortalScope as t}from"../../hooks/usePortalScope.js";import{popoverPanel as n}from"./panel-style.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Popover as a}from"@base-ui/react/popover";function o({trigger:o,title:s,description:c,side:l=`bottom`,align:u=`start`,open:d,defaultOpen:f,onOpenChange:p,className:m,children:h,...g}){let{anchorRef:_,portalRef:v}=t();return/* @__PURE__ */ i(a.Root,{open:d,defaultOpen:f,onOpenChange:p&&(e=>p(e)),children:[/* @__PURE__ */ r(a.Trigger,{ref:_,render:o}),/* @__PURE__ */ r(a.Portal,{ref:v,children:/* @__PURE__ */ r(a.Positioner,{side:l,align:u,sideOffset:4,className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ i(a.Popup,{...g,className:e(n,m),children:[(s||c)&&/* @__PURE__ */ i(`div`,{className:`flex flex-col gap-1`,children:[s&&/* @__PURE__ */ r(a.Title,{className:`text-base font-bold`,children:s}),c&&/* @__PURE__ */ r(a.Description,{className:`text-ink-secondary`,children:c})]}),h]})})})]})}function s({children:e}){return/* @__PURE__ */ r(a.Close,{render:e})}export{o as Popover,s as PopoverClose};

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

@@ -0,0 +1,3 @@
+
+import { Popover, PopoverAlign, PopoverClose, PopoverCloseProps, PopoverProps, PopoverSide } from "./Popover.js";
+export { Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, type PopoverProps, type PopoverSide };

package/dist/components/popover/panel-style.js

@@ -0,0 +1,2 @@
+"use client";
+import{menuPanel as e}from"../dropdown-menu/menu-style.js";const t=[e,`flex w-max max-w-[min(20rem,var(--available-width))] flex-col gap-3 p-4 text-sm wrap-anywhere`],n=`text-base font-bold`,r=`text-ink-secondary`;export{r as popoverDescription,t as popoverPanel,n as popoverTitle};

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,27 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/progress/Progress.d.ts
+export type ProgressSize = "sm" | "md";
+export type ProgressProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 当前值。不传就是"不确定进度"：一段色块在轨道上往返 */
+  value?: number;
+  /** 最大值，默认 100；分段进度下默认等于段数 */
+  max?: number;
+  /** 步骤数明确时把轨道切成等长的小段，`value` 是已完成的段数 */
+  segments?: number;
+  /** 4px 细条或 8px 标准条 */
+  size?: ProgressSize;
+  /** 在右侧显示数值：百分比，分段时是 `3 / 6` */
+  showValue?: boolean;
+  /** 自定义数值的写法 */
+  formatValue?: (value: number, max: number) => ReactNode;
+  /** 入场时从左侧充填一次 */
+  animate?: boolean;
+};
+/**
+ * 进度：灰轨 + 黄填充。表示"完成了多少"；表示"数量有多少"用图表，那是蓝色的事。
+ *
+ * `className` 给外层，其余属性（`aria-label` 等）给带 `role="progressbar"` 的轨道。
+ */
+export declare function Progress({ value, max, segments, size, showValue, formatValue, animate, className, style, ...props }: ProgressProps): import("react").JSX.Element;
+//#endregion

package/dist/components/progress/Progress.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-1`,md:`h-2`},i=`bg-action forced-colors:bg-[Highlight]`,a=`bg-line forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[CanvasText]`;function o({value:o,max:s,segments:c,size:l=`md`,showValue:u=!1,formatValue:d,animate:f=!1,className:p,style:m,...h}){let g=c!==void 0&&c>0,_=s??(g?c:100),v=o===void 0,y=v?0:Math.min(Math.max(o,0),_),b=_>0?y/_:0,x;if(g){let n=Math.round(b*c);x=/* @__PURE__ */ t(`span`,{className:`flex h-full gap-1`,children:Array.from({length:c},(r,o)=>/* @__PURE__ */ t(`span`,{"data-done":o<n?``:void 0,className:e(`flex-1`,o<n?i:a)},o))})}else v?x=/* @__PURE__ */ t(`span`,{className:e(`absolute inset-y-0 left-0 w-2/5 animate-indeterminate`,`motion-reduce:translate-x-3/4`,i)}):b>0&&(x=/* @__PURE__ */ t(`span`,{className:e(`absolute inset-y-0 left-0 transition-[width] duration-(--duration-base) ease-standard`,f&&`origin-left animate-fill`,i),style:{width:`${b*100}%`}}));let S=null;return u&&!v&&(S=d?d(y,_):g?`${y} / ${_}`:`${Math.round(b*100)}%`),/* @__PURE__ */ n(`div`,{className:e(`flex items-center gap-3 text-ink`,p),style:m,"data-size":l,children:[/* @__PURE__ */ t(`div`,{role:`progressbar`,"aria-valuemin":0,"aria-valuemax":_,"aria-valuenow":v?void 0:y,"aria-valuetext":g&&!v?`${y} / ${_}`:void 0,...h,className:e(`relative min-w-0 flex-1`,r[l],!g&&a),children:x}),S!==null&&/* @__PURE__ */ t(`span`,{className:`min-w-[4ch] shrink-0 text-right font-tech text-sm leading-none font-bold tabular-nums`,children:S})]})}export{o as Progress};

package/dist/components/progress/ProgressRing.d.ts

@@ -0,0 +1,23 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/progress/ProgressRing.d.ts
+export type ProgressRingProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 当前值。不传就是"不确定进度"：一段弧匀速旋转 */
+  value?: number;
+  /** 最大值，默认 100 */
+  max?: number;
+  /** 直径，像素，默认 48 */
+  size?: number;
+  /** 线宽，像素，缺省取直径的 9% */
+  thickness?: number;
+  /** 在中心显示百分比的数值，不带 `%` */
+  showValue?: boolean;
+  /** 中心的内容：图标或头像。传了就不显示数值 */
+  children?: ReactNode;
+};
+/**
+ * 进度环：细圆环轨道 + 从 12 点方向顺时针的黄弧。用在紧凑的位置，或者围住一个头像、图标。
+ * 取色与 `Progress` 相同；需要名称时传 `aria-label`。
+ */
+export declare function ProgressRing({ value, max, size, thickness, showValue, className, style, children, ...props }: ProgressRingProps): import("react").JSX.Element;
+//#endregion

package/dist/components/progress/ProgressRing.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{Fragment as t,jsx as n,jsxs as r}from"react/jsx-runtime";const i=`stroke-action forced-colors:stroke-[Highlight]`;function a({value:a,max:o=100,size:s=48,thickness:c,showValue:l=!1,className:u,style:d,children:f,...p}){let m=c??Math.max(2,Math.round(s*.09)),h=(s-m)/2,g=2*Math.PI*h,_=a===void 0,v=_?0:Math.min(Math.max(a,0),o),y=o>0?v/o:0,b={cx:s/2,cy:s/2,r:h,fill:`none`,strokeWidth:m},x=null;_?x=/* @__PURE__ */ r(t,{children:[/* @__PURE__ */ n(`circle`,{...b,className:e(`origin-center animate-spin motion-reduce:hidden`,i),strokeDasharray:`${g/4} ${g}`}),/* @__PURE__ */ n(`circle`,{...b,className:e(`hidden motion-reduce:block`,i),strokeDasharray:`${m} ${m*2}`})]}):y>0&&(x=/* @__PURE__ */ n(`circle`,{...b,className:e(`transition-[stroke-dashoffset] duration-(--duration-base) ease-standard`,i),strokeDasharray:g,strokeDashoffset:g*(1-y)}));let S=null;return f===void 0?l&&!_&&(S=/* @__PURE__ */ n(`span`,{className:`relative font-tech leading-none font-bold tabular-nums`,style:{fontSize:Math.round(s*.3)},children:Math.round(y*100)})):S=/* @__PURE__ */ n(`span`,{className:`relative flex items-center justify-center`,children:f}),/* @__PURE__ */ r(`div`,{role:`progressbar`,"aria-valuemin":0,"aria-valuemax":o,"aria-valuenow":_?void 0:v,...p,className:e(`relative inline-flex shrink-0 items-center justify-center text-ink`,u),style:{width:s,height:s,...d},children:[/* @__PURE__ */ r(`svg`,{width:s,height:s,viewBox:`0 0 ${s} ${s}`,"aria-hidden":`true`,className:`absolute inset-0 -rotate-90`,children:[/* @__PURE__ */ n(`circle`,{...b,className:`stroke-line forced-colors:stroke-[CanvasText] forced-colors:stroke-1`}),x]}),S]})}export{a as ProgressRing};

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

@@ -0,0 +1,4 @@
+
+import { Progress, ProgressProps, ProgressSize } from "./Progress.js";
+import { ProgressRing, ProgressRingProps } from "./ProgressRing.js";
+export { Progress, type ProgressProps, ProgressRing, type ProgressRingProps, type ProgressSize };

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,33 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/radio/Radio.d.ts
+export type RadioGroupOrientation = "vertical" | "horizontal";
+export type RadioGroupProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
+  /** 受控的当前值 */
+  value?: string;
+  /** 非受控时的初始值 */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** 表单提交用的字段名，缺省自动生成 */
+  name?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** 竖排（默认）或横排 */
+  orientation?: RadioGroupOrientation;
+};
+/**
+ * 单选组。方向键在组内移动并选中，这是原生单选的行为，组件不另外处理。
+ * 标签用 `<Field group label="…">` 包住它，或者自己传 `aria-label`。
+ */
+export declare function RadioGroup({ value, defaultValue, onValueChange, name, disabled: disabledProp, required: requiredProp, orientation, className, ...props }: RadioGroupProps): import("react").JSX.Element;
+export type RadioProps = Omit<ComponentProps<"input">, "type" | "size" | "value"> & {
+  value: string;
+  /** 右侧的文字标签。不传时必须自己给 `aria-label` */
+  children?: ReactNode;
+};
+/**
+ * 单选框，放在 `RadioGroup` 里。`className` 给整行，其余属性与 `ref` 给 `<input>`。
+ * 脱离 `RadioGroup` 时就是一个原生单选，自己管 `name` 与 `checked`。
+ */
+export declare function Radio({ value, disabled, onChange, className, children, ...props }: RadioProps): import("react").JSX.Element;
+//#endregion

package/dist/components/radio/Radio.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{createLazyContext as n}from"../../lib/create-lazy-context.js";import{useControllableState as r}from"../../hooks/useControllableState.js";import{choiceBox as i,choiceControl as a,choiceFrame as o,choiceLabel as s,choiceMark as c}from"../checkbox/choice-style.js";import{useFieldContext as l}from"../field/Field.js";import{useContext as u,useId as d,useMemo as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";const h=/* @__PURE__ */ n(null);function g({value:t,defaultValue:n,onValueChange:i,name:a,disabled:o,required:s,orientation:c=`vertical`,className:u,...m}){let g=h(),_=l(),v=d(),[y,b]=r({value:t,defaultValue:n,onChange:e=>{e!==void 0&&i?.(e)}}),x=o??_?.disabled??!1,S=s??_?.required??!1,C=_?.invalid??!1,w=a??v,T=f(()=>({name:w,value:y,select:b,disabled:x,required:S,invalid:C}),[w,y,b,x,S,C]);return/* @__PURE__ */ p(g.Provider,{value:T,children:/* @__PURE__ */ p(`div`,{role:`radiogroup`,"aria-labelledby":_&&!_.group?_.labelId:void 0,"aria-describedby":_?.describedBy,"aria-invalid":C||void 0,"aria-required":S||void 0,"aria-disabled":x||void 0,...m,"data-orientation":c,className:e(`flex`,c===`vertical`?`flex-col`:`flex-wrap gap-x-6`,u)})})}function _({value:n,disabled:r,onChange:l,className:d,children:f,...g}){let _=u(h()),v=e=>{l?.(e),e.target.checked&&_?.select(n)},y=_?{name:_.name,checked:_.value===n,required:_.required,"aria-invalid":_.invalid||void 0}:{};return/* @__PURE__ */ m(`label`,{className:e(s,d),children:[/* @__PURE__ */ p(`span`,{className:a,children:/* @__PURE__ */ m(`span`,{className:o,children:[/* @__PURE__ */ p(`input`,{...g,...y,type:`radio`,value:n,disabled:r??_?.disabled,onChange:v,className:e(i,`rounded-full choice-diamond:rounded-none`,t)}),/* @__PURE__ */ p(`span`,{"aria-hidden":`true`,className:e(c,`size-2 rounded-full bg-accent-ink-inverse peer-checked:opacity-100 peer-disabled:bg-ink-disabled choice-diamond:hidden`,`forced-colors:bg-[HighlightText] forced-colors:peer-disabled:bg-[GrayText]`)})]})}),f!==void 0&&/* @__PURE__ */ p(`span`,{className:`min-w-0`,children:f})]})}export{_ as Radio,g as RadioGroup};

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

@@ -0,0 +1,3 @@
+
+import { Radio, RadioGroup, RadioGroupOrientation, RadioGroupProps, RadioProps } from "./Radio.js";
+export { Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps };

package/dist/components/rec-indicator/RecIndicator.d.ts

@@ -0,0 +1,16 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/rec-indicator/RecIndicator.d.ts
+export type RecIndicatorProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 方括号里的字，默认 `REC`；直播、实时数据可以写 `LIVE` */
+  label?: ReactNode;
+  /** 红点硬切明灭，默认开。关掉后红点常亮 */
+  blink?: boolean;
+};
+/**
+ * 录制指示：一个红点 + `[ REC ]`。
+ * 只在确有"进行中"的语义时用（正在录制、直播中、实时数据），不要当氛围装饰——
+ * 红色在这套语言里是危险与紧急。
+ */
+export declare function RecIndicator({ label, blink, className, ...props }: RecIndicatorProps): import("react").JSX.Element;
+//#endregion

package/dist/components/rec-indicator/RecIndicator.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({label:r=`REC`,blink:i=!0,className:a,...o}){return/* @__PURE__ */ n(`span`,{...o,className:e(`inline-flex items-center gap-1 font-tech text-xs leading-none font-medium whitespace-nowrap text-ink uppercase`,a),children:[/* @__PURE__ */ t(`span`,{"aria-hidden":`true`,className:e(`mr-0.5 size-2 shrink-0 rounded-full bg-alert`,i&&`animate-blink`)}),/* @__PURE__ */ t(`span`,{"aria-hidden":`true`,className:`text-ink-tertiary`,children:`[`}),/* @__PURE__ */ t(`span`,{children:r}),/* @__PURE__ */ t(`span`,{"aria-hidden":`true`,className:`text-ink-tertiary`,children:`]`})]})}export{r as RecIndicator};

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

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

package/dist/components/registration-strip/RegistrationStrip.d.ts

@@ -0,0 +1,16 @@
+
+import { ComponentProps } from "react";
+//#region src/components/registration-strip/RegistrationStrip.d.ts
+export type RegistrationStripOrientation = "horizontal" | "vertical";
+export type RegistrationStripProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 横条高 3px、每段 64px；竖条是三段 6 × 14px 叠放 */
+  orientation?: RegistrationStripOrientation;
+  /** 横条后面接一段灰线、撑满容器：用作名称下方的分隔线 */
+  rule?: boolean;
+};
+/**
+ * 注册色条：品红、青、黄三段的微条，印刷品语气的点缀。
+ * 纯装饰，不承担任何数据或状态含义；一个版块最多一处，离图表远一点。
+ */
+export declare function RegistrationStrip({ orientation, rule, className, ...props }: RegistrationStripProps): import("react").JSX.Element;
+//#endregion

package/dist/components/registration-strip/RegistrationStrip.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{decor as t}from"../../lib/decor.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=[`bg-reg-magenta`,`bg-reg-cyan`,`bg-reg-yellow`];function a({orientation:a=`horizontal`,rule:o=!1,className:s,...c}){let l=a===`vertical`;return/* @__PURE__ */ r(`div`,{...c,"aria-hidden":`true`,"data-orientation":a,className:e(t,l?`inline-flex flex-col`:[`flex h-[3px] max-w-full`,o&&`w-full`],s),children:[i.map(t=>/* @__PURE__ */ n(`span`,{className:e(t,l?`h-3.5 w-1.5`:`w-16 min-w-0`)},t)),o&&!l&&/* @__PURE__ */ n(`span`,{className:`min-w-0 flex-1 bg-line`})]})}export{a as RegistrationStrip};

package/dist/components/registration-strip/index.d.ts

@@ -0,0 +1,3 @@
+
+import { RegistrationStrip, RegistrationStripOrientation, RegistrationStripProps } from "./RegistrationStrip.js";
+export { RegistrationStrip, type RegistrationStripOrientation, type RegistrationStripProps };

package/dist/components/rolling-number/RollingNumber.d.ts

@@ -0,0 +1,25 @@
+
+import { ComponentProps } from "react";
+//#region src/components/rolling-number/RollingNumber.d.ts
+export type RollingNumberProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 终值 */
+  value: number;
+  /**
+   * 把数值写成字。默认带千分位（`1,280`），小数位数跟着 `value`。
+   * 滚的过程中每一帧都会调它
+   */
+  format?: (value: number) => string;
+  /** 进入视口时从 0 滚到终值，一次。默认开启 */
+  animate?: boolean;
+};
+/**
+ * 滚动数字：进入视口时从 0 滚到终值，只滚一次。放进 `Stat` 的 `value` 里，
+ * 或者任何"一个需要被一眼看到的数字"的地方。等宽数字由所在处给（`tabular-nums`）。
+ *
+ * - 读屏只读终值：终值一直在，滚的时候只是看不见；滚动的那一份对读屏隐藏。
+ * - 宽度由终值占着，滚的时候旁边的东西不动。
+ * - 服务端渲染出来的、打印出来的、"减少动态效果"下的，都直接是终值。
+ * - 值后来变了直接换，不再滚。
+ */
+export declare function RollingNumber({ value, format, animate, className, ref, ...props }: RollingNumberProps): import("react").JSX.Element;
+//#endregion

package/dist/components/rolling-number/RollingNumber.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{useReducedMotion as r}from"../../hooks/useReducedMotion.js";import{useEffect as i,useState as a,useSyncExternalStore as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(e){if(!e)return 600;let t=getComputedStyle(e).getPropertyValue(`--duration-slower`),n=Number.parseFloat(t);return!Number.isFinite(n)||n<=0?600:t.trim().endsWith(`ms`)?n:n*1e3}const u=e=>1-(1-e)**3;function d(e){let t=new Intl.NumberFormat(`en-US`,{maximumFractionDigits:20,useGrouping:!1}).format(e).split(`.`)[1];return t?t.length:0}const f=()=>()=>{};function p({value:p,format:m,animate:h=!0,className:g,ref:_,...v}){let y=d(p),b=m??(e=>e.toLocaleString(`en-US`,{minimumFractionDigits:y,maximumFractionDigits:y})),x=o(f,()=>!0,()=>!1),S=r(),[C,w]=a(!1),[T,E]=a(0),D=x&&h&&!S&&!C,[O,k]=n({disabled:!D});return i(()=>{if(!D||!k)return;let e=l(O.current),t,n=requestAnimationFrame(function r(i){t??=i;let a=Math.min((i-t)/e,1);a>=1?w(!0):(E(Number((p*u(a)).toFixed(y))),n=requestAnimationFrame(r))});return()=>cancelAnimationFrame(n)},[D,k,O,p,y]),/* @__PURE__ */ c(`span`,{...v,ref:t(O,_),"data-rolling":D?``:void 0,className:e(D&&`relative inline-block`,g),children:[/* @__PURE__ */ s(`span`,{className:D?`opacity-0 print:opacity-100`:void 0,children:b(p)}),D&&/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:`absolute inset-0 print:hidden`,children:b(T)})]})}export{p as RollingNumber};

package/dist/components/rolling-number/index.d.ts

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

package/dist/components/schedule/Schedule.d.ts

@@ -0,0 +1,78 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactNode } from "react";
+//#region src/components/schedule/Schedule.d.ts
+export type ScheduleProps = Omit<ComponentProps<"div">, "aria-label"> & {
+  /** 这张排期的名称。横向能滚动时，滚动的那一块用它 */
+  label: string;
+  /** 第一天，`YYYY-MM-DD` */
+  start: string;
+  /** 最后一天（包含） */
+  end: string;
+  /**
+   * 哪几天是日期锚：压在轴条上的日期块，往下带一条引线。
+   * 默认是第一天和范围内每个月的 1 号
+   */
+  anchors?: readonly string[];
+  /** 今天：画一条竖线。不传就不画 */
+  today?: string;
+  /** 一天至少多宽，像素。默认 32。容器够宽时各列平分多出来的宽度 */
+  dayWidth?: number;
+  /** 读屏听到的日期按它写。默认 `zh-CN` */
+  locale?: string;
+  /**
+   * 读屏听到的起止日期怎么说。默认"10月3日至10月12日"，只有一天时是"10月5日"。
+   * 换了 `locale` 一般也要换它
+   */
+  describeRange?: (start: string, end: string) => string;
+  /** `ScheduleTrack` */
+  children?: ReactNode;
+};
+/**
+ * 排期：横向的时间轨图。条目从起始日的位置开始，长度就是持续时间。
+ * 最小单位是天。放不下时在自己的容器里横向滚动。
+ */
+export declare function Schedule({ label, start, end, anchors: anchorsProp, today, dayWidth, locale, describeRange, className, style, children, ...props }: ScheduleProps): import("react").JSX.Element;
+export type ScheduleTrackProps = Omit<ComponentProps<"section">, "aria-label"> & {
+  /** 类目的名称：竖轨上的字，也是这条轨的可访问名称 */
+  label: string;
+  /** 竖轨上的图标 */
+  icon?: ReactNode;
+  /** 直接放 `ScheduleItem` */
+  children?: ReactNode;
+};
+/**
+ * 一条轨：一个类目的条目排在一行里，时间重叠的自动错到下一行。
+ * 竖轨的颜色用 `className="[--track-color:…] [--track-ink:…]"` 换。
+ */
+export declare function ScheduleTrack({ label, icon, className, children, ...props }: ScheduleTrackProps): import("react").JSX.Element;
+export type ScheduleItemVariant = "banner" | "system";
+type ItemOwnProps = {
+  /** 第一天，`YYYY-MM-DD` */
+  start: string;
+  /** 最后一天（包含） */
+  end: string;
+  /** 名称 */
+  title: ReactNode;
+  /** 类型小标签：右上角的白底描边小块。只有 `banner` 有 */
+  type?: ReactNode;
+  /**
+   * - `banner` 活动：浅底，可以垫一张图，左上是墨色的名称块，默认；
+   * - `system` 系统类：炭灰底 + 行动色侧签 + 一条虚线，不带图。
+   */
+  variant?: ScheduleItemVariant;
+  /** 垫在条目下面的图，铺满并裁切。只有 `banner` 有 */
+  media?: ReactNode;
+  /** 传了名称就是一个链接，点击范围铺满整个条目 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type ScheduleItemProps = ItemOwnProps & Omit<ComponentProps<"li">, keyof ItemOwnProps | "children">;
+/** 排期里的一个条目。直接放在 `ScheduleTrack` 里。 */
+export declare function ScheduleItem({ start, end, title, type, variant, media, href, target, rel, render, onClick, className, style, ...props }: ScheduleItemProps): import("react").JSX.Element | null;
+//#endregion
+export {};

package/dist/components/schedule/Schedule.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRingInset as t}from"../../lib/focus-ring.js";import{createLazyContext as n}from"../../lib/create-lazy-context.js";import{LinkElement as r}from"../link-element/LinkElement.js";import{dateParts as i,daysBetween as a,eachDay as o,toDateObject as s}from"../../lib/date.js";import{decor as c}from"../../lib/decor.js";import{Tag as l}from"../tag/Tag.js";import{useOverflowing as u}from"../../hooks/useOverflowing.js";import{useContext as d,useMemo as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";const g=/* @__PURE__ */ n(null);function _(e){let t=d(g());if(!t)throw Error(`${e} 要放在 Schedule 里面`);return t}const v=e=>String(e).padStart(2,`0`),y=`grid grid-cols-[repeat(var(--schedule-days),minmax(var(--schedule-day),1fr))]`,b=`w-12`,x=`left-12`;function S({label:n,start:r,end:d,anchors:p,today:_,dayWidth:S=32,locale:C=`zh-CN`,describeRange:w,className:T,style:E,children:D,...O}){let k=g(),[A,j]=u(),M=f(()=>o(r,d),[r,d]),N=M.length,P=f(()=>new Set(p??M.filter((e,t)=>t===0||i(e).day===1)),[p,M]),F=f(()=>{let e=new Intl.DateTimeFormat(C,{timeZone:`UTC`,month:`long`,day:`numeric`}),t=t=>e.format(s(t));return{start:r,days:N,describe:w??((e,n)=>e===n?t(e):`${t(e)}至${t(n)}`)}},[r,N,C,w]),I=e=>a(r,e)+1,L=_!==void 0&&_>=r&&_<=d?I(_):null;return/* @__PURE__ */ m(k.Provider,{value:F,children:/* @__PURE__ */ m(`div`,{ref:A,...O,"data-overflowing":j.x?``:void 0,...j.x&&{role:`region`,"aria-label":n,tabIndex:0},style:{"--schedule-days":N,"--schedule-day":`${S}px`,...E},className:e(`isolate overflow-x-auto text-ink [--schedule-surface:var(--ef-surface)]`,t,T),children:/* @__PURE__ */ h(`div`,{role:j.x?void 0:`group`,"aria-label":j.x?void 0:n,className:`relative w-[calc(3rem+var(--schedule-days)*var(--schedule-day))] min-w-full`,children:[/* @__PURE__ */ m(`div`,{"aria-hidden":`true`,className:e(c,`absolute inset-y-0 right-0 bg-surface-sunken hatch`,x)}),/* @__PURE__ */ m(`div`,{"aria-hidden":`true`,className:e(c,`absolute inset-y-0 right-0`,x,y),children:[...P].map(e=>/* @__PURE__ */ m(`span`,{style:{gridColumn:I(e)},className:`row-start-1 border-l border-dashed border-line-strong`},e))}),/* @__PURE__ */ h(`div`,{"aria-hidden":`true`,className:`relative flex`,children:[/* @__PURE__ */ m(`div`,{className:e(`sticky left-0 z-3 shrink-0 bg-(--schedule-surface)`,b)}),/* @__PURE__ */ m(`div`,{className:e(`h-8 flex-1 items-center bg-surface-muted`,y),children:M.map((e,t)=>{if(P.has(e)){let{month:t,day:n}=i(e);return/* @__PURE__ */ m(l,{variant:`inverse`,size:`sm`,numeric:!0,marked:!0,"data-anchor":e,className:`z-1 justify-self-start`,children:`${v(t)}.${v(n)}`},e)}let n=t>0&&P.has(M[t-1]);return/* @__PURE__ */ m(`span`,{className:`text-center font-tech text-micro text-ink-tertiary tabular-nums`,children:n?null:i(e).day},e)})})]}),/* @__PURE__ */ m(`div`,{className:`relative flex flex-col gap-1 pt-1`,children:D}),L!==null&&/* @__PURE__ */ m(`div`,{"aria-hidden":`true`,className:e(`pointer-events-none absolute inset-y-0 right-0 z-2 select-none print:hidden`,x,y),children:/* @__PURE__ */ m(`span`,{"data-today":``,style:{gridColumn:L},className:`row-start-1 border-l-2 border-accent-ink forced-colors:border-[Highlight]`})})]})})})}function C({label:t,icon:n,className:r,children:i,...a}){return _(`ScheduleTrack`),/* @__PURE__ */ h(`section`,{...a,"aria-label":t,className:e(`flex [--track-color:var(--ef-surface-inverse)] [--track-ink:var(--ef-ink-inverse)]`,r),children:[/* @__PURE__ */ h(`div`,{"aria-hidden":`true`,className:e(`sticky left-0 z-3 flex shrink-0 flex-col items-center gap-2 bg-(--track-color) py-2 text-(--track-ink)`,`border-r-4 border-(--schedule-surface)`,b),children:[n&&/* @__PURE__ */ m(`span`,{className:`flex size-4 shrink-0 items-center justify-center [&_svg]:size-4`,children:n}),/* @__PURE__ */ m(`span`,{className:`text-xs leading-none font-medium tracking-label [writing-mode:vertical-rl]`,children:t})]}),/* @__PURE__ */ m(`ul`,{className:e(`min-h-12 flex-1 grid-flow-row-dense auto-rows-[3rem] gap-y-1`,y),children:i})]})}function w({start:t,end:n,title:i,type:o,variant:s=`banner`,media:c,href:u,target:d,rel:f,render:g,onClick:v,className:y,style:b,...x}){let S=_(`ScheduleItem`),C=a(S.start,t),w=a(S.start,n);if(w<0||C>=S.days||w<C)return null;let T=Math.max(C,0)+1,E=Math.min(w,S.days-1)+2,D=u!==void 0||g!==void 0,O=s===`banner`,k=D?/* @__PURE__ */ m(r,{render:g,href:u,target:d,rel:f,onClick:v,className:`outline-none after:absolute after:inset-0 after:content-['']`,children:i}):i;return/* @__PURE__ */ h(`li`,{...x,"data-variant":s,"data-clipped-start":C<0?``:void 0,"data-clipped-end":w>=S.days?``:void 0,style:{gridColumn:`${T} / ${E}`,...b},className:e(`@container relative isolate flex min-w-0 overflow-clip text-sm`,`has-focus-visible:outline-2 has-focus-visible:-outline-offset-2 has-focus-visible:outline-focus`,`forced-colors:border forced-colors:border-[CanvasText]`,O?`items-start justify-between gap-2 bg-surface-muted p-2`:`items-center gap-2 bg-control pr-2 text-on-control`,y),children:[O?/* @__PURE__ */ h(p,{children:[c&&/* @__PURE__ */ m(`div`,{"aria-hidden":`true`,className:`absolute inset-0 -z-10 *:size-full *:object-cover`,children:c}),/* @__PURE__ */ m(`span`,{className:`flex h-6 max-w-full min-w-0 items-center bg-surface-inverse px-2 font-medium text-ink-inverse`,children:/* @__PURE__ */ m(`span`,{className:`truncate`,children:k})}),o&&/* @__PURE__ */ m(l,{variant:`outline`,size:`sm`,className:`@max-[10rem]:hidden`,children:o})]}):/* @__PURE__ */ h(p,{children:[/* @__PURE__ */ m(`span`,{"aria-hidden":`true`,className:`w-1.5 shrink-0 self-stretch bg-action`}),/* @__PURE__ */ m(`span`,{className:`min-w-0 truncate font-medium`,children:k}),/* @__PURE__ */ m(`span`,{"aria-hidden":`true`,className:`min-w-4 flex-1 border-t border-dashed border-action`})]}),/* @__PURE__ */ m(`span`,{className:`sr-only`,children:`，${S.describe(t,n)}`})]})}export{S as Schedule,w as ScheduleItem,C as ScheduleTrack};

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

@@ -0,0 +1,3 @@
+
+import { Schedule, ScheduleItem, ScheduleItemProps, ScheduleItemVariant, ScheduleProps, ScheduleTrack, ScheduleTrackProps } from "./Schedule.js";
+export { Schedule, ScheduleItem, type ScheduleItemProps, type ScheduleItemVariant, type ScheduleProps, ScheduleTrack, type ScheduleTrackProps };

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,26 @@
+
+import { CSSProperties, ComponentProps, Ref } from "react";
+//#region src/components/scroll-area/ScrollArea.d.ts
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+export type ScrollAreaProps = Omit<ComponentProps<"div">, "aria-label" | "className" | "style" | "ref"> & {
+  /** 这一块是什么。能滚的时候它是一个能聚焦的区域，读屏听到的就是这个名称 */
+  "aria-label": string;
+  /** 哪个方向能滚，默认 `vertical`。只管一个方向时，另一个方向滚不了 */
+  orientation?: ScrollAreaOrientation;
+  /** 真正在滚的那个元素：给页内目录、回到顶部的 `target` */
+  viewportRef?: Ref<HTMLDivElement>;
+  /** 给外框：高度或者高度上限写在这里 */
+  className?: string;
+  style?: CSSProperties;
+  /** 给外框 */
+  ref?: Ref<HTMLDivElement>;
+};
+/**
+ * 滚动区：一块自己能滚的区域，滚动条是画出来的。高度（或高度上限）由 `className` 给。
+ * 只有真的溢出时才有滚动条，也才是一个能聚焦的区域。
+ *
+ * 整页的滚动留给浏览器，不要把页面主体包进来。
+ * `className` 与 `ref` 给外框，其余属性（`onScroll` 等）给真正在滚的可视区。
+ */
+export declare function ScrollArea({ "aria-label": label, orientation, viewportRef, className, style, ref, children, ...props }: ScrollAreaProps): import("react").JSX.Element;
+//#endregion

package/dist/components/scroll-area/ScrollArea.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRingInset as t}from"../../lib/focus-ring.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{ScrollArea as i}from"@base-ui/react/scroll-area";const a={vertical:`w-3 before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-line`,horizontal:`h-3 before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-line`},o={vertical:`w-full before:inset-y-0 before:left-1/2 before:w-[3px] before:-translate-x-1/2`,horizontal:`h-full before:inset-x-0 before:top-1/2 before:h-[3px] before:-translate-y-1/2`};function s({orientation:t}){return/* @__PURE__ */ n(i.Scrollbar,{orientation:t,className:e(`group/bar flex`,a[t]),children:/* @__PURE__ */ n(i.Thumb,{className:e(`relative before:absolute before:bg-ink-secondary before:content-['']`,`before:transition-colors before:duration-(--duration-fast) before:ease-standard`,`group-hover/bar:before:bg-ink active:before:bg-ink`,`forced-colors:before:bg-[CanvasText]`,o[t])})})}function c({"aria-label":a,orientation:o=`vertical`,viewportRef:c,className:l,style:u,ref:d,children:f,...p}){let m=o!==`horizontal`,h=o!==`vertical`;return/* @__PURE__ */ r(i.Root,{ref:d,style:u,"data-scroll-area":``,"data-orientation":o,className:e(`flex min-h-0 min-w-0 flex-col text-ink`,l),children:[/* @__PURE__ */ n(i.Viewport,{...p,ref:c,style:o===`vertical`?{overflowX:`hidden`}:o===`horizontal`?{overflowY:`hidden`}:void 0,className:e(`min-h-0 flex-auto`,t,m&&`data-has-overflow-y:mr-3`,h&&`data-has-overflow-x:mb-3`),render:(e,t)=>{let r=m&&t.hasOverflowY||h&&t.hasOverflowX;return/* @__PURE__ */ n(`div`,{...e,...r&&{role:`region`,"aria-label":a},tabIndex:r?0:-1})},children:/* @__PURE__ */ n(i.Content,{children:f})}),m&&/* @__PURE__ */ n(s,{orientation:`vertical`}),h&&/* @__PURE__ */ n(s,{orientation:`horizontal`}),o===`both`&&/* @__PURE__ */ n(i.Corner,{})]})}export{c as ScrollArea};

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,3 @@
+
+import { ScrollArea, ScrollAreaOrientation, ScrollAreaProps } from "./ScrollArea.js";
+export { ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps };

package/dist/components/scroll-hint/ScrollHint.d.ts

@@ -0,0 +1,23 @@
+
+import { ComponentProps, ReactNode, RefObject } from "react";
+//#region src/components/scroll-hint/ScrollHint.d.ts
+export type ScrollHintVariant = "line" | "chevron";
+export type ScrollHintProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 上方的小字，默认 `SCROLL` */
+  label?: ReactNode;
+  /**
+   * - `line` 一条细竖线 + 一个下坠的光点，默认；
+   * - `chevron` 一个下坠的折线箭头，窄屏用。
+   */
+  variant?: ScrollHintVariant;
+  /** 看哪个滚动容器。不传就是整个页面 */
+  target?: RefObject<HTMLElement | null>;
+  /** 滚过多少像素算"已经开始滚动"，默认 8 */
+  threshold?: number;
+};
+/**
+ * 滚动提示：只在确实还能往下滚、并且还没开始滚的时候出现，滚动开始后淡出。
+ * 纯装饰，对读屏隐藏；位置由使用方定（首屏底部居中或右下）。
+ */
+export declare function ScrollHint({ label, variant, target, threshold, className, ...props }: ScrollHintProps): import("react").JSX.Element;
+//#endregion

package/dist/components/scroll-hint/ScrollHint.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{ChevronDown as t}from"../../icons/ChevronDown.js";import{useScrollPosition as n}from"../../hooks/useScrollPosition.js";import{useCallback as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o({label:o=`SCROLL`,variant:s=`line`,target:c,threshold:l=8,className:u,...d}){let f=r(({scrolled:e,room:t})=>t>l&&e<=l,[l]),p=n(c,f,!1);return/* @__PURE__ */ a(`div`,{"aria-hidden":`true`,...d,"data-visible":p?``:void 0,className:e(`pointer-events-none inline-flex flex-col items-center gap-2 text-ink-secondary`,`transition-opacity duration-(--duration-base) ease-standard`,p?`opacity-100`:`opacity-0`,u),children:[/* @__PURE__ */ i(`span`,{className:`font-tech text-micro tracking-label uppercase`,children:o}),s===`line`?/* @__PURE__ */ i(`span`,{className:`relative h-10 w-px bg-line-strong`,children:/* @__PURE__ */ i(`span`,{className:`absolute top-0 -left-[2.5px] size-1.5 animate-scroll-hint rounded-full bg-accent-ink`})}):/* @__PURE__ */ i(t,{size:16,className:`animate-scroll-hint text-accent-ink`})]})}export{o as ScrollHint};

package/dist/components/scroll-hint/index.d.ts

@@ -0,0 +1,3 @@
+
+import { ScrollHint, ScrollHintProps, ScrollHintVariant } from "./ScrollHint.js";
+export { ScrollHint, type ScrollHintProps, type ScrollHintVariant };

package/dist/components/section-title/SectionTitle.d.ts

@@ -0,0 +1,33 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/section-title/SectionTitle.d.ts
+export type SectionTitleVariant = "standard" | "plain" | "band" | "side";
+export type SectionTitleProps = Omit<ComponentProps<"header">, "title"> & {
+  /**
+   * - `standard` 灰色滑块 + 斜箭头 + 英文，下接中文。版块的第一级标题，默认；
+   * - `plain` 只留标题和左侧一条短竖条。文档、设置这类工具页面；
+   * - `band` 通栏信号黄色带。亮暗版块之间的过渡，一页最多一到两条；
+   * - `side` 竖排侧签。贴在横向展开的版块左缘，窄屏下回到横排。
+   */
+  variant?: SectionTitleVariant;
+  /** 真正的标题文字 */
+  children: ReactNode;
+  /** 英文结构层：`standard` 的栏目名、`side` 的大字。写真实的栏目名 */
+  latin?: ReactNode;
+  /** `band` 主题上方的小号副题 */
+  subtitle?: ReactNode;
+  /** `standard` 顶部的微文字行，如 `// 新闻　2026.10.08` */
+  meta?: ReactNode;
+  /** 标题层级，默认 2（`<h2>`） */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** `standard` 进入视口时播放一次入场，默认开启 */
+  animate?: boolean;
+  /** 英文只是标题的翻译时对读屏隐藏，避免重复朗读。默认隐藏 */
+  latinHidden?: boolean;
+  /** `side` 的底色：`accent` 信号黄，`muted` 浅灰 */
+  tone?: "accent" | "muted";
+  /** `band` 与 `side` 的线稿插图位，纯装饰 */
+  illustration?: ReactNode;
+};
+export declare function SectionTitle({ variant, children, latin, subtitle, meta, level, animate, latinHidden, tone, illustration, className, ref: forwardedRef, ...props }: SectionTitleProps): import("react").JSX.Element;
+//#endregion

package/dist/components/section-title/SectionTitle.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{useInView as t}from"../../hooks/useInView.js";import{ArrowCorner as n}from"../../icons/ArrowCorner.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";function a({variant:a=`standard`,children:o,latin:s,subtitle:c,meta:l,level:u=2,animate:d=!0,latinHidden:f=!0,tone:p=`accent`,illustration:m,className:h,ref:g,..._}){let v=`h${u}`,y=a===`standard`&&d,[b,x]=t({disabled:!y}),S=e=>{b.current=e,typeof g==`function`?g(e):g&&(g.current=e)};if(a===`plain`)return/* @__PURE__ */ i(`header`,{..._,ref:S,className:e(`flex items-center gap-3`,h),children:[/* @__PURE__ */ r(`span`,{"aria-hidden":`true`,className:`h-6 w-1 shrink-0 bg-ink`}),/* @__PURE__ */ r(v,{className:`min-w-0 text-2xl font-bold wrap-anywhere text-ink`,children:o})]});if(a===`band`)return/* @__PURE__ */ r(`header`,{..._,ref:S,className:e(`@container bg-action text-on-action`,h),children:/* @__PURE__ */ i(`div`,{className:`flex min-h-16 items-center gap-4 px-4 py-4 @md:min-h-24 @md:gap-6 @md:px-10`,children:[m&&/* @__PURE__ */ r(`div`,{"aria-hidden":`true`,className:`hidden shrink-0 @sm:block`,children:m}),/* @__PURE__ */ i(`div`,{className:`min-w-0`,children:[c&&/* @__PURE__ */ r(`p`,{className:`font-latin text-base leading-tight font-light wrap-anywhere uppercase @md:text-lg`,children:c}),/* @__PURE__ */ r(v,{className:`font-latin text-xl font-medium wrap-anywhere uppercase @xs:text-2xl @md:text-3xl`,children:o})]})]})});if(a===`side`)return/* @__PURE__ */ i(`header`,{..._,ref:S,className:e(`flex flex-wrap items-center gap-3 px-4 py-3`,`md:self-stretch md:px-3 md:py-6 md:[writing-mode:vertical-rl]`,p===`accent`?`bg-action text-on-action`:`bg-surface-muted text-ink`,h),children:[m&&/* @__PURE__ */ r(`div`,{"aria-hidden":`true`,className:`shrink-0`,children:m}),/* @__PURE__ */ r(v,{className:`text-sm font-medium`,children:o}),s&&/* @__PURE__ */ r(`p`,{"aria-hidden":f||void 0,className:`max-w-full font-latin text-2xl font-medium wrap-anywhere uppercase`,children:s})]});let C=y&&!x,w=y&&x;return/* @__PURE__ */ i(`header`,{..._,ref:S,className:h,children:[l&&/* @__PURE__ */ r(`p`,{className:e(`mb-2 font-tech text-xs text-ink-secondary`,C&&`opacity-0`,w&&`animate-fade-in [animation-delay:200ms]`),children:l}),/* @__PURE__ */ i(`div`,{className:`flex flex-wrap items-center gap-x-2`,children:[/* @__PURE__ */ r(`span`,{"aria-hidden":`true`,className:`relative block h-8 w-26 shrink-0 overflow-hidden`,children:/* @__PURE__ */ r(`span`,{className:e(`absolute inset-0 flex items-center justify-end bg-neutral-300 pr-1.5 text-neutral-900`,C&&`-translate-x-full`,w&&`animate-slide-in`),children:/* @__PURE__ */ r(n,{size:20,className:e(C&&`-rotate-45`,w&&`animate-turn-in [animation-delay:100ms]`)})})}),s&&/* @__PURE__ */ r(`p`,{"aria-hidden":f||void 0,className:e(`max-w-full font-latin text-xl leading-8 font-medium wrap-anywhere text-ink uppercase`,C&&`opacity-0`,w&&`animate-fade-in [animation-delay:200ms]`),children:s})]}),/* @__PURE__ */ r(v,{className:e(`mt-1 text-2xl font-bold wrap-anywhere text-ink`,C&&`opacity-0`,w&&`animate-fade-in [animation-delay:200ms]`),children:o})]})}export{a as SectionTitle};

package/dist/components/section-title/index.d.ts

@@ -0,0 +1,3 @@
+
+import { SectionTitle, SectionTitleProps, SectionTitleVariant } from "./SectionTitle.js";
+export { SectionTitle, type SectionTitleProps, type SectionTitleVariant };

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,49 @@
+
+import { ControlSize, ControlVariant } from "../input/control-box.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/segmented-control/SegmentedControl.d.ts
+export type SegmentedControlSize = ControlSize;
+export type SegmentedControlVariant = ControlVariant;
+export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
+  /** 受控的当前值 */
+  value?: string;
+  /** 非受控时的初始值 */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** 表单字段名：选中的值会随表单提交。缺省自动生成 */
+  name?: string;
+  /** 32 / 40 / 56px 高，和输入框同三档 */
+  size?: SegmentedControlSize;
+  /**
+   * 轨道的画法，和输入框相同：
+   * - `sunken` 凹陷的底 + 一条底边线，默认；
+   * - `outline` 四边描边，放在凹陷底色的区域里时用。
+   */
+  variant?: SegmentedControlVariant;
+  disabled?: boolean;
+  required?: boolean;
+  /** 错误态。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+};
+/**
+ * 分段选择：两到五个值里选一个，选项并排摆在一条轨道里。
+ * 语义是单选组——方向键换值，带 `name` 时随表单提交。里面只放 `Segment`。
+ * 标签用 `Field` 包住它，或者自己传 `aria-label`。
+ *
+ * 切换的是下面显示哪一块内容时用 `Tabs`，不是它。
+ */
+export declare function SegmentedControl({ value, defaultValue, onValueChange, name, size, variant, disabled: disabledProp, required: requiredProp, invalid: invalidProp, className, ref, ...props }: SegmentedControlProps): import("react").JSX.Element;
+type SegmentOwnProps = {
+  value: string;
+  /** 文字左边的图标。只有图标时要给 `aria-label` */
+  icon?: ReactNode;
+  disabled?: boolean;
+  /** 这一段的可访问名称；不传就是里面的文字 */
+  "aria-label"?: string;
+  children?: ReactNode;
+};
+export type SegmentProps = SegmentOwnProps & Omit<ComponentProps<"label">, keyof SegmentOwnProps>;
+/** 分段选择里的一段。`className` 给这一段的外壳。 */
+export declare function Segment({ value, icon, disabled: disabledProp, "aria-label": ariaLabel, className, children, ...props }: SegmentProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/segmented-control/SegmentedControl.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{mergeRefs as n}from"../../lib/merge-refs.js";import{useControllableState as r}from"../../hooks/useControllableState.js";import{indicator as i,indicatorBox as a}from"../../lib/motion.js";import{useFieldContext as o}from"../field/Field.js";import{controlLine as s,controlSize as c}from"../input/control-box.js";import{useIndicator as l}from"../../hooks/useIndicator.js";import{useContext as u,useId as d,useMemo as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";const h=/* @__PURE__ */ t(null),g={sunken:`border-b-2 bg-surface-sunken`,outline:`border bg-surface`};function _({value:t,defaultValue:u,onValueChange:m,name:_,size:v=`md`,variant:y=`sunken`,disabled:b,required:x,invalid:S,className:C,ref:w,...T}){let E=h(),D=o(),O=l(`[data-selected]`),k=d(),[A,j]=r({value:t,defaultValue:u,onChange:e=>{e!==void 0&&m?.(e)}}),M=b??D?.disabled??!1,N=x??D?.required??!1,P=S??D?.invalid??!1,F=_??k,I=f(()=>({name:F,value:A,select:j,size:v,disabled:M,required:N,invalid:P}),[F,A,j,v,M,N,P]);return/* @__PURE__ */ p(E.Provider,{value:I,children:/* @__PURE__ */ p(`div`,{role:`radiogroup`,"aria-labelledby":D&&!D.group?D.labelId:void 0,"aria-describedby":D?.describedBy,"aria-invalid":P||void 0,"aria-required":N||void 0,"aria-disabled":M||void 0,...T,ref:n(O,w),"data-variant":y,"data-size":v,className:e(`inline-grid max-w-full auto-cols-fr grid-flow-col p-0.5 text-ink`,`transition-colors duration-(--duration-fast) ease-standard`,i,a,`after:bg-surface-inverse has-[[data-selected][data-disabled]]:after:bg-disabled`,`forced-colors:after:bg-[Highlight] forced-colors:has-[[data-selected][data-disabled]]:after:bg-[GrayText]`,g[y],c[v],M?`border-line`:P?`border-danger`:[`border-line-strong`,s(y)],C)})})}const v={sm:`gap-1.5 px-3 [&_svg]:size-3.5`,md:`gap-2 px-4 [&_svg]:size-4`,lg:`gap-2.5 px-6 [&_svg]:size-5`};function y({value:t,icon:n,disabled:r,"aria-label":i,className:a,children:o,...s}){let c=u(h());if(!c)throw Error(`<Segment> 必须放在 <SegmentedControl> 里`);let l=c.value===t,d=r??c.disabled;return/* @__PURE__ */ m(`label`,{...s,"data-selected":l?``:void 0,"data-disabled":d?``:void 0,className:e(`relative flex min-w-0 items-center justify-center font-medium whitespace-nowrap select-none`,`transition-colors duration-(--duration-fast) ease-standard`,`has-focus-visible:z-1 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-focus`,v[c.size],d?`cursor-not-allowed`:`cursor-pointer`,l?[d?`bg-disabled text-on-disabled forced-colors:bg-[GrayText] forced-colors:text-[Canvas]`:`bg-surface-inverse text-ink-inverse forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]`,`in-data-indicator:bg-transparent forced-colors:in-data-indicator:bg-transparent`,`forced-colors:forced-color-adjust-none forced-colors:has-focus-visible:outline-[Highlight]`]:d?`text-ink-disabled forced-colors:text-[GrayText]`:`text-ink-secondary hover:bg-ink/5 hover:text-ink`,a),children:[/* @__PURE__ */ p(`input`,{type:`radio`,name:c.name,value:t,checked:l,disabled:d,required:c.required,"aria-label":i,"aria-invalid":c.invalid||void 0,onChange:()=>c.select(t),className:`absolute inset-0 size-full cursor-[inherit] appearance-none outline-none`}),n,o!==void 0&&/* @__PURE__ */ p(`span`,{className:`pointer-events-none min-w-0 truncate`,children:o})]})}export{y as Segment,_ as SegmentedControl};

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Segment, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedControlSize, SegmentedControlVariant } from "./SegmentedControl.js";
+export { Segment, type SegmentProps, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, type SegmentedControlVariant };