neba 0.0.1 → 1.1.0

package/dist/components/pill/index.js

@@ -0,0 +1 @@
+export{Pill}from"./Pill";

package/dist/components/progress-box/ProgressBox.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { type ProgressSharedProps } from '../../internal/progress';
+import type { NebaColor, NebaSize } from '../../types';
+export interface ProgressBoxProps extends ProgressSharedProps {
+    /** Size of one plate. */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /**
+     * How many plates the row is made of.
+     *
+     * Four by default: enough that the wave reads as a wave, few enough that a
+     * determinate row can be counted at a glance rather than measured. Set it to
+     * the number of steps when the thing being waited on genuinely has steps.
+     * @default 4
+     */
+    count?: number;
+}
+/**
+ * A row of acrylic plates that light up.
+ *
+ * The third shape, and the one that is about the material rather than about the
+ * quantity. A bar and a ring both say "this much of it is done"; a row of
+ * plates says "this is working" in the library's own vocabulary — the same cut
+ * sheet, the same hairline, the same fill — which is what makes it the right
+ * one for a loading state inside a Neba surface where a foreign grey spinner
+ * would look borrowed.
+ *
+ * It answers a value when it has one: the plates fill left to right, the last
+ * one partially, so four plates read as a four-segment bar. Without a value
+ * they cycle, each held back by its own index.
+ */
+export declare const ProgressBox: React.ForwardRefExoticComponent<ProgressBoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/progress-box/ProgressBox.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as t}from"@base-ui/react/progress";import{plateGapClasses as n,plateRadiusClasses as r,plateSizeClasses as s,progressAriaText as i,progressFraction as o,progressSlots as m,progressText as f}from"../../internal/progress";import{metaTextClasses as c,stackGapClasses as u}from"../../internal/styles";export const ProgressBox=l.forwardRef(function({size:l="md",color:d="primary",count:h=4,value:x=null,min:b=0,max:p=100,label:g,showValue:v=!1,format:y,className:w,style:j},N){const M=o(x,b,p),B=null===M,V=void 0!==y,k=Math.max(1,Math.floor(h));return a(t.Root,{ref:N,value:x??null,min:b,max:p,format:y,getAriaValueText:i(M,V),className:["inline-flex flex-col",u[l],w??""].filter(Boolean).join(" "),style:{...m(d),...j},children:[g||v?a("div",{className:["flex items-baseline gap-2",g?"justify-between":"justify-end",c[l]].join(" "),children:[g?e(t.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:g}):null,v?e(t.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>f(M,e,V)}):null]}):null,e(t.Track,{className:`flex ${n[l]}`,children:Array.from({length:k},(a,t)=>e("span",{className:["relative overflow-hidden bg-(--n-soft)","[box-shadow:var(--neba-plate-glass)]",s[l],r[l],B?"neba-plate-wave":""].filter(Boolean).join(" "),style:B?{"--n-i":t}:void 0,children:B?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease)]",style:{width:`${Math.min(100,Math.max(0,100*(M*k-t)))}%`}})},t))})]})});

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

@@ -0,0 +1,2 @@
+export { ProgressBox } from './ProgressBox';
+export type { ProgressBoxProps } from './ProgressBox';

package/dist/components/progress-box/index.js

@@ -0,0 +1 @@
+export{ProgressBox}from"./ProgressBox";

package/dist/components/progress-circular/ProgressCircular.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { type ProgressSharedProps } from '../../internal/progress';
+import type { NebaColor, NebaSize } from '../../types';
+export interface ProgressCircularProps extends ProgressSharedProps {
+    /** Diameter of the ring. Sits just under the control ladder at every step. */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+}
+/**
+ * A ring that fills, and the one to reach for when there is no room for a bar —
+ * inside a button, at the end of a table row, next to a field.
+ *
+ * The value and the label sit *beside* the ring rather than inside it. A number
+ * in the middle of a dial is the picture everyone has of this component, and it
+ * only works at two of the five sizes: at `xs` the ring is fourteen pixels
+ * across and there is nowhere for "40%" to go. Beside it, every size reads.
+ */
+export declare const ProgressCircular: React.ForwardRefExoticComponent<ProgressCircularProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/progress-circular/ProgressCircular.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Progress as t}from"@base-ui/react/progress";import{progressAriaText as s,progressFraction as n,progressSlots as i,progressText as o,ringDiameters as l,ringStrokes as c}from"../../internal/progress";import{gapClasses as m,metaTextClasses as f}from"../../internal/styles";export const ProgressCircular=a.forwardRef(function({size:a="md",color:u="primary",value:h=null,min:d=0,max:x=100,label:k,showValue:p=!1,format:b,className:g,style:v},y){const $=n(h,d,x),N=null===$,w=void 0!==b,j=l[a],V=c[a],B=j/2,D=B-V/2,L=2*Math.PI*D,P=N?`${.28*L} ${L}`:`${L}`,R=N?0:L*(1-$);return r(t.Root,{ref:y,value:h??null,min:d,max:x,format:b,getAriaValueText:s($,w),className:["inline-flex items-center",m[a],f[a],g??""].filter(Boolean).join(" "),style:{...i(u),...v},children:[r("svg",{className:N?"neba-ring-spin shrink-0":"shrink-0",width:j,height:j,viewBox:`0 0 ${j} ${j}`,fill:"none","aria-hidden":"true",children:[e("circle",{cx:B,cy:B,r:D,stroke:"var(--n-soft)",strokeWidth:V}),e("circle",{cx:B,cy:B,r:D,stroke:"var(--n-accent)",strokeWidth:V,strokeLinecap:"round",strokeDasharray:P,strokeDashoffset:R,transform:`rotate(-90 ${B} ${B})`,className:"[transition:stroke-dashoffset_var(--neba-duration-fill)_var(--neba-ease)]"})]}),k?e(t.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:k}):null,p?e(t.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>o($,e,w)}):null]})});

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

@@ -0,0 +1,2 @@
+export { ProgressCircular } from './ProgressCircular';
+export type { ProgressCircularProps } from './ProgressCircular';

package/dist/components/progress-circular/index.js

@@ -0,0 +1 @@
+export{ProgressCircular}from"./ProgressCircular";

package/dist/components/progress-linear/ProgressLinear.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type ProgressSharedProps } from '../../internal/progress';
+import type { NebaColor, NebaSize } from '../../types';
+export interface ProgressLinearProps extends ProgressSharedProps {
+    /** Thickness of the groove. Nothing else on a bar has a size. */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+}
+/**
+ * A bar that fills. The workhorse: it is the only one of the three that can
+ * show *how much* is left at a glance, because length is the one quantity a
+ * reader can compare without counting.
+ *
+ * Base UI's Progress owns the semantics — `role="progressbar"`, the value and
+ * range attributes, `aria-valuetext`, and dropping the value entirely when the
+ * bar is indeterminate — and it also computes the fill width, so the determinate
+ * case here is a class list and nothing else.
+ */
+export declare const ProgressLinear: React.ForwardRefExoticComponent<ProgressLinearProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/progress-linear/ProgressLinear.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as n,progressAriaText as s,progressFraction as t,progressSlots as i,progressText as o}from"../../internal/progress";import{metaTextClasses as m,stackGapClasses as u}from"../../internal/styles";export const ProgressLinear=a.forwardRef(function({size:a="md",color:f="primary",value:c=null,min:d=0,max:b=100,label:p,showValue:x=!1,format:g,className:h,style:w},j){const v=t(c,d,b),N=null===v,y=void 0!==g;return l(r.Root,{ref:j,value:c??null,min:d,max:b,format:g,getAriaValueText:s(v,y),className:["flex w-full flex-col",u[a],h??""].filter(Boolean).join(" "),style:{...i(f),...w},children:[p||x?l("div",{className:["flex items-baseline gap-2",p?"justify-between":"justify-end",m[a]].join(" "),children:[p?e(r.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:p}):null,x?e(r.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>o(v,e,y)}):null]}):null,e(r.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${n[a]}`,children:e(r.Indicator,{className:["absolute rounded-full bg-(--n-fill)",N?"neba-sweep":"top-0 [transition:width_var(--neba-duration-fill)_var(--neba-ease)]"].join(" ")})})]})});

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

@@ -0,0 +1,2 @@
+export { ProgressLinear } from './ProgressLinear';
+export type { ProgressLinearProps } from './ProgressLinear';

package/dist/components/progress-linear/index.js

@@ -0,0 +1 @@
+export{ProgressLinear}from"./ProgressLinear";

package/dist/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Radio as BaseUIRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group';
+import type { NebaColor, NebaOrientation, NebaSize } from '../../types';
+export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadioGroup>, 'className' | 'style' | 'render'> {
+    /** @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /**
+     * Which way the options stack. Vertical by default — a column of options is
+     * scannable at any length, and a row silently becomes unreadable the moment
+     * one label is longer than expected.
+     * @default 'vertical'
+     */
+    orientation?: NebaOrientation;
+    /** The question the options answer. Rendered as the group's legend. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    /** Error message below the options. Its presence also turns the group invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to `!!error`. */
+    invalid?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface RadioProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadio.Root>, 'className' | 'style' | 'render' | 'children'> {
+    /** The text beside the dot. Wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * One option in a RadioGroup.
+ *
+ * It has no `size` and no `color` of its own — both come from the group, which
+ * is the only place they can be set once and mean the same thing for every
+ * option in the set.
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A set of options where exactly one is chosen.
+ *
+ * Base UI owns the roving tab index and the arrow-key navigation, which is the
+ * whole reason a radio group is a component at all rather than a `<div>` full of
+ * inputs: the set takes one tab stop, and the arrows move within it.
+ */
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/radio-group/RadioGroup.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as o}from"@base-ui/react/field";import{controlTextClasses as i,metaTextClasses as t,surfaceClasses as s,tickDotClasses as d,tickRowLeadingClasses as c,tickSizeClasses as b,transitionClasses as f}from"../../internal/styles";const h=r.createContext({size:"md",color:"primary",readOnly:!1}),m=["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),u=[s,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),p=[s,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),v=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" ");export const Radio=r.forwardRef(function({label:l,description:s,disabled:f=!1,className:x,style:g,...y},N){const j=r.useContext(h),$=y.readOnly??j.readOnly;return e(o.Root,{disabled:f,className:["flex flex-col",x??""].filter(Boolean).join(" "),style:g,children:a("div",{className:`flex items-start gap-2 ${i[j.size]} ${c}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:N,className:[m,b[j.size],f?v:$?p:u].join(" "),disabled:f,...y,children:e(n.Indicator,{className:`rounded-full bg-current ${d[j.size]}`})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(o.Label,{className:["leading-[1.4]",f?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:l}):null,s?e(o.Description,{className:`${t[j.size]} text-(--neba-muted-fg)`,children:s}):null]}):null]})})});export const RadioGroup=r.forwardRef(function({size:n="md",color:i="primary",orientation:s="vertical",label:d,description:c,error:b,invalid:f,disabled:m=!1,readOnly:u=!1,className:p,style:v,children:x,...g},y){const N=null!=b&&!1!==b&&""!==b,j=f??N,$=j?"danger":i,k={"--n-fill":`var(--neba-${$}-fill)`,"--n-fill-hover":`var(--neba-${$}-fill-hover)`,"--n-on-solid":`var(--neba-${$}-on-solid)`,"--n-accent":`var(--neba-${$}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${$}-line)`,"--n-line-hover":`var(--neba-${$}-line-hover)`,"--n-ring":`var(--neba-${$}-ring)`},R=r.useMemo(()=>({size:n,color:$,readOnly:u}),[n,$,u]);return e(h.Provider,{value:R,children:a(o.Root,{disabled:m,invalid:j,className:["flex flex-col gap-1.5",p??""].filter(Boolean).join(" "),style:{...k,...v},children:[d?e(o.Label,{className:[t[n],"font-medium",m?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:d}):null,c?e(o.Description,{className:`${t[n]} text-(--neba-muted-fg)`,children:c}):null,e(l,{ref:y,disabled:m,readOnly:u,className:["flex","horizontal"===s?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2"].join(" "),...g,children:x}),N?e(o.Error,{match:!0,className:`${t[n]} text-(--n-accent)`,children:b}):null]})})});

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

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from './RadioGroup';
+export type { RadioGroupProps, RadioProps } from './RadioGroup';

package/dist/components/radio-group/index.js

@@ -0,0 +1 @@
+export{Radio,RadioGroup}from"./RadioGroup";

package/dist/components/segmented-button/SegmentedButton.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps, NebaVariant } from '../../types';
+/** A segment's value. The same restraint Tabs and Select put on theirs. */
+export type SegmentValue = string | number;
+export interface SegmentedButtonProps extends Omit<NebaStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Weight of the trough the segments sit in.
+     *
+     * - `solid` — a frosted trough with a filled tile riding in it. The loudest,
+     *   and the one for a control a screen is about to be steered by.
+     * - `outline` — the same trough with a hairline around it and a lit tile
+     *   rather than a filled one. The default.
+     * - `text` — no trough at all: the segments sit straight on the page and only
+     *   the chosen one has a surface.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** The chosen segment. Use with `onValueChange` for a controlled set. */
+    value?: SegmentValue | null;
+    /** Which starts chosen, for an uncontrolled set. */
+    defaultValue?: SegmentValue | null;
+    onValueChange?: (value: SegmentValue | null) => void;
+    /**
+     * Drop shadow depth of the trough. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** Disables every segment at once. */
+    disabled?: boolean;
+    /** Shows which one is chosen but does not let it be changed. */
+    readOnly?: boolean;
+    /** Identifies the value when a form is submitted. */
+    name?: string;
+    /** The segments share the full width, each taking an equal part of it. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+export interface SegmentProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'value' | 'color'> {
+    /** Identifies the segment. What `onValueChange` reports. */
+    value: SegmentValue;
+    /** Content before the label. Sized in `em`, so it tracks the label. */
+    startIcon?: React.ReactNode;
+    /** Content after the label — a count, a status dot. */
+    endIcon?: React.ReactNode;
+    /** Unavailable, but still part of the set. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * One choice in a segmented button.
+ *
+ * It has no `size`, no `color` and no `variant` of its own: all three belong to
+ * the set, which is the only place they can be set once and mean the same thing
+ * for every segment.
+ */
+export declare const Segment: React.ForwardRefExoticComponent<SegmentProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Two or more choices in one pill, exactly one of them taken.
+ *
+ * Underneath it is a radio group, and that is the whole accessibility argument:
+ * a segmented button *is* "exactly one of these", so it gets `role="radiogroup"`,
+ * one tab stop for the set, arrow keys within it, and `aria-checked` on the one
+ * that is taken. Building it out of `aria-pressed` toggles — which is what a row
+ * of buttons would give — would announce four independent switches, three of
+ * which happen to be off.
+ *
+ * The tile slides because its `left`, `top`, `width` and `height` are measured
+ * off the chosen segment and animated. Nothing is transformed: the tile is an
+ * empty box, and no label is resampled while it travels. That is the same
+ * distinction Tabs' indicator draws, and the reason the house no-transform rule
+ * survives a component whose entire point is that something moves.
+ *
+ * `left`, not `inset-inline-start`, for the reason Tabs gives: `offsetLeft` is a
+ * distance from the left edge and stays one under RTL. Pairing a physical
+ * measurement with a logical property is what would break the direction.
+ */
+export declare const SegmentedButton: React.ForwardRefExoticComponent<SegmentedButtonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/segmented-button/SegmentedButton.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as r}from"@base-ui/react/radio-group";import{controlHeightClasses as s,controlSlots as l,controlTextClasses as o,gapClasses as i,hasContent as d,iconClasses as u,paddingXClasses as c,surfaceClasses as f,transitionClasses as h}from"../../internal/styles";const p=a.createContext({variant:"outline",size:"md",density:"default",fullWidth:!1}),b={solid:`${f} bg-(--n-panel) p-1 [box-shadow:var(--n-elev),var(--neba-plate-glass)]`,outline:`${f} border bg-(--n-panel) p-1 [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)]`,text:""},m={solid:`${f} bg-(--n-fill) [box-shadow:var(--neba-shadow-1),var(--neba-plate-solid)]`,outline:`${f} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:`${f} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`},v={solid:"data-[checked]:text-(--n-on-solid)",outline:"data-[checked]:text-(--n-accent)",text:"data-[checked]:text-(--n-accent)"};export const Segment=a.forwardRef(function({value:r,startIcon:l,endIcon:f,disabled:b=!1,className:m,children:x,...g},y){const{variant:w,size:k,density:$,fullWidth:R}=a.useContext(p);return t(n.Root,{ref:y,value:r,disabled:b,"data-segment":"",className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",s[k],o[k],i[k],c[$][k],"rounded-full",h,u,"text-(--neba-muted-fg) hover:text-(--neba-fg)",v[w],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","data-[readonly]:cursor-default",R?"flex-1":"",m??""].filter(Boolean).join(" "),...g,children:[d(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,x,d(f)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:f}):null]})});export const SegmentedButton=a.forwardRef(function({variant:n="outline",size:s="md",color:o="primary",density:i="default",elevation:d=0,value:u,defaultValue:c=null,onValueChange:f,disabled:v=!1,readOnly:x=!1,name:g,fullWidth:y=!1,className:w,style:k,children:$,...R},j){const[N,z]=a.useState(c),W=void 0!==u,C=W?u:N,P=a.useRef(null),S=a.useRef(null),A=a.useCallback(e=>{const t=P.current,a=S.current;if(!t||!a)return;const n=t.querySelector("[data-segment][data-checked]");if(!n)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-seg-x",`${n.offsetLeft}px`),a.style.setProperty("--n-seg-y",`${n.offsetTop}px`),a.style.setProperty("--n-seg-w",`${n.offsetWidth}px`),a.style.setProperty("--n-seg-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);a.useLayoutEffect(()=>{A(!0)},[A,C,n,s,i,y,$]),a.useEffect(()=>{const e=P.current;if(!e)return;const t=new ResizeObserver(()=>A(!1));return t.observe(e),()=>t.disconnect()},[A]);const B=a.useMemo(()=>({variant:n,size:s,density:i,fullWidth:y}),[n,s,i,y]);return e(p.Provider,{value:B,children:t(r,{ref:e=>{P.current=e,"function"==typeof j?j(e):j&&(j.current=e)},value:C,onValueChange:e=>{const t=e??null;W||z(t),f?.(t)},disabled:v,readOnly:x,name:g,className:["relative inline-flex items-center rounded-full",b[n],h,x?"[filter:saturate(0.55)]":"",y?"flex w-full":"",w??""].filter(Boolean).join(" "),style:{...l(o,d,n),...k},...R,children:[null!=C?e("span",{ref:S,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","left-(--n-seg-x) top-(--n-seg-y) h-(--n-seg-h) w-(--n-seg-w)",m[n],"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]"].join(" ")}):null,$]})})});

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

@@ -0,0 +1,2 @@
+export { Segment, SegmentedButton } from './SegmentedButton';
+export type { SegmentedButtonProps, SegmentProps, SegmentValue } from './SegmentedButton';

package/dist/components/segmented-button/index.js

@@ -0,0 +1 @@
+export{Segment,SegmentedButton}from"./SegmentedButton";

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/**
+ * What a Select's value may be.
+ *
+ * Deliberately not generic over arbitrary objects. A select is a form control,
+ * its value is what a form submits, and every escape from that — object values,
+ * custom equality, a stringifier for the trigger — buys flexibility by making
+ * the common case harder to write. Keep the identifier here and look the object
+ * up on the other side.
+ */
+export type SelectValue = string | number;
+export interface SelectOption {
+    /** Submitted, and what `value` / `onValueChange` speak in. */
+    value: SelectValue;
+    /** Shown in the list and in the trigger. Defaults to the value itself. */
+    label?: React.ReactNode;
+    /** Unavailable, but still listed — the option exists, it just cannot be picked. */
+    disabled?: boolean;
+}
+export interface SelectProps extends NebaStyleProps {
+    /**
+     * The options, as data. There is no `<Select.Option>` to compose: what a
+     * caller has is almost always an array already, and the list has to be
+     * available to the trigger before the popup has ever been opened.
+     */
+    items: readonly SelectOption[];
+    /** The chosen value. Use with `onValueChange` for a controlled select. */
+    value?: SelectValue | null;
+    /** The initially chosen value, for an uncontrolled select. */
+    defaultValue?: SelectValue | null;
+    onValueChange?: (value: SelectValue | null) => void;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /**
+     * Drop shadow depth of the *trigger*. The popup has its own, fixed: it
+     * genuinely floats above the page, which is the one case elevation is for.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** Label above the trigger, wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text below the trigger. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the select invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to `!!error`. */
+    invalid?: boolean;
+    /** Content placed before the value. Sized in `em`, so it tracks the text. */
+    startIcon?: React.ReactNode;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The value is shown but cannot be changed. */
+    readOnly?: boolean;
+    /** Whether a value must be chosen before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * One value chosen from a list of them.
+ *
+ * The trigger is a TextField's shell wearing a chevron, on purpose: a form where
+ * the select is a different height, radius or colour from the fields around it
+ * is a form that looks assembled rather than designed.
+ *
+ * Base UI owns everything hard about this — the popup's positioning and flipping,
+ * the focus trap, typeahead, the hidden input that makes it submit — and the
+ * work here is the surface it all wears.
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/select/Select.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as l}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons";import{WidthSizer as s}from"../../internal/sizer";import{controlHeightClasses as o,controlTextLeadingClasses as d,disabledClasses as c,fieldReadOnlyClasses as m,fieldRestClasses as u,focusWithinRingClasses as h,gapClasses as f,hasContent as p,iconClasses as b,metaTextClasses as g,paddingXClasses as x,radiusClasses as v,stackGapClasses as N,surfaceClasses as w,surfaceSlots as j,transitionClasses as y}from"../../internal/styles";const I=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",y,"focus-within:[transition-duration:0ms]",h,b].join(" "),S=[w,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),$=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",y,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=t.forwardRef(function({variant:h="outline",size:b="md",color:w="primary",density:y="default",elevation:V=0,items:z,value:k,defaultValue:O,onValueChange:P,placeholder:R,label:T,description:q,error:C,invalid:M,startIcon:W,fullWidth:_=!1,disabled:B=!1,readOnly:D=!1,required:E=!1,name:L,id:A,className:F,style:G},H){const J=null!=C&&!1!==C&&""!==C,K=M??J,Q=K?"danger":w,U=t.useMemo(()=>z.map(e=>({label:e.label??String(e.value),value:e.value})),[z]),X=t.useMemo(()=>[...z.map(e=>e.label??String(e.value)),...p(R)?[R]:[]],[z,R]);return a(n.Root,{disabled:B,invalid:K,className:["flex-col align-top",N[b],_?"flex w-full":"inline-flex",F??""].filter(Boolean).join(" "),style:{...j(Q,V),...G},children:[T?e(n.Label,{className:[g[b],"font-medium",B?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:T}):null,a(l.Root,{id:A,name:L,items:U,value:k,defaultValue:O,onValueChange:e=>P?.(e),disabled:B,readOnly:D,required:E,children:[a(l.Trigger,{ref:H,className:[I,o[b],d[b],v[b],f[b],x[y][b],B?c[h]:D?`${m[h]} cursor-default`:u[h]].join(" "),children:[W?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:W}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(l.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:R}),e(s,{samples:X})]}),e(l.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(l.Popup,{className:`${S} ${v[b]} ${d[b]}`,style:j(Q,3),children:z.map(t=>a(l.Item,{value:t.value,disabled:t.disabled,className:$,children:[e(l.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(l.ItemText,{className:"truncate",children:t.label??String(t.value)})]},String(t.value)))})})})]}),q?e(n.Description,{className:`${g[b]} text-(--neba-muted-fg)`,children:q}):null,J?e(n.Error,{match:!0,className:`${g[b]} text-(--n-accent)`,children:C}):null]})});

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

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectOption, SelectProps, SelectValue } from './Select';

package/dist/components/select/index.js

@@ -0,0 +1 @@
+export{Select}from"./Select";

package/dist/components/shortcut/Shortcut.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/**
+ * Which keyboard the shortcut is being read on.
+ *
+ * `auto` asks the browser, which is right for a shortcut a reader is about to
+ * press. The three explicit values are for documentation that has to name a
+ * platform rather than the reader's own — a support page describing the Windows
+ * build, a table comparing the two.
+ */
+export type ShortcutOS = 'auto' | 'mac' | 'windows' | 'linux';
+export interface ShortcutProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
+    /**
+     * The keys, innermost punctuation and all.
+     *
+     * A string is split on `+` — `'Mod+Shift+P'` — which covers everything except
+     * a shortcut whose key *is* a plus. For that one, pass the array form:
+     * `keys={['Ctrl', '+']}`.
+     */
+    keys: string | string[];
+    /**
+     * Which keyboard to name the modifiers for.
+     * @default 'auto'
+     */
+    os?: ShortcutOS;
+    /**
+     * What goes between two keys. Omit it for the platform's own convention: a `+`
+     * on Windows and Linux, and nothing at all on macOS, where a shortcut is
+     * written as a run of symbols — `⇧⌘P`, never `⇧+⌘+P`.
+     */
+    separator?: React.ReactNode;
+    /**
+     * Drop shadow depth. `0` (the default) is flat. A key cap is the one place a
+     * raised surface is tempting and wrong: this is a picture of a key, not a key.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+}
+/**
+ * A keyboard key, or a combination of them.
+ *
+ * Two things make this more than a styled `<kbd>`, and both are about the label
+ * rather than the box around it.
+ *
+ * The first is `Mod`. A shortcut written as `Ctrl+K` is wrong for every Mac
+ * reader and one written as `⌘K` is wrong for everybody else, so the token that
+ * means "the modifier shortcuts are built on" resolves per platform — and `os`
+ * is there for the pages that have to name a platform rather than the reader's.
+ *
+ * The second is that `⌘` is not a word. A screen reader reads it as "place of
+ * interest sign", so every key drawn as a glyph carries its name beside it, in
+ * the clipped box `srOnlyClasses` describes. What is announced is "Command K",
+ * which is what the shortcut is called.
+ *
+ * The keys are real `<kbd>` elements; the wrapper around them is a `<span>`.
+ * Nesting `<kbd>` inside `<kbd>` is allowed and would also be defensible, but a
+ * `kbd` wrapper is a second box for a host stylesheet to reach into for no gain
+ * — the semantics are carried by the keys themselves either way.
+ */
+export declare const Shortcut: React.ForwardRefExoticComponent<ShortcutProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/shortcut/Shortcut.js

@@ -0,0 +1 @@
+import{jsx as n,Fragment as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{controlHeightClasses as t,controlSlots as r,controlTextClasses as l,paddingXClasses as s,radiusClasses as m,srOnlyClasses as i,surfaceClasses as c,transitionClasses as d}from"../../internal/styles";const w=n=>({symbol:n,name:n}),u={mod:{mac:{symbol:"⌘",name:"Command"},windows:w("Ctrl"),linux:w("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:w("Win"),linux:w("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:w("Ctrl"),linux:w("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:w("Alt"),linux:w("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:w("Shift"),linux:w("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:w("Enter"),linux:w("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:w("Tab"),linux:w("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:w("Esc"),linux:w("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:w("Backspace"),linux:w("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:w("Del"),linux:w("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:w("Caps Lock"),linux:w("Caps Lock")}},p={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},b={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function f(){if("undefined"==typeof navigator)return"windows";const n=navigator.userAgentData,e=`${n?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(e)?"mac":/win/i.test(e)?"windows":"linux"}function y(){return()=>{}}function x(){return"windows"}const g={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},h={solid:[c,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[c,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft)"},v={xs:"min-w-5.5",sm:"min-w-6.5",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"};export const Shortcut=o.forwardRef(function({variant:c="outline",size:A="md",color:k="secondary",density:C="compact",elevation:j=0,keys:E,os:S="auto",separator:B,className:N,style:D,...L},T){const $=o.useSyncExternalStore(y,f,x),F="auto"===S?$:S,z=g[A],O=function(n){return Array.isArray(n)?n.map(n=>n.trim()).filter(Boolean):n.split("+").map(n=>n.trim()).filter(Boolean)}(E),R=O.map(n=>function(n,e){const a=n.toLowerCase().replace(/[\s_-]/g,""),o=p[a]??a,t=b[o];if(t)return t;const r=u[o];return r?r[e]:w(1===n.length?n.toUpperCase():n)}(n,F)),U=void 0===B?"mac"===F?null:"+":B,W=["inline-flex shrink-0 items-center justify-center","font-mono font-medium leading-none whitespace-nowrap tabular-nums",t[z],l[z],v[z],s[C][z],m[z],h[c],d].join(" ");return n("span",{ref:T,className:["inline-flex max-w-full items-center gap-1 align-middle",N??""].filter(Boolean).join(" "),style:{...r(k,j,c),...D},...L,children:R.map((t,r)=>a(o.Fragment,{children:[r>0&&null!==U?n("span",{"aria-hidden":"true",className:"text-(--neba-muted-fg)",children:U}):null,n("kbd",{className:W,children:t.symbol===t.name?t.symbol:a(e,{children:[n("span",{"aria-hidden":"true",children:t.symbol}),n("span",{className:i,children:t.name})]})})]},r))})});

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

@@ -0,0 +1,2 @@
+export { Shortcut } from './Shortcut';
+export type { ShortcutOS, ShortcutProps } from './Shortcut';

package/dist/components/shortcut/index.js

@@ -0,0 +1 @@
+export{Shortcut}from"./Shortcut";

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Slider as BaseUISlider } from '@base-ui/react/slider';
+import type { NebaColor, NebaOrientation, NebaSize } from '../../types';
+type BaseSliderProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISlider.Root>, 'className' | 'style' | 'render' | 'children' | 'orientation'>;
+export interface SliderProps extends BaseSliderProps {
+    /** @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /**
+     * Which way the slider runs. A vertical slider has no length of its own, so
+     * give it a height — the default `h-40` is a starting point, not a rule.
+     * @default 'horizontal'
+     */
+    orientation?: NebaOrientation;
+    /** The label above the track. */
+    label?: React.ReactNode;
+    /** Helper text below the track. */
+    description?: React.ReactNode;
+    /**
+     * Shows the current value beside the label. Pass a function to format it —
+     * the raw numbers and Base UI's already-localised strings are both handed in.
+     * @default false
+     */
+    showValue?: boolean | ((formatted: readonly string[], values: readonly number[]) => React.ReactNode);
+    /** Class names for the wrapper, not for the track. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A value chosen along a range.
+ *
+ * Pass an array to `value` or `defaultValue` and it becomes a range slider with
+ * one thumb per entry — there is no separate `range` prop, because the shape of
+ * the value already says which one this is.
+ */
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/slider/Slider.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Slider as r}from"@base-ui/react/slider";import{metaTextClasses as n,surfaceClasses as s,transitionClasses as o}from"../../internal/styles";const t={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},i={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},c={xs:"size-3",sm:"size-3.5",md:"size-4",lg:"size-5",xl:"size-6"},d={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},f={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},u="rounded-full bg-(--n-soft)",m=`rounded-full bg-(--n-fill) ${o}`,h=["rounded-full border bg-(--neba-surface)",s,"[border-color:var(--n-line-hover)]","[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]","cursor-grab select-none active:cursor-grabbing",o,"hover:[box-shadow:var(--neba-shadow-2),0_0_0_4px_var(--n-soft)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[dragging]:[box-shadow:var(--neba-shadow-1),0_0_0_6px_var(--n-soft-hover)]"].join(" ");export const Slider=a.forwardRef(function({size:a="md",color:s="primary",orientation:o="horizontal",label:b,description:x,showValue:v=!1,disabled:g=!1,className:w,style:p,...$},_){const y="vertical"===o,N={"--n-fill":`var(--neba-${s}-fill)`,"--n-accent":`var(--neba-${s}-accent)`,"--n-soft":`var(--neba-${s}-soft)`,"--n-soft-hover":`var(--neba-${s}-soft-hover)`,"--n-line-hover":`var(--neba-${s}-line-hover)`,"--n-ring":`var(--neba-${s}-ring)`},j=$.value??$.defaultValue,z=Array.isArray(j)?j.length:1;return l(r.Root,{ref:_,orientation:o,disabled:g,className:["flex",y?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",g?"[filter:saturate(0.25)] opacity-70 [&_*]:cursor-not-allowed":"",w??""].filter(Boolean).join(" "),style:{...N,...p},...$,children:[b||v?l("div",{className:`flex w-full items-baseline gap-2 ${n[a]}`,children:[b?e(r.Label,{className:g?"font-medium text-(--neba-disabled-fg)":"font-medium text-(--neba-fg)",children:b}):null,v?e(r.Value,{className:"ms-auto tabular-nums text-(--neba-muted-fg)",children:"function"==typeof v?v:null}):null]}):null,e(r.Control,{className:["flex touch-none select-none items-center justify-center",y?`${f[a]} h-40 flex-col`:`w-full ${d[a]}`].join(" "),children:l(r.Track,{className:[u,y?`${i[a]} h-full`:`${t[a]} w-full`].join(" "),children:[e(r.Indicator,{className:m}),Array.from({length:z},(l,n)=>e(r.Thumb,{index:n,className:`${h} ${c[a]}`},n))]})}),x?e("div",{className:`${n[a]} text-(--neba-muted-fg)`,children:x}):null]})});

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

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider';

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export{Slider}from"./Slider";

package/dist/components/statistic/Statistic.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { type BoxProps } from '../box/Box';
+import type { NebaAlign } from '../../types';
+export interface StatisticProps extends Omit<BoxProps, 'title' | 'prefix'> {
+    /**
+     * What the number is. The name of the measure, not a sentence about it —
+     * "Active users", "MRR", "이탈률".
+     *
+     * `label` rather than `title`, which is what Card calls the same slot: this is
+     * the name of a *value*, which is the thing the library already spells `label`
+     * on every field it has.
+     */
+    label?: React.ReactNode;
+    /**
+     * The figure. A number is formatted; a string is printed exactly as given, for
+     * the values that are not numbers at all — "3h 42m", "A+", "—".
+     */
+    value: number | string;
+    /**
+     * How to write a numeric `value` — `Intl.NumberFormat` options, the same prop
+     * the progress indicators take. Without it a number is grouped by the reader's
+     * own locale and otherwise left alone.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** Set before the figure and never wrapped away from it — a currency sign. */
+    prefix?: React.ReactNode;
+    /**
+     * Set after the figure: `%`, `MB`, `명`.
+     *
+     * A second slot rather than one `adornment` with a side, because the two are
+     * typographically different things and always have been — a currency symbol
+     * leads its number and a unit follows it, in every locale that has both.
+     */
+    unit?: React.ReactNode;
+    /** A glyph before the label. An `Icon`, or anything else that draws. */
+    icon?: React.ReactNode;
+    /**
+     * The figure this one is being compared against — last month's, last quarter's,
+     * the target. Passing it is what makes the delta appear.
+     *
+     * Only meaningful for a numeric `value`; with a string there is nothing to
+     * subtract and the delta is left out.
+     */
+    previousValue?: number;
+    /**
+     * How the difference is written.
+     *
+     * - `percent` — the change relative to `previousValue`. The default, because a
+     *   report is nearly always asking "how much has this moved", not "by how many".
+     * - `absolute` — the difference itself, in the figure's own units.
+     * - `both` — the percentage with the difference after it.
+     * - `none` — no delta, even with a `previousValue` given.
+     * @default 'percent'
+     */
+    delta?: 'percent' | 'absolute' | 'both' | 'none';
+    /**
+     * Which direction counts as good, and so which way the delta is coloured.
+     *
+     * `up` for revenue, `down` for churn and error rate and page weight. This is
+     * not decoration: green-for-larger on a bounce rate says the opposite of what
+     * the report means, and it says it to exactly the reader who is skimming.
+     * @default 'up'
+     */
+    betterWhen?: 'up' | 'down';
+    /** A line under the figure — "vs. last month", "as of 3 July". */
+    caption?: React.ReactNode;
+    /**
+     * Where the block sits in the card. `center` for a row of tiles that read as
+     * one band; `start` — the default — for a card with anything else in it.
+     * @default 'start'
+     */
+    align?: NebaAlign;
+    /** Anything below the caption: a sparkline, a ProgressLinear against a target. */
+    children?: React.ReactNode;
+}
+/**
+ * A number with its name on it, and — when there is something to compare it
+ * against — how far it has moved.
+ *
+ * A Box with a fixed arrangement laid on it, exactly as Card is. The slots are
+ * props and not compound sub-components for the reason Card gives: the order
+ * never varies, so what a caller wants to decide is what goes in each slot.
+ *
+ * The delta is a Chip rather than a coloured span, and that is the whole reason
+ * it looks right next to everything else — it is the same token the rest of the
+ * library uses, at the same step down the control ladder, with the same acrylic
+ * on it. It also carries a shape and not only a colour: a report whose "down" is
+ * red and nothing else is a report that says nothing to a reader who cannot
+ * separate red from green.
+ */
+export declare const Statistic: React.ForwardRefExoticComponent<StatisticProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/statistic/Statistic.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Box as n}from"../box/Box";import{Chip as a}from"../chip/Chip";import{MinusIcon as r,TrendDownIcon as s,TrendUpIcon as m}from"../../internal/icons";import{hasContent as i,metaTextClasses as o,sheetSectionGapClasses as c}from"../../internal/styles";const u={xs:"text-[1.125rem]/[1.375rem]",sm:"text-[1.375rem]/[1.625rem]",md:"text-[1.75rem]/[2rem]",lg:"text-[2.25rem]/[2.5rem]",xl:"text-[2.875rem]/[3.25rem]"},d={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},x={xs:"gap-y-0.5",sm:"gap-y-0.5",md:"gap-y-1",lg:"gap-y-1",xl:"gap-y-1.5"},f={start:"items-start text-start",center:"items-center text-center",end:"items-end text-end"},p={up:e(m,{}),down:e(s,{}),flat:e(r,{})};export const Statistic=l.forwardRef(function({size:r="md",color:s="primary",density:m="default",label:b,value:h,format:g,prefix:w,unit:N,icon:y,previousValue:v,delta:$="percent",betterWhen:j="up",caption:M,align:z="start",className:B,children:k,...F},I){const C=l.useMemo(()=>new Intl.NumberFormat(void 0,g),[g]),R="number"==typeof h?h:null,S=null===R?h:C.format(R),V=null!==R&&void 0!==v?R-v:null,W=null!==V&&0!==v&&void 0!==v?V/Math.abs(v):null,q=null===V?null:V>0?"up":V<0?"down":"flat";let A=null;if(null!==V&&null!==q&&"none"!==$){const e=V>0?"+":V<0?"-":"",t=`${e}${C.format(Math.abs(V))}`,l=null===W?null:`${e}${(100*Math.abs(W)).toFixed(1).replace(/\.0$/,"")}%`;A="absolute"===$?t:"both"===$?[l,t].filter(Boolean).join(" · "):l??t}const D=null===q||"flat"===q?"secondary":q===j?"success":"danger",E=null!==A||i(M);return t(n,{ref:I,size:r,color:s,density:m,className:["flex flex-col",c[r],f[z],B??""].filter(Boolean).join(" "),...F,children:[i(b)||i(y)?t("div",{className:["flex min-w-0 items-center gap-1.5 font-medium text-(--neba-muted-fg)",o[r]].join(" "),children:[i(y)?e("span",{className:"flex shrink-0 items-center",children:y}):null,i(b)?e("span",{className:"min-w-0 truncate",children:b}):null]}):null,t("div",{className:["flex min-w-0 flex-wrap items-baseline gap-1 font-semibold text-(--neba-fg) tabular-nums",u[r]].join(" "),children:[i(w)?e("span",{className:`font-medium text-(--neba-muted-fg) ${d[r]}`,children:w}):null,e("span",{className:"min-w-0 break-words",children:S}),i(N)?e("span",{className:`font-medium text-(--neba-muted-fg) ${d[r]}`,children:N}):null]}),E?t("div",{className:`flex min-w-0 flex-wrap items-center gap-x-2 ${x[r]}`,children:[null!==A&&null!==q?e(a,{size:r,variant:"text",color:D,startIcon:p[q],className:"tabular-nums",children:A}):null,i(M)?e("span",{className:`min-w-0 text-(--neba-muted-fg) ${o[r]}`,children:M}):null]}):null,k]})});

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

@@ -0,0 +1,2 @@
+export { Statistic } from './Statistic';
+export type { StatisticProps } from './Statistic';