@endfield-ui/react 1.2.0 → 1.3.0

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

@@ -0,0 +1,3 @@
+
+import { Select, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectMultipleProps, SelectOption, SelectProps, SelectSeparator, SelectSeparatorProps, SelectSingleProps, SelectSize, SelectVariant } from "./Select.js";
+export { Select, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectMultipleProps, type SelectOption, type SelectProps, SelectSeparator, type SelectSeparatorProps, type SelectSingleProps, type SelectSize, type SelectVariant };

package/dist/components/side-rail/SideRail.d.ts

@@ -0,0 +1,62 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactNode } from "react";
+//#region src/components/side-rail/SideRail.d.ts
+export type SideRailProps = Omit<ComponentProps<"nav">, "aria-label"> & {
+  /** 这块导航的名称，比如"主导航" */
+  "aria-label": string;
+  /**
+   * 收起成只有图标的窄轨（64px）。默认是展开的（224px，图标 + 文字）。
+   * 栏目少且固定、屏幕空间紧张时才收起
+   */
+  collapsed?: boolean;
+  /** 最上面的标志。本库不带标志，传你自己的 */
+  brand?: ReactNode;
+  /** 导航项下面的工具组：几个图标按钮 */
+  tools?: ReactNode;
+  /** 主行动块：放一个 `NavAction` */
+  action?: ReactNode;
+  /** 最下面的次要入口 */
+  footer?: ReactNode;
+  /** `SideRailItem`、`SideRailGroup`、`SideRailSub` */
+  children: ReactNode;
+};
+/**
+ * 侧轨：桌面端贴在左边的主导航。自上而下是标志、导航项、工具组、主行动块、次要入口；
+ * 导航项放不下时在中间那一段里滚动。
+ *
+ * 默认 `sticky`、占满视口高；窄屏上不要把它缩小，换成 `TopBar` + `NavMenu`。
+ */
+export declare function SideRail({ collapsed, brand, tools, action, footer, className, children, ...props }: SideRailProps): import("react").JSX.Element;
+type ItemOwnProps = {
+  /** 图标。收起时只剩它，所以每一项都要有 */
+  icon: ReactNode;
+  /** 当前所在的栏目：墨色 + 左缘一条短竖条，输出 `aria-current="page"` */
+  current?: boolean;
+  /** 行尾的补充：计数、角标。收起时不显示 */
+  end?: ReactNode;
+  disabled?: boolean;
+  /** 传了就渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  /** 没有 `href` 和 `render` 时渲染成按钮 */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  /** 栏目的名称。收起时看不见，但仍然是这一项的可访问名称 */
+  children: ReactNode;
+};
+export type SideRailItemProps = ItemOwnProps & Omit<ComponentProps<"li">, keyof ItemOwnProps>;
+/** 侧轨里的一个栏目。 */
+export declare function SideRailItem({ icon, current, end, disabled, href, target, rel, render, onClick, children, ...props }: SideRailItemProps): import("react").JSX.Element;
+export type SideRailGroupProps = Omit<ComponentProps<"li">, "children"> & {
+  /** 这一组的小标题。收起时换成一条短线，名称仍然读得到 */
+  label: string;
+  /** `SideRailItem` */
+  children: ReactNode;
+};
+/** 把几个栏目归成一组。栏目多的时候用。它只是分组；能展开收起的是 `SideRailSub`。 */
+export declare function SideRailGroup({ label, className, children, ...props }: SideRailGroupProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/side-rail/SideRail.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{usePortalScope as i}from"../../hooks/usePortalScope.js";import{getNavActionContext as a}from"../nav-action/NavAction.js";import{useContext as o,useMemo as s}from"react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import{Tooltip as d}from"@base-ui/react/tooltip";const f=/* @__PURE__ */ n({collapsed:!1});function p({current:n,disabled:r}){return e(`relative flex h-12 w-full items-center gap-3 pr-4 pl-5 text-left text-sm font-medium`,`transition-colors duration-(--duration-fast) ease-standard`,t,r?`cursor-not-allowed text-ink-disabled`:[n?`font-bold text-ink`:`text-ink-secondary`,`hover:bg-surface-muted hover:text-ink`,`data-popup-open:bg-surface-muted data-popup-open:text-ink`],n&&`before:absolute before:top-1/2 before:left-0 before:h-5 before:w-1 before:-translate-y-1/2 before:bg-ink before:content-['']`)}function m({children:e}){return/* @__PURE__ */ l(`span`,{"aria-hidden":`true`,className:`flex size-6 shrink-0 items-center justify-center [&_svg]:size-5`,children:e})}function h({collapsed:t=!1,brand:n,tools:r,action:i,footer:o,className:c,children:d,...p}){let m=f(),h=a(),g=s(()=>({collapsed:t}),[t]);return/* @__PURE__ */ l(m.Provider,{value:g,children:/* @__PURE__ */ u(`nav`,{...p,"data-collapsed":t?``:void 0,className:e(`sticky top-0 z-(--z-nav) flex h-dvh shrink-0 flex-col border-r border-line bg-surface text-ink shadow-rail`,`transition-[width] duration-(--duration-base) ease-standard`,t?`w-16`:`w-56`,c),children:[n&&/* @__PURE__ */ l(`div`,{className:e(`flex h-16 shrink-0 items-center overflow-hidden`,t?`justify-center`:`px-5`),children:n}),/* @__PURE__ */ l(`ul`,{className:`flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-contain py-2`,children:d}),r&&/* @__PURE__ */ l(`div`,{className:e(`flex shrink-0 gap-1 p-3`,t?`flex-col items-center`:`flex-wrap`),children:r}),i&&/* @__PURE__ */ l(`div`,{className:e(`flex shrink-0 p-3`,t&&`justify-center`),children:/* @__PURE__ */ l(h.Provider,{value:t?`stacked`:`block`,children:i})}),o&&/* @__PURE__ */ l(`div`,{className:e(`flex shrink-0 flex-col gap-1 border-t border-line p-3 text-xs text-ink-secondary`,t&&`items-center`),children:o})]})})}function g({icon:t,current:n=!1,end:a,disabled:s=!1,href:h,target:g,rel:_,render:v,onClick:y,children:b,...x}){let{collapsed:S}=o(f()),{anchorRef:C,portalRef:w}=i(),T=h!==void 0||v!==void 0,E=p({current:n,disabled:s}),D=/* @__PURE__ */ u(c,{children:[/* @__PURE__ */ l(m,{children:t}),/* @__PURE__ */ l(`span`,{className:S?`sr-only`:`min-w-0 flex-1 truncate`,children:b}),!S&&a&&/* @__PURE__ */ l(`span`,{className:`flex shrink-0 items-center`,children:a})]}),O=T?/* @__PURE__ */ l(r,{render:v,href:s?void 0:h,role:s?`link`:void 0,"aria-disabled":s||void 0,target:g,rel:_,"aria-current":n?`page`:void 0,onClick:s?e=>e.preventDefault():y,className:E,children:D}):/* @__PURE__ */ l(`button`,{type:`button`,disabled:s,"aria-current":n?`page`:void 0,onClick:y,className:E,children:D});return/* @__PURE__ */ l(`li`,{...x,children:S&&!s?/* @__PURE__ */ u(d.Root,{children:[/* @__PURE__ */ l(d.Trigger,{ref:C,render:O,delay:0,closeDelay:0}),/* @__PURE__ */ l(d.Portal,{ref:w,children:/* @__PURE__ */ l(d.Positioner,{side:`right`,align:`center`,sideOffset:0,className:`pointer-events-none z-(--z-overlay)`,children:/* @__PURE__ */ l(d.Popup,{"aria-hidden":`true`,className:e(`flex h-(--anchor-height) items-center bg-surface-muted pr-5 pl-1 text-sm font-medium whitespace-nowrap text-ink`,`[clip-path:inset(0)] transition-[clip-path] duration-(--duration-fast) ease-exit data-instant:transition-none`,`data-ending-style:[clip-path:inset(0_100%_0_0)] data-starting-style:[clip-path:inset(0_100%_0_0)]`),children:b})})})]}):O})}function _({label:t,className:n,children:r,...i}){let{collapsed:a}=o(f());return/* @__PURE__ */ u(`li`,{...i,className:e(`not-first:mt-2`,n),children:[a?/* @__PURE__ */ l(`div`,{"aria-hidden":`true`,className:`mx-auto mb-2 h-px w-6 bg-line-strong [li:first-child>&]:hidden`}):/* @__PURE__ */ l(`div`,{"aria-hidden":`true`,className:`truncate px-5 pt-2 pb-1 font-tech text-xs text-ink-tertiary`,children:`// ${t}`}),/* @__PURE__ */ l(`ul`,{"aria-label":t,children:r})]})}export{m as RailIcon,h as SideRail,_ as SideRailGroup,g as SideRailItem,f as getSideRailContext,p as railItemClass};

package/dist/components/side-rail/SideRailSub.d.ts

@@ -0,0 +1,47 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactNode } from "react";
+//#region src/components/side-rail/SideRailSub.d.ts
+type SubOwnProps = {
+  /** 图标。收起时只剩它 */
+  icon: ReactNode;
+  /** 这一组的名称：父项上的文字，也是子列表和菜单的名称 */
+  label: string;
+  /** 展开着吗。只在侧轨展开时有意义；收起的侧轨上是弹出的菜单 */
+  open?: boolean;
+  /**
+   * 一开始展开着吗。默认：当前项在里面就展开。
+   * 之后当前项换到了里面（从别处导航过来），也会自己展开
+   */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 直接放 `SideRailSubItem` */
+  children: ReactNode;
+};
+export type SideRailSubProps = SubOwnProps & Omit<ComponentProps<"li">, keyof SubOwnProps>;
+/**
+ * 侧轨里带二级的栏目。父项本身不是一个去处：点它只是展开收起。
+ * 侧轨收起时没有地方就地展开，改成向右弹出一块菜单。
+ */
+export declare function SideRailSub({ icon, label, open: openProp, defaultOpen, onOpenChange, children, ...props }: SideRailSubProps): import("react").JSX.Element;
+type SubItemOwnProps = {
+  /** 当前所在的页面：墨色、加粗，引线在这一段变成粗条；输出 `aria-current="page"` */
+  current?: boolean;
+  /** 行尾的补充：计数、角标 */
+  end?: ReactNode;
+  disabled?: boolean;
+  /** 传了就渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  /** 没有 `href` 和 `render` 时渲染成按钮 */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  children: ReactNode;
+};
+export type SideRailSubItemProps = SubItemOwnProps & Omit<ComponentProps<"li">, keyof SubItemOwnProps>;
+/** 二级里的一项。直接放在 `SideRailSub` 里。 */
+export declare function SideRailSubItem({ current, end, disabled, href, target, rel, render, onClick, children, ...props }: SideRailSubItemProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/side-rail/SideRailSub.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{useControllableState as r}from"../../hooks/useControllableState.js";import{defined as i}from"../../lib/defined.js";import{LinkElement as a}from"../link-element/LinkElement.js";import{usePortalScope as o}from"../../hooks/usePortalScope.js";import{TriangleRight as s}from"../../icons/TriangleRight.js";import{menuGroupLabel as c,menuItem as l,menuItemCurrent as u,menuItemHover as d,menuPanel as f}from"../dropdown-menu/menu-style.js";import{RailIcon as p,getSideRailContext as m,railItemClass as h}from"./SideRail.js";import{Children as g,isValidElement as _,useContext as v,useEffect as y,useRef as b}from"react";import{Fragment as x,jsx as S,jsxs as C}from"react/jsx-runtime";import{Menu as w}from"@base-ui/react/menu";import{Collapsible as T}from"@base-ui/react/collapsible";const E=/* @__PURE__ */ n(`list`);function D({icon:t,label:n,open:i,defaultOpen:a,onOpenChange:l,children:u,...d}){let x=E(),{collapsed:D}=v(m()),{anchorRef:O,portalRef:k}=o(),A=g.toArray(u).some(e=>_(e)&&e.props.current===!0),[j,M]=r({value:i,defaultValue:a??A,onChange:l}),N=b(A);return y(()=>{A&&!N.current&&M(!0),N.current=A},[A,M]),D?/* @__PURE__ */ S(`li`,{...d,children:/* @__PURE__ */ C(w.Root,{modal:!1,children:[/* @__PURE__ */ C(w.Trigger,{ref:O,openOnHover:!0,delay:0,className:h({current:A,disabled:!1}),children:[/* @__PURE__ */ S(p,{children:t}),/* @__PURE__ */ S(`span`,{className:`sr-only`,children:n})]}),/* @__PURE__ */ S(w.Portal,{ref:k,children:/* @__PURE__ */ S(w.Positioner,{side:`right`,align:`start`,sideOffset:0,className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ S(w.Popup,{className:e(f,`max-h-(--available-height) overflow-y-auto overscroll-contain`),children:/* @__PURE__ */ C(w.Group,{children:[/* @__PURE__ */ S(w.GroupLabel,{className:c,children:n}),/* @__PURE__ */ S(x.Provider,{value:`menu`,children:u})]})})})})]})}):/* @__PURE__ */ S(`li`,{...d,children:/* @__PURE__ */ C(T.Root,{open:j,onOpenChange:e=>M(e),children:[/* @__PURE__ */ C(T.Trigger,{className:t=>e(`group/sub`,h({current:A&&!t.open,disabled:!1}),A&&`text-ink`),children:[/* @__PURE__ */ S(p,{children:t}),/* @__PURE__ */ S(`span`,{className:`min-w-0 flex-1 truncate`,children:n}),/* @__PURE__ */ S(s,{size:8,className:`shrink-0 transition-transform duration-(--duration-fast) ease-standard group-data-panel-open/sub:rotate-90`})]}),/* @__PURE__ */ S(T.Panel,{className:e(`h-(--collapsible-panel-height) overflow-hidden`,`transition-[height] duration-(--duration-base) ease-standard`,`data-ending-style:h-0 data-starting-style:h-0`),children:/* @__PURE__ */ S(`ul`,{"aria-label":n,className:`relative before:absolute before:inset-y-0 before:left-8 before:w-px before:bg-line before:content-['']`,children:/* @__PURE__ */ S(x.Provider,{value:`list`,children:u})})})]})})}function O({current:n=!1,end:r,disabled:o=!1,href:s,target:c,rel:f,render:p,onClick:m,children:h,...g}){let _=v(E()),y=s!==void 0||p!==void 0,b=/* @__PURE__ */ C(x,{children:[/* @__PURE__ */ S(`span`,{className:`min-w-0 flex-1 truncate`,children:h}),r&&/* @__PURE__ */ S(`span`,{className:`flex shrink-0 items-center`,children:r})]});if(_===`menu`){let t=e(l,n?u.plain:d);return y?/* @__PURE__ */ S(w.LinkItem,{render:p,...i({href:o?void 0:s,target:c,rel:f}),"aria-current":n?`page`:void 0,"aria-disabled":o||void 0,"data-disabled":o?``:void 0,closeOnClick:!0,onClick:o?e=>e.preventDefault():m,className:t,children:b}):/* @__PURE__ */ S(w.Item,{disabled:o,"aria-current":n?`page`:void 0,onClick:m,className:t,children:b})}let T=e(`relative flex h-10 w-full items-center gap-3 pr-4 pl-14 text-left text-sm`,`transition-colors duration-(--duration-fast) ease-standard`,t,o?`cursor-not-allowed text-ink-disabled`:[n?`font-bold text-ink`:`text-ink-secondary`,`hover:bg-surface-muted hover:text-ink`],n&&`before:absolute before:inset-y-2 before:left-[31px] before:w-[3px] before:bg-ink before:content-['']`);return/* @__PURE__ */ S(`li`,{...g,children:y?/* @__PURE__ */ S(a,{render:p,href:o?void 0:s,role:o?`link`:void 0,"aria-disabled":o||void 0,target:c,rel:f,"aria-current":n?`page`:void 0,onClick:o?e=>e.preventDefault():m,className:T,children:b}):/* @__PURE__ */ S(`button`,{type:`button`,disabled:o,"aria-current":n?`page`:void 0,onClick:m,className:T,children:b})})}export{D as SideRailSub,O as SideRailSubItem};

package/dist/components/side-rail/index.d.ts

@@ -0,0 +1,4 @@
+
+import { SideRail, SideRailGroup, SideRailGroupProps, SideRailItem, SideRailItemProps, SideRailProps } from "./SideRail.js";
+import { SideRailSub, SideRailSubItem, SideRailSubItemProps, SideRailSubProps } from "./SideRailSub.js";
+export { SideRail, SideRailGroup, type SideRailGroupProps, SideRailItem, type SideRailItemProps, type SideRailProps, SideRailSub, SideRailSubItem, type SideRailSubItemProps, type SideRailSubProps };

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,22 @@
+
+import { ComponentProps } from "react";
+//#region src/components/skeleton/Skeleton.d.ts
+export type SkeletonVariant = "block" | "text" | "circle";
+export type SkeletonProps = Omit<ComponentProps<"span">, "children"> & {
+  /**
+   * - `block` 与内容等大的色块，尺寸用 `className` 给（`h-40 w-full`），默认；
+   * - `text` 几行文字，行高跟随所在位置的字号；
+   * - `circle` 圆形，头像、图标。
+   */
+  variant?: SkeletonVariant;
+  /** `text` 的行数，默认 3。多于一行时末行短一截 */
+  lines?: number;
+  /** 很轻的明度往返。默认不动 */
+  pulse?: boolean;
+};
+/**
+ * 骨架：只画大块，不画细节。
+ * 自身对辅助技术隐藏；"正在加载"由外层区域的 `aria-busy="true"` 表达。
+ */
+export declare function Skeleton({ variant, lines, pulse, className, ...props }: SkeletonProps): import("react").JSX.Element;
+//#endregion

package/dist/components/skeleton/Skeleton.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=`block bg-surface-muted forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[GrayText]`;function r({variant:r=`block`,lines:i=3,pulse:a=!1,className:o,...s}){let c=a&&`animate-pulse`;if(r===`text`){let a=Math.max(1,Math.floor(i));return/* @__PURE__ */ t(`span`,{...s,"aria-hidden":`true`,"data-variant":r,className:e(`flex flex-col gap-[0.6em]`,c,o),children:Array.from({length:a},(r,i)=>/* @__PURE__ */ t(`span`,{className:e(n,`h-[0.9em]`,a>1&&i===a-1?`w-3/5`:`w-full`)},i))})}return/* @__PURE__ */ t(`span`,{...s,"aria-hidden":`true`,"data-variant":r,className:e(n,r===`circle`?`size-10 rounded-full`:`h-16 w-full`,c,o)})}export{r as Skeleton};

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

@@ -0,0 +1,3 @@
+
+import { Skeleton, SkeletonProps, SkeletonVariant } from "./Skeleton.js";
+export { Skeleton, type SkeletonProps, type SkeletonVariant };

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,63 @@
+
+import { ReactNode } from "react";
+//#region src/components/slider/Slider.d.ts
+export type SliderSize = "sm" | "md";
+export type SliderMark = {
+  value: number;
+  /** 刻度下面的标注；不传就只有一条短线 */
+  label?: ReactNode;
+};
+type SliderCommonProps = {
+  /** 下限，默认 0 */
+  min?: number;
+  /** 上限，默认 100 */
+  max?: number;
+  /** 一步走多少，默认 1 */
+  step?: number;
+  /** `PageUp` / `PageDown`、`Shift` + 方向键一次走多少，默认 10 */
+  largeStep?: number;
+  /** 整个控件占 32 / 40px 高，默认 `md` */
+  size?: SliderSize;
+  /** 在右侧显示当前值 */
+  showValue?: boolean;
+  /** 数值怎么写：`Intl.NumberFormat` 的选项（百分比、单位、小数位） */
+  format?: Intl.NumberFormatOptions;
+  /** 轨道下面的刻度。只是标注，不改变步长 */
+  marks?: readonly SliderMark[];
+  /** 表单字段名：值随表单提交 */
+  name?: string;
+  disabled?: boolean;
+  /** 不在 `Field` 里时必须给 */
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  className?: string;
+};
+export type SliderSingleProps = SliderCommonProps & {
+  value?: number;
+  defaultValue?: number;
+  /** 拖动的每一步都触发 */
+  onValueChange?: (value: number) => void;
+  /** 松手（或一次按键）之后触发：要发请求的事放这里 */
+  onValueCommitted?: (value: number) => void;
+  thumbLabels?: never;
+  minStepsBetweenValues?: never;
+};
+export type SliderRangeProps = SliderCommonProps & {
+  /** 传两个数就是范围滑块 */
+  value?: readonly [number, number];
+  defaultValue?: readonly [number, number];
+  onValueChange?: (value: [number, number]) => void;
+  onValueCommitted?: (value: [number, number]) => void;
+  /** 两个滑块各自的名称，默认"最小值""最大值" */
+  thumbLabels?: readonly [string, string];
+  /** 两个滑块之间至少隔几步，默认 0 */
+  minStepsBetweenValues?: number;
+};
+export type SliderProps = SliderSingleProps | SliderRangeProps;
+/**
+ * 滑块：在一个范围里拖着选一个数。要的是确切的数时用 `Stepper`。
+ * 每个滑块都要有名称：放进 `Field`，或者自己传 `aria-label`。
+ */
+export declare function Slider(props: SliderProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/slider/Slider.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRingWithin as t}from"../../lib/focus-ring.js";import{useFieldContext as n,useFieldControl as r}from"../field/Field.js";import{useMemo as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{Slider as s}from"@base-ui/react/slider";const c={sm:`h-8`,md:`h-10`},l=e=>`calc(6px + (100% - 12px) * ${e})`,u=[`relative h-5 w-3 bg-surface-inverse shadow-[0_0_0_2px_var(--ef-surface)]`,`transition-[inset-inline-start] duration-(--duration-fast) ease-standard data-dragging:transition-none`,`before:absolute before:-inset-x-3.5 before:-inset-y-2.5 before:content-['']`,`after:absolute after:inset-y-1 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:bg-accent-ink-inverse after:opacity-0 after:transition-opacity after:duration-(--duration-fast) after:ease-standard after:content-[''] data-dragging:after:opacity-100`,`choice-diamond:size-3.5 choice-diamond:rotate-45 choice-diamond:after:inset-1 choice-diamond:after:w-auto choice-diamond:after:translate-x-0`,`data-disabled:bg-ink-disabled`,`forced-colors:bg-[ButtonText] forced-colors:data-disabled:bg-[GrayText]`,t].join(` `);function d(t){let{min:d=0,max:f=100,step:p=1,largeStep:m=10,size:h=`md`,showValue:g=!1,format:_,marks:v,name:y,disabled:b,"aria-label":x,"aria-describedby":S,className:C}=t,w=n(),{disabled:T,"aria-describedby":E}=r({disabled:b,"aria-describedby":S}),D=x?void 0:w?.labelId,O=Array.isArray(t.value??t.defaultValue),k=t.thumbLabels??[`最小值`,`最大值`],A=i(()=>{let e=new Intl.NumberFormat(void 0,_),t=Math.max(e.format(d).length,e.format(f).length);return`${O?t*2+3:t}ch`},[_,d,f,O]);return/* @__PURE__ */ o(s.Root,{value:t.value,defaultValue:t.defaultValue,onValueChange:e=>t.onValueChange?.(e),onValueCommitted:e=>t.onValueCommitted?.(e),min:d,max:f,step:p,largeStep:m,minStepsBetweenValues:t.minStepsBetweenValues,thumbCollisionBehavior:`none`,format:_,name:y,disabled:T,...O&&{"aria-label":x,"aria-labelledby":D},"data-size":h,className:e(`flex w-full items-start gap-3 text-ink`,C),children:[/* @__PURE__ */ o(`div`,{className:`min-w-0 flex-1`,children:[/* @__PURE__ */ a(s.Control,{className:e(`flex touch-none items-center px-1.5 select-none data-disabled:cursor-not-allowed`,c[h]),children:/* @__PURE__ */ o(s.Track,{className:e(`h-1 w-full bg-line`,`forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[ButtonText] forced-colors:data-disabled:outline-[GrayText]`),children:[/* @__PURE__ */ a(s.Indicator,{className:e(`bg-ink transition-[inset-inline-start,width] duration-(--duration-fast) ease-standard data-disabled:bg-ink-disabled data-dragging:transition-none`,`forced-colors:bg-[Highlight] forced-colors:data-disabled:bg-[GrayText]`)}),(O?[0,1]:[0]).map(e=>/* @__PURE__ */ a(s.Thumb,{index:e,...O?{"aria-label":k[e]}:{"aria-label":x,"aria-labelledby":D},"aria-describedby":E,className:u},e))]})}),v&&v.length>0&&/* @__PURE__ */ a(`div`,{"aria-hidden":`true`,className:`relative h-6 text-xs`,children:v.map(t=>/* @__PURE__ */ a(`span`,{style:{left:l((t.value-d)/(f-d))},className:e(`absolute top-0 flex flex-col gap-0.5 whitespace-nowrap text-ink-secondary before:h-1.5 before:w-px before:bg-line-strong before:content-[''] forced-colors:before:bg-[ButtonText]`,t.value<=d?`items-start`:t.value>=f?`-translate-x-full items-end`:`-translate-x-1/2 items-center`),children:t.label},t.value))})]}),g&&/* @__PURE__ */ a(s.Value,{style:{minWidth:A},className:e(`flex shrink-0 items-center justify-end font-tech text-sm font-bold tabular-nums data-disabled:text-ink-disabled forced-colors:data-disabled:text-[GrayText]`,c[h]),children:e=>e.join(` – `)})]})}export{d as Slider};

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

@@ -0,0 +1,3 @@
+
+import { Slider, SliderMark, SliderProps, SliderRangeProps, SliderSingleProps, SliderSize } from "./Slider.js";
+export { Slider, type SliderMark, type SliderProps, type SliderRangeProps, type SliderSingleProps, type SliderSize };

package/dist/components/sparkline/Sparkline.d.ts

@@ -0,0 +1,32 @@
+
+import { ComponentProps } from "react";
+//#region src/components/sparkline/Sparkline.d.ts
+export type SparklineVariant = "area" | "line";
+export type SparklineTone = "info" | "danger" | "accent" | "neutral";
+export type SparklineProps = Omit<ComponentProps<"svg">, "children"> & {
+  /** 一串数值，按先后顺序。少于两个点时什么都不画 */
+  data: readonly number[];
+  /** `area` 一块填充的面积，默认；`line` 一条折线 */
+  variant?: SparklineVariant;
+  /**
+   * - `info` 量值图表的蓝，默认；
+   * - `danger` 超支、异常的红；
+   * - `accent` 强调色；
+   * - `neutral` 次要的墨色。
+   */
+  tone?: SparklineTone;
+  /** 纵向范围的下端。默认从数据的最小值往下再留四分之一，让最低的那一点也有厚度 */
+  min?: number;
+  /** 纵向范围的上端。默认是数据的最大值 */
+  max?: number;
+  /** 传了它就是一张有名称的图；不传是纯装饰，对读屏隐藏 */
+  label?: string;
+  /** 进入视口时从左画出一次。默认开启 */
+  animate?: boolean;
+};
+/**
+ * 行内的小型图表：没有坐标轴、网格和图例，只有一块面积或一条折线。
+ * 撑满给它的盒子（默认高 32px、通宽）。它旁边应该有数字——图只是帮着看趋势。
+ */
+export declare function Sparkline({ data, variant, tone, min, max, label, animate, className, ref, ...props }: SparklineProps): import("react").JSX.Element;
+//#endregion

package/dist/components/sparkline/Sparkline.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{jsx as r}from"react/jsx-runtime";const i=e=>Math.round(e*100)/100;function a(e,t={}){if(e.length<2)return null;let n=Math.min(...e),r=Math.max(...e),a=t.max??r,o=t.min??n-(r-n)*.25,s=a-o,c=`M${e.map((t,n)=>{let r=n/(e.length-1)*100,a=s>0?(t-o)/s:.5,c=100-Math.min(Math.max(a,0),1)*100;return`${i(r)} ${i(c)}`}).join(`L`)}`;return{line:c,area:`${c}L100 100L0 100Z`}}const o={info:`fill-data/75`,danger:`fill-alert/75`,accent:`fill-accent-ink/75`,neutral:`fill-ink-secondary/75`},s={info:`stroke-data`,danger:`stroke-alert`,accent:`stroke-accent-ink`,neutral:`stroke-ink-secondary`};function c({data:i,variant:c=`area`,tone:l=`info`,min:u,max:d,label:f,animate:p=!0,className:m,ref:h,...g}){let _=a(i,{min:u,max:d}),[v,y]=n({disabled:!p}),b=p&&!y,x=p&&y;return/* @__PURE__ */ r(`svg`,{viewBox:`0 0 100 100`,preserveAspectRatio:`none`,role:f?`img`:void 0,"aria-label":f,"aria-hidden":f?void 0:`true`,focusable:`false`,"data-variant":c,"data-tone":l,...g,ref:t(v,h),className:e(`block h-8 w-full overflow-visible`,b&&`[clip-path:inset(0_100%_0_0)]`,x&&`animate-wipe-in [animation-duration:var(--duration-slower)] [--wipe-bleed:4px]`,m),children:_&&(c===`area`?/* @__PURE__ */ r(`path`,{d:_.area,className:e(o[l],`forced-colors:fill-[CanvasText]`)}):/* @__PURE__ */ r(`path`,{d:_.line,fill:`none`,strokeWidth:1.5,strokeLinejoin:`miter`,vectorEffect:`non-scaling-stroke`,className:e(s[l],`forced-colors:stroke-[CanvasText]`)}))})}export{c as Sparkline,a as sparklinePath};

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

@@ -0,0 +1,3 @@
+
+import { Sparkline, SparklineProps, SparklineTone, SparklineVariant } from "./Sparkline.js";
+export { Sparkline, type SparklineProps, type SparklineTone, type SparklineVariant };

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,19 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/spinner/Spinner.d.ts
+export type SpinnerSize = "sm" | "md";
+export type SpinnerProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 12px 或 16px。要别的尺寸用 `className` 给 `size-*` */
+  size?: SpinnerSize;
+  /**
+   * 读屏听到的话，默认"加载中"。
+   * 旁边已经有文字说明正在加载时传 `null`：这时它只是装饰，对读屏隐藏。
+   */
+  label?: ReactNode;
+};
+/**
+ * 行内加载指示：一个匀速旋转的小方块，颜色继承文字。
+ * 圆环形的用 `<ProgressRing size={16} />`；整块内容加载用 `Skeleton`。
+ */
+export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/spinner/Spinner.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:`size-3`,md:`size-4`},i=[`animate-spin bg-current motion-reduce:rotate-45 motion-reduce:animate-none`,`forced-colors:bg-[CanvasText]`].join(` `);function a({size:a=`md`,label:o=`加载中`,className:s,...c}){return o===null?/* @__PURE__ */ t(`span`,{...c,"aria-hidden":`true`,className:e(`inline-block shrink-0 align-middle`,i,r[a],s)}):/* @__PURE__ */ n(`span`,{...c,role:`status`,className:e(`inline-flex shrink-0 align-middle`,r[a],s),children:[/* @__PURE__ */ t(`span`,{"aria-hidden":`true`,className:e(`block size-full`,i)}),/* @__PURE__ */ t(`span`,{className:`sr-only`,children:o})]})}export{a as Spinner};

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

@@ -0,0 +1,3 @@
+
+import { Spinner, SpinnerProps, SpinnerSize } from "./Spinner.js";
+export { Spinner, type SpinnerProps, type SpinnerSize };

package/dist/components/splash-screen/SplashScreen.d.ts

@@ -0,0 +1,43 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/splash-screen/SplashScreen.d.ts
+export type SplashScreenProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 真实进度，0 – 100。不知道就不传：显示不确定进度，不显示数字 */
+  value?: number;
+  /** 标志：自己的图或 SVG。放在画面偏右的一个盒子里，竖排时居中 */
+  logo?: ReactNode;
+  /** 标志下面的一行标语 */
+  tagline?: ReactNode;
+  /** 标语上方那组微标里的微文字。纯氛围，对读屏隐藏 */
+  caption?: ReactNode;
+  /**
+   * 换掉标语上方的整组微标。不传是代码画的一组（小方框、`caption`、方点阵，旁边一枚三角标），
+   * 传 `null` 是不要
+   */
+  decor?: ReactNode;
+  /** 读数下面的状态字。默认 `LOADING` */
+  status?: ReactNode;
+  /** 底图：铺满整块，随进度从模糊变清晰 */
+  backdrop?: ReactNode;
+  /** 置为 `false` 开始退场：走满、铺满、淡出，结束后卸载。默认 `true` */
+  open?: boolean;
+  /** 铺满视口并锁住页面（默认）；关掉则铺满所在的定位容器 */
+  fullscreen?: boolean;
+  /** 进度条的可访问名称 */
+  label?: string;
+  /** 开始淡出、页面露出来的那一刻触发：页面自己的入场从这里起 */
+  onReveal?: () => void;
+  /** 淡出结束、已经卸载之后触发 */
+  onExited?: () => void;
+};
+/**
+ * 开屏页：照官网首次载入的那一页排的。近黑底，一根贴边的黄色进度条，读数跟着条的末端走；
+ * 画面偏右是标志，下面一组微标、一条分隔线和一行标语。就绪后黄色铺满整屏，再整层淡出。
+ *
+ * 标志和底图是插槽，库里不带任何图。横竖看它所在的那一块自己的宽高比，不看视口；
+ * 尺寸跟着那一块的宽度等比缩放，插槽里的东西可以用 `--ef-splash-unit` 跟着缩。
+ *
+ * 只要一块盖住整页的等待、不要这些排场，用 `Loader`。
+ */
+export declare function SplashScreen({ value, logo, tagline, caption, decor, status, backdrop, open, fullscreen, label, onReveal, onExited, onKeyDown, className, style, ref, ...props }: SplashScreenProps): import("react").JSX.Element | null;
+//#endregion

package/dist/components/splash-screen/SplashScreen.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{usePresence as t}from"../../hooks/usePresence.js";import{mergeRefs as n}from"../../lib/merge-refs.js";import{decor as r}from"../../lib/decor.js";import{useCallback as i,useEffect as a,useLayoutEffect as o,useRef as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d(){return/* @__PURE__ */ l(`svg`,{viewBox:`0 0 24 21`,"aria-hidden":`true`,className:e(r,`absolute -top-[calc(var(--ef-splash-unit)*2.5)] -left-[calc(var(--ef-splash-unit)*3.375)] h-[calc(var(--ef-splash-unit)*1.3125)] w-[calc(var(--ef-splash-unit)*1.4375)] fill-action cq-portrait:hidden`),children:/* @__PURE__ */ l(`path`,{d:`M0 0h11.6L5.8 10zM12.4 0H24l-5.8 10zM6.2 11h11.6L12 21z`})})}function f({caption:e}){return/* @__PURE__ */ u(`div`,{className:`flex min-h-[calc(var(--ef-splash-unit)*4)] flex-col items-start justify-between gap-[calc(var(--ef-splash-unit)*0.5)] text-neutral-600`,children:[/* @__PURE__ */ l(`svg`,{viewBox:`0 0 12 12`,fill:`none`,stroke:`currentColor`,className:`size-[calc(var(--ef-splash-unit)*1.125)]`,children:/* @__PURE__ */ l(`path`,{d:`M.5.5h11v11H.5zM6 3v6M3 6h6`})}),e!==void 0&&/* @__PURE__ */ l(`p`,{className:`font-latin text-[length:max(calc(var(--ef-splash-unit)*0.75),var(--text-micro))] leading-[1.2] font-medium tracking-label whitespace-pre-line text-ink-tertiary uppercase cq-portrait:hidden`,children:e}),/* @__PURE__ */ l(`svg`,{viewBox:`0 0 62 18`,fill:`currentColor`,className:`h-[calc(var(--ef-splash-unit)*1.125)] w-[calc(var(--ef-splash-unit)*3.875)]`,children:[0,11].flatMap(e=>[0,11,22,33,44,55].map(t=>/* @__PURE__ */ l(`rect`,{x:t,y:e,width:`7`,height:`7`},`${t}-${e}`)))})]})}function p({value:p,logo:m,tagline:h,caption:g,decor:_,status:v=`LOADING`,backdrop:y,open:b=!0,fullscreen:x=!0,label:S=`加载中`,onReveal:C,onExited:w,onKeyDown:T,className:E,style:D,ref:O,...k}){let[A,j]=c(!1);b&&A&&j(!1);let M=s({onReveal:C}),N=s(!1);o(()=>{M.current={onReveal:C},b&&(N.current=!1)});let P=i(()=>{N.current||(N.current=!0,j(!0),M.current.onReveal?.())},[]),{ref:F,mounted:I}=t(b,{onExited:()=>{P(),w?.()}}),L=I&&!b;o(()=>{let e=F.current;if(!L||!e)return;let t=t=>{t.target===e&&t.propertyName===`opacity`&&P()};return e.addEventListener(`transitionstart`,t),()=>e.removeEventListener(`transitionstart`,t)},[L,F,P]);let R=I&&(b||!A);if(a(()=>{if(!x||!R)return;let e=document.documentElement,t=e.style.overflow,n=document.activeElement;return e.style.overflow=`hidden`,F.current?.focus({preventScroll:!0}),()=>{e.style.overflow=t,n instanceof HTMLElement&&n.isConnected&&n.focus({preventScroll:!0})}},[x,R,F]),!I)return null;let z=e=>{T?.(e),x&&R&&e.key===`Tab`&&e.preventDefault()},B=p===void 0,V=b?B?0:Math.min(Math.max(p,0),100):100,H=B&&b;return/* @__PURE__ */ u(`div`,{tabIndex:-1,...k,ref:n(F,O),"data-theme":`dark`,"data-state":b?`open`:`closing`,onKeyDown:z,style:{...D,"--ef-splash-progress":V,"--ef-splash-percent":Math.round(V)},className:e(`overflow-hidden bg-surface text-ink outline-none [container-type:size]`,x?`fixed inset-0 z-(--z-loader)`:`absolute inset-0`,L?`[transition:--ef-splash-progress_500ms_var(--ease-exit),--ef-splash-percent_500ms_var(--ease-exit),opacity_1s_var(--ease-standard)_1.4s]`:`[transition:--ef-splash-progress_500ms_var(--ease-exit),--ef-splash-percent_500ms_var(--ease-exit)]`,L&&`opacity-0`,!R&&`pointer-events-none`,E),children:[/* @__PURE__ */ u(`div`,{className:`absolute inset-0 [--_status:max(var(--ef-splash-unit),var(--text-xs))] [--_tagline:max(calc(var(--ef-splash-unit)*1.5),var(--text-xs))] [--ef-splash-unit:0.625cqw] cq-portrait:[--ef-splash-unit:1.4815cqw]`,children:[y!==void 0&&/* @__PURE__ */ l(`div`,{"aria-hidden":`true`,className:e(`pointer-events-none select-none forced-colors:hidden print:hidden`,`absolute inset-0 blur-[calc((100_-_var(--ef-splash-progress))*0.08px)] *:size-full [&>img]:object-cover`),children:y}),m!==void 0&&/* @__PURE__ */ l(`div`,{className:`absolute top-[min(calc(var(--ef-splash-unit)*27.625),calc(100%_-_var(--ef-splash-unit)*44.25))] left-[64.4531%] flex h-[calc(var(--ef-splash-unit)*16.75)] w-[calc(var(--ef-splash-unit)*16.5)] items-center justify-center cq-portrait:top-[min(calc(var(--ef-splash-unit)*50),41.667%)] cq-portrait:left-1/2 cq-portrait:h-[calc(var(--ef-splash-unit)*20.9375)] cq-portrait:w-[calc(var(--ef-splash-unit)*19.3125)] cq-portrait:-translate-1/2 [&>:is(img,svg)]:size-full [&>img]:object-contain`,children:m}),/* @__PURE__ */ u(`div`,{className:`absolute top-[min(calc(var(--ef-splash-unit)*63.375),calc(100%_-_var(--ef-splash-unit)*8.5))] right-[calc(var(--ef-splash-unit)*2)] left-[64.4531%] cq-portrait:top-auto cq-portrait:right-[calc(var(--ef-splash-unit)*4.625)] cq-portrait:bottom-[calc(var(--ef-splash-unit)*5.75)] cq-portrait:left-[calc(var(--ef-splash-unit)*4.625)]`,children:[_===void 0&&/* @__PURE__ */ l(d,{}),_!==null&&/* @__PURE__ */ l(`div`,{"aria-hidden":`true`,className:e(`pointer-events-none select-none forced-colors:hidden print:hidden`,`absolute bottom-full left-0`),children:_===void 0?/* @__PURE__ */ l(f,{caption:g}):_}),/* @__PURE__ */ l(`span`,{"aria-hidden":`true`,className:e(r,`mt-[calc(var(--ef-splash-unit)*1.25)] mb-[calc(var(--ef-splash-unit))] -ml-[calc(var(--ef-splash-unit)*21.625)] block h-0.5 w-[calc(var(--ef-splash-unit)*70)] bg-linear-to-r from-transparent via-neutral-0/10 to-transparent`)}),h!==void 0&&/* @__PURE__ */ l(`p`,{className:`text-[length:var(--_tagline)] leading-[1.35] wrap-anywhere`,children:h})]}),/* @__PURE__ */ u(`div`,{role:`progressbar`,"aria-label":S,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":H?void 0:V,className:`absolute top-0 left-0 h-full w-[calc(var(--ef-splash-unit)*1.25)] forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[CanvasText] cq-portrait:top-auto cq-portrait:bottom-[calc(var(--ef-splash-unit)*17.75_+_(var(--_status)_-_var(--ef-splash-unit))*1.25_+_(var(--_tagline)_-_var(--ef-splash-unit)*1.5)*1.35)] cq-portrait:h-[calc(var(--ef-splash-unit)*2.5)] cq-portrait:w-[82.4074%]`,children:[H?/* @__PURE__ */ l(`span`,{className:`absolute inset-0 overflow-hidden`,children:/* @__PURE__ */ l(`span`,{className:`absolute inset-x-0 top-0 h-2/5 animate-indeterminate-y bg-action motion-reduce:translate-y-3/4 forced-colors:bg-[Highlight] cq-portrait:inset-x-auto cq-portrait:inset-y-0 cq-portrait:left-0 cq-portrait:h-auto cq-portrait:w-2/5 cq-portrait:animate-indeterminate cq-portrait:motion-reduce:translate-x-3/4 cq-portrait:motion-reduce:translate-y-0`})}):/* @__PURE__ */ l(`span`,{className:`absolute top-0 left-0 h-[calc(var(--ef-splash-progress)*1%)] w-full bg-action forced-colors:bg-[Highlight] cq-portrait:h-full cq-portrait:w-[calc(var(--ef-splash-progress)*1%)]`}),/* @__PURE__ */ u(`div`,{"aria-hidden":`true`,className:e(`absolute top-[calc(var(--ef-splash-progress)*1%)] left-[calc(var(--ef-splash-unit)*3.125)] h-0 whitespace-nowrap cq-portrait:top-auto cq-portrait:-bottom-[calc(var(--ef-splash-unit)*1.75)] cq-portrait:left-[calc(var(--ef-splash-progress)*1%)] cq-portrait:ml-[calc(var(--ef-splash-unit)*0.75)]`,H&&`translate-y-[calc(var(--ef-splash-unit)*3)] cq-portrait:translate-y-0`),children:[!B&&/* @__PURE__ */ u(`p`,{className:`absolute bottom-[calc(var(--ef-splash-unit)*1.625)] left-0 leading-none text-action`,children:[/* @__PURE__ */ l(`span`,{className:`mb-[calc(var(--ef-splash-unit)*0.25)] block h-[calc(var(--ef-splash-unit)*1.875)] w-[calc(var(--ef-splash-unit)*0.5)] rounded-[calc(var(--ef-splash-unit)*0.25)] bg-action`}),/* @__PURE__ */ l(`span`,{className:`text-[length:calc(var(--ef-splash-unit)*4.375)] font-medium tabular-nums [counter-reset:ef-splash_var(--ef-splash-percent)] before:content-[counter(ef-splash)]`}),/* @__PURE__ */ l(`span`,{className:`text-[length:calc(var(--ef-splash-unit)*3.25)]`,children:`%`})]}),/* @__PURE__ */ u(`p`,{className:`absolute -top-[calc(var(--ef-splash-unit)*0.5)] left-0 text-[length:var(--_status)] leading-[1.25] text-ink-tertiary`,children:[/* @__PURE__ */ l(`span`,{className:`block h-[calc(var(--ef-splash-unit)*0.5)] w-[calc(var(--ef-splash-unit)*1.25)] border-x-[length:calc(var(--ef-splash-unit)*0.5)] border-current`}),v]})]})]})]}),L&&/* @__PURE__ */ l(`span`,{"aria-hidden":`true`,className:`absolute inset-0 origin-left animate-fill bg-action [animation-delay:500ms] [animation-timing-function:cubic-bezier(1,0,0.7,1)] motion-reduce:hidden forced-colors:bg-[Highlight]`})]})}export{p as SplashScreen};

package/dist/components/splash-screen/index.d.ts

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

package/dist/components/stat/Stat.d.ts

@@ -0,0 +1,22 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/stat/Stat.d.ts
+export type StatSize = "md" | "lg";
+export type StatTrend = "up" | "down";
+export type StatProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 微标，说明这是什么数。前面的 `//` 由组件加，不用自己写 */
+  label: ReactNode;
+  /** 主角：一个需要被一眼看到的数字 */
+  value: ReactNode;
+  /** 单位，小一号、与数字基线对齐 */
+  unit?: ReactNode;
+  /** 增量，连同正负号一起传，如 `+6%`、`−2%` */
+  delta?: ReactNode;
+  /** `up` 渲染为增益签，默认；`down` 渲染为危险色文字 */
+  trend?: StatTrend;
+  /** 并排几个时，让最重要的那个用 `lg` */
+  size?: StatSize;
+};
+/** 统计块：不装进卡片，只用左缘一条墨色竖线。 */
+export declare function Stat({ label, value, unit, delta, trend, size, className, ...props }: StatProps): import("react").JSX.Element;
+//#endregion

package/dist/components/stat/Stat.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{Tag as t}from"../tag/Tag.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i={md:`text-4xl`,lg:`text-5xl`};function a({label:a,value:o,unit:s,delta:c,trend:l=`up`,size:u=`md`,className:d,...f}){let p=c!=null;return/* @__PURE__ */ r(`div`,{...f,"data-size":u,className:e(`min-w-0 border-l-4 border-ink pl-4 text-ink`,d),children:[/* @__PURE__ */ r(`p`,{className:`font-tech text-xs tracking-label text-ink-secondary`,children:[/* @__PURE__ */ n(`span`,{"aria-hidden":`true`,children:`// `}),a]}),/* @__PURE__ */ r(`p`,{className:`mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-1`,children:[/* @__PURE__ */ n(`span`,{className:e(`min-w-0 font-tech leading-none font-medium wrap-anywhere tabular-nums`,i[u]),children:o}),s!=null&&/* @__PURE__ */ n(`span`,{className:`text-sm text-ink-secondary`,children:s}),p&&(l===`down`?/* @__PURE__ */ n(`span`,{"data-trend":`down`,className:`font-tech text-sm font-bold text-danger tabular-nums`,children:c}):/* @__PURE__ */ n(t,{variant:`gain`,size:`sm`,numeric:!0,"data-trend":`up`,children:c}))]})]})}export{a as Stat};

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

@@ -0,0 +1,3 @@
+
+import { Stat, StatProps, StatSize, StatTrend } from "./Stat.js";
+export { Stat, type StatProps, type StatSize, type StatTrend };

package/dist/components/stepper/Stepper.d.ts

@@ -0,0 +1,29 @@
+
+import { ComponentProps } from "react";
+//#region src/components/stepper/Stepper.d.ts
+export type StepperSize = "sm" | "md" | "lg";
+export type StepperProps = Omit<ComponentProps<"input">, "type" | "size" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> & {
+  /** 受控的当前值 */
+  value?: number;
+  /** 非受控时的初始值，缺省取 `min`，没有 `min` 则为 0 */
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  /** 每一步的增量，默认 1；可以是小数 */
+  step?: number;
+  /** 32 / 40 / 56px 高 */
+  size?: StepperSize;
+  /** 错误态：数字下方出现一条红线。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+  /** 两端按钮的可访问名称 */
+  decrementLabel?: string;
+  incrementLabel?: string;
+};
+/**
+ * 步进器：`−` 钮 + 数字 + `+` 钮，三段紧贴。数字可以直接输入，
+ * 也可以用 ↑ ↓（一步）、PageUp / PageDown（十步）、Home / End（上下限）。
+ * `className` 给外框，其余属性与 `ref` 给中间的 `<input>`。
+ */
+export declare function Stepper({ value: valueProp, defaultValue, onValueChange, min, max, step, size, invalid: invalidProp, decrementLabel, incrementLabel, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, "aria-describedby": describedByProp, onKeyDown, onBlur, className, ...props }: StepperProps): import("react").JSX.Element;
+//#endregion

package/dist/components/stepper/Stepper.js

@@ -0,0 +1,2 @@
+"use client";
+import{Minus as e}from"../../icons/Minus.js";import{cn as t}from"../../lib/cn.js";import{focusRingWithin as n}from"../../lib/focus-ring.js";import{useControllableState as r}from"../../hooks/useControllableState.js";import{useFieldControl as i}from"../field/Field.js";import{Plus as a}from"../../icons/Plus.js";import{useEffect as o,useRef as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d={sm:`h-8 text-sm`,md:`h-10 text-base`,lg:`h-14 text-lg`},f={sm:`w-8`,md:`w-10`,lg:`w-14`},p={sm:`w-12`,md:`w-14`,lg:`w-20`},m={sm:14,md:16,lg:20};function h(e){let t=String(e),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}function g({value:g,defaultValue:_,onValueChange:v,min:y,max:b,step:x=1,size:S=`md`,invalid:C,decrementLabel:w=`减少`,incrementLabel:T=`增加`,id:E,disabled:D,required:O,readOnly:k=!1,"aria-describedby":A,onKeyDown:ee,onBlur:te,className:ne,...j}){let{id:M,disabled:N,required:P,invalid:F,...I}=i({id:E,disabled:D,required:O,invalid:C,"aria-describedby":A}),L=Math.max(h(x),h(y??0),h(b??0)),R=e=>Number(Math.min(Math.max(e,y??-1/0),b??1/0).toFixed(L)),[z,B]=r({value:g,defaultValue:_??R(0),onChange:v}),[V,H]=c(null),U=y!==void 0&&z<=y,W=b!==void 0&&z>=b,G=N||k,K=e=>{let t=V===null||V.trim()===``?NaN:Number(V),n=R((Number.isFinite(t)?t:z)+e);return H(null),n!==z&&(B(n),!0)},q=()=>{if(V===null)return;let e=V.trim()===``?NaN:Number(V);H(null),Number.isFinite(e)&&B(R(e))},J=s(K);o(()=>{J.current=K});let Y=s({}),X=()=>{window.clearTimeout(Y.current.delay),window.clearInterval(Y.current.repeat),Y.current={}};o(()=>X,[]);let Z=(e,t)=>{e.button>0||(X(),J.current(t)&&(Y.current.delay=window.setTimeout(()=>{Y.current.repeat=window.setInterval(()=>{J.current(t)||X()},80)},400)))},Q=(e,t)=>{e.detail===0&&K(t)},re=e=>{let t=e.target.value;/^-?\d*\.?\d*$/.test(t)&&H(t)},ie=e=>{if(ee?.(e),!(e.defaultPrevented||G)){switch(e.key){case`ArrowUp`:K(x);break;case`ArrowDown`:K(-x);break;case`PageUp`:K(x*10);break;case`PageDown`:K(-x*10);break;case`Home`:if(y===void 0)return;H(null),B(y);break;case`End`:if(b===void 0)return;H(null),B(b);break;case`Enter`:q();return;default:return}e.preventDefault()}},ae=e=>{te?.(e),q()},$=e=>t(`flex shrink-0 items-center justify-center select-none`,`transition-colors duration-(--duration-fast) ease-standard`,`forced-colors:border forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]`,f[S],e?`cursor-not-allowed bg-disabled text-on-disabled`:`bg-control text-on-control hover:bg-control-hover active:bg-control-pressed`);return/* @__PURE__ */ u(`div`,{"data-size":S,"data-invalid":F?``:void 0,className:t(`inline-flex items-stretch`,n,d[S],ne),children:[/* @__PURE__ */ l(`button`,{type:`button`,tabIndex:-1,"aria-label":w,disabled:G||U,onPointerDown:e=>Z(e,-x),onPointerUp:X,onPointerLeave:X,onPointerCancel:X,onClick:e=>Q(e,-x),className:$(G||U),children:/* @__PURE__ */ l(e,{size:m[S]})}),/* @__PURE__ */ l(`input`,{...j,id:M,type:`text`,role:`spinbutton`,inputMode:L>0?`decimal`:`numeric`,autoComplete:`off`,value:V??String(z),disabled:N,required:P,readOnly:k,"aria-valuenow":z,"aria-valuemin":y,"aria-valuemax":b,"aria-invalid":F||void 0,"aria-describedby":I[`aria-describedby`],onChange:re,onKeyDown:ie,onBlur:ae,className:t(`min-w-0 flex-1 border-y-2 border-transparent bg-surface-sunken text-center font-tech font-bold tabular-nums outline-none`,`disabled:cursor-not-allowed`,`forced-colors:border-y forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]`,p[S],N?`text-ink-disabled`:`text-ink`,F&&!N&&`border-b-danger`)}),/* @__PURE__ */ l(`button`,{type:`button`,tabIndex:-1,"aria-label":T,disabled:G||W,onPointerDown:e=>Z(e,x),onPointerUp:X,onPointerLeave:X,onPointerCancel:X,onClick:e=>Q(e,x),className:$(G||W),children:/* @__PURE__ */ l(a,{size:m[S]})})]})}export{g as Stepper};

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

@@ -0,0 +1,3 @@
+
+import { Stepper, StepperProps, StepperSize } from "./Stepper.js";
+export { Stepper, type StepperProps, type StepperSize };

package/dist/components/steps/Steps.d.ts

@@ -0,0 +1,55 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEventHandler, ReactNode } from "react";
+//#region src/components/steps/Steps.d.ts
+export type StepsOrientation = "horizontal" | "vertical";
+export type StepsSize = "sm" | "md";
+export type StepStatus = "done" | "current" | "upcoming";
+/** 读屏听到的状态。未到的步骤不另说 */
+export type StepStatusLabels = {
+  done: string;
+  current: string;
+  invalid: string;
+};
+export type StepsProps = Omit<ComponentProps<"ol">, "aria-label"> & {
+  /** 这是哪件事的步骤，比如"建站流程" */
+  "aria-label": string;
+  /** 走到了第几步，从 0 起。等于步数时全部是已完成 */
+  current: number;
+  /**
+   * - `horizontal` 横排，默认。所在的容器窄于 28rem 时自动改成竖排；
+   * - `vertical` 一直竖排。
+   */
+  orientation?: StepsOrientation;
+  size?: StepsSize;
+  /** 换掉读屏听到的那几句状态 */
+  statusLabels?: Partial<StepStatusLabels>;
+  /** 直接放 `Step` */
+  children: ReactNode;
+};
+/**
+ * 步骤条：一件事分几步做，一共几步、走到了哪一步。里面只放 `Step`。
+ * 每一步的状态由 `current` 和它的位置算出来。
+ *
+ * `className` 给最外面的那层（它是量宽度的容器），其余属性给里面的 `<ol>`。
+ */
+export declare function Steps({ current, orientation, size, statusLabels, className, children, ...props }: StepsProps): import("react").JSX.Element;
+type StepOwnProps = {
+  title: ReactNode;
+  /** 标题下的说明 */
+  description?: ReactNode;
+  /** 这一步有东西没填对：节点换成警示图标，读屏多听到一句"有误" */
+  invalid?: boolean;
+  /** 传了就可以点（回到做过的步骤）：标题是链接，点击范围铺满这一步 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替标题里的 `<a>`（路由库的链接组件） */
+  render?: LinkRender;
+  /** 不是链接、但要能点时用它：标题是按钮 */
+  onClick?: MouseEventHandler<HTMLElement>;
+};
+export type StepProps = StepOwnProps & Omit<ComponentProps<"li">, keyof StepOwnProps | "children">;
+export declare function Step({ title, description, invalid, href, target, rel, render, onClick, className, ...props }: StepProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/steps/Steps.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{StatusDanger as n}from"../../icons/StatusDanger.js";import{LinkElement as r}from"../link-element/LinkElement.js";import{Check as i}from"../../icons/Check.js";import{Children as a,useContext as o}from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u={done:`已完成`,current:`当前步骤`,invalid:`有误`},d=/* @__PURE__ */ t(null),f={vertical:`flex-col`,horizontal:`flex-col @md:flex-row`},p={vertical:`gap-3`,horizontal:`gap-3 @md:flex-1 @md:flex-col @md:gap-2`},m={vertical:`flex-col`,horizontal:`flex-col @md:flex-row`},h={vertical:`my-2 min-h-4 w-0.5 forced-colors:border-r`,horizontal:`my-2 min-h-4 w-0.5 @md:mx-2 @md:my-0 @md:h-0.5 @md:min-h-0 @md:w-auto forced-colors:@max-md:border-r forced-colors:@md:border-b`},g={vertical:`pb-4 group-last/step:pb-0`,horizontal:`pb-4 group-last/step:pb-0 @md:pr-4 @md:pb-0`};function _({current:t,orientation:n=`horizontal`,size:r=`md`,statusLabels:i,className:o,children:s,...l}){let p=d(),m={...u,...i},h=a.toArray(s);return/* @__PURE__ */ c(`div`,{"data-orientation":n,"data-size":r,className:e(`@container w-full text-ink`,o),children:/* @__PURE__ */ c(`ol`,{...l,className:e(`flex`,f[n]),children:h.map((e,i)=>/* @__PURE__ */ c(p.Provider,{value:{index:i,status:i<t?`done`:i===t?`current`:`upcoming`,orientation:n,size:r,labels:m},children:e},i))})})}const v={sm:`size-5 text-micro [&_svg]:size-3`,md:`size-6 text-xs [&_svg]:size-3.5`},y={done:`bg-surface-inverse text-accent-ink-inverse forced-colors:bg-[CanvasText] forced-colors:text-[Canvas]`,current:`border border-ink bg-action font-bold text-on-action forced-colors:forced-color-adjust-none forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]`,upcoming:`border border-line-strong text-ink-secondary`},b={sm:`text-xs`,md:`text-sm`},x={done:`font-medium text-ink`,current:`font-bold text-ink`,upcoming:`font-medium text-ink-secondary`};function S({title:t,description:a,invalid:u=!1,href:f,target:_,rel:S,render:C,onClick:w,className:T,...E}){let D=o(d());if(!D)throw Error(`<Step> 必须放在 <Steps> 里`);let{index:O,status:k,orientation:A,size:j,labels:M}=D,N=f!==void 0||C!==void 0,P=N||w!==void 0,F=[k===`done`?M.done:k===`current`?M.current:``,u?M.invalid:``].filter(Boolean).join(`，`),I=`text-left outline-none after:absolute after:inset-0 after:content-[''] hover:underline hover:underline-offset-4`,L=/* @__PURE__ */ l(s,{children:[F!==``&&/* @__PURE__ */ c(`span`,{className:`sr-only`,children:`${F}：`}),t]});return/* @__PURE__ */ l(`li`,{...E,"data-status":k,"data-invalid":u?``:void 0,"aria-current":k===`current`?`step`:void 0,className:e(`group/step relative flex min-w-0`,p[A],P&&`has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-focus`,T),children:[/* @__PURE__ */ l(`span`,{"aria-hidden":`true`,className:e(`flex shrink-0 items-center`,m[A]),children:[/* @__PURE__ */ c(`span`,{className:e(`flex shrink-0 items-center justify-center font-tech leading-none tabular-nums`,`transition-colors duration-(--duration-fast) ease-standard`,v[j],u?`border border-danger text-danger`:y[k]),children:u?/* @__PURE__ */ c(n,{}):k===`done`?/* @__PURE__ */ c(i,{}):String(O+1).padStart(2,`0`)}),/* @__PURE__ */ c(`span`,{className:e(`relative flex-1 overflow-clip bg-line-strong group-last/step:hidden`,`forced-colors:border-[CanvasText] forced-colors:before:bg-[CanvasText]`,`before:absolute before:top-0 before:-right-4 before:-bottom-4 before:left-0 before:origin-top-left before:bg-ink before:transition-[scale] before:duration-(--duration-base) before:ease-exit before:content-['']`,h[A],k===`done`?`before:scale-100`:`before:scale-0`)})]}),/* @__PURE__ */ l(`div`,{className:e(`min-w-0 flex-1`,g[A]),children:[/* @__PURE__ */ c(`div`,{className:e(`wrap-anywhere`,b[j],x[k],j===`md`?`leading-6`:`leading-5`),children:N?/* @__PURE__ */ c(r,{render:C,href:f,target:_,rel:S,onClick:w,className:I,children:L}):w?/* @__PURE__ */ c(`button`,{type:`button`,onClick:w,className:I,children:L}):L}),a!==void 0&&/* @__PURE__ */ c(`div`,{className:`mt-0.5 text-xs text-ink-secondary`,children:a})]})]})}export{S as Step,_ as Steps};

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

@@ -0,0 +1,3 @@
+
+import { Step, StepProps, StepStatus, StepStatusLabels, Steps, StepsOrientation, StepsProps, StepsSize } from "./Steps.js";
+export { Step, type StepProps, type StepStatus, type StepStatusLabels, Steps, type StepsOrientation, type StepsProps, type StepsSize };

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,28 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/switch/Switch.d.ts
+type DualLabels = {
+  offLabel?: undefined;
+  onLabel?: undefined;
+} | {
+  /** 双标签开关：关闭时的值，写在轨道左半（如 `2D`） */
+  offLabel: ReactNode;
+  /** 双标签开关：开启时的值，写在轨道右半（如 `3D`） */
+  onLabel: ReactNode;
+};
+export type SwitchProps = Omit<ComponentProps<"input">, "type" | "size"> & {
+  onCheckedChange?: (checked: boolean) => void;
+  /** 右侧的文字标签。不传时必须自己给 `aria-label` */
+  children?: ReactNode;
+} & DualLabels;
+/**
+ * 开关：胶囊轨道 + 圆形旋钮，立即生效的设置用它（需要"保存"才生效的用复选框）。
+ * 原生 `<input type="checkbox" role="switch">`，受控用 `checked`、非受控用 `defaultChecked`。
+ * `className` 给整行，其余属性与 `ref` 给 `<input>`。
+ *
+ * 两个值都要显示时（`2D` / `3D`）同时传 `offLabel` 与 `onLabel`：两个值并排写在轨道上，
+ * 旋钮盖住当前的那一个。这时名称要写成"开 = 第二个值"的说法，如 `aria-label="三维视图"`。
+ */
+export declare function Switch({ onCheckedChange, onChange, offLabel, onLabel, className, children, ...props }: SwitchProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/switch/Switch.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{choiceControl as n,choiceLabel as r}from"../checkbox/choice-style.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=`transition-colors duration-(--duration-fast) ease-standard`,s=`pointer-events-none relative min-w-9 px-3 text-center transition-colors duration-(--duration-fast) ease-standard peer-disabled:text-ink-disabled`;function c({onCheckedChange:c,onChange:l,offLabel:u,onLabel:d,className:f,children:p,...m}){let h=e=>{l?.(e),c?.(e.target.checked)},g=u!==void 0&&d!==void 0?/* @__PURE__ */ a(`span`,{className:`relative inline-grid h-8 grid-cols-2 items-center font-tech text-xs leading-none font-bold`,children:[/* @__PURE__ */ i(`input`,{...m,type:`checkbox`,role:`switch`,onChange:h,className:e(`peer absolute inset-0 size-full appearance-none rounded-full bg-surface-inverse/80 group-hover:bg-surface-inverse disabled:cursor-not-allowed disabled:bg-surface-muted`,`forced-colors:border forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]`,o,t)}),/* @__PURE__ */ i(`span`,{"aria-hidden":`true`,className:e(`pointer-events-none absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded-full bg-surface-muted`,`transition-[translate] duration-(--duration-fast) ease-standard`,`peer-checked:translate-x-full peer-disabled:bg-surface-raised`,`forced-colors:bg-[Highlight] forced-colors:peer-disabled:bg-[GrayText]`)}),/* @__PURE__ */ i(`span`,{"aria-hidden":`true`,"data-value":`off`,className:e(s,`text-ink peer-checked:text-ink-inverse/70`,`forced-colors:forced-color-adjust-none forced-colors:text-[HighlightText] forced-colors:peer-checked:text-[CanvasText] forced-colors:peer-disabled:text-[Canvas] forced-colors:peer-checked:peer-disabled:text-[GrayText]`),children:u}),/* @__PURE__ */ i(`span`,{"aria-hidden":`true`,"data-value":`on`,className:e(s,`text-ink-inverse/70 peer-checked:text-ink`,`forced-colors:forced-color-adjust-none forced-colors:text-[CanvasText] forced-colors:peer-checked:text-[HighlightText] forced-colors:peer-disabled:text-[GrayText] forced-colors:peer-checked:peer-disabled:text-[Canvas]`),children:d})]}):/* @__PURE__ */ a(`span`,{className:`relative inline-flex h-7 w-13`,children:[/* @__PURE__ */ i(`input`,{...m,type:`checkbox`,role:`switch`,onChange:h,className:e(`peer h-7 w-13 appearance-none rounded-full bg-line-strong group-hover:bg-ink-tertiary checked:bg-surface-inverse disabled:cursor-not-allowed disabled:bg-surface-muted`,`forced-colors:border-2 forced-colors:border-[ButtonText] forced-colors:checked:border-[Highlight] forced-colors:checked:bg-[Highlight]`,`forced-colors:disabled:border-[GrayText] forced-colors:checked:disabled:bg-[GrayText]`,o,t)}),/* @__PURE__ */ i(`span`,{"aria-hidden":`true`,className:e(`pointer-events-none absolute top-1 left-1 size-5 rounded-full bg-surface-raised`,`transition-[translate,background-color] duration-(--duration-fast) ease-standard`,`peer-checked:translate-x-6 peer-checked:bg-accent-ink-inverse peer-disabled:bg-ink-disabled`,`forced-colors:bg-[ButtonText] forced-colors:peer-checked:bg-[HighlightText] forced-colors:peer-disabled:bg-[GrayText] forced-colors:peer-checked:peer-disabled:bg-[Canvas]`)})]});return/* @__PURE__ */ a(`label`,{className:e(r,`gap-3`,f),children:[/* @__PURE__ */ i(`span`,{className:n,children:g}),p!==void 0&&/* @__PURE__ */ i(`span`,{className:`min-w-0`,children:p})]})}export{c as Switch};

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

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