neba 1.0.0 → 1.2.0

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

@@ -1 +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,tickSizeClasses as d,transitionClasses as c}from"../../internal/styles";const b=r.createContext({size:"md",color:"primary",readOnly:!1}),f=["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",c,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),h=[s,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","[box-shadow:var(--neba-plate-glass)]","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]:[box-shadow:var(--neba-plate-solid)]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),p=[s,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),m=["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:c=!1,className:u,style:v,...x},g){const y=r.useContext(b),N=x.readOnly??y.readOnly;return e(o.Root,{disabled:c,className:["flex flex-col",u??""].filter(Boolean).join(" "),style:v,children:a("div",{className:`flex items-start gap-2 ${i[y.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:g,className:[f,d[y.size],c?m:N?p:h].join(" "),disabled:c,...x,children:e(n.Indicator,{className:"size-[38%] rounded-full bg-current"})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(o.Label,{className:["leading-[1.4]",c?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:l}):null,s?e(o.Description,{className:`${t[y.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:f,invalid:h,disabled:p=!1,readOnly:m=!1,className:u,style:v,children:x,...g},y){const N=null!=f&&!1!==f&&""!==f,j=h??N,k=j?"danger":i,w={"--n-fill":`var(--neba-${k}-fill)`,"--n-fill-hover":`var(--neba-${k}-fill-hover)`,"--n-on-solid":`var(--neba-${k}-on-solid)`,"--n-accent":`var(--neba-${k}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${k}-line)`,"--n-line-hover":`var(--neba-${k}-line-hover)`,"--n-ring":`var(--neba-${k}-ring)`},$=r.useMemo(()=>({size:n,color:k,readOnly:m}),[n,k,m]);return e(b.Provider,{value:$,children:a(o.Root,{disabled:p,invalid:j,className:["flex flex-col gap-1.5",u??""].filter(Boolean).join(" "),style:{...w,...v},children:[d?e(o.Label,{className:[t[n],"font-medium",p?"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:p,readOnly:m,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:f}):null]})})});
+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/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.js

@@ -1 +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{controlHeightClasses as o,controlTextLeadingClasses as s,disabledClasses as d,fieldReadOnlyClasses as c,fieldRestClasses as u,focusWithinRingClasses as m,gapClasses as h,iconClasses as f,metaTextClasses as p,paddingXClasses as b,radiusClasses as g,stackGapClasses as x,surfaceClasses as v,surfaceSlots as N,transitionClasses as j}from"../../internal/styles";const w=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,"focus-within:[transition-duration:0ms]",m,f].join(" "),y=[v,"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(" "),I=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",j,"data-[highlighted]:bg-(--n-soft-hover)","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:m="outline",size:f="md",color:v="primary",density:j="default",elevation:$=0,items:S,value:V,defaultValue:k,onValueChange:z,placeholder:O,label:P,description:R,error:T,invalid:q,startIcon:C,fullWidth:W=!1,disabled:_=!1,readOnly:B=!1,required:D=!1,name:E,id:L,className:M,style:A},F){const G=null!=T&&!1!==T&&""!==T,H=q??G,J=H?"danger":v,K=t.useMemo(()=>S.map(e=>({label:e.label??String(e.value),value:e.value})),[S]);return a(n.Root,{disabled:_,invalid:H,className:["flex-col align-top",x[f],W?"flex w-full":"inline-flex",M??""].filter(Boolean).join(" "),style:{...N(J,$),...A},children:[P?e(n.Label,{className:[p[f],"font-medium",_?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:P}):null,a(l.Root,{id:L,name:E,items:K,value:V,defaultValue:k,onValueChange:e=>z?.(e),disabled:_,readOnly:B,required:D,children:[a(l.Trigger,{ref:F,className:[w,o[f],s[f],g[f],h[f],b[j][f],_?d[m]:B?`${c[m]} cursor-default`:u[m]].join(" "),children:[C?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:C}):null,e(l.Value,{className:["min-w-0 flex-1 truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:O}),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:`${y} ${g[f]} ${s[f]}`,children:S.map(t=>a(l.Item,{value:t.value,disabled:t.disabled,className:I,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)))})})})]}),R?e(n.Description,{className:`${p[f]} text-(--neba-muted-fg)`,children:R}):null,G?e(n.Error,{match:!0,className:`${p[f]} text-(--n-accent)`,children:T}):null]})});
+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/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/spoiler/Spoiler.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../../types';
+export interface SpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onChange'> {
+    /** Whether the content is uncovered. Pass it to drive the Spoiler yourself. */
+    revealed?: boolean;
+    /**
+     * Where an uncontrolled Spoiler starts.
+     * @default false
+     */
+    defaultRevealed?: boolean;
+    /** Called when the reveal or hide button is pressed. */
+    onRevealedChange?: (revealed: boolean) => void;
+    /**
+     * Which language the default label and notice are written in — a BCP 47 tag
+     * such as `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * Both strings can be written out instead, in `label` and `description`; this
+     * is for the far more common case where the page already knows its language
+     * and nobody should have to translate a button that says "Reveal".
+     */
+    locale?: string;
+    /** The reveal button's label. Defaults to the `locale`'s word for it. */
+    label?: React.ReactNode;
+    /** The hide button's label, when `reversible` is on. */
+    hideLabel?: React.ReactNode;
+    /**
+     * The line above the button, saying why the content is covered. Defaults to
+     * the `locale`'s wording; pass `false` for a cover with nothing written on it.
+     */
+    description?: React.ReactNode | false;
+    /**
+     * Replaces the default reveal button entirely.
+     *
+     * The replacement is yours to wire up: pass `revealed` and
+     * `onRevealedChange` and drive it from your own control. `label` is the prop
+     * for the far commoner case of wanting different words on the button that is
+     * already there.
+     */
+    action?: React.ReactNode;
+    /**
+     * Keeps the content coverable: once revealed, a hide button appears under it.
+     * @default false
+     */
+    reversible?: boolean;
+    /**
+     * Clamps the covered box to this height — a CSS length, or a number in
+     * pixels. Revealing releases it and the content takes whatever height it
+     * needs.
+     *
+     * Left out, the box is exactly as tall as what it holds, which is the right
+     * default for a paragraph or a picture. Set it for something long enough that
+     * a page of blurred content would be a page of nothing.
+     */
+    maxHeight?: number | string;
+    /**
+     * How hard the content is blurred, in pixels.
+     * @default 10
+     */
+    blur?: number;
+    /**
+     * Inner padding around the content, on Box's own `size`/`density` scale. Turn
+     * it off for something that should reach the edges — a picture, a video.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Weight of the box's surface. `text` draws no box at all, which is what a
+     * spoiler sitting inside running prose usually wants.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** The sheet's radius, and the size of the button on it. @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** Padding around the cover's own text and button. @default 'default' */
+    density?: NebaDensity;
+    /** Drop shadow depth. `0` (the default) is flat. @default 0 */
+    elevation?: NebaElevation;
+    /** What is being covered. */
+    children?: React.ReactNode;
+}
+/**
+ * Content that is covered until somebody asks for it.
+ *
+ * The cover is a blur rather than a `display: none`, which is the whole point:
+ * a reader can see that there is something there, roughly how much of it there
+ * is, and — with `maxHeight` — that it has been clamped. What they cannot do is
+ * read it by accident, which is the one thing a spoiler is for.
+ *
+ * While it is covered the content is `inert`, so it is not tabbable, not
+ * readable by a screen reader and not selectable by a drag across the page. A
+ * spoiler that could be defeated by Ctrl-A is not a spoiler.
+ */
+export declare const Spoiler: React.ForwardRefExoticComponent<SpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/Spoiler.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{Button as n}from"../button/Button";import{useMessages as o}from"../../internal/i18n";import{boxPaddingClasses as a,boxPaddingXClasses as l,boxPaddingYClasses as t}from"../box/Box";import{hasContent as s,metaTextClasses as d,radiusClasses as c,surfaceClasses as m,surfaceSlots as v,transitionClasses as f}from"../../internal/styles";const p={solid:[m,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[m,"border bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"bg-transparent"},u="[background-color:color-mix(in_oklab,var(--neba-surface)_55%,transparent)]";export const Spoiler=i.forwardRef(function({revealed:m,defaultRevealed:b=!1,onRevealedChange:x,locale:h,label:j,hideLabel:g,description:y,action:w,reversible:N=!1,maxHeight:k,blur:z=10,padded:B=!0,variant:_="outline",size:C="md",color:R="primary",density:H="default",elevation:S=0,className:$,style:I,children:L,...q},A){const D=o(h),E=i.useId(),[F,G]=i.useState(b),J=m??F,K=e=>{void 0===m&&G(e),x?.(e)},M=!1===y?null:y??D.spoiler.notice;return r("div",{ref:A,className:["relative isolate overflow-hidden",c[C],p[_],f,$??""].filter(Boolean).join(" "),style:{...v(R,S),...I},...q,children:[e("div",{id:E,className:["min-w-0",B?a[H][C]:"","[transition:filter_var(--neba-duration-fill)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",J?"":"select-none"].filter(Boolean).join(" "),style:{filter:J?void 0:`blur(${z}px)`,maxHeight:J?void 0:k,overflow:J?void 0:"hidden"},inert:!J,children:L}),J?null:r("div",{className:["absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-center",a[H][C],u].join(" "),children:[s(M)?e("p",{className:`m-0 text-(--neba-muted-fg) ${d[C]}`,children:M}):null,w??e(n,{size:C,color:R,density:H,onClick:()=>K(!0),"aria-expanded":!1,"aria-controls":E,children:j??D.spoiler.reveal})]}),J&&N?e("div",{className:["flex justify-end",l[H][C],t[H][C],"pt-0"].join(" "),children:e(n,{variant:"text",size:C,color:R,density:H,onClick:()=>K(!1),"aria-expanded":!0,"aria-controls":E,children:g??D.spoiler.hide})}):null]})});

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

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

package/dist/components/spoiler/index.js

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

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';

package/dist/components/statistic/index.js

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

package/dist/components/switch/Switch.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as o}from"@base-ui/react/field";import{controlTextClasses as t,metaTextClasses as i,surfaceClasses as c}from"../../internal/styles";const s={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},d={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[calc(100%-1.625rem)]"},b=["relative inline-flex shrink-0 border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","rounded-full","[transition-property:background-color,border-color,box-shadow]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),h=[c,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","[box-shadow:var(--neba-plate-glass)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]","data-[checked]:[box-shadow:var(--neba-plate-solid)]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),f=[c,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]"].join(" "),m=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),v=["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-(--neba-surface)","[box-shadow:var(--neba-shadow-1)]","[transition:left_var(--neba-duration)_var(--neba-ease)]"].join(" ");export const Switch=n.forwardRef(function({size:n="md",color:c="primary",label:u,description:p,error:g,invalid:x,labelPlacement:w="end",disabled:k=!1,readOnly:j=!1,className:$,style:N,...y},_){const R=null!=g&&!1!==g&&""!==g,B=x??R,O=B?"danger":c,S={"--n-fill":`var(--neba-${O}-fill)`,"--n-fill-hover":`var(--neba-${O}-fill-hover)`,"--n-accent":`var(--neba-${O}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${O}-line)`,"--n-line-hover":`var(--neba-${O}-line-hover)`,"--n-ring":`var(--neba-${O}-ring)`},q=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:_,className:[b,s[n],k?m:j?f:h].join(" "),disabled:k,readOnly:j,...y,children:e(l.Thumb,{className:`${v} ${d[n]}`})})}),z=u||p?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===w?"flex-1":""].filter(Boolean).join(" "),children:[u?e(o.Label,{className:["leading-[1.4]",k?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:u}):null,p?e(o.Description,{className:`${i[n]} text-(--neba-muted-fg)`,children:p}):null]}):null;return a(o.Root,{disabled:k,invalid:B,className:["inline-flex flex-col gap-1 align-top",$??""].filter(Boolean).join(" "),style:{...S,...N},children:[e("div",{className:`flex items-start gap-2.5 ${t[n]}`,children:a(r,"start"===w?{children:[z,q]}:{children:[q,z]})}),R?e(o.Error,{match:!0,className:`${i[n]} text-(--n-accent)`,children:g}):null]})});
+import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as o}from"@base-ui/react/field";import{controlTextClasses as t,metaTextClasses as i,surfaceClasses as c,tickRowLeadingClasses as s}from"../../internal/styles";const d={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},b={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[calc(100%-1.625rem)]"},h=["relative inline-flex shrink-0 border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","rounded-full","[transition-property:background-color,border-color,box-shadow]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),f=[c,"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]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),m=[c,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]"].join(" "),u=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),v=["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-(--neba-surface)","[box-shadow:var(--neba-shadow-1)]","[transition:left_var(--neba-duration)_var(--neba-ease)]"].join(" ");export const Switch=n.forwardRef(function({size:n="md",color:c="primary",label:p,description:g,error:x,invalid:w,labelPlacement:k="end",disabled:j=!1,readOnly:$=!1,className:N,style:y,..._},R){const B=null!=x&&!1!==x&&""!==x,O=w??B,S=O?"danger":c,q={"--n-fill":`var(--neba-${S}-fill)`,"--n-fill-hover":`var(--neba-${S}-fill-hover)`,"--n-accent":`var(--neba-${S}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${S}-line)`,"--n-line-hover":`var(--neba-${S}-line-hover)`,"--n-ring":`var(--neba-${S}-ring)`},z=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:R,className:[h,d[n],j?u:$?m:f].join(" "),disabled:j,readOnly:$,..._,children:e(l.Thumb,{className:`${v} ${b[n]}`})})}),D=p||g?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===k?"flex-1":""].filter(Boolean).join(" "),children:[p?e(o.Label,{className:["leading-[1.4]",j?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:p}):null,g?e(o.Description,{className:`${i[n]} text-(--neba-muted-fg)`,children:g}):null]}):null;return a(o.Root,{disabled:j,invalid:O,className:["inline-flex flex-col gap-1 align-top",N??""].filter(Boolean).join(" "),style:{...q,...y},children:[e("div",{className:`flex items-start gap-2.5 ${t[n]} ${s}`,children:a(r,"start"===k?{children:[D,z]}:{children:[z,D]})}),B?e(o.Error,{match:!0,className:`${i[n]} text-(--n-accent)`,children:x}):null]})});

package/dist/components/text-link/TextLink.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaColor, NebaSize } from '../../types';
+/**
+ * When the line under a link is drawn.
+ *
+ * `always` is the default, and the reason is `color`: a TextLink takes no
+ * colour family unless one is asked for, so with the line off there would be
+ * nothing at all distinguishing a link from the sentence it sits in. That is
+ * also why this is not a boolean — "no underline" is a real choice for a link
+ * in a nav bar or a footer, where position already says what it is, and it
+ * should have to be spelled out rather than fallen into.
+ */
+export type TextLinkUnderline = 'always' | 'hover' | 'none';
+export interface TextLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color'> {
+    /** Where the link goes. */
+    href: string;
+    /**
+     * When the underline is drawn.
+     * @default 'always'
+     */
+    underline?: TextLinkUnderline;
+    /**
+     * Semantic colour role. Like [Typography](../display/typography) and unlike
+     * every control in the library this has **no default** — a link in a
+     * paragraph is usually the paragraph's own colour with a line under it, and a
+     * component that arrived pre-dyed is one a page has to undo.
+     */
+    color?: NebaColor;
+    /**
+     * The type scale. Also no default: a link inside a sentence is the size of
+     * the sentence. Set it for a link that stands on its own.
+     */
+    size?: NebaSize;
+    /**
+     * Opens the link in a new tab, with the `rel` that keeps the new page from
+     * reaching back into this one.
+     *
+     * A window changing under the reader is the one thing about a link that
+     * cannot be seen before it happens, so this also turns `icon` on by default
+     * and adds a line for a screen reader — see `locale`.
+     * @default false
+     */
+    newTab?: boolean;
+    /**
+     * The mark after the label. `true` draws the arrow leaving its box when
+     * `newTab` is on and the chain otherwise, `false` draws nothing, and a node
+     * of your own replaces the glyph.
+     *
+     * Left out, it follows `newTab`.
+     */
+    icon?: React.ReactNode | boolean;
+    /**
+     * Which language the line for a screen reader is written in — a BCP 47 tag
+     * such as `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * Only `newTab` produces that line; a link without it says nothing of its
+     * own, so this changes nothing.
+     */
+    locale?: string;
+    /**
+     * Renders something other than an `<a>` — the `Link` a router brings, most
+     * of the time. `href` still goes through, so `render={<NextLink href="…" />}`
+     * needs it written once, on the TextLink.
+     */
+    render?: useRender.RenderProp;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * A link, in a sentence or on its own.
+ *
+ * Everything about it is deliberately smaller than a Button. It has no surface,
+ * no height of its own and no colour unless asked — what it has is a line under
+ * it, which is the one mark a reader already knows means "this goes somewhere".
+ *
+ * The three things it does that a bare `<a>` does not: it draws that line on a
+ * schedule (`always`, or only under the pointer), it marks a link that opens a
+ * new tab both visibly and for a screen reader, and it takes `render`, so the
+ * `Link` a router brings can wear all of it.
+ */
+export declare const TextLink: React.ForwardRefExoticComponent<TextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/text-link/TextLink.js

@@ -0,0 +1 @@
+import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMessages as a}from"../../internal/i18n";import{ExternalLinkIcon as t,LinkIcon as l}from"../../internal/icons";import{controlTextLeadingClasses as s,focusRingClasses as c,srOnlyClasses as m}from"../../internal/styles";const d={always:"[&.neba-link]:underline",hover:"[&.neba-link]:no-underline [&.neba-link]:hover:underline",none:"[&.neba-link]:no-underline"},u=["neba-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",["[transition-property:color,text-decoration-color]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const TextLink=i.forwardRef(function({href:i,underline:c="always",color:p,size:b,newTab:f=!1,icon:v,locale:h,render:k,className:g,style:x,children:y,...j},w){const _=a(h),N=v??f,T=!0===N?n(f?t:l,{}):N,z=[u,b?s[b]:"",d[c],p?"[&.neba-link]:text-(--n-accent)":"[&.neba-link]:text-inherit",g??""].filter(Boolean).join(" "),C={"--n-underline":"color-mix(in oklab, currentColor 45%, transparent)","--n-underline-hover":"currentColor","--n-ring":`var(--neba-${p??"primary"}-ring)`,...p?{"--n-accent":`var(--neba-${p}-accent)`}:null};return o({render:k??n("a",{}),ref:w,props:{href:i,target:f?"_blank":void 0,rel:f?"noopener noreferrer":void 0,className:z,style:{...C,...x},children:r(e,{children:[y,T?n("span",{className:"ms-[0.25em]",children:T}):null,f?r(e,{children:[" ",n("span",{className:m,children:_.link.newTab})]}):null]}),...j}})});

package/dist/components/text-link/index.d.ts

@@ -0,0 +1,2 @@
+export { TextLink } from './TextLink';
+export type { TextLinkProps, TextLinkUnderline } from './TextLink';

package/dist/components/text-link/index.js

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