neba 1.8.1 → 1.10.0

package/dist/components/sidebar/Sidebar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box.js";import{Drawer as s}from"../drawer/Drawer.js";import{layoutMessages as i,useMessages as a}from"../../internal/i18n.js";import{drawerSide as l,expandedOnlyClasses as d,PageLayoutContext as c,SidebarSideContext as u,useCollapsed as p}from"../../internal/page-layout.js";import{cx as m,surfaceClasses as f,surfaceSlots as b,toLength as v,transitionClasses as y}from"../../internal/styles.js";const g={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},w={solid:[f,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[f,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function x(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const Sidebar=/*@__PURE__*/r.forwardRef(function({side:f,width:h,minWidth:k=160,maxWidth:C=480,resizable:j=!1,onResize:z,onResizeEnd:E,collapseBelow:N,open:R,defaultOpen:L=!1,onOpenChange:S,sticky:P=!0,title:B,variant:D="outline",size:O="md",color:A="primary",density:M="default",elevation:W=0,divider:I=!0,padded:T=!0,label:X,locale:$,className:_,style:F,children:K,...V},q){const G=r.useContext(c),H=r.useContext(u),J=f??H??"start",Q=$??G.locale,U=a(i,Q),Y=N??(G.present?G.collapseBelow:"none"),Z=p(Y),[ee,te]=r.useState(L),re=void 0!==R,ne=re?R:G.present?G.open[J]:ee,oe=e=>{re||(G.present?G.setOpen(J,e):te(e)),S?.(e)},se=v(h)??g[O],ie=r.useRef(null),ae=r.useCallback(e=>{ie.current=e,"function"==typeof q?q(e):q&&(q.current=e)},[q]),le=r.useRef(null);r.useEffect(()=>()=>le.current?.(),[]);const de=e=>{const t=ie.current;if(!t)return e;const r=Math.min(x(C,480),Math.max(x(k,160),Math.round(e)));return t.style.setProperty("--n-sidebar-w",`${r}px`),r},ce=e("div",{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain",T?m(n[M][O],o[M][O]):""),children:K});return Z?e(s,{side:l(J),mode:"overlay",open:ne,onOpenChange:oe,title:B,size:O,color:A,density:M,locale:Q,closeLabel:U.closeSidebar,extent:void 0===h?void 0:se,"aria-label":B?void 0:X??U.sidebar,className:_,style:F,children:K}):t("aside",{ref:ae,"aria-label":X??U.sidebar,className:m("relative flex min-w-0 shrink-0 flex-col","w-(--n-sidebar-w)",w[D],I?m("start"===J?"border-e":"border-s","[border-color:var(--n-line)]"):"","content"===G.scroll?"h-full":P?m("self-start","sticky [top:var(--n-layout-header,0px)]","[height:calc(100dvh-var(--n-layout-header,0px)-var(--n-layout-footer,0px))]"):"",d[Y],y,_),style:{...b(A,W),"--n-sidebar-w":se,...F},...V,children:[ce,j?e("div",{role:"separator","aria-orientation":"vertical","aria-label":U.resizeSidebar,tabIndex:0,className:m("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===J?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)",y,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0"),onPointerDown:e=>{const t=ie.current;if(!t||0!==e.button)return;const r=e.currentTarget;r.setPointerCapture(e.pointerId),r.dataset.dragging="true";const n=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const o=e.clientX,s=t.getBoundingClientRect().width,i="rtl"===getComputedStyle(t).direction,a="start"===J===i?-1:1;let l=s;const d=e=>{l=de(s+(e.clientX-o)*a),z?.(l)},c=()=>{le.current=null,r.removeEventListener("pointermove",d),r.removeEventListener("pointerup",u),r.removeEventListener("pointercancel",u),delete r.dataset.dragging,n?document.body.style.setProperty("-webkit-user-select",n):document.body.style.removeProperty("-webkit-user-select")},u=()=>{c(),E?.(l)};le.current=c,r.addEventListener("pointermove",d),r.addEventListener("pointerup",u),r.addEventListener("pointercancel",u)},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===J===t?-1:1;(e=>{const t=ie.current;if(!t)return;const r=de(t.getBoundingClientRect().width+e);z?.(r),E?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box.js";import{Drawer as a}from"../drawer/Drawer.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{layoutMessages as l,useMessages as s}from"../../internal/i18n.js";import{drawerSide as d,expandedOnlyClasses as c,PageLayoutContext as u,SidebarSideContext as p,useCollapsed as f}from"../../internal/page-layout.js";import{cx as m,surfaceClasses as b,surfaceSlots as v,toLength as g,toPixels as h,transitionClasses as x}from"../../internal/styles.js";const y={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},w={solid:[b,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[b,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};export const Sidebar=/*@__PURE__*/r.forwardRef(function({side:b,width:j,minWidth:C=160,maxWidth:R=480,resizable:z=!1,onResize:k,onResizeEnd:S,collapseBelow:B,open:N,defaultOpen:O=!1,onOpenChange:D,sticky:M=!0,title:A,variant:E="outline",size:I="md",color:T="primary",density:W="default",elevation:L=0,divider:P=!0,padded:X=!0,label:_,locale:K,className:$,style:q,children:F,...G},H){const J=r.useContext(u),Q=r.useContext(p),U=b??Q??"start",V=K??J.locale,Y=s(l,V),Z=B??(J.present?J.collapseBelow:"none"),ee=f(Z),[te,re]=r.useState(O),ne=void 0!==N,oe=ne?N:J.present?J.open[U]:te,ae=e=>{ne||(J.present?J.setOpen(U,e):re(e)),D?.(e)},ie=g(j)??y[I],le=r.useRef(null),se=r.useCallback(e=>{le.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),de=r.useRef(null);r.useEffect(()=>()=>de.current?.(),[]);const ce=e=>{const t=le.current;if(!t)return e;const r=(e,r)=>null==e?r:"number"==typeof e?e:h(e,{percentOf:"undefined"==typeof window?0:window.innerWidth,relativeTo:t})??r,n=Math.min(r(R,480),Math.max(r(C,160),Math.round(e)));return t.style.setProperty("--n-sidebar-w",`${n}px`),n},ue=e("div",{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain",X?m(n[W][I],o[W][I]):""),children:F});return ee?e(a,{side:d(U),mode:"overlay",open:oe,onOpenChange:ae,title:A,size:I,color:T,density:W,locale:V,closeLabel:Y.closeSidebar,extent:void 0===j?void 0:ie,"aria-label":A?void 0:_??Y.sidebar,className:$,style:q,children:F}):t("aside",{ref:se,"aria-label":_??Y.sidebar,className:m("relative flex min-w-0 shrink-0 flex-col","w-(--n-sidebar-w)",w[E],P?m("start"===U?"border-e":"border-s","[border-color:var(--n-line)]"):"","content"===J.scroll?"h-full":M?m("self-start","sticky [top:var(--n-layout-header,0px)]","[height:calc(100dvh-var(--n-layout-header,0px)-var(--n-layout-footer,0px))]"):"",c[Z],x,$),style:{...v(T,L),"--n-sidebar-w":ie,...q},...G,children:[ue,z?e("div",{role:"separator","aria-orientation":"vertical","aria-label":Y.resizeSidebar,tabIndex:0,className:m("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===U?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0"),onPointerDown:e=>{const t=le.current;if(!t||0!==e.button)return;const r=e.currentTarget,n=e.clientX,o=t.getBoundingClientRect().width,a="rtl"===getComputedStyle(t).direction,l="start"===U===a?-1:1;let s=o;de.current=i({target:r,pointerId:e.pointerId,onMove:e=>{s=ce(o+(e.clientX-n)*l),k?.(s)},onEnd:()=>{de.current=null,S?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===U===t?-1:1;(e=>{const t=le.current;if(!t)return;const r=ce(t.getBoundingClientRect().width+e);k?.(r),S?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});

package/dist/components/skeleton/Skeleton.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{controlHeightClasses as n,controlSquareClasses as d,surfaceSlots as s}from"../../internal/styles.js";const o={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},a={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},m={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},t={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"},u="relative overflow-hidden bg-(--n-soft-hover)";function f(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const Skeleton=/*@__PURE__*/r.forwardRef(function({shape:r="line",lines:h=1,size:c="md",color:x="secondary",width:g,height:p,animated:b=!0,label:w,render:y,className:$,style:v,...j},k){const N=b?"neba-skeleton":"",B="circle"===r?`rounded-full ${n[c]} ${d[c]} shrink-0`:"rect"===r?`w-full ${t[c]} ${void 0===p?i[c]:""}`:`w-full ${m[c]} ${o[c]}`,z=w?{role:"status","aria-busy":!0,"aria-label":w}:{"aria-hidden":!0},A="line"===r&&h>1;return l({render:y,ref:k,props:{className:(A?["flex w-full flex-col",a[c],$??""]:[u,N,B,$??""]).filter(Boolean).join(" "),style:{...s(x,0),width:f(g),height:f(p),...v},...z,...A?{children:Array.from({length:h},(r,l)=>e("div",{className:[u,N,m[c],o[c],l===h-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...j}})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{controlHeightClasses as d,controlSquareClasses as n,cx as s,surfaceSlots as a}from"../../internal/styles.js";const o={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},m={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},i={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},t={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},u={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"},h="relative overflow-hidden bg-(--n-soft-hover)";function f(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const Skeleton=/*@__PURE__*/r.forwardRef(function({shape:r="line",lines:c=1,size:x="md",color:g="secondary",width:p,height:b,animated:w=!0,label:y,render:$,className:v,style:j,...k},N){const z=w?"neba-skeleton":"",A="circle"===r?`rounded-full ${d[x]} ${n[x]} shrink-0`:"rect"===r?`w-full ${u[x]} ${void 0===b?t[x]:""}`:`w-full ${i[x]} ${o[x]}`,B=y?{role:"status","aria-busy":!0,"aria-label":y}:{"aria-hidden":!0},R="line"===r&&c>1;return l({render:$,ref:N,props:{className:(R?["flex w-full flex-col",m[x],v??""]:[h,z,A,v??""]).filter(Boolean).join(" "),style:{...a(g,0),width:f(p),height:f(b),...j},...B,...R?{children:Array.from({length:c},(r,l)=>e("div",{className:s(h,z,i[x],o[x],l===c-1?"w-3/5":"w-full")},l))}:null,...k}})});

package/dist/components/slider/Slider.js

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

package/dist/components/spoiler/Spoiler.js

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

package/dist/components/statistic/Statistic.js

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

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

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import { Switch as BaseUISwitch } from '@base-ui/react/switch';
-import type { NebaColor, NebaSize } from '../../types.js';
+import type { NebaColor, NebaFieldSlot, NebaSize, NebaSlots } from '../../types.js';
 /** Which side of the track the label sits on. */
 export type SwitchLabelPlacement = 'start' | 'end';
 type BaseSwitchProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISwitch.Root>, 'className' | 'style' | 'render' | 'children'>;
+/**
+ * The parts a Switch draws behind its root.
+ *
+ * `control` is the track — the pill that fills when the switch is on — and
+ * `thumb` is the disc that travels across it.
+ */
+export type SwitchSlot = NebaFieldSlot | 'thumb';
 export interface SwitchProps extends BaseSwitchProps {
     /** @default 'md' */
     size?: NebaSize;
@@ -26,6 +33,11 @@ export interface SwitchProps extends BaseSwitchProps {
     labelPlacement?: SwitchLabelPlacement;
     /** Class names for the field wrapper, not for the track. */
     className?: string;
+    /**
+     * Class names for the parts behind that wrapper — the track is
+     * `classNames.control`.
+     */
+    classNames?: NebaSlots<SwitchSlot>;
     style?: React.CSSProperties;
 }
 /**

package/dist/components/switch/Switch.js

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

package/dist/components/table/Table.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type BoxProps } from '../box/Box.js';
-import type { NebaAlign } from '../../types.js';
+import type { NebaAlign, NebaSlots } from '../../types.js';
 /** Which edge the text in a column lines up against. */
 export type TableAlign = NebaAlign;
 /**
@@ -38,6 +38,20 @@ export interface TableColumn<Row> {
      */
     render?: (row: Row, index: number) => React.ReactNode;
 }
+/**
+ * The parts a Table draws behind its root.
+ *
+ * `className` is the sheet — the Box that scrolls horizontally — and everything
+ * tabular is behind it, starting with the `<table>` itself.
+ *
+ * One caveat, and it is the whole reason the note above `cellStyle` exists: a
+ * cell's padding, alignment and background are written as **inline styles**,
+ * because `.vp-doc td` and `.prose td` outrank any one-class utility. A class
+ * handed to `headCell`, `cell` or `empty` can add anything the component does
+ * not already set inline — a colour, a font, a border — but to change one of
+ * those three it has to be an important one (`p-4!`).
+ */
+export type TableSlot = 'table' | 'caption' | 'head' | 'headCell' | 'body' | 'row' | 'cell' | 'empty';
 export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' | 'render' | 'title'> {
     /** The columns, in the order they appear. */
     headers: readonly TableColumn<Row>[];
@@ -79,6 +93,11 @@ export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' |
     stickyHeader?: boolean;
     /** Makes rows activatable. Also turns on the hover treatment. */
     onRowClick?: (row: Row, index: number) => void;
+    /**
+     * Class names for the parts behind the root. `className` is the sheet the
+     * table scrolls inside; the `<table>` itself is `classNames.table`.
+     */
+    classNames?: NebaSlots<TableSlot>;
 }
 /**
  * A grid of data.
@@ -88,4 +107,4 @@ export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' |
  * might sit next to. What Table adds is the part that is genuinely tabular: the
  * columns, the rows, and the fact that the two cannot drift apart.
  */
-export declare function Table<Row>({ headers, items, getRowKey, caption, locale, empty, striped, hoverable, stickyHeader, onRowClick, size, density, className, ...boxProps }: TableProps<Row>): React.JSX.Element;
+export declare function Table<Row>({ headers, items, getRowKey, caption, locale, empty, striped, hoverable, stickyHeader, onRowClick, size, density, className, classNames, ...boxProps }: TableProps<Row>): React.JSX.Element;

package/dist/components/table/Table.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r}from"../box/Box.js";import{tableMessages as n,useMessages as o}from"../../internal/i18n.js";import{controlTextLeadingClasses as l,metaTextClasses as a,paddingXValues as i}from"../../internal/styles.js";const s={default:{xs:"0.25rem",sm:"0.375rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"}},d=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),c=["cursor-pointer [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),m={borderTop:"1px solid var(--n-line)",backgroundColor:"var(--n-row)"};export function Table({headers:p,items:u,getRowKey:h,caption:y,locale:b,empty:f,striped:x=!1,hoverable:g=!1,stickyHeader:v=!1,onRowClick:w,size:k="md",density:j="default",className:N,...$}){const B=o(n,b),C=i[j][k],A=s[j][k],_=Boolean(w),z=g||_,T={padding:`${A} ${C}`},D={...T,backgroundColor:"var(--n-panel-press)"};return e(r,{size:k,density:j,padded:!1,className:["overflow-x-auto",N??""].filter(Boolean).join(" "),...$,children:t("table",{className:`w-full text-start ${l[k]} text-(--neba-fg)`,style:{borderCollapse:"collapse"},children:[y?e("caption",{className:`${a[k]} text-(--neba-muted-fg)`,style:{...T,textAlign:"start"},children:y}):null,e("colgroup",{children:p.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:p.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--neba-muted-fg)",v?"sticky top-0 z-10 [backdrop-filter:var(--neba-blur)]":""].filter(Boolean).join(" "),style:{...D,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===u.length?e("tr",{className:d,style:m,children:e("td",{colSpan:p.length,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${C}`,textAlign:"center"},children:f??B.empty})}):u.map((t,r)=>e("tr",{className:[d,x&&r%2==1?"[--n-row:var(--n-panel-hover)]":"",z?"hover:[--n-row:var(--n-soft)]":"",_?c:""].filter(Boolean).join(" "),style:m,tabIndex:_?0:void 0,onClick:w?()=>w(t,r):void 0,onKeyDown:w?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),w(t,r)))}:void 0,children:p.map(n=>e("td",{style:{...T,textAlign:n.align??"start"},children:n.render?n.render(t,r):t[n.key]},n.key))},h?h(t,r):r))})]})})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r}from"../box/Box.js";import{tableMessages as a,useMessages as l}from"../../internal/i18n.js";import{controlTextLeadingClasses as n,cx as o,metaTextClasses as s,paddingXValues as i}from"../../internal/styles.js";const d={default:{xs:"0.25rem",sm:"0.375rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"}},c=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),m=["cursor-pointer [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),p={borderTop:"1px solid var(--n-line)",backgroundColor:"var(--n-row)"};export function Table({headers:h,items:y,getRowKey:b,caption:u,locale:x,empty:g,striped:f=!1,hoverable:v=!1,stickyHeader:w=!1,onRowClick:k,size:N="md",density:j="default",className:C,classNames:A,...$}){const _=l(a,x),z=i[j][N],T=d[j][N],B=Boolean(k),D=v||B,K={padding:`${T} ${z}`},R={...K,backgroundColor:"var(--n-panel-press)"};return e(r,{size:N,density:j,padded:!1,className:o("overflow-x-auto",C??""),...$,children:t("table",{className:o("w-full text-start",n[N],"text-(--neba-fg)",A?.table),style:{borderCollapse:"collapse"},children:[u?e("caption",{className:o(s[N],"text-(--neba-muted-fg)",A?.caption),style:{...K,textAlign:"start"},children:u}):null,e("colgroup",{children:h.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{className:A?.head,children:e("tr",{children:h.map(t=>e("th",{scope:"col",className:o("font-semibold whitespace-nowrap text-(--neba-muted-fg)",w?"sticky top-0 z-10 [backdrop-filter:var(--neba-blur)]":"",A?.headCell),style:{...R,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{className:A?.body,children:0===y.length?e("tr",{className:o(c,A?.row),style:p,children:e("td",{colSpan:h.length,className:o("text-(--neba-muted-fg)",A?.empty),style:{padding:`2rem ${z}`,textAlign:"center"},children:g??_.empty})}):y.map((t,r)=>e("tr",{className:o(c,f&&r%2==1?"[--n-row:var(--n-panel-hover)]":"",D?"hover:[--n-row:var(--n-soft)]":"",B?m:"",A?.row),style:p,tabIndex:B?0:void 0,onClick:k?()=>k(t,r):void 0,onKeyDown:k?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),k(t,r)))}:void 0,children:h.map(a=>e("td",{className:A?.cell,style:{...K,textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},b?b(t,r):r))})]})})}

package/dist/components/tabs/Tabs.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{controlHeightClasses as o,controlTextClasses as l,gapClasses as n,hasContent as r,iconClasses as s,paddingXClasses as c,radiusClasses as d,surfaceClasses as f,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const b=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),v={solid:{horizontal:`${f} inline-flex bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`,vertical:`${f} inline-flex flex-col bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`},outline:{horizontal:"flex border-b [border-color:var(--n-line)]",vertical:"flex flex-col border-e [border-color:var(--n-line)]"},text:{horizontal:"flex",vertical:"flex flex-col"}},p={solid:{horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)"},outline:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},text:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},x={solid:`${f} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:"bg-(--n-accent)",text:"bg-(--n-accent)"},m={solid:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",outline:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",text:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)"};export const Tab=/*@__PURE__*/a.forwardRef(function({value:f,startIcon:u,endIcon:v,disabled:p=!1,className:x,children:g,...w},z){const{variant:y,size:j,density:N,fullWidth:k}=a.useContext(b);return t(i.Tab,{ref:z,value:f,disabled:p,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",o[j],l[j],n[j],c[N][j],"solid"===y?d[j]:"",h,s,m[y],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)",k?"flex-1":"",x??""].filter(Boolean).join(" "),...w,children:[r(u)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:u}):null,g,r(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]})});export const TabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:o=!1,className:l,children:n,...r},s){const{size:c}=a.useContext(b);return e(i.Panel,{ref:s,value:t,keepMounted:o,className:["min-w-0 flex-1 text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",d[c],l??""].filter(Boolean).join(" "),...r,children:n})});export const Tabs=/*@__PURE__*/a.forwardRef(function({variant:o="outline",size:l="md",color:n="primary",density:r="default",value:s,defaultValue:c,onValueChange:f,orientation:h="horizontal",activateOnFocus:m=!1,loopFocus:g=!0,fullWidth:w=!1,className:z,style:y,children:j,...N},k){const C=a.useMemo(()=>({variant:o,size:l,density:r,orientation:h,fullWidth:w}),[o,l,r,h,w]),T=[],V=[];return a.Children.forEach(j,e=>{a.isValidElement(e)&&e.type===TabPanel?V.push(e):null!=e&&!1!==e&&T.push(e)}),e(b.Provider,{value:C,children:t(i.Root,{ref:k,value:s,defaultValue:c,onValueChange:e=>f?.(e),orientation:h,className:["flex min-w-0","vertical"===h?"flex-row gap-4":"flex-col gap-4",z??""].filter(Boolean).join(" "),style:{...u(n,0),...y},...N,children:[t(i.List,{activateOnFocus:m,loopFocus:g,className:["relative shrink-0",v[o][h],"solid"===o?d[l]:"",w&&"horizontal"===h?"w-full":"","horizontal"===h?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[T,e(i.Indicator,{className:["pointer-events-none",p[o][h],x[o],"solid"===o?d[l]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ")})]}),V]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{controlHeightClasses as l,controlTextClasses as n,cx as o,gapClasses as r,hasContent as s,iconClasses as c,paddingXClasses as d,radiusClasses as u,surfaceClasses as f,surfaceSlots as h,transitionClasses as b}from"../../internal/styles.js";const v=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),p={solid:{horizontal:`${f} inline-flex bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`,vertical:`${f} inline-flex flex-col bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`},outline:{horizontal:"flex border-b [border-color:var(--n-line)]",vertical:"flex flex-col border-e [border-color:var(--n-line)]"},text:{horizontal:"flex",vertical:"flex flex-col"}},x={solid:{horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)"},outline:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},text:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},m={solid:`${f} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:"bg-(--n-accent)",text:"bg-(--n-accent)"},g={solid:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",outline:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",text:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)"};export const Tab=/*@__PURE__*/a.forwardRef(function({value:f,startIcon:h,endIcon:p,disabled:x=!1,className:m,children:w,...z},y){const{variant:N,size:j,density:k,fullWidth:C}=a.useContext(v);return t(i.Tab,{ref:y,value:f,disabled:x,className:o("relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",l[j],n[j],r[j],d[k][j],"solid"===N?u[j]:"",b,c,g[N],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)",C?"flex-1":"",m??""),...z,children:[s(h)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:h}):null,w,s(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:p}):null]})});export const TabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:l=!1,className:n,children:o,...r},s){const{size:c}=a.useContext(v);return e(i.Panel,{ref:s,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",u[c],n??""].filter(Boolean).join(" "),...r,children:o})});export const Tabs=/*@__PURE__*/a.forwardRef(function({variant:l="outline",size:n="md",color:r="primary",density:s="default",value:c,defaultValue:d,onValueChange:f,orientation:b="horizontal",activateOnFocus:g=!1,loopFocus:w=!0,fullWidth:z=!1,className:y,style:N,children:j,...k},C){const T=a.useMemo(()=>({variant:l,size:n,density:s,orientation:b,fullWidth:z}),[l,n,s,b,z]),V=[],F=[];return a.Children.forEach(j,e=>{a.isValidElement(e)&&e.type===TabPanel?F.push(e):null!=e&&!1!==e&&V.push(e)}),e(v.Provider,{value:T,children:t(i.Root,{ref:C,value:c,defaultValue:d,onValueChange:e=>f?.(e),orientation:b,className:o("flex min-w-0","vertical"===b?"flex-row gap-4":"flex-col gap-4",y??""),style:{...h(r,0),...N},...k,children:[t(i.List,{activateOnFocus:g,loopFocus:w,className:o("relative shrink-0",p[l][b],"solid"===l?u[n]:"",z&&"horizontal"===b?"w-full":"","horizontal"===b?"overflow-x-auto overflow-y-hidden":""),children:[V,e(i.Indicator,{className:["pointer-events-none",x[l][b],m[l],"solid"===l?u[n]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ")})]}),F]})})});

package/dist/components/text-field/TextField.d.ts

@@ -1,7 +1,16 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
 /** How the multiline control may be resized by the user. Ignored when single line. */
 export type TextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
+/**
+ * The parts a TextField draws behind its root.
+ *
+ * `shell` is the framed box the control sits in — the thing wearing the border,
+ * the fill and the focus ring. It is a part rather than an implementation
+ * detail because it, and not the `<input>`, is what a caller means by "the
+ * field" when they want to change its shape.
+ */
+export type TextFieldSlot = NebaFieldSlot | 'shell';
 /**
  * Native `<input>` attributes, minus the three that collide with the shared
  * vocabulary: `color` and `size` are Neba props here, and `onChange` is widened
@@ -57,6 +66,12 @@ export interface TextFieldProps extends NebaStyleProps, NativeControlProps {
     loading?: boolean;
     /** Stretches to the width of the container. */
     fullWidth?: boolean;
+    /**
+     * Class names for the parts behind the root. `className` is the root — the
+     * column that holds the label, the shell and the two lines under it — so the
+     * control itself is reached through `classNames.control`.
+     */
+    classNames?: NebaSlots<TextFieldSlot>;
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/components/text-field/TextField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Field as r}from"@base-ui/react/field";import{Input as i}from"@base-ui/react/input";import{controlHeightClasses as l,controlTextLeadingClasses as a,disabledClasses as s,fieldReadOnlyClasses as o,fieldRestClasses as c,focusWithinRingClasses as d,gapClasses as m,iconClasses as u,metaTextClasses as f,paddingXClasses as p,radiusClasses as x,stackGapClasses as h,surfaceSlots as g,transitionClasses as b}from"../../internal/styles.js";const y={xs:`${m.xs} ${x.xs} ${a.xs}`,sm:`${m.sm} ${x.sm} ${a.sm}`,md:`${m.md} ${x.md} ${a.md}`,lg:`${m.lg} ${x.lg} ${a.lg}`,xl:`${m.xl} ${x.xl} ${a.xl}`},$={xs:"min-h-5.5 py-[3px]",sm:"min-h-6.5 py-[4px]",md:"min-h-8 py-[5px]",lg:"min-h-10 py-[8px]",xl:"min-h-12 py-[10px]"},v={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},w=["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",b,"focus-within:[transition-duration:0ms]",d,u].join(" "),j=c,N=o;function k(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"animate-spin",children:[e("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2"}),e("path",{d:"M14.5 8A6.5 6.5 0 0 0 8 1.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}export const TextField=/*@__PURE__*/n.forwardRef(function({variant:a="outline",size:o="md",color:c="primary",density:d="default",elevation:m=0,multiline:u=!1,rows:x=3,resize:b="vertical",label:z,description:B,error:C,invalid:D,startIcon:O,endIcon:R,loading:W=!1,fullWidth:I=!1,readOnly:L=!1,disabled:T=!1,type:A="text",className:E,style:F,...M},P){const q=null!=C&&!1!==C&&""!==C,G=D??q,H=G?"danger":c,J=n.useRef(null),K=n.useCallback(e=>{J.current=e,"function"==typeof P?P(e):P&&(P.current=e)},[P]),Q=[w,y[o],u?`${$[o]} items-start`:`${l[o]} items-center`,p[d][o],T?s[a]:L?N[a]:j[a]].filter(Boolean).join(" "),S=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",u?`block ${v[b]}`:"self-stretch"].join(" "),U="inline-flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)";return t(r.Root,{disabled:T,invalid:G,className:["flex-col align-top",h[o],I?"flex w-full":"inline-flex",E??""].filter(Boolean).join(" "),style:{...g(H,m),...F},children:[z?e(r.Label,{className:[f[o],"font-medium",T?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:z}):null,t("span",{className:Q,onPointerDown:e=>{e.target!==e.currentTarget||T||(e.preventDefault(),J.current?.focus())},children:[O?e("span",{className:U,children:O}):null,e(i,{ref:K,className:S,disabled:T,readOnly:L,"aria-busy":W||void 0,"data-loading":W||void 0,...u?{render:e("textarea",{rows:x})}:{type:A},...M}),W?e("span",{className:U,children:e(k,{})}):R?e("span",{className:U,children:R}):null]}),B?e(r.Description,{className:[f[o],"text-(--neba-muted-fg)"].join(" "),children:B}):null,q?e(r.Error,{match:!0,className:[f[o],"text-(--n-accent)"].join(" "),children:C}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Field as r}from"@base-ui/react/field";import{Input as l}from"@base-ui/react/input";import{controlHeightClasses as i,controlTextLeadingClasses as a,cx as s,disabledClasses as o,fieldReadOnlyClasses as c,fieldRestClasses as d,focusWithinRingClasses as m,gapClasses as u,iconClasses as p,metaTextClasses as x,paddingXClasses as f,radiusClasses as h,stackGapClasses as b,surfaceSlots as g,transitionClasses as y}from"../../internal/styles.js";const $={xs:`${u.xs} ${h.xs} ${a.xs}`,sm:`${u.sm} ${h.sm} ${a.sm}`,md:`${u.md} ${h.md} ${a.md}`,lg:`${u.lg} ${h.lg} ${a.lg}`,xl:`${u.xl} ${h.xl} ${a.xl}`},N={xs:"min-h-5.5 py-[3px]",sm:"min-h-6.5 py-[4px]",md:"min-h-8 py-[5px]",lg:"min-h-10 py-[8px]",xl:"min-h-12 py-[10px]"},v={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},w=["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",y,"focus-within:[transition-duration:0ms]",m,p].join(" "),k=d,z=c;function j(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"animate-spin",children:[e("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2"}),e("path",{d:"M14.5 8A6.5 6.5 0 0 0 8 1.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}export const TextField=/*@__PURE__*/n.forwardRef(function({variant:a="outline",size:c="md",color:d="primary",density:m="default",elevation:u=0,multiline:p=!1,rows:h=3,resize:y="vertical",label:C,description:D,error:O,invalid:R,startIcon:W,endIcon:I,loading:L=!1,fullWidth:T=!1,classNames:A,readOnly:B=!1,disabled:E=!1,type:F="text",className:M,style:P,...q},G){const H=null!=O&&!1!==O&&""!==O,J=R??H,K=J?"danger":d,Q=n.useRef(null),S=n.useCallback(e=>{Q.current=e,"function"==typeof G?G(e):G&&(G.current=e)},[G]),U=s(w,$[c],p?`${N[c]} items-start`:`${i[c]} items-center`,f[m][c],E?o[a]:B?z[a]:k[a],A?.shell),V=s("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",p?`block ${v[y]}`:"self-stretch",A?.control),X="inline-flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)";return t(r.Root,{disabled:E,invalid:J,className:s("flex-col align-top",b[c],T?"flex w-full":"inline-flex",M??""),style:{...g(K,u),...P},children:[C?e(r.Label,{className:s(x[c],"font-medium",E?"text-(--neba-disabled-fg)":"text-(--neba-fg)",A?.label),children:C}):null,t("span",{className:U,onPointerDown:e=>{e.target!==e.currentTarget||E||(e.preventDefault(),Q.current?.focus())},children:[W?e("span",{className:X,children:W}):null,e(l,{ref:S,className:V,disabled:E,readOnly:B,"aria-busy":L||void 0,"data-loading":L||void 0,...p?{render:e("textarea",{rows:h})}:{type:F},...q}),L?e("span",{className:X,children:e(j,{})}):I?e("span",{className:X,children:I}):null]}),D?e(r.Description,{className:s(x[c],"text-(--neba-muted-fg)",A?.description),children:D}):null,e(r.Error,H?{match:!0,className:s(x[c],"text-(--n-accent)",A?.error),children:O}:{className:s(x[c],"text-(--n-accent)",A?.error)})]})});

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

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

package/dist/components/toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaAlign, NebaColor, NebaStyleProps, NebaVariant } from '../../types.js';
+import type { NebaAlign, NebaColor, NebaSlots, NebaStyleProps, NebaVariant } from '../../types.js';
 /**
  * Where the stack sits.
  *
@@ -50,6 +50,16 @@ export interface ToastOptions extends ToastData {
     /** Called once it has finished animating out and left the DOM. */
     onRemove?: () => void;
 }
+/**
+ * The parts the toast stack draws.
+ *
+ * There is no `className` on the provider and there is deliberately no `root`
+ * slot: a ToastProvider renders no element of its own — it wraps the app and
+ * puts a portalled stack on the page — so there is nothing for a root class
+ * name to land on. `viewport` is the strip the toasts are stacked in and
+ * `toast` is one of them.
+ */
+export type ToastSlot = 'viewport' | 'toast' | 'title' | 'description' | 'action' | 'close';
 export interface ToastProviderProps extends Pick<NebaStyleProps, 'variant' | 'size' | 'density'> {
     /** The default colour family. A single toast overrides it in `add`. */
     color?: NebaColor;
@@ -79,6 +89,11 @@ export interface ToastProviderProps extends Pick<NebaStyleProps, 'variant' | 'si
     locale?: string;
     /** Accessible name of every toast's × button. Defaults to the `locale`'s word. */
     closeLabel?: string;
+    /**
+     * Class names for the parts of the stack. There is no `className` here — a
+     * provider renders no element of its own to put one on.
+     */
+    classNames?: NebaSlots<ToastSlot>;
     children?: React.ReactNode;
 }
 /**
@@ -121,4 +136,4 @@ export declare function useToast(): {
  * limit, the swipe, the F6 focus hotkey, and the live region that makes a
  * message that appeared out of nowhere reach a screen reader at all.
  */
-export declare function ToastProvider({ variant, size, color, density, position, timeout, limit, width, locale, closeLabel, children }: ToastProviderProps): React.JSX.Element;
+export declare function ToastProvider({ variant, size, color, density, position, timeout, limit, width, locale, closeLabel, classNames, children }: ToastProviderProps): React.JSX.Element;

package/dist/components/toast/Toast.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as i}from"@base-ui/react/toast";import{boxPaddingClasses as n}from"../box/Box.js";import{actionMessages as s,useMessages as a}from"../../internal/i18n.js";import{CloseIcon as r,severityIcon as l}from"../../internal/icons.js";import{controlSlots as c,focusRingClasses as d,hasContent as m,iconClasses as p,metaTextClasses as u,radiusClasses as f,sheetBodyClasses as b,sheetHeaderGapClasses as x,sheetSectionGapClasses as v,sheetTitleClasses as h,surfaceClasses as y}from"../../internal/styles.js";const g={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 items-start flex-col-reverse","bottom-center":"bottom-0 items-center flex-col-reverse","bottom-end":"bottom-0 items-end flex-col-reverse"},w={solid:[y,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]"].join(" "),outline:[y,"border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" "),text:[y,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" ")},j={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"};function N(e){const{color:t,variant:o,icon:i,actionLabel:n,onAction:s,...a}=e;return{...a,data:{color:t,variant:o,icon:i},actionProps:void 0===n?void 0:{children:n,onClick:s}}}export function useToast(){const e=i.useToastManager();return o.useMemo(()=>({add:t=>e.add(N(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,N(o)),promise:(t,o)=>e.promise(t,{loading:N(o.loading),success:e=>N("function"==typeof o.success?o.success(e):o.success),error:e=>N("function"==typeof o.error?o.error(e):o.error)}),toasts:e.toasts}),[e])}function _({toast:o,variant:s,color:a,size:y,density:g,closeLabel:N,swipeDirection:_}){const T=o.data?.variant??s??"outline",z=o.data?.color??a,$=void 0===o.data?.icon?l(z):o.data.icon,k=j[T],D=m(o.title);return t(i.Root,{toast:o,swipeDirection:_,className:["pointer-events-auto flex w-full items-start",n[g??"default"][y],f[y],v[y],b[y],w[T],p,"[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",d,"[outline:none]"].filter(Boolean).join(" "),style:c(z,3,T),children:[m($)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${k}`,children:$}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${x[y]}`,children:[e(i.Title,{className:`neba-title font-semibold ${h[y]} ${k}`}),e(i.Description,{className:D?""+("solid"===T?"":"text-(--neba-muted-fg)"):""})]}),e(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",k||"text-(--n-on-solid)","hover:underline","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",u[y]].join(" ")}),e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(i.Close,{"aria-label":N,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(r,{})})})]})}function T(t){const{toasts:o}=i.useToastManager(),{position:n,width:s,...a}=t,r=[n.startsWith("top")?"up":"down","left","right"];return e(i.Portal,{children:e(i.Viewport,{className:["neba-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4",g[n]].join(" "),children:o.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof s?`${s}px`:s},children:e(_,{toast:t,swipeDirection:r,...a})},t.id))})})}export function ToastProvider({variant:o="outline",size:n="md",color:r="primary",density:l="default",position:c="bottom-end",timeout:d=5e3,limit:m=3,width:p=380,locale:u,closeLabel:f,children:b}){const x=a(s,u);return t(i.Provider,{timeout:d,limit:m,children:[b,e(T,{position:c,variant:o,size:n,color:r,density:l,width:p,closeLabel:f??x.close})]})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{boxPaddingClasses as i}from"../box/Box.js";import{actionMessages as n,useMessages as a}from"../../internal/i18n.js";import{CloseIcon as r,severityIcon as l}from"../../internal/icons.js";import{controlSlots as c,cx as d,focusRingClasses as m,hasContent as p,iconClasses as u,metaTextClasses as f,radiusClasses as b,sheetBodyClasses as v,sheetHeaderGapClasses as x,sheetSectionGapClasses as h,sheetTitleClasses as y,surfaceClasses as g}from"../../internal/styles.js";const w={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 items-start flex-col-reverse","bottom-center":"bottom-0 items-center flex-col-reverse","bottom-end":"bottom-0 items-end flex-col-reverse"},N={solid:[g,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]"].join(" "),outline:[g,"border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" "),text:[g,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" ")},j={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"};function _(e){const{color:t,variant:o,icon:s,actionLabel:i,onAction:n,...a}=e;return{...a,data:{color:t,variant:o,icon:s},actionProps:void 0===i?void 0:{children:i,onClick:n}}}export function useToast(){const e=s.useToastManager();return o.useMemo(()=>({add:t=>e.add(_(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,_(o)),promise:(t,o)=>e.promise(t,{loading:_(o.loading),success:e=>_("function"==typeof o.success?o.success(e):o.success),error:e=>_("function"==typeof o.error?o.error(e):o.error)}),toasts:e.toasts}),[e])}function T({toast:o,variant:n,color:a,size:g,density:w,closeLabel:_,swipeDirection:T,classNames:z}){const k=o.data?.variant??n??"outline",D=o.data?.color??a,L=void 0===o.data?.icon?l(D):o.data.icon,M=j[k],P=p(o.title);return t(s.Root,{toast:o,swipeDirection:T,className:d("pointer-events-auto flex w-full items-start",i[w??"default"][g],b[g],h[g],v[g],N[k],u,"[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",m,"[outline:none]",z?.toast),style:c(D,3,k),children:[p(L)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${M}`,children:L}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${x[g]}`,children:[e(s.Title,{className:d("neba-title font-semibold",y[g],M,z?.title)}),e(s.Description,{className:d(P&&"solid"!==k?"text-(--neba-muted-fg)":"",z?.description)})]}),e(s.Action,{className:d("flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",M||"text-(--n-on-solid)","hover:underline","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",f[g],z?.action)}),e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(s.Close,{"aria-label":_,className:d("inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",z?.close),children:e(r,{})})})]})}function z(t){const{toasts:i}=s.useToastManager(),{position:n,width:a,classNames:r,...l}=t,c=o.useMemo(()=>[n.startsWith("top")?"up":"down","left","right"],[n]);return e(s.Portal,{children:e(s.Viewport,{className:d("neba-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4",w[n],r?.viewport),children:i.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof a?`${a}px`:a},children:e(T,{toast:t,swipeDirection:c,classNames:r,...l})},t.id))})})}export function ToastProvider({variant:o="outline",size:i="md",color:r="primary",density:l="default",position:c="bottom-end",timeout:d=5e3,limit:m=3,width:p=380,locale:u,closeLabel:f,classNames:b,children:v}){const x=a(n,u);return t(s.Provider,{timeout:d,limit:m,children:[v,e(z,{position:c,variant:o,size:i,color:r,density:l,width:p,closeLabel:f??x.close,classNames:b})]})}

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps, NebaVariant } from '../../types.js';
+export interface ToggleProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color' | 'value'> {
+    /**
+     * How the toggle looks while it is **off**. On is always the colour family
+     * asserting itself, whichever weight was asked for.
+     *
+     * - `solid` — a filled neutral plate that fills with the accent when it goes
+     *   on. The loudest, for a toggle a screen is steered by.
+     * - `outline` — a hairline panel. The default.
+     * - `text` — nothing at all until it is hovered or on. What a toolbar wants.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** Whether it is on. Use with `onPressedChange` for a controlled toggle. */
+    pressed?: boolean;
+    /** Whether it starts on, for an uncontrolled one. @default false */
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Identifies the toggle inside a [ToggleGroup](./toggle-group). */
+    value?: string;
+    /**
+     * Drop shadow depth. `0` (the default) is flat — the acrylic edge is what
+     * separates the toggle from the page.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** Content placed before the label. Sized in `em`, so it tracks the label. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the label. */
+    endIcon?: React.ReactNode;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    /**
+     * The label. Left out, the toggle goes square around whatever icon it was
+     * given — which is what a toolbar toggle is. An icon-only toggle still needs
+     * an `aria-label`.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A button that stays down.
+ *
+ * The difference from a [Switch](./switch) is what the press *is*: a switch
+ * changes a setting and the change is the point, a toggle changes the state of
+ * the thing beside it — bold on the selected words, the grid on the canvas, the
+ * filter on the list. The difference from a [Checkbox](./checkbox) is that this
+ * one is a control rather than an answer, so it never goes in a form.
+ *
+ * Base UI's Toggle owns `aria-pressed` and the controlled/uncontrolled pair.
+ * What is left here is the surface, and the rule that off is neutral.
+ */
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/toggle/Toggle.js

@@ -0,0 +1 @@
+"use client";import{jsxs as e}from"react/jsx-runtime";import*as n from"react";import{Toggle as t}from"@base-ui/react/toggle";import{ButtonGroupContext as o}from"../../internal/button-group.js";import{controlHeightClasses as r,controlSlots as s,controlSquareClasses as a,controlTextClasses as l,cx as i,disabledClasses as v,focusRingClasses as d,gapClasses as g,iconClasses as b,paddingXClasses as p,pressTransitionClasses as x,radiusClasses as c,surfaceClasses as f,transitionClasses as m}from"../../internal/styles.js";const h={xs:`${r.xs} ${g.xs} ${c.xs} ${l.xs}`,sm:`${r.sm} ${g.sm} ${c.sm} ${l.sm}`,md:`${r.md} ${g.md} ${c.md} ${l.md}`,lg:`${r.lg} ${g.lg} ${c.lg} ${l.lg}`,xl:`${r.xl} ${g.xl} ${c.xl} ${l.xl}`},u={xs:`${a.xs} px-0`,sm:`${a.sm} px-0`,md:`${a.md} px-0`,lg:`${a.lg} px-0`,xl:`${a.xl} px-0`},$=["relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap align-middle font-medium leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,x,d,b].join(" "),j={solid:[f,"text-(--neba-muted-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]","hover:bg-(--n-panel-press) hover:text-(--neba-fg)","active:bg-(--n-panel-press)"].join(" "),outline:[f,"border text-(--neba-muted-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]","hover:bg-(--n-panel-hover) hover:text-(--neba-fg) hover:[border-color:var(--n-line-hover)]","active:bg-(--n-panel-press)"].join(" "),text:["text-(--neba-muted-fg) bg-transparent","hover:bg-(--n-soft) hover:text-(--neba-fg)","active:bg-(--n-soft-hover)"].join(" ")},y={solid:[f,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]","hover:bg-(--n-fill-hover)","active:bg-(--n-fill-active)"].join(" "),outline:[f,"border text-(--n-accent) bg-(--n-soft)","[border-color:var(--n-line-hover)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]","hover:bg-(--n-soft-hover)","active:bg-(--n-soft-press)"].join(" "),text:["text-(--n-accent) bg-(--n-soft)","hover:bg-(--n-soft-hover)","active:bg-(--n-soft-press)"].join(" ")};export const Toggle=/*@__PURE__*/n.forwardRef(function({variant:r,size:a,color:l,density:d,elevation:g,pressed:b,defaultPressed:x,onPressedChange:c,value:f,startIcon:m,endIcon:w,fullWidth:P=!1,disabled:C,className:T,style:k,children:z,onPointerMove:E,...I},M){const N=n.useContext(o),R=r??N?.variant??"outline",W=a??N?.size??"md",X=l??N?.color??"primary",Y=d??N?.density??"default",q=g??N?.elevation??0,A=C??N?.disabled??!1,B=null==z||!1===z;return e(t,{ref:M,value:f,pressed:b,defaultPressed:x,onPressedChange:e=>c?.(e),disabled:A,className:e=>i($,h[W],B?u[W]:p[Y][W],A?v[R]:e.pressed?y[R]:j[R],A?"":"neba-glow",P?"w-full":"",T??""),style:{...s(X,q,R),...k},onPointerMove:e=>{if(!A){const n=e.currentTarget;n.style.setProperty("--n-mx",`${e.nativeEvent.offsetX}px`),n.style.setProperty("--n-my",`${e.nativeEvent.offsetY}px`)}E?.(e)},...I,children:[m,z,w]})});

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

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

package/dist/components/toggle/index.js

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

package/dist/components/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import type { NebaElevation, NebaOrientation, NebaStyleProps, NebaVariant } from '../../types.js';
+export interface ToggleGroupProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** Passed to every toggle in the set. @default 'outline' */
+    variant?: NebaVariant;
+    /**
+     * Which toggles are on, by their `value`. An array in both the single and the
+     * multiple case — Base UI's own shape, and the one that does not change type
+     * when `multiple` is turned on.
+     */
+    value?: readonly string[];
+    /** Which start on, for an uncontrolled set. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Whether more than one can be on at a time. Off, turning one on turns the
+     * last one off — which is a one-of-a-set, and worth a second thought: if the
+     * choice is a *value* rather than a state, that is a
+     * [SegmentedButton](./segmented-button) or a [RadioGroup](./radio-group).
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Which way the toggles run.
+     * @default 'horizontal'
+     */
+    orientation?: NebaOrientation;
+    /** Drop shadow depth, passed to every toggle in the set. @default 0 */
+    elevation?: NebaElevation;
+    /** Disables every toggle in the set at once. */
+    disabled?: boolean;
+    /** Whether the arrow keys wrap around at the ends. @default true */
+    loopFocus?: boolean;
+    /** Stretches to the container and divides the width evenly between toggles. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A set of toggles that share one state.
+ *
+ * Two things are happening, and only one of them is visual. The corners facing a
+ * neighbour are squared off — that is the look. The other half is that the set
+ * owns the value: the toggles report into one array, `multiple` decides whether
+ * more than one of them can be on, and `variant`, `size`, `color`, `density`,
+ * `elevation` and `disabled` are set once here rather than on every toggle.
+ *
+ * Base UI owns the roving tab index — one tab stop for the whole set, arrow keys
+ * between the members — which is what makes a toolbar of eight toggles two key
+ * presses deep instead of eight.
+ */
+export declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toggle-group/ToggleGroup.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{ToggleGroup as l}from"@base-ui/react/toggle-group";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{cx as t}from"../../internal/styles.js";const n={horizontal:"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none",vertical:"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"},r={horizontal:"[&>*:not(:first-child)]:-ms-px",vertical:"[&>*:not(:first-child)]:-mt-px"},a=["inline-flex align-middle","[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10","[&>*]:shrink-0"].join(" ");export const ToggleGroup=/*@__PURE__*/o.forwardRef(function({variant:s,size:u,color:d,density:c,elevation:f,value:m,defaultValue:h,onValueChange:p,multiple:v=!1,orientation:g="horizontal",disabled:x,loopFocus:b=!0,fullWidth:z=!1,className:j,children:V,...w},y){const C=o.useMemo(()=>({variant:s,size:u,color:d,density:c,elevation:f,disabled:x}),[s,u,d,c,f,x]);return e(i.Provider,{value:C,children:e(l,{ref:y,value:m,defaultValue:h,onValueChange:e=>p?.(e),multiple:v,orientation:g,disabled:x,loopFocus:b,className:t(a,"vertical"===g?"flex-col":"flex-row",n[g],"outline"===(s??"outline")?r[g]:"",z?"flex w-full [&>*]:flex-1":"",j??""),...w,children:V})})});

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

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

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

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

package/dist/components/toolbar/Toolbar.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{useRender as n}from"@base-ui/react/use-render";import{boxPaddingXClasses as i,boxPaddingYClasses as s}from"../box/Box.js";import{hasContent as a,radiusClasses as l,sheetSectionGapClasses as c,surfaceClasses as d,surfaceSlots as m,transitionClasses as b}from"../../internal/styles.js";const p={solid:[d,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[d,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},f={static:{top:"",bottom:""},sticky:{top:"sticky top-0 z-20",bottom:"sticky bottom-0 z-20"},fixed:{top:"fixed inset-x-0 top-0 z-30",bottom:"fixed inset-x-0 bottom-0 z-30"}},x={top:"border-b [border-color:var(--n-line)]",bottom:"border-t [border-color:var(--n-line)]"};export const Toolbar=/*@__PURE__*/o.forwardRef(function({variant:o="outline",size:d="md",color:v="primary",density:u="default",elevation:g=0,position:h="static",side:j="top",divider:w=!1,start:y,end:k,render:z,className:N,style:B,children:F,...R},T){const q=["flex w-full min-w-0 items-center",i[u][d],s[u][d],c[d],"static"===h?l[d]:"",p[o],w?x[j]:"",f[h][j],b,N??""].filter(Boolean).join(" ");return n({render:z,ref:T,props:{className:q,style:{...m(v,g),...B},children:r(t,{children:[a(y)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:y}):null,e("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:F}),a(k)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:k}):null]}),...R}})});
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{useRender as n}from"@base-ui/react/use-render";import{boxPaddingXClasses as i,boxPaddingYClasses as s}from"../box/Box.js";import{cx as a,hasContent as l,radiusClasses as c,sheetSectionGapClasses as d,surfaceClasses as m,surfaceSlots as b,transitionClasses as p}from"../../internal/styles.js";const f={solid:[m,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[m,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},x={static:{top:"",bottom:""},sticky:{top:"sticky top-0 z-20",bottom:"sticky bottom-0 z-20"},fixed:{top:"fixed inset-x-0 top-0 z-30",bottom:"fixed inset-x-0 bottom-0 z-30"}},v={top:"border-b [border-color:var(--n-line)]",bottom:"border-t [border-color:var(--n-line)]"};export const Toolbar=/*@__PURE__*/o.forwardRef(function({variant:o="outline",size:m="md",color:u="primary",density:g="default",elevation:h=0,position:w="static",side:y="top",divider:j=!1,start:k,end:z,render:N,className:B,style:F,children:R,...T},q){const A=a("flex w-full min-w-0 items-center",i[g][m],s[g][m],d[m],"static"===w?c[m]:"",f[o],j?v[y]:"",x[w][y],p,B??"");return n({render:N,ref:q,props:{className:A,style:{...b(u,h),...F},children:r(t,{children:[l(k)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:k}):null,e("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:R}),l(z)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:z}):null]}),...T}})});

package/dist/components/tooltip/Tooltip.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tooltip as o}from"@base-ui/react/tooltip";import{controlSlots as i,metaTextClasses as s,paddingXClasses as n,radiusClasses as l,surfaceClasses as r}from"../../internal/styles.js";export const TooltipProvider=o.Provider;const d=[r,"max-w-64 text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[instant]:[transition-duration:0ms]"].join(" "),p={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},c={xs:6,sm:7,md:8,lg:9,xl:10};export function Tooltip({content:r,children:m,size:h="sm",color:y="secondary",density:f="default",side:u="top",align:x="center",sideOffset:b=6,delay:g,closeDelay:v,arrow:j=!0,open:w,defaultOpen:O,onOpenChange:N,disabled:P=!1,className:T,style:z,...B}){const C=c[h],D=a.useId(),[_,k]=a.useState(O??!1),A=w??_;return t(o.Root,{open:w,defaultOpen:O,onOpenChange:e=>{k(e),N?.(e)},children:[e(o.Trigger,{render:m,delay:g,closeDelay:v,disabled:P,"aria-describedby":A?D:void 0}),e(o.Portal,{children:e(o.Positioner,{className:"neba-portal z-50 [outline:none]",side:u,align:x,sideOffset:b,children:t(o.Popup,{id:D,role:"tooltip",className:[d,l[h],n[f][h],p[h],s[h],T??""].filter(Boolean).join(" "),style:{...i(y,3,"solid"),...z},...B,children:[j?e(o.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:e("svg",{width:C,height:C/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--n-fill)"})})}):null,r]})})})]})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tooltip as o}from"@base-ui/react/tooltip";import{controlSlots as i,cx as s,metaTextClasses as n,paddingXClasses as l,radiusClasses as r,surfaceClasses as d}from"../../internal/styles.js";export const TooltipProvider=o.Provider;const p=[d,"max-w-64 text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[instant]:[transition-duration:0ms]"].join(" "),c={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},m={xs:6,sm:7,md:8,lg:9,xl:10};export function Tooltip({content:d,children:h,size:y="sm",color:f="secondary",density:u="default",side:x="top",align:b="center",sideOffset:g=6,delay:v,closeDelay:w,arrow:j=!0,open:O,defaultOpen:N,onOpenChange:P,disabled:T=!1,className:z,style:C,...D}){const _=m[y],k=a.useId(),[A,B]=a.useState(N??!1),I=O??A;return t(o.Root,{open:O,defaultOpen:N,onOpenChange:e=>{void 0===O&&B(e),P?.(e)},children:[e(o.Trigger,{render:h,delay:v,closeDelay:w,disabled:T,"aria-describedby":I?k:void 0}),e(o.Portal,{children:e(o.Positioner,{className:"neba-portal z-50 [outline:none]",side:x,align:b,sideOffset:g,children:t(o.Popup,{id:k,role:"tooltip",className:s(p,r[y],l[u][y],c[y],n[y],z??""),style:{...i(f,3,"solid"),...C},...D,children:[j?e(o.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:e("svg",{width:_,height:_/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--n-fill)"})})}):null,d]})})})]})}