neba 1.10.0 → 1.11.0

package/dist/components/pie-chart/PieChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as n,ChartLegendBar as l,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as o,useMeasuredWidth as s,useVisibility as d}from"../../internal/chart-frame.js";import{arcPath as u,categoryAt as m,chartFontSizes as c,compactNumber as h,formatCategory as v,markGap as f,plotHeights as p,seriesColor as b,toValue as x}from"../../internal/chart.js";import{numberFormatter as g}from"../../internal/format.js";import{cx as y,metaTextClasses as M}from"../../internal/styles.js";import{chartMessages as N,emptyMessages as j,useMessages as w}from"../../internal/i18n.js";const I={pie:0,donut:.62,semi:.62};export function PieChart({data:P,categories:z,shape:k="pie",startAngle:A=0,center:$,valueLabels:L="none",height:S,format:_,locale:B,label:E,legend:R,tooltip:C,empty:D,size:O="md",variant:K="text",padded:V=!1,className:W,...q}){const F=a.useRef(null),G=s(F),H=w(j,B),J=w(N,B),Q=a.useId(),T=a.useCallback(e=>_?g(B,_).format(e):h(e,B),[_,B]),U=a.useMemo(()=>P.map(x),[P]),X=a.useMemo(()=>U.map((e,t)=>({name:v(m(t,z,[U]),B),data:[P[t]],color:e.color})),[U,z,P,B]),Y=d(X),[Z,ee]=a.useState(null),te=X.map((e,t)=>b(e,t)),ae=U.reduce((e,t,a)=>Y.visible[a]&&null!==t.value?e+Math.abs(t.value):e,0),ne="semi"===k,le="number"==typeof S?S:p[O],ie=c[O],re=!1===R?{interactive:!1}:!0===R||void 0===R?{}:R,oe=!1!==R&&X.length>1,se=re.side??"bottom",de=!1===C?{mode:"none"}:!0===C||void 0===C?{}:C,ue="none"===de.mode,me=G/2,ce=Math.max(0,Math.min(G/2,ne?le:le/2)-2),he=ne?Math.min(le,le/2+ce/2):le/2,ve=ce*I[k],fe=ae<=0||ce<=0,pe=ce>0?Math.min(4,f/ce*(180/Math.PI)):0,be=ne?180:360,xe=[];let ge=ne?-90:A;U.forEach((e,t)=>{if(!Y.visible[t]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/ae,n=a*be;xe.push({index:t,start:ge,end:ge+n,value:e.value,share:a}),ge+=n});const ye=null===Z?[]:[{seriesIndex:Z,name:X[Z]?.name,color:U[Z]?.color??te[Z],value:U[Z]?.value??null,formatted:`${T(U[Z]?.value??0)} · ${Math.round(10*(Math.abs(U[Z]?.value??0)/ae*100+Number.EPSILON))/10}%`,label:U[Z]?.label}];return t(r,{...q,size:O,variant:K,padded:V,className:W,legendSide:se,legend:oe?e(l,{series:X,colors:te,options:re,visibility:Y,size:O,values:re.showValue?U.map(e=>null===e.value?void 0:T(e.value)):void 0}):null,table:fe?null:e(n,{id:Q,caption:E,categories:X.map(e=>e.name??""),series:[{name:E,data:P}],values:[U],format:T,locale:B}),children:[t("div",{ref:F,role:"img",tabIndex:fe?void 0:0,"aria-label":E??J.label,"aria-describedby":fe?void 0:Q,onPointerLeave:()=>ee(null),onBlur:()=>ee(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const t=xe.map(e=>e.index);if(0===t.length)return;const a=null===Z?-1:t.indexOf(Z),n="ArrowRight"===e.key?a+1:a-1;ee(t[(n+t.length)%t.length]),e.preventDefault()},className:y("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:le},children:[fe?e("div",{className:y("flex h-full items-center justify-center text-(--neba-muted-fg)",M[O]),children:D??H.title}):G>0?t("svg",{width:G,height:le,viewBox:`0 0 ${G} ${le}`,"aria-hidden":"true",className:"block",children:[xe.map(t=>{const a=null!==Y.hovered&&Y.hovered!==t.index||null!==Z&&Z!==t.index,n=t.end-t.start>2*pe?pe/2:0;return e("path",{d:u(me,he,ce,ve,t.start+n,t.end-n),fill:U[t.index].color??te[t.index],opacity:a?.32:1,onPointerEnter:ue?void 0:()=>ee(t.index),className:"[transition:opacity_var(--neba-duration)_var(--neba-ease)]"},t.index)}),"all"===L?xe.map(t=>{const a=((t.start+t.end)/2-90)*(Math.PI/180),n=ve>0?(ve+ce)/2:.68*ce,l=`${Math.round(100*t.share)}%`;return(t.end-t.start)*(Math.PI/180)*n<2*ie||ce-ve<1.6*ie?null:e("text",{x:me+n*Math.cos(a),y:he+n*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:ie,fontWeight:600,fill:"var(--neba-surface)",className:"tabular-nums",children:l},t.index)}):null]}):null,$&&ve>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:me-ve,top:he-ve,width:2*ve,height:ne?ve:2*ve},children:$}):null,null===Z||ue?null:de.render?e("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10",children:de.render({index:Z,category:X[Z]?.name??Z,items:ye})}):e(o,{heading:X[Z]?.name,items:ye,x:me,y:8,flip:!1,size:O})]}),ue?null:e(i,{heading:null===Z?void 0:X[Z]?.name,items:ye})]})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as n,ChartLegendBar as l,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as o,useMeasuredWidth as s,useVisibility as d}from"../../internal/chart-frame.js";import{arcPath as u,categoryAt as m,chartFontSizes as c,compactNumber as h,formatCategory as v,markGap as f,plotHeights as p,seriesColor as b,toValue as x}from"../../internal/chart.js";import{numberFormatter as g}from"../../internal/format.js";import{cx as y,metaTextClasses as M}from"../../internal/styles.js";import{chartMessages as j,emptyMessages as N,useMessages as w}from"../../internal/i18n.js";import{useStyleDefaults as z}from"../../internal/defaults.js";const I={pie:0,donut:.62,semi:.62};export function PieChart(P){const{data:k,categories:A,shape:$="pie",startAngle:L=0,center:S,valueLabels:_="none",height:B,format:E,locale:R,label:C,legend:D,tooltip:O,empty:K,size:V="md",variant:W="text",padded:q=!1,className:F,...G}=z(P,["size","variant","locale"]),H=a.useRef(null),J=s(H),Q=w(N,R),T=w(j,R),U=a.useId(),X=a.useCallback(e=>E?g(R,E).format(e):h(e,R),[E,R]),Y=a.useMemo(()=>k.map(x),[k]),Z=a.useMemo(()=>Y.map((e,t)=>({name:v(m(t,A,[Y]),R),data:[k[t]],color:e.color})),[Y,A,k,R]),ee=d(Z),[te,ae]=a.useState(null),ne=Z.map((e,t)=>b(e,t)),le=Y.reduce((e,t,a)=>ee.visible[a]&&null!==t.value?e+Math.abs(t.value):e,0),ie="semi"===$,re="number"==typeof B?B:p[V],oe=c[V],se=!1===D?{interactive:!1}:!0===D||void 0===D?{}:D,de=!1!==D&&Z.length>1,ue=se.side??"bottom",me=!1===O?{mode:"none"}:!0===O||void 0===O?{}:O,ce="none"===me.mode,he=J/2,ve=Math.max(0,Math.min(J/2,ie?re:re/2)-2),fe=ie?Math.min(re,re/2+ve/2):re/2,pe=ve*I[$],be=le<=0||ve<=0,xe=ve>0?Math.min(4,f/ve*(180/Math.PI)):0,ge=ie?180:360,ye=[];let Me=ie?-90:L;Y.forEach((e,t)=>{if(!ee.visible[t]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/le,n=a*ge;ye.push({index:t,start:Me,end:Me+n,value:e.value,share:a}),Me+=n});const je=null===te?[]:[{seriesIndex:te,name:Z[te]?.name,color:Y[te]?.color??ne[te],value:Y[te]?.value??null,formatted:`${X(Y[te]?.value??0)} · ${Math.round(10*(Math.abs(Y[te]?.value??0)/le*100+Number.EPSILON))/10}%`,label:Y[te]?.label}];return t(r,{...G,size:V,variant:W,padded:q,className:F,legendSide:ue,legend:de?e(l,{series:Z,colors:ne,options:se,visibility:ee,size:V,values:se.showValue?Y.map(e=>null===e.value?void 0:X(e.value)):void 0}):null,table:be?null:e(n,{id:U,caption:C,categories:Z.map(e=>e.name??""),series:[{name:C,data:k}],values:[Y],format:X,locale:R}),children:[t("div",{ref:H,role:"img",tabIndex:be?void 0:0,"aria-label":C??T.label,"aria-describedby":be?void 0:U,onPointerLeave:()=>ae(null),onBlur:()=>ae(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const t=ye.map(e=>e.index);if(0===t.length)return;const a=null===te?-1:t.indexOf(te),n="ArrowRight"===e.key?a+1:a-1;ae(t[(n+t.length)%t.length]),e.preventDefault()},className:y("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:re},children:[be?e("div",{className:y("flex h-full items-center justify-center text-(--neba-muted-fg)",M[V]),children:K??Q.title}):J>0?t("svg",{width:J,height:re,viewBox:`0 0 ${J} ${re}`,"aria-hidden":"true",className:"block",children:[ye.map(t=>{const a=null!==ee.hovered&&ee.hovered!==t.index||null!==te&&te!==t.index,n=t.end-t.start>2*xe?xe/2:0;return e("path",{d:u(he,fe,ve,pe,t.start+n,t.end-n),fill:Y[t.index].color??ne[t.index],opacity:a?.32:1,onPointerEnter:ce?void 0:()=>ae(t.index),className:"[transition:opacity_var(--neba-duration)_var(--neba-ease)]"},t.index)}),"all"===_?ye.map(t=>{const a=((t.start+t.end)/2-90)*(Math.PI/180),n=pe>0?(pe+ve)/2:.68*ve,l=`${Math.round(100*t.share)}%`;return(t.end-t.start)*(Math.PI/180)*n<2*oe||ve-pe<1.6*oe?null:e("text",{x:he+n*Math.cos(a),y:fe+n*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:oe,fontWeight:600,fill:"var(--neba-surface)",className:"tabular-nums",children:l},t.index)}):null]}):null,S&&pe>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:he-pe,top:fe-pe,width:2*pe,height:ie?pe:2*pe},children:S}):null,null===te||ce?null:me.render?e("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10",children:me.render({index:te,category:Z[te]?.name??te,items:je})}):e(o,{heading:Z[te]?.name,items:je,x:he,y:8,flip:!1,size:V})]}),ce?null:e(i,{heading:null===te?void 0:Z[te]?.name,items:je})]})}

package/dist/components/pill/Pill.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{observeResize as o}from"../../internal/observe.js";import{controlSlots as i,controlTextClasses as r,cx as s,focusRingClasses as a,gapClasses as c,hasContent as d,iconClasses as m,iconSizeClasses as x,metaTextClasses as f,paddingXClasses as p,pressTransitionClasses as u,sheetBodyClasses as h,surfaceClasses as v,transitionClasses as b}from"../../internal/styles.js";const g={solid:[v,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${v} text-(--n-accent) bg-(--n-soft)`},w={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)"},j={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},y={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},N={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},k={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const Pill=/*@__PURE__*/l.forwardRef(function({variant:v="solid",size:z="md",color:$="secondary",density:_="default",elevation:C=2,startIcon:H,endIcon:I,title:R,description:B,details:E,expanded:F=!1,position:P="static",side:S="top",className:q,style:A,children:D,onClick:G,...J},K){const L=l.useRef(null),[M,O]=l.useState(0);l.useEffect(()=>{const e=L.current;if(e)return O(e.scrollHeight),o(e,()=>O(e.scrollHeight))},[E]);const Q=Boolean(G),T=p[_][z],U=n(t,{children:[d(H)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${x[z]}`,children:H}):null,d(R)||d(B)||d(D)?n("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",N[_][z]].join(" "),children:[d(R)?e("span",{className:"max-w-full truncate",children:R}):null,d(B)?e("span",{className:`max-w-full truncate font-normal ${f[z]} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:B}):null,D]}):null]});return n("div",{ref:K,className:s("inline-flex max-w-full flex-col overflow-hidden align-middle",y[z],"font-medium whitespace-nowrap select-none",r[z],g[v],b,u,m,Q?`neba-glow ${w[v]}`:"",k[P][S],q??""),style:{...i($,C,v),...A},...J,children:[n("div",{className:["flex shrink-0 items-center py-1",j[z],c[z],Q?"ps-0":T,d(I)?"pe-1":Q?"pe-0":""].join(" "),children:[Q?e("button",{type:"button",className:["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",c[z],T,a].join(" "),onClick:G,children:U}):U,d(I)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:I}):null]}),d(E)?e("div",{className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:F?M:0},inert:!F,children:e("div",{ref:L,className:`whitespace-normal ${T} pb-2 ${h[z]}`,children:E})}):null]})});
+"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{observeResize as o}from"../../internal/observe.js";import{controlSlots as i,controlTextClasses as r,cx as s,focusRingClasses as a,gapClasses as c,hasContent as d,iconClasses as m,iconSizeClasses as f,metaTextClasses as x,paddingXClasses as p,pressTransitionClasses as u,sheetBodyClasses as h,surfaceClasses as v,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const w={solid:[v,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${v} text-(--n-accent) bg-(--n-soft)`},j={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)"},y={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},N={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},k={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},z={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const Pill=/*@__PURE__*/l.forwardRef(function(v,$){const{variant:_="solid",size:C="md",color:H="secondary",density:I="default",elevation:R=2,startIcon:B,endIcon:E,title:F,description:P,details:S,expanded:q=!1,position:A="static",side:D="top",className:G,style:J,children:K,onClick:L,...M}=g(v,["size","density","variant"]),O=l.useRef(null),[Q,T]=l.useState(0);l.useEffect(()=>{const e=O.current;if(e)return T(e.scrollHeight),o(e,()=>T(e.scrollHeight))},[S]);const U=Boolean(L),V=p[I][C],W=n(t,{children:[d(B)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${f[C]}`,children:B}):null,d(F)||d(P)||d(K)?n("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",k[I][C]].join(" "),children:[d(F)?e("span",{className:"max-w-full truncate",children:F}):null,d(P)?e("span",{className:`max-w-full truncate font-normal ${x[C]} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:P}):null,K]}):null]});return n("div",{ref:$,className:s("inline-flex max-w-full flex-col overflow-hidden align-middle",N[C],"font-medium whitespace-nowrap select-none",r[C],w[_],b,u,m,U?`neba-glow ${j[_]}`:"",z[A][D],G??""),style:{...i(H,R,_),...J},...M,children:[n("div",{className:["flex shrink-0 items-center py-1",y[C],c[C],U?"ps-0":V,d(E)?"pe-1":U?"pe-0":""].join(" "),children:[U?e("button",{type:"button",className:["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",c[C],V,a].join(" "),onClick:L,children:W}):W,d(E)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:E}):null]}),d(S)?e("div",{className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:q?Q:0},inert:!q,children:e("div",{ref:O,className:`whitespace-normal ${V} pb-2 ${h[C]}`,children:S})}):null]})});

package/dist/components/popconfirm/Popconfirm.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import type { NebaAlign, NebaColor, NebaSide, NebaSize, NebaSlots } from '../../types.js';
+/** The parts a Popconfirm draws behind its root. */
+export type PopconfirmSlot = 'icon' | 'title' | 'description' | 'actions';
+export interface PopconfirmProps {
+    /**
+     * The control the question hangs off and that raises it. Exactly one element,
+     * which must accept a ref and spread props — every Neba component does.
+     */
+    trigger?: React.ReactElement;
+    /** The question. */
+    title?: React.ReactNode;
+    /** What answering costs — the consequence, not a restatement of the title. */
+    description?: React.ReactNode;
+    /** Called when the reader confirms. May return a promise; see `onConfirm`. */
+    onConfirm?: () => void | Promise<unknown>;
+    /** Called when the reader cancels. Dismissing does not call it. */
+    onCancel?: () => void;
+    /** Overrides the confirming button's label. Defaults to the locale's word. */
+    confirmLabel?: React.ReactNode;
+    /** Overrides the cancelling button's label. */
+    cancelLabel?: React.ReactNode;
+    /**
+     * The colour family. `danger` for anything that destroys something, which is
+     * most of what a Popconfirm is for.
+     * @default 'danger'
+     */
+    color?: NebaColor;
+    size?: NebaSize;
+    /**
+     * Draws the family's own severity mark beside the question.
+     *
+     * On by default, and it is not decoration: a question that says "this is
+     * destructive" only in red says it only to some readers, so the shape has to
+     * carry the meaning too. Pass a node for one of your own, or `false` for none.
+     * @default true
+     */
+    icon?: React.ReactNode | false;
+    side?: NebaSide;
+    align?: NebaAlign;
+    /** Whether the bubble is open. Use with `onOpenChange` to control it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** BCP 47 tag deciding the two default labels. Defaults to the browser's. */
+    locale?: string;
+    /** How wide the bubble is. */
+    width?: number | string;
+    className?: string;
+    classNames?: NebaSlots<PopconfirmSlot>;
+}
+/**
+ * A question asked where the answer will be acted on.
+ *
+ * The small sibling of [Confirm](./confirm), and the difference is not size. A
+ * Confirm takes the page away, which is right when the consequence reaches past
+ * what is on screen — deleting the workspace everything else belongs to. A
+ * Popconfirm stays anchored to the control that raised it, which is right when
+ * the consequence is that control's own row: the reader can still see what they
+ * are about to delete, and losing that context is most of what makes a modal
+ * feel heavy for a small act.
+ *
+ * So the rule is about *reach* rather than about danger: one row, a Popconfirm;
+ * the page, a Confirm.
+ *
+ * It closes itself once `onConfirm` settles, so an async handler keeps the
+ * bubble up — and its confirming button busy — until the work is actually done.
+ * A question that vanished before its answer landed is a question the reader
+ * has no way to know was heard.
+ */
+export declare function Popconfirm(rawProps: PopconfirmProps): React.JSX.Element;

package/dist/components/popconfirm/Popconfirm.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as i from"react";import{Button as o}from"../button/Button.js";import{Popover as t,PopoverClose as l}from"../popover/Popover.js";import{severityIcon as r}from"../../internal/icons.js";import{confirmMessages as a,useMessages as s}from"../../internal/i18n.js";import{cx as c,gapClasses as m}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";export function Popconfirm(p){const{trigger:f,title:u,description:h,onConfirm:x,onCancel:g,confirmLabel:j,cancelLabel:N,color:v="danger",size:C="sm",icon:y=!0,side:b="top",align:w="center",open:z,defaultOpen:k,onOpenChange:O,locale:L,width:P=280,className:S,classNames:B}=d(p,["size","locale"]),q=s(a,L),[A,D]=i.useState(k??!1),E=z??A,[F,G]=i.useState(!1),H=e=>{void 0===z&&D(e),O?.(e)},I=!0===y?r(v):y;return e(t,{trigger:f,open:E,onOpenChange:H,side:b,align:w,size:C,color:v,width:P,showClose:!1,className:S,children:n("div",{className:c("flex",m[C]),children:[I?e("span",{"aria-hidden":"true",className:c("mt-px shrink-0 text-(--n-accent)",B?.icon),children:I}):null,n("div",{className:c("flex min-w-0 flex-1 flex-col",m[C]),children:[u?e("p",{className:c("font-medium text-(--neba-fg)",B?.title),children:u}):null,h?e("p",{className:c("text-(--neba-muted-fg)",B?.description),children:h}):null,n("div",{className:c("flex justify-end gap-1.5 pt-0.5",B?.actions),children:[e(l,{render:e(o,{size:C,variant:"text",color:"secondary",onClick:()=>g?.(),children:N??q.cancel})}),e(o,{size:C,color:v,loading:F,onClick:async()=>{try{G(!0),await(x?.()),H(!1)}finally{G(!1)}},children:j??q.confirm})]})]})]})})}

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

@@ -0,0 +1,2 @@
+export { Popconfirm } from './Popconfirm.js';
+export type { PopconfirmProps, PopconfirmSlot } from './Popconfirm.js';

package/dist/components/popconfirm/index.js

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

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

@@ -112,4 +112,4 @@ export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<import("
  * the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
  * surface, the width ladder and the header.
  */
-export declare function Popover({ size, color, density, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, locale, closeLabel, width, className, style, ...props }: PopoverProps): React.JSX.Element;
+export declare function Popover(rawProps: PopoverProps): React.JSX.Element;

package/dist/components/popover/Popover.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Popover as t}from"@base-ui/react/popover";import{boxPaddingXClasses as o,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as n,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as l}from"../../internal/icons.js";import{cx as r,hasContent as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as h,surfaceClasses as x,surfaceSlots as b}from"../../internal/styles.js";const g={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},v=[x,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w={xs:8,sm:9,md:10,lg:11,xl:12};export const PopoverClose=t.Close;export function Popover({size:x="md",color:y="primary",density:j="default",trigger:N,title:_,description:k,children:O,side:C="bottom",align:P="center",sideOffset:z=6,alignOffset:$=0,arrow:B=!1,open:L,defaultOpen:M,onOpenChange:T,modal:W=!1,dismissible:A=!0,showClose:D=!1,locale:E,closeLabel:R,width:q,className:F,style:G,...H}){const I=i(n,E),J=o[j][x],K=s[j][x],Q=w[x],S=d(_)||d(k);return a(t.Root,{open:L,defaultOpen:M,modal:W,onOpenChange:(e,a)=>{A||e||"escape-key"!==a.reason&&"outside-press"!==a.reason&&"focus-out"!==a.reason?T?.(e):a.cancel()},children:[N?e(t.Trigger,{render:N}):null,e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",side:C,align:P,sideOffset:z,alignOffset:$,children:a(t.Popup,{className:r(v,m[x],p[x],u[x],J,K,void 0===q?g[x]:"",F??""),style:{...b(y,3),...void 0===q?null:{maxWidth:"number"==typeof q?`${q}px`:q},...G},...H,children:[B?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:Q,height:Q/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--n-panel-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--n-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,S||D?a("div",{className:"flex shrink-0 items-start gap-3",children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[x]}`,children:[d(_)?e(t.Title,{className:`m-0 font-semibold ${h[x]}`,children:_}):null,d(k)?e(t.Description,{className:`m-0 text-(--neba-muted-fg) ${c[x]}`,children:k}):null]}),D?e(t.Close,{"aria-label":R??I.close,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(l,{})}):null]}):null,d(O)?e("div",{className:"min-w-0",children:O}):null]})})})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Popover as t}from"@base-ui/react/popover";import{boxPaddingXClasses as o,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as n,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as l}from"../../internal/icons.js";import{cx as r,hasContent as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as h,surfaceClasses as x,surfaceSlots as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const v={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},w=[x,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y={xs:8,sm:9,md:10,lg:11,xl:12};export const PopoverClose=t.Close;export function Popover(x){const{size:j="md",color:N="primary",density:_="default",trigger:k,title:O,description:z,children:C,side:P="bottom",align:$="center",sideOffset:B=6,alignOffset:L=0,arrow:M=!1,open:T,defaultOpen:W,onOpenChange:A,modal:D=!1,dismissible:E=!0,showClose:R=!1,locale:q,closeLabel:F,width:G,className:H,style:I,...J}=g(x,["size","density","locale"]),K=i(n,q),Q=o[_][j],S=s[_][j],U=y[j],V=d(O)||d(z);return a(t.Root,{open:T,defaultOpen:W,modal:D,onOpenChange:(e,a)=>{E||e||"escape-key"!==a.reason&&"outside-press"!==a.reason&&"focus-out"!==a.reason?A?.(e):a.cancel()},children:[k?e(t.Trigger,{render:k}):null,e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",side:P,align:$,sideOffset:B,alignOffset:L,children:a(t.Popup,{className:r(w,m[j],p[j],u[j],Q,S,void 0===G?v[j]:"",H??""),style:{...b(N,3),...void 0===G?null:{maxWidth:"number"==typeof G?`${G}px`:G},...I},...J,children:[M?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:U,height:U/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--n-panel-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--n-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,V||R?a("div",{className:"flex shrink-0 items-start gap-3",children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[j]}`,children:[d(O)?e(t.Title,{className:`m-0 font-semibold ${h[j]}`,children:O}):null,d(z)?e(t.Description,{className:`m-0 text-(--neba-muted-fg) ${c[j]}`,children:z}):null]}),R?e(t.Close,{"aria-label":F??K.close,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(l,{})}):null]}):null,d(C)?e("div",{className:"min-w-0",children:C}):null]})})})]})}

package/dist/components/portal/Portal.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+export interface PortalProps extends React.ComponentPropsWithoutRef<'div'> {
+    children?: React.ReactNode;
+    /**
+     * Where the children go. Defaults to `document.body`.
+     *
+     * A function is called after mount, which is how a portal targets something
+     * that is itself rendered by React — `() => document.getElementById('drawer')`
+     * finds an element that did not exist when this component's props were built.
+     */
+    container?: Element | DocumentFragment | null | (() => Element | DocumentFragment | null);
+    /**
+     * Render in place instead of portalling.
+     *
+     * **Decide this once, at mount.** A portalled subtree and an inline one are
+     * different children as far as React is concerned, so flipping this remounts
+     * everything inside and throws away what was in it — a half-filled form, a
+     * scroll position, a video that was playing. That is React's reconciliation
+     * rather than a shortcoming here, and no portal implementation escapes it.
+     *
+     * It is a prop rather than an absence so a caller can decide from something
+     * they only know at runtime: a subtree that is already inside a portal, a
+     * test that wants the markup where it was written, an embed with no
+     * `document.body` worth reaching.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Children, rendered somewhere else in the DOM.
+ *
+ * `createPortal` with the two things a library has to add. The first is the
+ * class: the wrapper carries `neba-portal`, which is the hook this library's
+ * own popups already use and which a scoped stylesheet hangs its reset off — a
+ * portalled subtree leaves whatever element the page had scoped its styling to,
+ * and the class is how it is found again. That is the reason to reach for this
+ * over `createPortal` directly.
+ *
+ * The second is the server. There is no `document` there, so a portal renders
+ * nothing at all until it has mounted, and the markup that ships never contains
+ * the portalled subtree. That is not a limitation to work around — it is what a
+ * portal *is* — so anything that must be in the server's HTML does not belong
+ * in one.
+ *
+ * The wrapper is a real element rather than a fragment on purpose: it is what
+ * carries the class, and it is what a caller styles to place the subtree.
+ */
+export declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/portal/Portal.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import*as e from"react";import{createPortal as r}from"react-dom";import{cx as o}from"../../internal/styles.js";export const Portal=/*@__PURE__*/e.forwardRef(function({children:n,container:s,disabled:a=!1,className:c,...i},l){const[f,m]=e.useState(null);e.useEffect(()=>{if(a)return;const t="function"==typeof s?s():s;m(t??document.body)},[s,a]);const u=t("div",{ref:l,className:o("neba-portal",c),...i,children:n});return a?u:f?r(u,f):null});

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

@@ -0,0 +1,2 @@
+export { Portal } from './Portal.js';
+export type { PortalProps } from './Portal.js';

package/dist/components/portal/index.js

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

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

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

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

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

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

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

package/dist/components/provider/NebaProvider.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { type NebaDefaults } from '../../internal/defaults.js';
+/** What a reader asked for. `system` is a deferral, not a third appearance. */
+export type NebaColorScheme = 'light' | 'dark' | 'system';
+/** Which way the document runs. */
+export type NebaDirection = 'ltr' | 'rtl';
+/** What `useColorScheme` hands back. */
+export interface ColorSchemeState {
+    /** What was asked for, `system` included. */
+    colorScheme: NebaColorScheme;
+    /** What that comes out as right now — never `system`. */
+    resolvedColorScheme: 'light' | 'dark';
+    setColorScheme: (scheme: NebaColorScheme) => void;
+    /** Light ↔ dark. From `system`, it goes to the opposite of what is showing. */
+    toggleColorScheme: () => void;
+}
+export interface NebaProviderProps {
+    children?: React.ReactNode;
+    /**
+     * Prop values every component under it starts from.
+     *
+     * `size`, `density`, `variant` and `locale` — the axes whose right value is a
+     * property of the product rather than of the control. A call site still wins:
+     * the order is the caller, then this, then the component's own default.
+     */
+    defaults?: NebaDefaults;
+    /** The colour scheme. Use with `onColorSchemeChange` to control it. */
+    colorScheme?: NebaColorScheme;
+    /** @default 'system' */
+    defaultColorScheme?: NebaColorScheme;
+    onColorSchemeChange?: (scheme: NebaColorScheme) => void;
+    /**
+     * Where the choice is remembered, or `false` to forget it between visits.
+     * @default 'neba-color-scheme'
+     */
+    storageKey?: string | false;
+    /**
+     * Which element the scheme is written on. The `<html>` element by default,
+     * which is what the stylesheet and the browser's own form controls read.
+     *
+     * A function, called after mount, so it can name an element React itself
+     * renders. Returning `null` writes nowhere at all — which is what a preview
+     * embedded in someone else's page needs, and why this is not just an element.
+     */
+    colorSchemeElement?: () => Element | null;
+    /**
+     * The writing direction. Left alone when it is not given, so a document that
+     * already sets `dir` on `<html>` is not fought over.
+     */
+    direction?: NebaDirection;
+}
+/**
+ * The script to run before the first paint, so a remembered dark page does not
+ * flash white on the way in.
+ *
+ * The one thing a provider cannot do for you: React runs after the document has
+ * been painted once, and by then the flash has happened. Inline the string this
+ * returns in `<head>`, above everything:
+ *
+ * ```tsx
+ * <script dangerouslySetInnerHTML={{ __html: colorSchemeScript() }} />
+ * ```
+ *
+ * It reads the same key and writes the same attribute the provider does, so the
+ * two cannot disagree — which is the reason it is here rather than in a
+ * documentation snippet somebody copies once and never updates.
+ */
+export declare function colorSchemeScript(options?: {
+    storageKey?: string;
+    defaultColorScheme?: NebaColorScheme;
+}): string;
+/**
+ * One place to set what every Neba component under it starts from.
+ *
+ * Three jobs, and they are together because all three are properties of the
+ * *application* rather than of any control in it: the prop values a product has
+ * decided on, the colour scheme a reader has chosen, and the direction the
+ * document runs in. Writing `size="sm"` at four hundred call sites is the
+ * problem this exists to end.
+ *
+ * It renders no element of its own. The colour scheme is an attribute on
+ * `<html>` — which is where the stylesheet already looks, and where the
+ * browser's own form controls and scrollbars look — and the direction is `dir`
+ * on the same element plus Base UI's own provider, so its primitives flip their
+ * keyboard and their positioning with the page.
+ *
+ * It is entirely optional. Every component works without it, and a page that
+ * has none pays a `useContext` that returns `null` and nothing else.
+ */
+export declare function NebaProvider({ children, defaults, colorScheme: colorSchemeProp, defaultColorScheme, onColorSchemeChange, storageKey, colorSchemeElement, direction }: NebaProviderProps): React.JSX.Element;
+/**
+ * The colour scheme, and the two ways to change it.
+ *
+ * `colorScheme` is what was asked for and `resolvedColorScheme` is what that
+ * comes out as — the difference matters for the control that shows it, because
+ * a three-way switch has to show `system` as its own position rather than as
+ * whichever of the two it currently resolves to.
+ */
+export declare function useColorScheme(): ColorSchemeState;

package/dist/components/provider/NebaProvider.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{DirectionProvider as r}from"@base-ui/react/direction-provider";import{DefaultsContext as o}from"../../internal/defaults.js";import{useMediaQuery as c}from"../../internal/media.js";const n=/*@__PURE__*/t.createContext(null);export function colorSchemeScript(e={}){const t=e.storageKey??"neba-color-scheme",r=e.defaultColorScheme??"system";return`(function(){try{var s=localStorage.getItem(${JSON.stringify(t)})||${JSON.stringify(r)};if(s==='system'){s=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}document.documentElement.setAttribute('data-theme',s)}catch(e){}})()`}export function NebaProvider({children:l,defaults:s,colorScheme:a,defaultColorScheme:i="system",onColorSchemeChange:m,storageKey:u="neba-color-scheme",colorSchemeElement:d,direction:h}){const[f,S]=t.useState(()=>function(e){if(!1===e||"undefined"==typeof localStorage)return null;try{const t=localStorage.getItem(e);return"light"===t||"dark"===t||"system"===t?t:null}catch{return null}}(u)??i),g=a??f,y=c("(prefers-color-scheme: dark)"),p="system"===g?y?"dark":"light":g,C=t.useCallback(e=>{if(void 0===a&&S(e),!1!==u)try{localStorage.setItem(u,e)}catch{}m?.(e)},[a,u,m]);t.useEffect(()=>{const e=d?d():document.documentElement;e&&(e.setAttribute("data-theme",p),e.style.colorScheme=p)},[p,d]),t.useEffect(()=>{h&&document.documentElement.setAttribute("dir",h)},[h]);const b=t.useMemo(()=>({colorScheme:g,resolvedColorScheme:p,setColorScheme:C,toggleColorScheme:()=>C("dark"===p?"light":"dark")}),[g,p,C]);return e(o.Provider,{value:s??null,children:e(n.Provider,{value:b,children:e(r,{direction:h??"ltr",children:l})})})}export function useColorScheme(){const e=t.useContext(n);if(!e)throw new Error("neba: useColorScheme() needs a <NebaProvider> above it.");return e}

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

@@ -0,0 +1,3 @@
+export { colorSchemeScript, NebaProvider, useColorScheme } from './NebaProvider.js';
+export type { ColorSchemeState, NebaColorScheme, NebaDirection, NebaProviderProps } from './NebaProvider.js';
+export type { NebaDefaults } from '../../internal/defaults.js';

package/dist/components/provider/index.js

@@ -0,0 +1 @@
+export{colorSchemeScript,NebaProvider,useColorScheme}from"./NebaProvider.js";

package/dist/components/rating/Rating.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{StarIcon as t,StarOutlineIcon as l}from"../../internal/icons.js";import{fillMessage as r,ratingMessages as i,useMessages as s}from"../../internal/i18n.js";import{controlSlots as o,cx as d,focusWithinRingClasses as c,gapClasses as m,iconSizeClasses as u,radiusClasses as h,srOnlyClasses as f,transitionClasses as b}from"../../internal/styles.js";const p="flex items-center justify-center";export const Rating=/*@__PURE__*/n.forwardRef(function({value:x,defaultValue:y=0,onValueChange:v,count:g=5,precision:j=1,icon:N,emptyIcon:M,clearable:w=!0,readOnly:k=!1,disabled:S=!1,name:C,required:L=!1,size:P="md",color:q="warning",locale:I,label:A,valueLabel:R,className:V,style:z,onPointerLeave:E,...F},O){const B=s(i,I),D=n.useId(),G=C??D,[H,J]=n.useState(y),K=void 0!==x,Q=K?x:H,[T,U]=n.useState(null),W=Math.max(1,Math.floor(g)),X=j>0&&j<=1?j:1,Y=Math.round(1/X),Z=Math.max(0,Math.min(W,T??Q)),$=n.useCallback(e=>R?R(e,W):e<=0?B.empty:r(B.value,{value:String(e),max:String(W)}),[R,W,B]),_=e=>{K||J(e),v?.(e)},ee=Array.from({length:W},(n,r)=>{const i=Math.max(0,Math.min(1,Z-r));return a("span",{className:d("relative inline-flex shrink-0",u[P],h.xs,k||S?"":c),children:[e("span",{className:[p,u[P],S?"text-(--neba-disabled-fg)":"text-(--n-empty)"].join(" "),children:M??e(l,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*i+"%"},children:e("span",{className:[p,u[P],S?"text-(--neba-disabled-fg)":"text-(--n-fill)",b].join(" "),children:N??e(t,{})})}),k?null:Array.from({length:Y},(a,n)=>{const t=Number((r+(n+1)*X).toFixed(4));return e("label",{className:["absolute inset-y-0",S?"cursor-not-allowed":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/Y+"%",width:100/Y+"%"},onPointerEnter:()=>{S||U(t)},children:e("input",{type:"radio",className:f,name:G,value:t,checked:Q===t,disabled:S,required:L,"aria-label":$(t),onChange:()=>_(t),onClick:()=>{w&&Q===t&&_(0)}})},t)})]},r)}),ae=d("inline-flex items-center align-middle",m[P],S?"cursor-not-allowed":"",V??""),ne={...o(q,0,"solid"),"--n-empty":"color-mix(in oklab, var(--neba-muted-fg) 40%, transparent)",...z};return e("div",k?{ref:O,role:"img","aria-label":$(Math.max(0,Math.min(W,Q))),className:ae,style:ne,onPointerLeave:E,...F,children:ee}:{ref:O,role:"radiogroup","aria-label":A??B.label,"aria-disabled":S||void 0,"aria-required":L||void 0,className:ae,style:ne,onPointerLeave:e=>{U(null),E?.(e)},...F,children:ee})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{StarIcon as t,StarOutlineIcon as l}from"../../internal/icons.js";import{fillMessage as r,ratingMessages as i,useMessages as s}from"../../internal/i18n.js";import{controlSlots as o,cx as d,focusWithinRingClasses as m,gapClasses as c,iconSizeClasses as u,radiusClasses as h,srOnlyClasses as f,transitionClasses as p}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const x="flex items-center justify-center";export const Rating=/*@__PURE__*/n.forwardRef(function(y,v){const{value:g,defaultValue:j=0,onValueChange:N,count:M=5,precision:w=1,icon:k,emptyIcon:S,clearable:C=!0,readOnly:L=!1,disabled:P=!1,name:q,required:I=!1,size:z="md",color:A="warning",locale:R,label:V,valueLabel:E,className:F,style:O,onPointerLeave:B,...D}=b(y,["size","locale"]),G=s(i,R),H=n.useId(),J=q??H,[K,Q]=n.useState(j),T=void 0!==g,U=T?g:K,[W,X]=n.useState(null),Y=Math.max(1,Math.floor(M)),Z=w>0&&w<=1?w:1,$=Math.round(1/Z),_=Math.max(0,Math.min(Y,W??U)),ee=n.useCallback(e=>E?E(e,Y):e<=0?G.empty:r(G.value,{value:String(e),max:String(Y)}),[E,Y,G]),ae=e=>{T||Q(e),N?.(e)},ne=Array.from({length:Y},(n,r)=>{const i=Math.max(0,Math.min(1,_-r));return a("span",{className:d("relative inline-flex shrink-0",u[z],h.xs,L||P?"":m),children:[e("span",{className:[x,u[z],P?"text-(--neba-disabled-fg)":"text-(--n-empty)"].join(" "),children:S??e(l,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*i+"%"},children:e("span",{className:[x,u[z],P?"text-(--neba-disabled-fg)":"text-(--n-fill)",p].join(" "),children:k??e(t,{})})}),L?null:Array.from({length:$},(a,n)=>{const t=Number((r+(n+1)*Z).toFixed(4));return e("label",{className:["absolute inset-y-0",P?"cursor-not-allowed":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/$+"%",width:100/$+"%"},onPointerEnter:()=>{P||X(t)},children:e("input",{type:"radio",className:f,name:J,value:t,checked:U===t,disabled:P,required:I,"aria-label":ee(t),onChange:()=>ae(t),onClick:()=>{C&&U===t&&ae(0)}})},t)})]},r)}),te=d("inline-flex items-center align-middle",c[z],P?"cursor-not-allowed":"",F??""),le={...o(A,0,"solid"),"--n-empty":"color-mix(in oklab, var(--neba-muted-fg) 40%, transparent)",...O};return e("div",L?{ref:v,role:"img","aria-label":ee(Math.max(0,Math.min(Y,U))),className:te,style:le,onPointerLeave:B,...D,children:ne}:{ref:v,role:"radiogroup","aria-label":V??G.label,"aria-disabled":P||void 0,"aria-required":I||void 0,className:te,style:le,onPointerLeave:e=>{X(null),B?.(e)},...D,children:ne})});

package/dist/components/scatter-chart/ScatterChart.d.ts

@@ -42,4 +42,4 @@ export interface ScatterChartProps extends CartesianChartProps {
  * `x` must be a number or a `Date`. A string has no place on a number line, and
  * a chart of named things against one measure is a [BarChart](./bar-chart).
  */
-export declare function ScatterChart({ shape, pointRadius, maxRadius, series, categories, size, xAxis, ...props }: ScatterChartProps): React.JSX.Element;
+export declare function ScatterChart(rawProps: ScatterChartProps): React.JSX.Element;

package/dist/components/scatter-chart/ScatterChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as l}from"../../internal/chart-frame.js";import{bubbleRadius as t,formatCategory as i,markerRadii as s,markGap as o,markPath as n,markShapes as c,plotHeights as u,pointX as d}from"../../internal/chart.js";import{cx as h,srOnlyClasses as m}from"../../internal/styles.js";export function ScatterChart({shape:r="auto",pointRadius:i,maxRadius:o,series:h,categories:m,size:p="md",xAxis:b,...v}){const y=i??s[p],g=o??Math.max(y+2,("number"==typeof v.height?v.height:u[p])/12),z=h.reduce((e,r)=>r.color?e:e+1,0),j="auto"===r||"varied"===r?"circle":r,k="varied"===r||"auto"===r&&z>3,M=a.useCallback(e=>k?c[e%c.length]:j,[k,j]),w=a.useCallback(e=>{const r=[];let a=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(a=Math.max(a,e.z))})}),e.values.forEach((l,i)=>{e.visible[i]&&l.forEach((l,s)=>{if(null===l.value)return;const o=d(l,s,m);null!==o&&r.push({series:i,index:s,x:e.categoryValuePx(o),y:e.valuePx(l.value),r:void 0===l.z?y:t(l.z,a,g,2)})})}),r},[m,y,g]);return e(l,{...v,series:h,categories:m,size:p,xScale:"value",xAxis:b,marks:w,markInset:g,includeZero:!1,swatch:(r,a)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:n(M(r),5,5,4),fill:a})}),table:r=>e(f,{id:r,series:h,categories:m,label:v.label,xLabel:b?.label,yLabel:v.yAxis?.label,locale:v.locale,format:v.format}),children:r=>e(x,{context:r,shapeOf:M})})}function x({context:r,shapeOf:l}){const{marks:t,values:i,colors:s,hovered:c,activeMark:u}=r,d=a.useMemo(()=>[...t].sort((e,r)=>r.r-e.r),[t]);return e("g",{children:d.map(r=>{const a=i[r.series]?.[r.index],t=null!==c&&c!==r.series,d=u?.series===r.series&&u?.index===r.index;return e("path",{d:n(l(r.series),r.x,r.y,d?r.r+1:r.r),fill:a?.color??s[r.series],stroke:"var(--neba-chart-gap)",strokeWidth:o,opacity:t?.28:1},`${r.series}-${r.index}`)})})}function f({id:l,series:t,categories:s,label:o,xLabel:n,yLabel:c,locale:u,format:d}){const x=a.useMemo(()=>new Intl.NumberFormat(u,d??{maximumFractionDigits:2}),[u,d]),f=t.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:l,className:h(m),children:[o?e("caption",{children:o}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:n??"x"}),e("th",{scope:"col",children:c??"y"}),f?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:t.flatMap((a,l)=>a.data.map((t,o)=>{const n="object"==typeof t&&null!==t?t:null,c=n?n.y:"number"==typeof t?t:null,d=n?.x??s?.[o]??o;return r("tr",{children:[e("th",{scope:"row",children:a.name??l+1}),e("td",{children:i(d,u)}),e("td",{children:null!==c&&Number.isFinite(c)?x.format(c):""}),f?e("td",{children:void 0===n?.z?"":x.format(n.z)}):null]},`${l}-${o}`)}))})]})}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as l}from"../../internal/chart-frame.js";import{bubbleRadius as t,formatCategory as i,markerRadii as s,markGap as o,markPath as n,markShapes as c,plotHeights as u,pointX as d}from"../../internal/chart.js";import{cx as h,srOnlyClasses as m}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export function ScatterChart(r){const{shape:i="auto",pointRadius:o,maxRadius:h,series:m,categories:b,size:v="md",xAxis:y,...z}=f(r,["size"]),g=o??s[v],j=h??Math.max(g+2,("number"==typeof z.height?z.height:u[v])/12),k=m.reduce((e,r)=>r.color?e:e+1,0),M="auto"===i||"varied"===i?"circle":i,w="varied"===i||"auto"===i&&k>3,N=a.useCallback(e=>w?c[e%c.length]:M,[w,M]),E=a.useCallback(e=>{const r=[];let a=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(a=Math.max(a,e.z))})}),e.values.forEach((l,i)=>{e.visible[i]&&l.forEach((l,s)=>{if(null===l.value)return;const o=d(l,s,b);null!==o&&r.push({series:i,index:s,x:e.categoryValuePx(o),y:e.valuePx(l.value),r:void 0===l.z?g:t(l.z,a,j,2)})})}),r},[b,g,j]);return e(l,{...z,series:m,categories:b,size:v,xScale:"value",xAxis:y,marks:E,markInset:j,includeZero:!1,swatch:(r,a)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:n(N(r),5,5,4),fill:a})}),table:r=>e(p,{id:r,series:m,categories:b,label:z.label,xLabel:y?.label,yLabel:z.yAxis?.label,locale:z.locale,format:z.format}),children:r=>e(x,{context:r,shapeOf:N})})}function x({context:r,shapeOf:l}){const{marks:t,values:i,colors:s,hovered:c,activeMark:u}=r,d=a.useMemo(()=>[...t].sort((e,r)=>r.r-e.r),[t]);return e("g",{children:d.map(r=>{const a=i[r.series]?.[r.index],t=null!==c&&c!==r.series,d=u?.series===r.series&&u?.index===r.index;return e("path",{d:n(l(r.series),r.x,r.y,d?r.r+1:r.r),fill:a?.color??s[r.series],stroke:"var(--neba-chart-gap)",strokeWidth:o,opacity:t?.28:1},`${r.series}-${r.index}`)})})}function p({id:l,series:t,categories:s,label:o,xLabel:n,yLabel:c,locale:u,format:d}){const f=a.useMemo(()=>new Intl.NumberFormat(u,d??{maximumFractionDigits:2}),[u,d]),x=t.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:l,className:h(m),children:[o?e("caption",{children:o}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:n??"x"}),e("th",{scope:"col",children:c??"y"}),x?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:t.flatMap((a,l)=>a.data.map((t,o)=>{const n="object"==typeof t&&null!==t?t:null,c=n?n.y:"number"==typeof t?t:null,d=n?.x??s?.[o]??o;return r("tr",{children:[e("th",{scope:"row",children:a.name??l+1}),e("td",{children:i(d,u)}),e("td",{children:null!==c&&Number.isFinite(c)?f.format(c):""}),x?e("td",{children:void 0===n?.z?"":f.format(n.z)}):null]},`${l}-${o}`)}))})]})}

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

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{ScrollArea as n}from"@base-ui/react/scroll-area";import{cx as o,focusRingClasses as l,toLength as t}from"../../internal/styles.js";const i={xs:"0.25rem",sm:"0.3125rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"},s={xs:"1rem",sm:"1.25rem",md:"1.5rem",lg:"2rem",xl:"2.5rem"},c=["flex touch-none select-none rounded-full p-px","bg-transparent hover:bg-(--n-soft)","opacity-0 transition-[opacity,background-color] duration-(--neba-duration) ease-(--neba-ease)","data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0"].join(" "),m="flex-1 rounded-full bg-(--n-thumb) hover:bg-(--n-thumb-hover)";export const ScrollArea=/*@__PURE__*/a.forwardRef(function({orientation:a="vertical",height:h,maxHeight:d,size:b="md",color:u="primary",fade:f=!1,className:g,style:p,children:x,...v},y){const N="vertical"===a||"both"===a,w="horizontal"===a||"both"===a;return r(n.Root,{ref:y,className:o("relative overflow-hidden",g??""),style:{"--n-soft":`var(--neba-${u}-soft)`,"--n-ring":`var(--neba-${u}-ring)`,"--n-thumb":`color-mix(in oklab, var(--neba-${u}-accent) 35%, transparent)`,"--n-thumb-hover":`color-mix(in oklab, var(--neba-${u}-accent) 55%, transparent)`,"--n-rail":i[b],"--n-fade":s[b],height:t(h),maxHeight:t(d),...p},...v,children:[e(n.Viewport,{style:{height:"100%",width:"100%"},className:o("overscroll-contain [outline:none]",l,f?"neba-scroll-fade":""),children:e(n.Content,{className:"min-w-full",children:x})}),N?e(n.Scrollbar,{orientation:"vertical",className:`${c} w-(--n-rail) [margin-block:2px]`,children:e(n.Thumb,{className:m})}):null,w?e(n.Scrollbar,{orientation:"horizontal",className:`${c} h-(--n-rail) [margin-inline:2px]`,children:e(n.Thumb,{className:m})}):null,N&&w?e(n.Corner,{}):null]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{ScrollArea as n}from"@base-ui/react/scroll-area";import{cx as o,focusRingClasses as l,toLength as t}from"../../internal/styles.js";import{useStyleDefaults as i}from"../../internal/defaults.js";const s={xs:"0.25rem",sm:"0.3125rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"},c={xs:"1rem",sm:"1.25rem",md:"1.5rem",lg:"2rem",xl:"2.5rem"},m=["flex touch-none select-none rounded-full p-px","bg-transparent hover:bg-(--n-soft)","opacity-0 transition-[opacity,background-color] duration-(--neba-duration) ease-(--neba-ease)","data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0"].join(" "),h="flex-1 rounded-full bg-(--n-thumb) hover:bg-(--n-thumb-hover)";export const ScrollArea=/*@__PURE__*/a.forwardRef(function(a,d){const{orientation:b="vertical",height:u,maxHeight:f,size:g="md",color:p="primary",fade:x=!1,className:v,style:y,children:N,...j}=i(a,["size"]),w="vertical"===b||"both"===b,$="horizontal"===b||"both"===b;return r(n.Root,{ref:d,className:o("relative overflow-hidden",v??""),style:{"--n-soft":`var(--neba-${p}-soft)`,"--n-ring":`var(--neba-${p}-ring)`,"--n-thumb":`color-mix(in oklab, var(--neba-${p}-accent) 35%, transparent)`,"--n-thumb-hover":`color-mix(in oklab, var(--neba-${p}-accent) 55%, transparent)`,"--n-rail":s[g],"--n-fade":c[g],height:t(u),maxHeight:t(f),...y},...j,children:[e(n.Viewport,{style:{height:"100%",width:"100%"},className:o("overscroll-contain [outline:none]",l,x?"neba-scroll-fade":""),children:e(n.Content,{className:"min-w-full",children:N})}),w?e(n.Scrollbar,{orientation:"vertical",className:`${m} w-(--n-rail) [margin-block:2px]`,children:e(n.Thumb,{className:h})}):null,$?e(n.Scrollbar,{orientation:"horizontal",className:`${m} h-(--n-rail) [margin-inline:2px]`,children:e(n.Thumb,{className:h})}):null,w&&$?e(n.Corner,{}):null]})});

package/dist/components/scroll-zone/ScrollZone.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{IconButton as r}from"../icon-button/IconButton.js";import{spacingValue as o}from"../../internal/grid.js";import{scrollMessages as i,useMessages as l}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{queryMatches as a,reducedMotionQuery as c}from"../../internal/media.js";import{observeResize as u}from"../../internal/observe.js";import{cx as d}from"../../internal/styles.js";const f={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},m={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const ScrollZone=/*@__PURE__*/n.forwardRef(function({orientation:p="horizontal",lines:v=1,spacing:b=2,buttons:w="auto",buttonPlacement:g="inline",mode:h="item",step:y=1,speed:x=900,snap:k=!1,drag:L=!0,wheel:E=!1,scrollbar:C=!1,variant:j="solid",size:M="md",color:P="primary",density:R="default",locale:N,label:T,previousLabel:A,nextLabel:D,className:W,style:S,children:z,...B},F){const Y=l(i,N),H="horizontal"===p,I=Math.max(1,Math.round(v)),X=Math.max(1,Math.round(y)),$=n.useRef(null),q=n.useRef(null),[K,_]=n.useState({back:!1,forward:!1}),V=n.useCallback(()=>{const e=$.current;if(!e)return;const t=H?e.clientWidth:e.clientHeight,n=H?e.scrollWidth:e.scrollHeight,r=Math.abs(H?e.scrollLeft:e.scrollTop);_(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[H]);n.useEffect(()=>{const e=$.current,t=q.current;if(!e)return;V();const n=[u(e,V),t?u(t,V):null];return()=>{for(const e of n)e?.()}},[V]);const Z=n.useCallback(()=>{const e=$.current;return e&&H&&"rtl"===getComputedStyle(e).direction?-1:1},[H]),G=n.useCallback((e,t)=>{const n=$.current;if(!n)return;const r=t?a(c)?"auto":"smooth":"auto";n.scrollBy(H?{left:e,behavior:r}:{top:e,behavior:r})},[H]),J=n.useCallback(()=>{const e=$.current,t=q.current;if(!e||!t)return[];const n=H&&"rtl"===getComputedStyle(e).direction,r=H?n?"right":"left":"top",o=n?-1:1,i=e.getBoundingClientRect()[r],l=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-i)*o);l.includes(t)||l.push(t)}return l.sort((e,t)=>e-t)},[H]),O=n.useCallback((e,t=h)=>{const n=$.current;if(!n)return;const r=Z(),o=H?n.clientWidth:n.clientHeight;if("page"===t)return void G(o*(e?1:-1)*r,!0);const i=J(),l=i.filter(e=>e>1),s=i.filter(e=>e<-1),a=e?l[X-1]:s[s.length-X];G(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[Z,H,J,X,h,G]),Q=n.useRef(null);n.useEffect(()=>()=>Q.current?.(),[]);const U=n.useCallback((e,t)=>{if(Q.current)return;const n=Z(),r=performance.now();let o=r,i=0;const l=t=>{const r=t-o;o=t,G(x*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(l)};i=requestAnimationFrame(l);const s=()=>{cancelAnimationFrame(i),Q.current=null,window.removeEventListener(t,s),window.removeEventListener("pointercancel",s),window.removeEventListener("blur",s),performance.now()-r<140&&O(e,"item")};Q.current=s,window.addEventListener(t,s),window.addEventListener("pointercancel",s),window.addEventListener("blur",s)},[O,Z,G,x]),ee=n.useRef(null);function te(e){return"hold"!==h?{onClick:()=>O(e)}:{onPointerDown:t=>{0===t.button&&U(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),U(e,"keyup"))}}}n.useEffect(()=>()=>ee.current?.(),[]),n.useEffect(()=>{const e=$.current;if(!e||!E||!H)return;const t=t=>{if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,r=t.deltaY*n;if(!r)return;const o=Math.abs(e.scrollLeft);(r>0?e.scrollWidth-e.clientWidth-o>1:o>1)&&(t.preventDefault(),G(r*Z(),!1))};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)},[Z,H,G,E]);const ne="none"!==w&&("always"===w||K.back||K.forward),re="inline"===g;function oe(t){const n=t?K.forward:K.back;if("auto"===w&&!n&&!re)return e("span",{});const o=H?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180",i="auto"===w&&!n,l=e(r,{variant:j,size:M,color:P,density:R,elevation:1,label:t?D??Y.next:A??Y.previous,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:d("flex items-center",o),children:e(s,{})}),...te(t)});return re?e("span",{className:d("flex shrink-0 items-center justify-center",i?"invisible":""),inert:i,children:l}):l}return t("div",{ref:F,className:d("relative flex min-w-0",re&&H?"flex-row items-stretch":"flex-col",re?m[M]:"",W),style:{"--n-ring":`var(--neba-${P}-ring)`,...S},...B,children:[ne&&re?oe(!1):null,e("div",{ref:$,tabIndex:0,role:"group","aria-label":T??Y.label,className:d("min-h-0 min-w-0 grow",H?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",k?H?"snap-x snap-mandatory":"snap-y snap-mandatory":"",C?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",L&&(K.back||K.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"),onScroll:V,onPointerDown:function(e){if(!L||"touch"===e.pointerType||0!==e.button)return;ee.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,i=t.scrollTop;let l=!1;const s=document.body.style.getPropertyValue("-webkit-user-select"),a=e=>{const s=e.clientX-n,a=e.clientY-r;if(!l){if(Math.abs(H?s:a)<4)return;l=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}H?t.scrollLeft=o-s:t.scrollTop=i-a},c=()=>{ee.current=null,t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",c),delete t.dataset.dragging,s?document.body.style.setProperty("-webkit-user-select",s):document.body.style.removeProperty("-webkit-user-select")},u=()=>{const e=l;if(c(),!e)return;const n=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",n,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",n,!0),0)};ee.current=c,t.addEventListener("pointermove",a),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",c)},children:e("div",{ref:q,className:d(k?"[&>*]:snap-start":""),style:{display:"grid",gap:o(b),gridAutoFlow:H?"column":"row",...H?{width:"max-content",gridTemplateRows:`repeat(${I}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${I}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:z})}),ne&&re?oe(!0):null,ne&&!re?t("div",{className:d("pointer-events-none absolute inset-0 flex justify-between",H?"items-center":"flex-col items-center",f[M]),children:[oe(!1),oe(!0)]}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{IconButton as r}from"../icon-button/IconButton.js";import{spacingValue as o}from"../../internal/grid.js";import{scrollMessages as i,useMessages as l}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{queryMatches as a,reducedMotionQuery as c}from"../../internal/media.js";import{observeResize as u}from"../../internal/observe.js";import{cx as d}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";const m={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const ScrollZone=/*@__PURE__*/n.forwardRef(function(v,b){const{orientation:w="horizontal",lines:g=1,spacing:h=2,buttons:y="auto",buttonPlacement:x="inline",mode:k="item",step:L=1,speed:E=900,snap:C=!1,drag:j=!0,wheel:M=!1,scrollbar:P=!1,variant:R="solid",size:N="md",color:T="primary",density:A="default",locale:D,label:W,previousLabel:z,nextLabel:S,className:B,style:F,children:Y,...H}=f(v,["size","density","variant","locale"]),I=l(i,D),X="horizontal"===w,$=Math.max(1,Math.round(g)),q=Math.max(1,Math.round(L)),K=n.useRef(null),_=n.useRef(null),[V,Z]=n.useState({back:!1,forward:!1}),G=n.useCallback(()=>{const e=K.current;if(!e)return;const t=X?e.clientWidth:e.clientHeight,n=X?e.scrollWidth:e.scrollHeight,r=Math.abs(X?e.scrollLeft:e.scrollTop);Z(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[X]);n.useEffect(()=>{const e=K.current,t=_.current;if(!e)return;G();const n=[u(e,G),t?u(t,G):null];return()=>{for(const e of n)e?.()}},[G]);const J=n.useCallback(()=>{const e=K.current;return e&&X&&"rtl"===getComputedStyle(e).direction?-1:1},[X]),O=n.useCallback((e,t)=>{const n=K.current;if(!n)return;const r=t?a(c)?"auto":"smooth":"auto";n.scrollBy(X?{left:e,behavior:r}:{top:e,behavior:r})},[X]),Q=n.useCallback(()=>{const e=K.current,t=_.current;if(!e||!t)return[];const n=X&&"rtl"===getComputedStyle(e).direction,r=X?n?"right":"left":"top",o=n?-1:1,i=e.getBoundingClientRect()[r],l=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-i)*o);l.includes(t)||l.push(t)}return l.sort((e,t)=>e-t)},[X]),U=n.useCallback((e,t=k)=>{const n=K.current;if(!n)return;const r=J(),o=X?n.clientWidth:n.clientHeight;if("page"===t)return void O(o*(e?1:-1)*r,!0);const i=Q(),l=i.filter(e=>e>1),s=i.filter(e=>e<-1),a=e?l[q-1]:s[s.length-q];O(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[J,X,Q,q,k,O]),ee=n.useRef(null);n.useEffect(()=>()=>ee.current?.(),[]);const te=n.useCallback((e,t)=>{if(ee.current)return;const n=J(),r=performance.now();let o=r,i=0;const l=t=>{const r=t-o;o=t,O(E*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(l)};i=requestAnimationFrame(l);const s=()=>{cancelAnimationFrame(i),ee.current=null,window.removeEventListener(t,s),window.removeEventListener("pointercancel",s),window.removeEventListener("blur",s),performance.now()-r<140&&U(e,"item")};ee.current=s,window.addEventListener(t,s),window.addEventListener("pointercancel",s),window.addEventListener("blur",s)},[U,J,O,E]),ne=n.useRef(null);function re(e){return"hold"!==k?{onClick:()=>U(e)}:{onPointerDown:t=>{0===t.button&&te(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),te(e,"keyup"))}}}n.useEffect(()=>()=>ne.current?.(),[]),n.useEffect(()=>{const e=K.current;if(!e||!M||!X)return;const t=t=>{if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,r=t.deltaY*n;if(!r)return;const o=Math.abs(e.scrollLeft);(r>0?e.scrollWidth-e.clientWidth-o>1:o>1)&&(t.preventDefault(),O(r*J(),!1))};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)},[J,X,O,M]);const oe="none"!==y&&("always"===y||V.back||V.forward),ie="inline"===x;function le(t){const n=t?V.forward:V.back;if("auto"===y&&!n&&!ie)return e("span",{});const o=X?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180",i="auto"===y&&!n,l=e(r,{variant:R,size:N,color:T,density:A,elevation:1,label:t?S??I.next:z??I.previous,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:d("flex items-center",o),children:e(s,{})}),...re(t)});return ie?e("span",{className:d("flex shrink-0 items-center justify-center",i?"invisible":""),inert:i,children:l}):l}return t("div",{ref:b,className:d("relative flex min-w-0",ie&&X?"flex-row items-stretch":"flex-col",ie?p[N]:"",B),style:{"--n-ring":`var(--neba-${T}-ring)`,...F},...H,children:[oe&&ie?le(!1):null,e("div",{ref:K,tabIndex:0,role:"group","aria-label":W??I.label,className:d("min-h-0 min-w-0 grow",X?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",C?X?"snap-x snap-mandatory":"snap-y snap-mandatory":"",P?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",j&&(V.back||V.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"),onScroll:G,onPointerDown:function(e){if(!j||"touch"===e.pointerType||0!==e.button)return;ne.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,i=t.scrollTop;let l=!1;const s=document.body.style.getPropertyValue("-webkit-user-select"),a=e=>{const s=e.clientX-n,a=e.clientY-r;if(!l){if(Math.abs(X?s:a)<4)return;l=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}X?t.scrollLeft=o-s:t.scrollTop=i-a},c=()=>{ne.current=null,t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",c),delete t.dataset.dragging,s?document.body.style.setProperty("-webkit-user-select",s):document.body.style.removeProperty("-webkit-user-select")},u=()=>{const e=l;if(c(),!e)return;const n=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",n,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",n,!0),0)};ne.current=c,t.addEventListener("pointermove",a),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",c)},children:e("div",{ref:_,className:d(C?"[&>*]:snap-start":""),style:{display:"grid",gap:o(h),gridAutoFlow:X?"column":"row",...X?{width:"max-content",gridTemplateRows:`repeat(${$}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${$}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:Y})}),oe&&ie?le(!0):null,oe&&!ie?t("div",{className:d("pointer-events-none absolute inset-0 flex justify-between",X?"items-center":"flex-col items-center",m[N]),children:[le(!1),le(!0)]}):null]})});

package/dist/components/select/Select.js

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

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type ResolvedOS } from '../../internal/keys.js';
 import type { NebaElevation, NebaStyleProps } from '../../types.js';
 /**
  * Which keyboard the shortcut is being read on.
@@ -8,7 +9,7 @@ import type { NebaElevation, NebaStyleProps } from '../../types.js';
  * 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 type ShortcutOS = 'auto' | ResolvedOS;
 export interface ShortcutProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
     /**
      * The keys, innermost punctuation and all.

package/dist/components/shortcut/Shortcut.js

@@ -1 +1 @@
-"use client";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,cx as s,paddingXClasses as m,radiusClasses as i,srOnlyClasses as c,surfaceClasses as d,transitionClasses as w}from"../../internal/styles.js";const u=n=>({symbol:n,name:n}),p={mod:{mac:{symbol:"⌘",name:"Command"},windows:u("Ctrl"),linux:u("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:u("Win"),linux:u("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:u("Ctrl"),linux:u("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:u("Alt"),linux:u("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:u("Shift"),linux:u("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:u("Enter"),linux:u("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:u("Tab"),linux:u("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:u("Esc"),linux:u("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:u("Backspace"),linux:u("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:u("Del"),linux:u("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:u("Caps Lock"),linux:u("Caps Lock")}},b={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"},f={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"}};let y=null;function x(){return y??=function(){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"}(),y}function g(){return()=>{}}function h(){return"windows"}const v={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},A={solid:[d,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[d,"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)"},k={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=/*@__PURE__*/o.forwardRef(function({variant:d="outline",size:y="md",color:C="secondary",density:j="compact",elevation:E=0,keys:S,os:B="auto",separator:N,className:D,style:L,...T},$){const F=o.useSyncExternalStore(g,x,h),z="auto"===B?F:B,O=v[y],R=function(n){return Array.isArray(n)?n.map(n=>n.trim()).filter(Boolean):n.split("+").map(n=>n.trim()).filter(Boolean)}(S),U=R.map(n=>function(n,e){const a=n.toLowerCase().replace(/[\s_-]/g,""),o=b[a]??a,t=f[o];if(t)return t;const r=p[o];return r?r[e]:u(1===n.length?n.toUpperCase():n)}(n,z)),W=void 0===N?"mac"===z?null:"+":N,_=["inline-flex shrink-0 items-center justify-center","font-mono font-medium leading-none whitespace-nowrap tabular-nums",t[O],l[O],k[O],m[j][O],i[O],A[d],w].join(" ");return n("span",{ref:$,className:s("inline-flex max-w-full items-center gap-1 align-middle",D??""),style:{...r(C,E,d),...L},...T,children:U.map((t,r)=>a(o.Fragment,{children:[r>0&&null!==W?n("span",{"aria-hidden":"true",className:"text-(--neba-muted-fg)",children:W}):null,n("kbd",{className:_,children:t.symbol===t.name?t.symbol:a(e,{children:[n("span",{"aria-hidden":"true",children:t.symbol}),n("span",{className:c,children:t.name})]})})]},r))})});
+"use client";import{jsx as n,Fragment as e,jsxs as a}from"react/jsx-runtime";import*as s from"react";import{controlHeightClasses as o,controlSlots as l,controlTextClasses as t,cx as r,paddingXClasses as m,radiusClasses as i,srOnlyClasses as c,surfaceClasses as d,transitionClasses as w}from"../../internal/styles.js";import{canonicalKey as u,readOS as b,tokenize as p}from"../../internal/keys.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const f=n=>({symbol:n,name:n}),y={mod:{mac:{symbol:"⌘",name:"Command"},windows:f("Ctrl"),linux:f("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:f("Win"),linux:f("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:f("Ctrl"),linux:f("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:f("Alt"),linux:f("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:f("Shift"),linux:f("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:f("Enter"),linux:f("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:f("Tab"),linux:f("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:f("Esc"),linux:f("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:f("Backspace"),linux:f("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:f("Del"),linux:f("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:f("Caps Lock"),linux:f("Caps Lock")}},h={arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function g(){return()=>{}}function k(){return"windows"}const v={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},C={solid:[d,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[d,"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)"},j={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=/*@__PURE__*/s.forwardRef(function(d,E){const{variant:S="outline",size:A="md",color:N="secondary",density:B="compact",elevation:D=0,keys:L,os:T="auto",separator:z,className:F,style:O,...R}=x(d,["size","density","variant"]),U=s.useSyncExternalStore(g,b,k),W="auto"===T?U:T,q=v[A],G=p(L).map(n=>function(n,e){const a=u(n),s=h[a];if(s)return s;const o=y[a];return o?o[e]:f(1===n.length?n.toUpperCase():n)}(n,W)),H=void 0===z?"mac"===W?null:"+":z,I=["inline-flex shrink-0 items-center justify-center","font-mono font-medium leading-none whitespace-nowrap tabular-nums",o[q],t[q],j[q],m[B][q],i[q],C[S],w].join(" ");return n("span",{ref:E,className:r("inline-flex max-w-full items-center gap-1 align-middle",F??""),style:{...l(N,D,S),...O},...R,children:G.map((o,l)=>a(s.Fragment,{children:[l>0&&null!==H?n("span",{"aria-hidden":"true",className:"text-(--neba-muted-fg)",children:H}):null,n("kbd",{className:I,children:o.symbol===o.name?o.symbol:a(e,{children:[n("span",{"aria-hidden":"true",children:o.symbol}),n("span",{className:c,children:o.name})]})})]},l))})});