neba 1.16.1 → 1.16.2

package/dist/components/color-picker/ColorPicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ColorFormat } from '../../internal/color.js';
-import type { NebaElevation, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaLabelPlacement, NebaStyleProps } from '../../types.js';
 /** The names for the parts of the picker that have no text on them. */
 export interface ColorPickerLabels {
     /** The saturation/brightness square. */
@@ -50,8 +50,16 @@ export interface ColorPickerProps extends NebaStyleProps, Omit<React.ComponentPr
      * @default true
      */
     editable?: boolean;
-    /** Label above the control. */
+    /** The control's name. */
     label?: React.ReactNode;
+    /**
+     * Where the label is drawn: above the trigger, or in a notch cut into its
+     * top edge. The swatch at the trigger's start is where a `float` label would
+     * rest, so `float` keeps it in the notch as well. Ignored with `inline`,
+     * which has no trigger to put a notch in.
+     * @default 'top'
+     */
+    labelPlacement?: NebaLabelPlacement;
     /** Helper text below it. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the control invalid. */

package/dist/components/color-picker/ColorPicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{PickerShell as l}from"../../internal/picker.js";import{CheckIcon as n}from"../../internal/icons.js";import{colorMessages as o,useMessages as t}from"../../internal/i18n.js";import{checkerBackground as s,clamp as i,cssColor as d,defaultSwatches as h,formatColor as c,parseColor as u,readableInk as f}from"../../internal/color.js";import{controlTextClasses as p,cx as b,focusRingClasses as m,metaTextClasses as g,radiusClasses as v,stackGapClasses as x,surfaceSlots as y,transitionClasses as w}from"../../internal/styles.js";import{useStyleDefaults as C}from"../../internal/defaults.js";const k={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},N={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},_={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},j={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},I={xs:10,sm:12,md:14,lg:16,xl:18},z=["relative overflow-hidden border","[border-color:var(--neba-border)]","[box-shadow:var(--neba-plate-glass)]"].join(" "),P=["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function T(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:i((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:i((e.clientY-a.top)/a.height,0,1)}}function A(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:o,text:t,onTextChange:h,withAlpha:p,swatches:x,editable:y,size:C,inert:D,disabled:M,labels:O}){const L=I[C],V=-L/2,$=d({h:r.h,s:100,v:100}),B=d(r),S=e=>({onPointerDown:a=>{D||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!D&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),q=(e,a,r,l)=>({role:"slider",tabIndex:D?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":D||void 0,onKeyDown:e=>{const a=A(e);!D&&a&&0!==a.x&&(e.preventDefault(),l(a.x))}});return a("div",{className:b("flex flex-col",k[C],j[C]),children:[e("div",{...S(e=>{const{x:a,y:n}=T(e);o({hsv:{h:r.h,s:100*a,v:100*(1-n)},alpha:l})}),role:"slider",tabIndex:D?-1:0,"aria-label":O.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":D||void 0,onKeyDown:e=>{const a=A(e);!D&&a&&(e.preventDefault(),o({hsv:{h:r.h,s:i(r.s+a.x,0,100),v:i(r.v+a.y,0,100)},alpha:l}))},className:b(z,N[C],v[C],m,D?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:$,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:P,style:{width:L,height:L,left:`${r.s}%`,top:100-r.v+"%",marginLeft:V,marginTop:V,backgroundColor:B}})}),e("div",{...S(e=>o({hsv:{...r,h:360*T(e).x},alpha:l})),...q(O.hue,r.h,360,e=>o({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l})),className:b(z,_[C],"rounded-full",m,D?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:P,style:{width:L,height:L,left:r.h/360*100+"%",top:"50%",marginLeft:V,marginTop:V,backgroundColor:$}})}),p?a("div",{...S(e=>o({hsv:r,alpha:T(e).x})),...q(O.alpha,100*l,100,e=>o({hsv:r,alpha:i(l+e/100,0,1)})),className:b(z,_[C],"rounded-full",m,D?"cursor-default":"cursor-pointer touch-none"),style:s,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${d(r,0)}, ${B})`}}),e("span",{className:P,style:{width:L,height:L,left:100*l+"%",top:"50%",marginLeft:V,marginTop:V,backgroundColor:d(r,l)}})]}):null,y?a("div",{className:b("flex items-center",j[C]),children:[e("span",{"aria-hidden":"true",className:b("shrink-0 rounded-full border","[border-color:var(--neba-border)]"),style:{width:L+6,height:L+6,...s},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:d(r,l)}})}),e("input",{type:"text",value:t,readOnly:D,disabled:M,spellCheck:!1,autoComplete:"off","aria-label":O.value,onChange:e=>h(e.target.value),className:b("neba-input min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--neba-border)]",v.xs,g[C],"text-(--neba-fg)",w,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1")})]}):null,x&&x.length>0?e("div",{role:"group","aria-label":O.swatches,className:"grid grid-cols-8 gap-1",children:x.map(a=>{const t=u(a),s=null!==t&&c(t.hsv,t.alpha,"hex")===c(r,l,"hex");return e("button",{type:"button",disabled:D,"aria-label":a,"aria-pressed":s,onClick:()=>{t&&o(t)},className:b("flex aspect-square items-center justify-center rounded-full border","[border-color:color-mix(in_oklab,var(--neba-fg)_18%,transparent)]","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",m,D?"cursor-default":"cursor-pointer hover:[box-shadow:var(--neba-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:a},children:s&&t?e("span",{style:{color:f(t.hsv)},children:e(n,{})}):null},a)})}):null]})}function D(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const M={h:217,s:87,v:82};export const ColorPicker=/*@__PURE__*/r.forwardRef(function ColorPicker(n,i){const{value:f,defaultValue:m="#1a58d1",onValueChange:v,format:w="hex",alpha:k=!1,swatches:N=h,inline:_=!1,editable:j=!0,label:I,description:z,error:P,invalid:T,required:A=!1,disabled:O=!1,readOnly:L=!1,fullWidth:V=!1,clearable:$=!1,name:B,open:S,defaultOpen:q=!1,onOpenChange:K,locale:R,labels:W,variant:E="outline",size:U="md",color:X="primary",density:Y="default",elevation:F=0,className:G,style:H,...J}=C(n,["size","density","variant","locale"]),Q=t(o,R),Z=r.useMemo(()=>({...Q,...W}),[Q,W]),[ee,ae]=r.useState(m),re=f??ee,[le,ne]=r.useState(q),oe=S??le,[te,se]=r.useState(()=>u(re)??{hsv:M,alpha:1}),[ie,de]=r.useState(()=>re||""),he=c(te.hsv,k?te.alpha:1,w),ce=""===re;r.useEffect(()=>{const e=u(re);e?c(e.hsv,k?e.alpha:1,w)!==he&&(de(re),se(e)):de(re)},[re,he,k,w]);const ue=(e,a)=>{se(e);const r=c(e.hsv,k?e.alpha:1,w);de(a??r),void 0===f&&ae(r),v?.(r)},fe=O||L,pe=r.useId(),be=r.useId(),me=r.useId(),ge=e(ColorPanel,{hsv:te.hsv,alphaValue:te.alpha,onChange:ue,text:ie,onTextChange:e=>{de(e);const a=u(e);a&&ue(a,e)},withAlpha:k,swatches:N,editable:j,size:U,inert:fe,disabled:Boolean(O),labels:Z}),ve=B?e("input",{type:"hidden",name:B,value:ce?"":he}):null;if(_){const r=T??Boolean(P)?"danger":X,l=[z?be:"",P?me:""].filter(Boolean).join(" ");return a("div",{ref:i,role:"group","aria-labelledby":I?pe:void 0,"aria-describedby":l||void 0,className:b("flex flex-col",x[U],G),style:{...y(r,F),...H},...J,children:[I?e("span",{id:pe,className:b(g[U],"font-medium",O?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:I}):null,ge,z?e("span",{id:be,className:b(g[U],"text-(--neba-muted-fg)"),children:z}):null,P?e("span",{id:me,className:b(g[U],"text-(--n-accent)"),children:P}):null,ve]})}return e("div",{ref:i,className:V?"w-full":"inline-block",...J,children:e(l,{variant:E,size:U,color:X,density:Y,elevation:F,style:H,label:I,description:z,error:P,invalid:T,required:A,disabled:O,readOnly:L,fullWidth:V,className:G,startIcon:e("span",{"aria-hidden":"true",className:b("block size-[1.15em] shrink-0 rounded-full border","[border-color:color-mix(in_oklab,var(--neba-fg)_18%,transparent)]"),style:s,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ce?"transparent":d(te.hsv,k?te.alpha:1)}})}),display:ce?Z.empty:he,samples:D(w,k),empty:ce,clearable:$,onClear:()=>{void 0===f&&ae(""),de(""),v?.("")},open:oe,onOpenChange:e=>{void 0===S&&ne(e),K?.(e)},clearLabel:Z.clear,hiddenValues:B?[{name:B,value:ce?"":he}]:void 0,children:e("div",{className:p[U],children:ge})})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{PickerShell as l}from"../../internal/picker.js";import{CheckIcon as n}from"../../internal/icons.js";import{colorMessages as t,useMessages as o}from"../../internal/i18n.js";import{checkerBackground as s,clamp as i,cssColor as d,defaultSwatches as c,formatColor as h,parseColor as u,readableInk as f}from"../../internal/color.js";import{controlTextClasses as p,cx as b,focusRingClasses as m,metaTextClasses as g,radiusClasses as v,stackGapClasses as x,surfaceSlots as y,transitionClasses as w}from"../../internal/styles.js";import{useStyleDefaults as C}from"../../internal/defaults.js";const k={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},N={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},_={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},j={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},I={xs:10,sm:12,md:14,lg:16,xl:18},P=["relative overflow-hidden border","[border-color:var(--neba-border)]","[box-shadow:var(--neba-plate-glass)]"].join(" "),z=["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function T(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:i((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:i((e.clientY-a.top)/a.height,0,1)}}function A(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:t,text:o,onTextChange:c,withAlpha:p,swatches:x,editable:y,size:C,inert:D,disabled:M,labels:O}){const L=I[C],V=-L/2,$=d({h:r.h,s:100,v:100}),B=d(r),S=e=>({onPointerDown:a=>{D||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!D&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),q=(e,a,r,l)=>({role:"slider",tabIndex:D?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":D||void 0,onKeyDown:e=>{const a=A(e);!D&&a&&0!==a.x&&(e.preventDefault(),l(a.x))}});return a("div",{className:b("flex flex-col",k[C],j[C]),children:[e("div",{...S(e=>{const{x:a,y:n}=T(e);t({hsv:{h:r.h,s:100*a,v:100*(1-n)},alpha:l})}),role:"slider",tabIndex:D?-1:0,"aria-label":O.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":D||void 0,onKeyDown:e=>{const a=A(e);!D&&a&&(e.preventDefault(),t({hsv:{h:r.h,s:i(r.s+a.x,0,100),v:i(r.v+a.y,0,100)},alpha:l}))},className:b(P,N[C],v[C],m,D?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:$,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:z,style:{width:L,height:L,left:`${r.s}%`,top:100-r.v+"%",marginLeft:V,marginTop:V,backgroundColor:B}})}),e("div",{...S(e=>t({hsv:{...r,h:360*T(e).x},alpha:l})),...q(O.hue,r.h,360,e=>t({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l})),className:b(P,_[C],"rounded-full",m,D?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:z,style:{width:L,height:L,left:r.h/360*100+"%",top:"50%",marginLeft:V,marginTop:V,backgroundColor:$}})}),p?a("div",{...S(e=>t({hsv:r,alpha:T(e).x})),...q(O.alpha,100*l,100,e=>t({hsv:r,alpha:i(l+e/100,0,1)})),className:b(P,_[C],"rounded-full",m,D?"cursor-default":"cursor-pointer touch-none"),style:s,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${d(r,0)}, ${B})`}}),e("span",{className:z,style:{width:L,height:L,left:100*l+"%",top:"50%",marginLeft:V,marginTop:V,backgroundColor:d(r,l)}})]}):null,y?a("div",{className:b("flex items-center",j[C]),children:[e("span",{"aria-hidden":"true",className:b("shrink-0 rounded-full border","[border-color:var(--neba-border)]"),style:{width:L+6,height:L+6,...s},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:d(r,l)}})}),e("input",{type:"text",value:o,readOnly:D,disabled:M,spellCheck:!1,autoComplete:"off","aria-label":O.value,onChange:e=>c(e.target.value),className:b("neba-input min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--neba-border)]",v.xs,g[C],"text-(--neba-fg)",w,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1")})]}):null,x&&x.length>0?e("div",{role:"group","aria-label":O.swatches,className:"grid grid-cols-8 gap-1",children:x.map(a=>{const o=u(a),s=null!==o&&h(o.hsv,o.alpha,"hex")===h(r,l,"hex");return e("button",{type:"button",disabled:D,"aria-label":a,"aria-pressed":s,onClick:()=>{o&&t(o)},className:b("flex aspect-square items-center justify-center rounded-full border","[border-color:color-mix(in_oklab,var(--neba-fg)_18%,transparent)]","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",m,D?"cursor-default":"cursor-pointer hover:[box-shadow:var(--neba-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:a},children:s&&o?e("span",{style:{color:f(o.hsv)},children:e(n,{})}):null},a)})}):null]})}function D(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const M={h:217,s:87,v:82};export const ColorPicker=/*@__PURE__*/r.forwardRef(function ColorPicker(n,i){const{value:f,defaultValue:m="#1a58d1",onValueChange:v,format:w="hex",alpha:k=!1,swatches:N=c,inline:_=!1,editable:j=!0,label:I,labelPlacement:P,description:z,error:T,invalid:A,required:O=!1,disabled:L=!1,readOnly:V=!1,fullWidth:$=!1,clearable:B=!1,name:S,open:q,defaultOpen:K=!1,onOpenChange:R,locale:W,labels:E,variant:U="outline",size:X="md",color:Y="primary",density:F="default",elevation:G=0,className:H,style:J,...Q}=C(n,["size","density","variant","locale","labelPlacement"]),Z=o(t,W),ee=r.useMemo(()=>({...Z,...E}),[Z,E]),[ae,re]=r.useState(m),le=f??ae,[ne,te]=r.useState(K),oe=q??ne,[se,ie]=r.useState(()=>u(le)??{hsv:M,alpha:1}),[de,ce]=r.useState(()=>le||""),he=h(se.hsv,k?se.alpha:1,w),ue=""===le;r.useEffect(()=>{const e=u(le);e?h(e.hsv,k?e.alpha:1,w)!==he&&(ce(le),ie(e)):ce(le)},[le,he,k,w]);const fe=(e,a)=>{ie(e);const r=h(e.hsv,k?e.alpha:1,w);ce(a??r),void 0===f&&re(r),v?.(r)},pe=L||V,be=r.useId(),me=r.useId(),ge=r.useId(),ve=e(ColorPanel,{hsv:se.hsv,alphaValue:se.alpha,onChange:fe,text:de,onTextChange:e=>{ce(e);const a=u(e);a&&fe(a,e)},withAlpha:k,swatches:N,editable:j,size:X,inert:pe,disabled:Boolean(L),labels:ee}),xe=S?e("input",{type:"hidden",name:S,value:ue?"":he}):null;if(_){const r=A??Boolean(T)?"danger":Y,l=[z?me:"",T?ge:""].filter(Boolean).join(" ");return a("div",{ref:i,role:"group","aria-labelledby":I?be:void 0,"aria-describedby":l||void 0,className:b("flex flex-col",x[X],H),style:{...y(r,G),...J},...Q,children:[I?e("span",{id:be,className:b(g[X],"font-medium",L?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:I}):null,ve,z?e("span",{id:me,className:b(g[X],"text-(--neba-muted-fg)"),children:z}):null,T?e("span",{id:ge,className:b(g[X],"text-(--n-accent)"),children:T}):null,xe]})}return e("div",{ref:i,className:$?"w-full":"inline-block",...Q,children:e(l,{variant:U,size:X,color:Y,density:F,elevation:G,style:J,label:I,labelPlacement:P,description:z,error:T,invalid:A,required:O,disabled:L,readOnly:V,fullWidth:$,className:H,startIcon:e("span",{"aria-hidden":"true",className:b("block size-[1.15em] shrink-0 rounded-full border","[border-color:color-mix(in_oklab,var(--neba-fg)_18%,transparent)]"),style:s,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ue?"transparent":d(se.hsv,k?se.alpha:1)}})}),display:ue?ee.empty:he,samples:D(w,k),empty:ue,clearable:B,onClear:()=>{void 0===f&&re(""),ce(""),v?.("")},open:oe,onOpenChange:e=>{void 0===q&&te(e),R?.(e)},clearLabel:ee.clear,hiddenValues:S?[{name:S,value:ue?"":he}]:void 0,children:e("div",{className:p[X],children:ve})})})});

package/dist/components/combobox/Combobox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaFieldSlot, NebaShortcuts, NebaSlots, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaLabelPlacement, NebaShortcuts, NebaSlots, NebaStyleProps } from '../../types.js';
 /**
  * What a Combobox's value may be — the same two types a [Select](../select)
  * submits, and for the same reason: a form control's value is what a form
@@ -117,8 +117,15 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
      * @default 0
      */
     elevation?: NebaElevation;
-    /** Label above the field, wired to it by Base UI's Field. */
+    /** The field's name, wired to the input by Base UI's Field. */
     label?: React.ReactNode;
+    /**
+     * Where the label is drawn: above the field, in a notch cut into its top
+     * edge, or inside it until the field is focused, holds text or has a chip in
+     * it. A `startIcon` keeps a `float` label in the notch.
+     * @default 'top'
+     */
+    labelPlacement?: NebaLabelPlacement;
     /** Helper text below the field. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the combobox invalid. */

package/dist/components/combobox/Combobox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip.js";import{actionMessages as r,comboboxMessages as o,fillMessage as s,useMessages as c}from"../../internal/i18n.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as u,PlusIcon as p}from"../../internal/icons.js";import{keyHandler as b}from"../../internal/keys.js";import{chipRemoveClasses as h,controlTextLeadingClasses as f,cx as g,disabledClasses as v,fieldFocusTransitionClasses as x,fieldHeightClasses as y,fieldReadOnlyClasses as N,fieldRestClasses as w,fieldRingClasses as j,gapClasses as C,hasContent as L,iconClasses as I,metaTextClasses as S,paddingXClasses as z,popupFadeClasses as V,radiusClasses as O,stackGapClasses as $,surfaceClasses as _,surfaceSlots as k,transitionClasses as M}from"../../internal/styles.js";import{useStyleDefaults as A}from"../../internal/defaults.js";import{fieldLight as F,fieldSpotlightSlot as R,glowClasses as T}from"../../internal/glow.js";import{useFieldsetDisabled as q}from"../../internal/fieldset.js";const E=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",M,x,j,I].join(" "),P={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},B=[_,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","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]",V].join(" "),D=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",M,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-on-tint)","data-[selected]:text-(--n-on-tint) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" "),G=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function H(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox(x){const{variant:j="outline",size:I="md",color:V="primary",density:_="default",elevation:M=0,items:K,multiple:W,value:J,defaultValue:Q,onValueChange:U,filter:X,onInputValueChange:Y,allowCustom:Z=!0,customLabel:ee,clearable:ae=!1,locale:le,emptyMessage:te,limit:ne,placeholder:ie,label:re,description:oe,error:se,invalid:ce,startIcon:de,fullWidth:me=!1,disabled:ue,readOnly:pe=!1,required:be=!1,name:he,open:fe,defaultOpen:ge,onOpenChange:ve,clearLabel:xe,openLabel:ye,removeLabel:Ne,inputRef:we,shortcuts:je,id:Ce,className:Le,classNames:Ie,style:Se,"aria-label":ze,"aria-labelledby":Ve,...Oe}=A(x,["size","density","variant","locale"]),$e=q(ue),_e=!$e&&!pe,ke=c(o,le),Me=c(r,le),Ae=Ne??(e=>s(ke.remove,{label:e})),Fe=L(se),Re=ce??Fe,Te=Re?"danger":V,qe=!0===W,Ee=l.useMemo(()=>K.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[K]),[Pe,Be]=l.useState(()=>H(Q)),De=void 0===J?Pe:H(J),[Ge,He]=l.useState(""),Ke=l.useMemo(()=>new Map(Ee.map(e=>[e.value,e])),[Ee]),We=l.useCallback(e=>Ke.get(e)??{value:e,label:String(e),custom:!0},[Ke]),Je=Ge.trim(),Qe=Je.toLocaleLowerCase(),Ue=""===Je||Ee.some(e=>e.label.toLocaleLowerCase()===Qe||String(e.value).toLocaleLowerCase()===Qe)||De.some(e=>String(e).toLocaleLowerCase()===Qe),Xe=!Z||pe||$e||Ue?null:Je,Ye=t.useFilter({locale:le}),Ze=null!==Xe&&void 0!==ne&&ne>-1,ea=l.useMemo(()=>{if(null===Xe)return Ee;const e={value:Xe,label:Xe,custom:!0};if(!Ze)return[...Ee,e];return[...(!1===X?Ee:Ee.filter(e=>X?X(e,Xe):Ye.contains(e.label,Xe))).slice(0,ne),e]},[Ee,Xe,Ze,X,Ye,ne]),aa=qe?De.map(We):De.length>0?We(De[0]):null;const la=z[_][I],ta=[E,f[I],O[I],C[I],qe?P[I]:y[I],`${la} pe-1.5`,$e?v[j]:pe?N[j]:`${w[j]} ${T}`,Ie?.shell].filter(Boolean).join(" "),na=["neba-input min-w-0 flex-1 self-stretch 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",Ie?.control].filter(Boolean).join(" "),ia=a=>e(t.Input,{ref:we,"aria-label":ze,"aria-labelledby":Ve,onKeyDown:b(je),placeholder:ie,className:qe?`${na} min-w-16 ${a?"ms-1.5":""}`:na});return a(n.Root,{disabled:$e,invalid:Re,className:g("flex-col align-top",$[I],me?"flex w-full":"inline-flex",Le??""),style:{...k(Te,M),..._e?R:void 0,...Se},...Oe,children:[re?e(n.Label,{className:g(S[I],"font-medium",$e?"text-(--neba-disabled-fg)":"text-(--neba-fg)",Ie?.label),children:re}):null,a(t.Root,{id:Ce,name:he,items:ea,multiple:qe,value:aa,onValueChange:e=>{!function(e){void 0===J&&Be(e),U?.(qe?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{He(e),Y?.(e)},open:fe,defaultOpen:ge,onOpenChange:e=>ve?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:Ze?-1:ne,filter:Ze||!1===X?null:X?(e,a)=>!0===e.custom||X(e,a):void 0,disabled:$e,readOnly:pe,required:be,children:[a(t.InputGroup,{className:ta,...F(_e),children:[de?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:de}):null,qe?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(t.Chip,{render:e(i,{variant:"outline",size:I,color:Te,density:"compact",disabled:$e,className:Ie?.chip,endIcon:pe||$e?null:e(t.ChipRemove,{"aria-label":Ae(a.label),className:h,children:e(u,{})})}),children:a.label},String(a.value))),ia(n.length>0)]})})}):ia(!1),ae&&!pe?e(t.Clear,{"aria-label":xe??Me.clear,className:G,children:e(u,{})}):null,e(t.Trigger,{"aria-label":"string"==typeof re?void 0:ye??ke.open,className:G,children:e(t.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(m,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:6,children:a(t.Popup,{className:g(B,O[I],f[I],Ie?.popup),style:k(Te,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:te??ke.empty}),e(t.List,{children:n=>e(t.Item,{value:n,disabled:n.disabled,className:g(D,Ie?.item),children:n.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(p,{})}),e("span",{className:"truncate",children:ee?ee(n.label):s(ke.add,{label:n.label})})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:n.label})]})},`${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),oe?e(n.Description,{className:g(S[I],"text-(--neba-muted-fg)",Ie?.description),children:oe}):null,e(n.Error,Fe?{match:!0,className:g(S[I],"text-(--n-accent)",Ie?.error),children:se}:{className:g(S[I],"text-(--n-accent)",Ie?.error)})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip.js";import{actionMessages as r,comboboxMessages as o,fillMessage as s,useMessages as c}from"../../internal/i18n.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as u,PlusIcon as p}from"../../internal/icons.js";import{keyHandler as b}from"../../internal/keys.js";import{FieldNotch as h,NotchFrame as f}from"../../internal/notch.js";import{chipRemoveClasses as g,controlTextLeadingClasses as v,cx as x,disabledClasses as y,fieldFocusTransitionClasses as N,fieldHeightClasses as w,fieldReadOnlyClasses as j,fieldRestClasses as C,fieldRingClasses as L,fieldSheetClasses as I,fieldSheetDisabledClasses as S,fieldSheetReadOnlyClasses as z,gapClasses as $,hasContent as O,iconClasses as V,metaTextClasses as _,paddingXClasses as k,popupFadeClasses as M,radiusClasses as P,readOnlyFilterClasses as A,stackGapClasses as F,surfaceClasses as R,surfaceSlots as T,transitionClasses as q}from"../../internal/styles.js";import{useStyleDefaults as E}from"../../internal/defaults.js";import{fieldLight as B,fieldSpotlightSlot as D,glowClasses as G}from"../../internal/glow.js";import{useFieldsetDisabled as H}from"../../internal/fieldset.js";const K=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",q,N,V].join(" "),W={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},J=[R,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","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]",M].join(" "),Q=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",q,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-on-tint)","data-[selected]:text-(--n-on-tint) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" "),U=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function X(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox(N){const{variant:V="outline",size:M="md",color:R="primary",density:q="default",elevation:Y=0,items:Z,multiple:ee,value:le,defaultValue:ae,onValueChange:te,filter:ne,onInputValueChange:ie,allowCustom:re=!0,customLabel:oe,clearable:se=!1,locale:ce,emptyMessage:de,limit:me,placeholder:ue,label:pe,labelPlacement:be="top",description:he,error:fe,invalid:ge,startIcon:ve,fullWidth:xe=!1,disabled:ye,readOnly:Ne=!1,required:we=!1,name:je,open:Ce,defaultOpen:Le,onOpenChange:Ie,clearLabel:Se,openLabel:ze,removeLabel:$e,inputRef:Oe,shortcuts:Ve,id:_e,className:ke,classNames:Me,style:Pe,"aria-label":Ae,"aria-labelledby":Fe,...Re}=E(N,["size","density","variant","locale","labelPlacement"]),Te=H(ye),qe=!Te&&!Ne,Ee=c(o,ce),Be=c(r,ce),De=$e??(e=>s(Ee.remove,{label:e})),Ge=O(fe),He=ge??Ge,Ke=He?"danger":R,We=!0===ee,Je=a.useMemo(()=>Z.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[Z]),[Qe,Ue]=a.useState(()=>X(ae)),Xe=void 0===le?Qe:X(le),[Ye,Ze]=a.useState(""),el=a.useMemo(()=>new Map(Je.map(e=>[e.value,e])),[Je]),ll=a.useCallback(e=>el.get(e)??{value:e,label:String(e),custom:!0},[el]),al=Ye.trim(),tl=al.toLocaleLowerCase(),nl=""===al||Je.some(e=>e.label.toLocaleLowerCase()===tl||String(e.value).toLocaleLowerCase()===tl)||Xe.some(e=>String(e).toLocaleLowerCase()===tl),il=!re||Ne||Te||nl?null:al,rl=t.useFilter({locale:ce}),ol=null!==il&&void 0!==me&&me>-1,sl=a.useMemo(()=>{if(null===il)return Je;const e={value:il,label:il,custom:!0};if(!ol)return[...Je,e];return[...(!1===ne?Je:Je.filter(e=>ne?ne(e,il):rl.contains(e.label,il))).slice(0,me),e]},[Je,il,ol,ne,rl,me]),cl=We?Xe.map(ll):Xe.length>0?ll(Xe[0]):null;const dl=k[q][M],ml="top"!==be&&O(pe),ul=ml&&"float"===be&&!O(ve),pl=[K,v[M],P[M],$[M],We?W[M]:w[M],`${dl} pe-1.5`,ml?"":L,Te?(ml?S:y)[V]:Ne?ml?`${z[V]} ${A}`:j[V]:`${(ml?I:C)[V]} ${G}`,Me?.shell].filter(Boolean).join(" "),bl=["neba-input min-w-0 flex-1 self-stretch 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",ul?"neba-float-control":"",Me?.control].filter(Boolean).join(" "),hl=l=>e(t.Input,{ref:Oe,"aria-label":Ae,"aria-labelledby":Fe,onKeyDown:b(Ve),placeholder:ul?ue||" ":ue,className:We?`${bl} min-w-16 ${l?"ms-1.5":""}`:bl}),fl=l(t.InputGroup,{className:pl,...B(qe),children:[ve?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ve}):null,We?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:n=>l(a.Fragment,{children:[n.map(l=>e(t.Chip,{render:e(i,{variant:"outline",size:M,color:Ke,density:"compact",disabled:Te,className:Me?.chip,endIcon:Ne||Te?null:e(t.ChipRemove,{"aria-label":De(l.label),className:g,children:e(u,{})})}),children:l.label},String(l.value))),hl(n.length>0)]})})}):hl(!1),se&&!Ne?e(t.Clear,{"aria-label":Se??Be.clear,className:U,children:e(u,{})}):null,e(t.Trigger,{"aria-label":"string"==typeof pe?void 0:ze??Ee.open,className:U,children:e(t.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(m,{})})}),ml?e(h,{label:pe,variant:V,disabled:Te,readOnly:Ne,rests:ul,empty:We?0===Xe.length&&""===Ye:void 0,labelClassName:Me?.label}):null]});return l(n.Root,{disabled:Te,invalid:He,className:x("flex-col align-top",F[M],xe?"flex w-full":"inline-flex",ke??""),style:{...T(Ke,Y),...qe?D:void 0,...Pe},...Re,children:[pe&&!ml?e(n.Label,{className:x(_[M],"font-medium",Te?"text-(--neba-disabled-fg)":"text-(--neba-fg)",Me?.label),children:pe}):null,l(t.Root,{id:_e,name:je,items:sl,multiple:We,value:cl,onValueChange:e=>{!function(e){void 0===le&&Ue(e),te?.(We?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Ze(e),ie?.(e)},open:Ce,defaultOpen:Le,onOpenChange:e=>Ie?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,l)=>e.value===l.value,limit:ol?-1:me,filter:ol||!1===ne?null:ne?(e,l)=>!0===e.custom||ne(e,l):void 0,disabled:Te,readOnly:Ne,required:we,children:[ml?e(f,{label:pe,size:M,density:q,variant:V,labelClassName:Me?.label,children:fl}):fl,e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:6,children:l(t.Popup,{className:x(J,P[M],v[M],Me?.popup),style:T(Ke,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:de??Ee.empty}),e(t.List,{children:n=>e(t.Item,{value:n,disabled:n.disabled,className:x(Q,Me?.item),children:n.custom?l(a.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(p,{})}),e("span",{className:"truncate",children:oe?oe(n.label):s(Ee.add,{label:n.label})})]}):l(a.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:n.label})]})},`${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),he?e(n.Description,{className:x(_[M],"text-(--neba-muted-fg)",Me?.description),children:he}):null,e(n.Error,Ge?{match:!0,className:x(_[M],"text-(--n-accent)",Me?.error),children:fe}:{className:x(_[M],"text-(--n-accent)",Me?.error)})]})}

package/dist/components/date-picker/DatePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Button as l}from"../button/Button.js";import{Calendar as n,usePickerLabels as o}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as s}from"../../internal/picker.js";import{displaySamples as c,formatDate as d,isUnitOutside as m,isValidDate as u,localeWeekStart as h,mergeDateAndTime as p,startOfMonth as f,startOfUnit as y,toISODate as b,toISOMonth as g,toISOYear as j,today as v,withPlaceholder as x}from"../../internal/date.js";import{cx as D}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";const S={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},k={day:b,month:g,year:j};export const DatePicker=/*@__PURE__*/t.forwardRef(function DatePicker(b,g){const{value:j,defaultValue:z,onValueChange:C,open:w,defaultOpen:M,onOpenChange:V,granularity:B="day",defaultMonth:I,minDate:P,maxDate:R,shouldDisableDate:E,locale:F,weekStartsOn:L,format:N,placeholder:T,clearable:Y=!1,showTodayButton:q=!0,closeOnSelect:A=!0,labels:G,name:H,size:J="md",color:K="primary",readOnly:Q=!1,disabled:U=!1,startIcon:W,...X}=O(b,["size","density","variant","locale"]),Z=o(G,F),$=L??h(F),_=N??S[B],[ee,ae]=t.useState(z??null),te=void 0!==j?j:ee,[le,ne]=t.useState(M??!1),oe=w??le,[re,ie]=t.useState(()=>f(u(te)?te:I??v()));t.useEffect(()=>{oe&&ie(f(u(te)?te:I??v()))},[oe]);const se=e=>{e&&(Q||U)||(void 0===w&&ne(e),V?.(e))},ce=e=>{void 0===j&&ae(e),C?.(e)},de=e=>{const a=y(e,B),t=u(te)?p(a,te):a;ce(t),ie(f(t)),A&&se(!1)},me=v(),ue=y(me,B),he=m(me,B,P,R)||(E?.(ue)??!1),pe="year"===B?Z.thisYear:"month"===B?Z.thisMonth:Z.today,fe=q||Y,ye=t.useMemo(()=>x(c(F,_),T),[F,_,T]);return e(s,{...X,size:J,color:K,readOnly:Q,disabled:U,triggerRef:g,startIcon:W??e(r,{}),display:u(te)?d(te,F,_):T??"",samples:ye,empty:!u(te),clearable:Y,onClear:()=>ce(null),open:oe,onOpenChange:se,clearLabel:Z.clear,hiddenValues:H?[{name:H,value:u(te)?k[B](te):""}]:void 0,children:a("div",{className:D("flex flex-col",fe&&"gap-1.5"),children:[e(n,{size:J,color:K,locale:F,weekStartsOn:$,month:re,onMonthChange:ie,selected:[te],onSelect:de,granularity:B,minDate:P,maxDate:R,shouldDisableDate:E,labels:Z,autoFocus:!0}),fe?a(i,{size:J,children:[Y?e(l,{variant:"text",size:J,color:K,density:"compact",onClick:()=>{ce(null),se(!1)},children:Z.clear}):null,q?e(l,{variant:"text",size:J,color:K,density:"compact",disabled:he,onClick:()=>de(me),children:pe}):null]}):null]})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Button as l}from"../button/Button.js";import{Calendar as n,usePickerLabels as o}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as s}from"../../internal/picker.js";import{displaySamples as c,formatDate as m,isUnitOutside as d,isValidDate as u,localeWeekStart as h,mergeDateAndTime as p,startOfMonth as f,startOfUnit as y,toISODate as b,toISOMonth as g,toISOYear as j,today as v,withPlaceholder as x}from"../../internal/date.js";import{cx as D}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";const S={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},k={day:b,month:g,year:j};export const DatePicker=/*@__PURE__*/t.forwardRef(function DatePicker(b,g){const{value:j,defaultValue:z,onValueChange:C,open:w,defaultOpen:M,onOpenChange:P,granularity:V="day",defaultMonth:B,minDate:I,maxDate:R,shouldDisableDate:E,locale:F,weekStartsOn:L,format:N,placeholder:T,clearable:Y=!1,showTodayButton:q=!0,closeOnSelect:A=!0,labels:G,name:H,size:J="md",color:K="primary",readOnly:Q=!1,disabled:U=!1,startIcon:W,...X}=O(b,["size","density","variant","locale","labelPlacement"]),Z=o(G,F),$=L??h(F),_=N??S[V],[ee,ae]=t.useState(z??null),te=void 0!==j?j:ee,[le,ne]=t.useState(M??!1),oe=w??le,[re,ie]=t.useState(()=>f(u(te)?te:B??v()));t.useEffect(()=>{oe&&ie(f(u(te)?te:B??v()))},[oe]);const se=e=>{e&&(Q||U)||(void 0===w&&ne(e),P?.(e))},ce=e=>{void 0===j&&ae(e),C?.(e)},me=e=>{const a=y(e,V),t=u(te)?p(a,te):a;ce(t),ie(f(t)),A&&se(!1)},de=v(),ue=y(de,V),he=d(de,V,I,R)||(E?.(ue)??!1),pe="year"===V?Z.thisYear:"month"===V?Z.thisMonth:Z.today,fe=q||Y,ye=t.useMemo(()=>x(c(F,_),T),[F,_,T]);return e(s,{...X,size:J,color:K,readOnly:Q,disabled:U,triggerRef:g,startIcon:W??e(r,{}),display:u(te)?m(te,F,_):T??"",samples:ye,empty:!u(te),clearable:Y,onClear:()=>ce(null),open:oe,onOpenChange:se,clearLabel:Z.clear,hiddenValues:H?[{name:H,value:u(te)?k[V](te):""}]:void 0,children:a("div",{className:D("flex flex-col",fe&&"gap-1.5"),children:[e(n,{size:J,color:K,locale:F,weekStartsOn:$,month:re,onMonthChange:ie,selected:[te],onSelect:me,granularity:V,minDate:I,maxDate:R,shouldDisableDate:E,labels:Z,autoFocus:!0}),fe?a(i,{size:J,children:[Y?e(l,{variant:"text",size:J,color:K,density:"compact",onClick:()=>{ce(null),se(!1)},children:Z.clear}):null,q?e(l,{variant:"text",size:J,color:K,density:"compact",disabled:he,onClick:()=>me(de),children:pe}):null]}):null]})})});

package/dist/components/date-range-picker/DateRangePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as m,compareDay as d,displaySamples as h,formatDate as p,isValidDate as f,localeWeekStart as x,startOfDay as v,startOfMonth as g,toISODate as b,today as y,withPlaceholder as w}from"../../internal/date.js";import{cx as N,gapClasses as j,metaTextClasses as D}from"../../internal/styles.js";import{useStyleDefaults as S}from"../../internal/defaults.js";const C={start:null,end:null};export const DateRangePicker=/*@__PURE__*/a.forwardRef(function DateRangePicker(O,k){const{value:z,defaultValue:P,onValueChange:R,open:B,defaultOpen:M,onOpenChange:V,defaultMonth:E,minDate:I,maxDate:F,shouldDisableDate:L,locale:q,weekStartsOn:A,format:G={dateStyle:"medium"},monthCount:H=2,startPlaceholder:J,endPlaceholder:K,presets:Q,clearable:T=!1,closeOnSelect:U=!0,labels:W,name:X,size:Y="md",color:Z="primary",readOnly:$=!1,disabled:_=!1,startIcon:ee,...le}=S(O,["size","density","variant","locale"]),ae=s(W,q),ne=A??x(q),[te,se]=a.useState(P??C),re=void 0!==z?z??C:te,oe=f(re.start)?re.start:null,ie=f(re.end)?re.end:null,[ce,ue]=a.useState(M??!1),me=B??ce,[de,he]=a.useState(null),[pe,fe]=a.useState(null),[xe,ve]=a.useState(()=>g(oe??E??y()));a.useEffect(()=>{me?ve(g(oe??E??y())):(he(null),fe(null))},[me]);const ge=e=>{e&&($||_)||(void 0===B&&ue(e),V?.(e))},be=e=>{void 0===z&&se(e),R?.(e)},ye=de??oe,we=null!==de?pe:ie,Ne=(l,a)=>f(l)?p(l,q,G):e("span",{className:"text-(--neba-muted-fg)",children:a??""}),je=m(xe,1),De=2===H,Se=h(q,G),Ce=null!==de?ae.end:null===oe?ae.start:null,Oe={size:Y,color:Z,locale:q,weekStartsOn:ne,selected:[oe,ie,de],rangeStart:ye,rangeEnd:we,onSelect:e=>{const l=v(e);return null===de||d(l,de)<0?(he(l),void fe(l)):(he(null),fe(null),be({start:de,end:l}),void(U&&ge(!1)))},onPreviewChange:e=>{null!==de&&fe(e??de)},minDate:I,maxDate:F,shouldDisableDate:L,showOutsideDays:!1,multiselectable:!0,labels:ae};return e(c,{...le,size:Y,color:Z,readOnly:$,disabled:_,triggerRef:k,startIcon:ee??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(oe,J)}),e(u,{samples:w(Se,J)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) rtl:rotate-180",children:e(r,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(ie,K)}),e(u,{samples:w(Se,K)})]})]}),empty:null===oe&&null===ie,clearable:T,onClear:()=>be(C),open:me,onOpenChange:ge,clearLabel:ae.clear,hiddenValues:X?[{name:X,value:oe?b(oe):""},{name:X,value:ie?b(ie):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:N("flex items-stretch",j[Y]),children:[Q&&Q.length>0?e("div",{className:N("flex max-h-[calc(var(--n-cell,2rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--n-line)]"),children:Q.map((l,a)=>e(n,{variant:"text",size:Y,color:Z,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;he(null),fe(null),be(l),f(l.start)&&ve(g(l.start)),U&&ge(!1)})(l),children:l.label},a))}):null,e(t,{...Oe,month:xe,onMonthChange:ve,showNextButton:!De,autoFocus:!0}),De?e(t,{...Oe,month:je,onMonthChange:e=>ve(m(e,-1)),showPreviousButton:!1}):null]}),T||null!==Ce?l(i,{size:Y,children:[null!==Ce?e("span",{className:N("me-auto text-(--neba-muted-fg)",D[Y]),children:Ce}):null,T?e(n,{variant:"text",size:Y,color:Z,density:"compact",onClick:()=>{he(null),fe(null),be(C),ge(!1)},children:ae.clear}):null]}):null]})})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as m,compareDay as d,displaySamples as h,formatDate as p,isValidDate as f,localeWeekStart as x,startOfDay as v,startOfMonth as b,toISODate as g,today as y,withPlaceholder as w}from"../../internal/date.js";import{cx as N,gapClasses as j,metaTextClasses as D}from"../../internal/styles.js";import{useStyleDefaults as S}from"../../internal/defaults.js";const C={start:null,end:null};export const DateRangePicker=/*@__PURE__*/a.forwardRef(function DateRangePicker(O,k){const{value:z,defaultValue:P,onValueChange:R,open:B,defaultOpen:M,onOpenChange:V,defaultMonth:E,minDate:I,maxDate:F,shouldDisableDate:L,locale:q,weekStartsOn:A,format:G={dateStyle:"medium"},monthCount:H=2,startPlaceholder:J,endPlaceholder:K,presets:Q,clearable:T=!1,closeOnSelect:U=!0,labels:W,name:X,size:Y="md",color:Z="primary",readOnly:$=!1,disabled:_=!1,startIcon:ee,...le}=S(O,["size","density","variant","locale","labelPlacement"]),ae=s(W,q),ne=A??x(q),[te,se]=a.useState(P??C),re=void 0!==z?z??C:te,oe=f(re.start)?re.start:null,ie=f(re.end)?re.end:null,[ce,ue]=a.useState(M??!1),me=B??ce,[de,he]=a.useState(null),[pe,fe]=a.useState(null),[xe,ve]=a.useState(()=>b(oe??E??y()));a.useEffect(()=>{me?ve(b(oe??E??y())):(he(null),fe(null))},[me]);const be=e=>{e&&($||_)||(void 0===B&&ue(e),V?.(e))},ge=e=>{void 0===z&&se(e),R?.(e)},ye=de??oe,we=null!==de?pe:ie,Ne=(l,a)=>f(l)?p(l,q,G):e("span",{className:"text-(--neba-muted-fg)",children:a??""}),je=m(xe,1),De=2===H,Se=h(q,G),Ce=null!==de?ae.end:null===oe?ae.start:null,Oe={size:Y,color:Z,locale:q,weekStartsOn:ne,selected:[oe,ie,de],rangeStart:ye,rangeEnd:we,onSelect:e=>{const l=v(e);return null===de||d(l,de)<0?(he(l),void fe(l)):(he(null),fe(null),ge({start:de,end:l}),void(U&&be(!1)))},onPreviewChange:e=>{null!==de&&fe(e??de)},minDate:I,maxDate:F,shouldDisableDate:L,showOutsideDays:!1,multiselectable:!0,labels:ae};return e(c,{...le,size:Y,color:Z,readOnly:$,disabled:_,triggerRef:k,startIcon:ee??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(oe,J)}),e(u,{samples:w(Se,J)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) rtl:rotate-180",children:e(r,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(ie,K)}),e(u,{samples:w(Se,K)})]})]}),empty:null===oe&&null===ie,clearable:T,onClear:()=>ge(C),open:me,onOpenChange:be,clearLabel:ae.clear,hiddenValues:X?[{name:X,value:oe?g(oe):""},{name:X,value:ie?g(ie):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:N("flex items-stretch",j[Y]),children:[Q&&Q.length>0?e("div",{className:N("flex max-h-[calc(var(--n-cell,2rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--n-line)]"),children:Q.map((l,a)=>e(n,{variant:"text",size:Y,color:Z,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;he(null),fe(null),ge(l),f(l.start)&&ve(b(l.start)),U&&be(!1)})(l),children:l.label},a))}):null,e(t,{...Oe,month:xe,onMonthChange:ve,showNextButton:!De,autoFocus:!0}),De?e(t,{...Oe,month:je,onMonthChange:e=>ve(m(e,-1)),showPreviousButton:!1}):null]}),T||null!==Ce?l(i,{size:Y,children:[null!==Ce?e("span",{className:N("me-auto text-(--neba-muted-fg)",D[Y]),children:Ce}):null,T?e(n,{variant:"text",size:Y,color:Z,density:"compact",onClick:()=>{he(null),fe(null),ge(C),be(!1)},children:ae.clear}):null]}):null]})})});

package/dist/components/date-time-picker/DateTimePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as n}from"../button/Button.js";import{Calendar as a,TimeGrid as o,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{clampDate as m,displaySamples as u,formatDate as p,isDayOutside as h,isHour12 as f,isValidDate as S,localeWeekStart as b,mergeDateAndTime as y,startOfDay as D,startOfMonth as g,timeUnitRange as v,toISODateTime as x,today as j,withPlaceholder as C,withTime as k}from"../../internal/date.js";import{cx as w,gapClasses as z}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";export const DateTimePicker=/*@__PURE__*/l.forwardRef(function DateTimePicker(T,N){const{value:V,defaultValue:B,onValueChange:I,open:M,defaultOpen:P,onOpenChange:R,defaultMonth:E,minDate:F,maxDate:L,shouldDisableDate:q,shouldDisableTime:A,locale:G,weekStartsOn:H,format:J={dateStyle:"medium",timeStyle:"short"},hour12:K,showSeconds:Q=!1,hourStep:U=1,minuteStep:W=1,secondStep:X=1,placeholder:Y,clearable:Z=!1,showNowButton:$=!0,closeOnSelect:_=!1,labels:ee,name:te,size:le="md",color:ne="primary",density:ae="default",readOnly:oe=!1,disabled:se=!1,startIcon:ie,...re}=O(T,["size","density","variant","locale"]),ce=s(ee,G),de=H??b(G),me=K??f(G),[ue,pe]=l.useState(B??null),he=void 0!==V?V:ue,[fe,Se]=l.useState(P??!1),be=M??fe,[ye,De]=l.useState(()=>g(S(he)?he:E??j()));l.useEffect(()=>{be&&De(g(S(he)?he:E??j()))},[be]);const ge=e=>{e&&(oe||se)||(void 0===M&&Se(e),R?.(e))},ve=e=>{const t=null===e?null:m(e,F,L);void 0===V&&pe(t),I?.(t)},xe=l.useCallback((e,t)=>{const[l,n]=v(t,e);return!!(S(F)&&n.getTime()<F.getTime())||(!!(S(L)&&l.getTime()>L.getTime())||(A?.(e,t)??!1))},[F,L,A]),je=new Date,Ce=k(je,{seconds:Q?je.getSeconds():0}),ke=h(Ce,F,L)||(q?.(Ce)??!1)||xe(Ce,"second"),we=C(u(G,J),Y);return e(d,{...re,size:le,color:ne,density:ae,readOnly:oe,disabled:se,triggerRef:N,startIcon:ie??e(i,{}),display:S(he)?p(he,G,J):Y??"",samples:we,empty:!S(he),clearable:Z,onClear:()=>ve(null),open:be,onOpenChange:ge,clearLabel:ce.clear,hiddenValues:te?[{name:te,value:S(he)?x(he,Q):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:w("flex items-stretch",z[le]),children:[e(a,{size:le,color:ne,locale:G,weekStartsOn:de,month:ye,onMonthChange:De,selected:[he],onSelect:e=>{const t=S(he)?y(e,he):D(e);ve(t),De(g(t)),_&&ge(!1)},minDate:F,maxDate:L,shouldDisableDate:q,labels:ce,autoFocus:!0}),e(r,{}),e(o,{size:le,density:ae,locale:G,value:S(he)?he:null,referenceDate:S(he)?he:j(),onChange:ve,hour12:me,showSeconds:Q,hourStep:U,minuteStep:W,secondStep:X,shouldDisableTime:xe,labels:ce})]}),t(c,{size:le,children:[Z?e(n,{variant:"text",size:le,color:ne,density:"compact",onClick:()=>{ve(null),ge(!1)},children:ce.clear}):null,$?e(n,{variant:"text",size:le,color:ne,density:"compact",disabled:ke,onClick:()=>{ve(Ce),De(g(Ce))},children:ce.now}):null,e(n,{variant:"solid",size:le,color:ne,density:"compact",onClick:()=>ge(!1),children:ce.done})]})]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as a}from"../button/Button.js";import{Calendar as n,TimeGrid as o,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{clampDate as m,displaySamples as u,formatDate as p,isDayOutside as h,isHour12 as f,isValidDate as S,localeWeekStart as b,mergeDateAndTime as y,startOfDay as D,startOfMonth as g,timeUnitRange as v,toISODateTime as x,today as j,withPlaceholder as C,withTime as k}from"../../internal/date.js";import{cx as w,gapClasses as z}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";export const DateTimePicker=/*@__PURE__*/l.forwardRef(function DateTimePicker(T,N){const{value:P,defaultValue:V,onValueChange:B,open:I,defaultOpen:M,onOpenChange:R,defaultMonth:E,minDate:F,maxDate:L,shouldDisableDate:q,shouldDisableTime:A,locale:G,weekStartsOn:H,format:J={dateStyle:"medium",timeStyle:"short"},hour12:K,showSeconds:Q=!1,hourStep:U=1,minuteStep:W=1,secondStep:X=1,placeholder:Y,clearable:Z=!1,showNowButton:$=!0,closeOnSelect:_=!1,labels:ee,name:te,size:le="md",color:ae="primary",density:ne="default",readOnly:oe=!1,disabled:se=!1,startIcon:ie,...re}=O(T,["size","density","variant","locale","labelPlacement"]),ce=s(ee,G),de=H??b(G),me=K??f(G),[ue,pe]=l.useState(V??null),he=void 0!==P?P:ue,[fe,Se]=l.useState(M??!1),be=I??fe,[ye,De]=l.useState(()=>g(S(he)?he:E??j()));l.useEffect(()=>{be&&De(g(S(he)?he:E??j()))},[be]);const ge=e=>{e&&(oe||se)||(void 0===I&&Se(e),R?.(e))},ve=e=>{const t=null===e?null:m(e,F,L);void 0===P&&pe(t),B?.(t)},xe=l.useCallback((e,t)=>{const[l,a]=v(t,e);return!!(S(F)&&a.getTime()<F.getTime())||(!!(S(L)&&l.getTime()>L.getTime())||(A?.(e,t)??!1))},[F,L,A]),je=new Date,Ce=k(je,{seconds:Q?je.getSeconds():0}),ke=h(Ce,F,L)||(q?.(Ce)??!1)||xe(Ce,"second"),we=C(u(G,J),Y);return e(d,{...re,size:le,color:ae,density:ne,readOnly:oe,disabled:se,triggerRef:N,startIcon:ie??e(i,{}),display:S(he)?p(he,G,J):Y??"",samples:we,empty:!S(he),clearable:Z,onClear:()=>ve(null),open:be,onOpenChange:ge,clearLabel:ce.clear,hiddenValues:te?[{name:te,value:S(he)?x(he,Q):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:w("flex items-stretch",z[le]),children:[e(n,{size:le,color:ae,locale:G,weekStartsOn:de,month:ye,onMonthChange:De,selected:[he],onSelect:e=>{const t=S(he)?y(e,he):D(e);ve(t),De(g(t)),_&&ge(!1)},minDate:F,maxDate:L,shouldDisableDate:q,labels:ce,autoFocus:!0}),e(r,{}),e(o,{size:le,density:ne,locale:G,value:S(he)?he:null,referenceDate:S(he)?he:j(),onChange:ve,hour12:me,showSeconds:Q,hourStep:U,minuteStep:W,secondStep:X,shouldDisableTime:xe,labels:ce})]}),t(c,{size:le,children:[Z?e(a,{variant:"text",size:le,color:ae,density:"compact",onClick:()=>{ve(null),ge(!1)},children:ce.clear}):null,$?e(a,{variant:"text",size:le,color:ae,density:"compact",disabled:ke,onClick:()=>{ve(Ce),De(g(Ce))},children:ce.now}):null,e(a,{variant:"solid",size:le,color:ae,density:"compact",onClick:()=>ge(!1),children:ce.done})]})]})})});

package/dist/components/number-field/NumberField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaFieldSlot, NebaShortcuts, NebaSlots, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaLabelPlacement, NebaShortcuts, NebaSlots, NebaStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -94,11 +94,16 @@ export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPr
     incrementLabel?: string;
     /** Accessible name of the decrement button. */
     decrementLabel?: string;
+    /** The field's name, wired to the control by Base UI's Field. */
+    label?: React.ReactNode;
     /**
-     * Label above the control, wired to it by Base UI's Field. There is no
-     * floating variant on purpose: floating labels need a `transform`.
+     * Where the label is drawn: above the field, in a notch cut into its top
+     * edge, or inside it until the field is focused or filled. A `startIcon` or
+     * `split` steppers keep a `float` label in the notch, because they are where
+     * it would rest.
+     * @default 'top'
      */
-    label?: React.ReactNode;
+    labelPlacement?: NebaLabelPlacement;
     /** Helper text below the control. */
     description?: React.ReactNode;
     /** Error message below the control. Its presence also turns the field invalid. */

package/dist/components/number-field/NumberField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{NumberField as n}from"@base-ui/react/number-field";import{Field as l}from"@base-ui/react/field";import{numberMessages as r,useMessages as i}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as o}from"../../internal/icons.js";import{keyHandler as c}from"../../internal/keys.js";import{controlTextLeadingClasses as d,cx as m,disabledClasses as u,fieldFocusTransitionClasses as p,fieldHeightClasses as f,fieldReadOnlyClasses as b,fieldRestClasses as h,fieldRingClasses as g,gapClasses as x,hasContent as v,iconClasses as N,metaTextClasses as y,paddingXClasses as j,radiusClasses as w,stackGapClasses as k,surfaceSlots as _,transitionClasses as S}from"../../internal/styles.js";import{useStyleDefaults as V}from"../../internal/defaults.js";import{fieldLight as z,fieldSpotlightSlot as C,glowClasses as I}from"../../internal/glow.js";import{useFieldsetDisabled as O}from"../../internal/fieldset.js";const D=["group relative flex w-full items-center","[-webkit-tap-highlight-color:transparent]",S,p,g,N].join(" "),F=["relative inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","neba-hit-row","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-on-tint)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export const NumberField=/*@__PURE__*/a.forwardRef(function NumberField(a,p){const{variant:g="outline",size:N="md",color:S="primary",density:L="default",elevation:R=0,value:$,defaultValue:q,onValueChange:W,onValueCommitted:B,min:E,max:G,step:K,largeStep:A,smallStep:H,snapOnStep:J,wheel:M=!0,format:P,locale:Q,steppers:T="end",incrementLabel:U,decrementLabel:X,label:Y,description:Z,error:ee,invalid:te,startIcon:ae,endIcon:ne,fullWidth:le=!1,disabled:re,readOnly:ie=!1,required:se=!1,name:oe,placeholder:ce,id:de,className:me,classNames:ue,shortcuts:pe,style:fe,"aria-label":be,"aria-labelledby":he,...ge}=V(a,["size","density","variant","locale"]),xe=O(re),ve=!xe&&!ie,Ne=i(r,"string"==typeof Q?Q:void 0),ye=v(ee),je=te??ye,we=je?"danger":S,ke=j[L][N],_e={end:`${ke} pe-1`,split:"px-1",none:ke},Se=e(n.Decrement,{"aria-label":X??Ne.decrease,className:m(F,ue?.stepper),children:e(s,{})}),Ve=e(n.Increment,{"aria-label":U??Ne.increase,className:m(F,ue?.stepper),children:e(o,{})}),ze="none"!==T&&!ie;return t(l.Root,{disabled:xe,invalid:je,className:m("flex-col align-top",k[N],le?"flex w-full":"inline-flex",me??""),style:{..._(we,R),...ve?C:void 0,...fe},...ge,children:[Y?e(l.Label,{className:m(y[N],"font-medium",xe?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ue?.label),children:Y}):null,e(n.Root,{id:de,name:oe,className:"contents",value:$,defaultValue:q,onValueChange:e=>W?.(e),onValueCommitted:e=>B?.(e),min:E,max:G,step:K,largeStep:A,smallStep:H,snapOnStep:J,allowWheelScrub:M,format:P,locale:Q,disabled:xe,readOnly:ie,required:se,children:t(n.Group,{...z(ve),className:m(D,f[N],d[N],w[N],x[N],ze?_e[T]:ke,xe?u[g]:ie?b[g]:`${h[g]} ${I}`,xe?"":"cursor-text",ue?.shell),children:[ze&&"split"===T?Se:null,ae?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ae}):null,e(n.Input,{ref:p,"aria-label":be,"aria-labelledby":he,onKeyDown:c(pe),placeholder:ce,className:["neba-input min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===T&&ze?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",ue?.control].filter(Boolean).join(" ")}),ne?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ne}):null,ze&&"end"===T?t("span",{className:"flex shrink-0 items-center gap-0.5",style:{"--n-hit-gap":"0.125rem"},children:[Se,Ve]}):null,ze&&"split"===T?Ve:null]})}),Z?e(l.Description,{className:m(y[N],"text-(--neba-muted-fg)",ue?.description),children:Z}):null,e(l.Error,ye?{match:!0,className:m(y[N],"text-(--n-accent)",ue?.error),children:ee}:{className:m(y[N],"text-(--n-accent)",ue?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{NumberField as t}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{numberMessages as r,useMessages as i}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as o}from"../../internal/icons.js";import{keyHandler as c}from"../../internal/keys.js";import{FieldNotch as d,NotchFrame as m}from"../../internal/notch.js";import{controlTextLeadingClasses as u,cx as p,disabledClasses as b,fieldFocusTransitionClasses as f,fieldHeightClasses as h,fieldReadOnlyClasses as g,fieldRestClasses as x,fieldRingClasses as v,fieldSheetClasses as N,fieldSheetDisabledClasses as y,fieldSheetReadOnlyClasses as j,gapClasses as w,hasContent as k,iconClasses as _,metaTextClasses as S,paddingXClasses as C,radiusClasses as V,readOnlyFilterClasses as z,stackGapClasses as O,surfaceSlots as $,transitionClasses as I}from"../../internal/styles.js";import{useStyleDefaults as D}from"../../internal/defaults.js";import{fieldLight as F,fieldSpotlightSlot as L,glowClasses as R}from"../../internal/glow.js";import{useFieldsetDisabled as q}from"../../internal/fieldset.js";const P=["group relative flex w-full items-center","[-webkit-tap-highlight-color:transparent]",I,f,_].join(" "),W=["relative inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","neba-hit-row","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-on-tint)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export const NumberField=/*@__PURE__*/l.forwardRef(function NumberField(l,f){const{variant:_="outline",size:I="md",color:B="primary",density:E="default",elevation:G=0,value:K,defaultValue:A,onValueChange:H,onValueCommitted:J,min:M,max:Q,step:T,largeStep:U,smallStep:X,snapOnStep:Y,wheel:Z=!0,format:ee,locale:ae,steppers:le="end",incrementLabel:te,decrementLabel:ne,label:re,labelPlacement:ie="top",description:se,error:oe,invalid:ce,startIcon:de,endIcon:me,fullWidth:ue=!1,disabled:pe,readOnly:be=!1,required:fe=!1,name:he,placeholder:ge,id:xe,className:ve,classNames:Ne,shortcuts:ye,style:je,"aria-label":we,"aria-labelledby":ke,..._e}=D(l,["size","density","variant","locale","labelPlacement"]),Se=q(pe),Ce=!Se&&!be,Ve=i(r,"string"==typeof ae?ae:void 0),ze=k(oe),Oe=ce??ze,$e=Oe?"danger":B,Ie=C[E][I],De={end:`${Ie} pe-1`,split:"px-1",none:Ie},Fe=e(t.Decrement,{"aria-label":ne??Ve.decrease,className:p(W,Ne?.stepper),children:e(s,{})}),Le=e(t.Increment,{"aria-label":te??Ve.increase,className:p(W,Ne?.stepper),children:e(o,{})}),Re="none"!==le&&!be,qe="top"!==ie&&k(re),Pe=qe&&"float"===ie&&!k(de)&&!(Re&&"split"===le),We=a(t.Group,{...F(Ce),className:p(P,h[I],u[I],V[I],w[I],Re?De[le]:Ie,qe?"":v,Se?(qe?y:b)[_]:be?qe?`${j[_]} ${z}`:g[_]:`${(qe?N:x)[_]} ${R}`,Se?"":"cursor-text",Ne?.shell),children:[Re&&"split"===le?Fe:null,de?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:de}):null,e(t.Input,{ref:f,"aria-label":we,"aria-labelledby":ke,onKeyDown:c(ye),placeholder:Pe?ge||" ":ge,className:["neba-input min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===le&&Re?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",Pe?"neba-float-control":"",Ne?.control].filter(Boolean).join(" ")}),me?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:me}):null,Re&&"end"===le?a("span",{className:"flex shrink-0 items-center gap-0.5",style:{"--n-hit-gap":"0.125rem"},children:[Fe,Le]}):null,Re&&"split"===le?Le:null,qe?e(d,{label:re,variant:_,disabled:Se,readOnly:be,rests:Pe,labelClassName:Ne?.label}):null]});return a(n.Root,{disabled:Se,invalid:Oe,className:p("flex-col align-top",O[I],ue?"flex w-full":"inline-flex",ve??""),style:{...$($e,G),...Ce?L:void 0,...je},..._e,children:[re&&!qe?e(n.Label,{className:p(S[I],"font-medium",Se?"text-(--neba-disabled-fg)":"text-(--neba-fg)",Ne?.label),children:re}):null,e(t.Root,{id:xe,name:he,className:"contents",value:K,defaultValue:A,onValueChange:e=>H?.(e),onValueCommitted:e=>J?.(e),min:M,max:Q,step:T,largeStep:U,smallStep:X,snapOnStep:Y,allowWheelScrub:Z,format:ee,locale:ae,disabled:Se,readOnly:be,required:fe,children:qe?e(m,{label:re,size:I,density:E,variant:_,labelClassName:Ne?.label,children:We}):We}),se?e(n.Description,{className:p(S[I],"text-(--neba-muted-fg)",Ne?.description),children:se}):null,e(n.Error,ze?{match:!0,className:p(S[I],"text-(--n-accent)",Ne?.error),children:oe}:{className:p(S[I],"text-(--n-accent)",Ne?.error)})]})});

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

@@ -19,8 +19,8 @@ export interface NebaProviderProps {
     /**
      * 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:
+     * `size`, `density`, `variant`, `locale` and `labelPlacement` — 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;

package/dist/components/provider/NebaProvider.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{DirectionProvider as r,useDirection as o}from"@base-ui/react/direction-provider";import{DefaultsContext as l}from"../../internal/defaults.js";import{useHydrated as n,useMediaQuery as c}from"../../internal/media.js";const s=/*@__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(${a(t)})||${a(r)};if(s==='system'){s=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}var d=document.documentElement;d.setAttribute('data-theme',s);d.style.colorScheme=s}catch(e){}})()`}function a(e){return JSON.stringify(e).replace(/</g,"\\u003c")}export function NebaProvider({children:a,defaults:i,colorScheme:u,defaultColorScheme:m="system",onColorSchemeChange:d,storageKey:h="neba-color-scheme",colorSchemeElement:f,direction:S}){const g=n(),y=t.useContext(l),v=t.useContext(s),p=o(),[C,b]=t.useState(null),x=t.useMemo(()=>g?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}}(h):null,[g,h]),k=u??C??x??m,E=c("(prefers-color-scheme: dark)"),j="system"===k?E?"dark":"light":k,M=t.useCallback(e=>{if(void 0===u&&b(e),!1!==h)try{localStorage.setItem(h,e)}catch{}d?.(e)},[u,h,d]);t.useEffect(()=>{if(!g)return;const e=f?f():null===v?document.documentElement:null;e&&(e.setAttribute("data-theme",j),e.style.colorScheme=j)},[g,j,f,v]),t.useEffect(()=>{S&&document.documentElement.setAttribute("dir",S)},[S]);const P=t.useMemo(()=>({colorScheme:k,resolvedColorScheme:j,setColorScheme:M,toggleColorScheme:()=>M("dark"===j?"light":"dark")}),[k,j,M]),z=i?.size??y?.size,A=i?.density??y?.density,I=i?.variant??y?.variant,N=i?.locale??y?.locale,w=null!=i||null!==y,K=t.useMemo(()=>w?{size:z,density:A,variant:I,locale:N}:null,[w,z,A,I,N]);return e(l.Provider,{value:K,children:e(s.Provider,{value:P,children:e(r,{direction:S??p,children:a})})})}export function useColorScheme(){const e=t.useContext(s);if(!e)throw new Error("neba: useColorScheme() needs a <NebaProvider> above it.");return e}
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{DirectionProvider as r,useDirection as o}from"@base-ui/react/direction-provider";import{DefaultsContext as l}from"../../internal/defaults.js";import{useHydrated as n,useMediaQuery as c}from"../../internal/media.js";const a=/*@__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(${s(t)})||${s(r)};if(s==='system'){s=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}var d=document.documentElement;d.setAttribute('data-theme',s);d.style.colorScheme=s}catch(e){}})()`}function s(e){return JSON.stringify(e).replace(/</g,"\\u003c")}export function NebaProvider({children:s,defaults:i,colorScheme:m,defaultColorScheme:u="system",onColorSchemeChange:d,storageKey:h="neba-color-scheme",colorSchemeElement:f,direction:S}){const g=n(),y=t.useContext(l),v=t.useContext(a),b=o(),[p,C]=t.useState(null),x=t.useMemo(()=>g?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}}(h):null,[g,h]),k=m??p??x??u,E=c("(prefers-color-scheme: dark)"),P="system"===k?E?"dark":"light":k,j=t.useCallback(e=>{if(void 0===m&&C(e),!1!==h)try{localStorage.setItem(h,e)}catch{}d?.(e)},[m,h,d]);t.useEffect(()=>{if(!g)return;const e=f?f():null===v?document.documentElement:null;e&&(e.setAttribute("data-theme",P),e.style.colorScheme=P)},[g,P,f,v]),t.useEffect(()=>{S&&document.documentElement.setAttribute("dir",S)},[S]);const M=t.useMemo(()=>({colorScheme:k,resolvedColorScheme:P,setColorScheme:j,toggleColorScheme:()=>j("dark"===P?"light":"dark")}),[k,P,j]),z=i?.size??y?.size,A=i?.density??y?.density,I=i?.variant??y?.variant,N=i?.locale??y?.locale,w=i?.labelPlacement??y?.labelPlacement,K=null!=i||null!==y,$=t.useMemo(()=>K?{size:z,density:A,variant:I,locale:N,labelPlacement:w}:null,[K,z,A,I,N,w]);return e(l.Provider,{value:$,children:e(a.Provider,{value:M,children:e(r,{direction:S??b,children:s})})})}export function useColorScheme(){const e=t.useContext(a);if(!e)throw new Error("neba: useColorScheme() needs a <NebaProvider> above it.");return e}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaLabelPlacement, NebaSlots, NebaStyleProps } from '../../types.js';
 /**
  * What a Select's value may be.
  *
@@ -60,8 +60,15 @@ export interface SelectProps extends NebaStyleProps, Omit<React.ComponentPropsWi
      * @default 0
      */
     elevation?: NebaElevation;
-    /** Label above the trigger, wired to it by Base UI's Field. */
+    /** The select's name, wired to the trigger by Base UI's Field. */
     label?: React.ReactNode;
+    /**
+     * Where the label is drawn: above the trigger, in a notch cut into its top
+     * edge, or inside it until something is chosen or the list is open. A
+     * `startIcon` keeps a `float` label in the notch.
+     * @default 'top'
+     */
+    labelPlacement?: NebaLabelPlacement;
     /** Helper text below the trigger. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the select invalid. */

package/dist/components/select/Select.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Select as t}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{controlTextLeadingClasses as o,cx as d,disabledClasses as c,fieldFocusTransitionClasses as m,fieldHeightClasses as u,fieldReadOnlyClasses as p,fieldRestClasses as f,fieldRingClasses as b,gapClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as N,popupFadeClasses as j,radiusClasses as y,stackGapClasses as w,surfaceClasses as I,surfaceSlots as S,transitionClasses as $}from"../../internal/styles.js";import{useStyleDefaults as z}from"../../internal/defaults.js";import{fieldSpotlightSlot as V,glowClasses as k,trackPointer as M}from"../../internal/glow.js";import{useFieldsetDisabled as P}from"../../internal/fieldset.js";const O=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",$,m,b,v].join(" "),R=[I,"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]",j].join(" "),T=["py-1.5 pe-2 ps-7 font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),q=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",$,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-on-tint)","data-[selected]:text-(--n-on-tint) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=/*@__PURE__*/l.forwardRef(function Select(m,b){const{variant:v="outline",size:j="md",color:I="primary",density:$="default",elevation:C=0,items:G,value:L,defaultValue:W,onValueChange:_,placeholder:D,label:E,description:A,error:B,invalid:F,startIcon:H,fullWidth:J=!1,disabled:K,readOnly:Q=!1,required:U=!1,name:X,id:Y,className:Z,classNames:ee,style:ae,"aria-label":le,"aria-labelledby":te,...ne}=z(m,["size","density","variant"]),re=P(K),ie=!re&&!Q,se=null!=B&&!1!==B&&""!==B,oe=F??se,de=oe?"danger":I,ce=l.useMemo(()=>G.map(e=>({label:e.label??String(e.value),value:e.value})),[G]),me=l.useMemo(()=>function(e){const a=[];for(const l of e){const e=a.at(-1);e&&e.label===l.group?e.items.push(l):a.push({label:l.group,items:[l]})}return a}(G),[G]),ue=l.useMemo(()=>[...G.map(e=>e.label??String(e.value)),...g(D)?[D]:[]],[G,D]);return a(n.Root,{disabled:re,invalid:oe,className:d("flex-col align-top",w[j],J?"flex w-full":"inline-flex",Z??""),style:{...S(de,C),...ie?V:void 0,...ae},...ne,children:[E?e(n.Label,{className:d(x[j],"font-medium",re?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ee?.label),children:E}):null,a(t.Root,{id:Y,name:X,items:ce,value:L,defaultValue:W,onValueChange:e=>_?.(e),disabled:re,readOnly:Q,required:U,children:[a(t.Trigger,{ref:b,onPointerMove:M(void 0,ie),"aria-label":le,"aria-labelledby":te,className:d(O,u[j],o[j],y[j],h[j],N[$][j],re?c[v]:Q?`${p[v]} cursor-default`:`${f[v]} ${k}`,ee?.control),children:[H?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:H}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(t.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:D}),e(s,{samples:ue})]}),e(t.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(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(t.Popup,{className:d(R,y[j],o[j],ee?.popup),style:S(de,3),children:me.map((l,n)=>{const i=l.items.map(l=>a(t.Item,{value:l.value,disabled:l.disabled,className:d(q,ee?.item),children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(t.ItemText,{className:"truncate",children:l.label??String(l.value)})]},String(l.value)));return void 0===l.label?i:a(t.Group,{children:[e(t.GroupLabel,{className:`${T} ${x[j]}`,children:l.label}),i]},`${l.label}-${n}`)})})})})]}),A?e(n.Description,{className:d(x[j],"text-(--neba-muted-fg)",ee?.description),children:A}):null,e(n.Error,se?{match:!0,className:d(x[j],"text-(--n-accent)",ee?.error),children:B}:{className:d(x[j],"text-(--n-accent)",ee?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Select as t}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{CheckIcon as n,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as s}from"../../internal/sizer.js";import{controlTextLeadingClasses as o,cx as d,disabledClasses as c,fieldFocusTransitionClasses as m,fieldHeightClasses as u,fieldReadOnlyClasses as p,fieldRestClasses as b,fieldRingClasses as f,fieldSheetClasses as h,fieldSheetDisabledClasses as g,fieldSheetReadOnlyClasses as v,gapClasses as x,hasContent as N,iconClasses as j,metaTextClasses as y,paddingXClasses as w,popupFadeClasses as $,radiusClasses as z,readOnlyFilterClasses as I,stackGapClasses as S,surfaceClasses as P,surfaceSlots as V,transitionClasses as k}from"../../internal/styles.js";import{useStyleDefaults as C}from"../../internal/defaults.js";import{FieldNotch as M,NotchFrame as O}from"../../internal/notch.js";import{fieldSpotlightSlot as R,glowClasses as T,trackPointer as q}from"../../internal/glow.js";import{useFieldsetDisabled as G}from"../../internal/fieldset.js";const L=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",k,m,j].join(" "),W=[P,"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(" "),_=["py-1.5 pe-2 ps-7 font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),D=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",k,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-on-tint)","data-[selected]:text-(--n-on-tint) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=/*@__PURE__*/l.forwardRef(function Select(m,j){const{variant:$="outline",size:P="md",color:k="primary",density:E="default",elevation:A=0,items:B,value:F,defaultValue:H,onValueChange:J,placeholder:K,label:Q,labelPlacement:U="top",description:X,error:Y,invalid:Z,startIcon:ee,fullWidth:ae=!1,disabled:le,readOnly:te=!1,required:re=!1,name:ne,id:ie,className:se,classNames:oe,style:de,"aria-label":ce,"aria-labelledby":me,...ue}=C(m,["size","density","variant","labelPlacement"]),pe=G(le),be=!pe&&!te,fe=null!=Y&&!1!==Y&&""!==Y,he=Z??fe,ge=he?"danger":k,ve=l.useMemo(()=>B.map(e=>({label:e.label??String(e.value),value:e.value})),[B]),xe=l.useMemo(()=>function(e){const a=[];for(const l of e){const e=a.at(-1);e&&e.label===l.group?e.items.push(l):a.push({label:l.group,items:[l]})}return a}(B),[B]),Ne="top"!==U&&N(Q),je=Ne&&"float"===U&&!N(ee),ye=l.useMemo(()=>[...B.map(e=>e.label??String(e.value)),...N(K)?[K]:[],...je?[Q]:[]],[B,K,je,Q]),we=a(t.Trigger,{ref:j,onPointerMove:q(void 0,be),"aria-label":ce,"aria-labelledby":me,className:d(L,u[P],o[P],z[P],x[P],w[E][P],Ne?"":f,pe?(Ne?g:c)[$]:te?`${(Ne?v:p)[$]} cursor-default`:`${(Ne?h:b)[$]} ${T}`,je?"neba-float-control":"",oe?.control),children:[ee?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ee}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(t.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:K}),e(s,{samples:ye})]}),e(t.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,{})})]});return a(r.Root,{disabled:pe,invalid:he,className:d("flex-col align-top",S[P],ae?"flex w-full":"inline-flex",se??""),style:{...V(ge,A),...be?R:void 0,...de},...ue,children:[Q&&!Ne?e(r.Label,{className:d(y[P],"font-medium",pe?"text-(--neba-disabled-fg)":"text-(--neba-fg)",oe?.label),children:Q}):null,a(t.Root,{id:ie,name:ne,items:ve,value:F,defaultValue:H,onValueChange:e=>J?.(e),disabled:pe,readOnly:te,required:re,children:[Ne?a(O,{label:Q,size:P,density:E,variant:$,labelClassName:oe?.label,className:d(z[P],pe?"cursor-not-allowed":te?`cursor-default ${I}`:"cursor-pointer"),children:[we,e(M,{label:Q,variant:$,disabled:pe,readOnly:te,rests:je,beside:!0,labelClassName:oe?.label})]}):we,e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(t.Popup,{className:d(W,z[P],o[P],oe?.popup),style:V(ge,3),children:xe.map((l,r)=>{const i=l.items.map(l=>a(t.Item,{value:l.value,disabled:l.disabled,className:d(D,oe?.item),children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(n,{})}),e(t.ItemText,{className:"truncate",children:l.label??String(l.value)})]},String(l.value)));return void 0===l.label?i:a(t.Group,{children:[e(t.GroupLabel,{className:`${_} ${y[P]}`,children:l.label}),i]},`${l.label}-${r}`)})})})})]}),X?e(r.Description,{className:d(y[P],"text-(--neba-muted-fg)",oe?.description),children:X}):null,e(r.Error,fe?{match:!0,className:d(y[P],"text-(--n-accent)",oe?.error),children:Y}:{className:d(y[P],"text-(--n-accent)",oe?.error)})]})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaFieldSlot, NebaShortcuts, NebaSlots, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaLabelPlacement, NebaShortcuts, 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';
 /**
@@ -39,12 +39,20 @@ export interface TextFieldProps extends NebaStyleProps, NativeControlProps {
      * @default 'vertical'
      */
     resize?: TextFieldResize;
+    /** The field's name, wired to the control by Base UI's Field. */
+    label?: React.ReactNode;
     /**
-     * Label above the control, wired to it by Base UI's Field. There is no
-     * floating variant on purpose: floating labels need a `transform`, and
-     * controls in this library never transform.
+     * Where the label is drawn: above the field, in a notch cut into its top
+     * edge, or inside it where the placeholder would be until the field is
+     * focused or filled, and in the notch from then on.
+     *
+     * A floating label travels on `top` and changes size on `font-size` rather
+     * than on a `transform`, so no frame of it is a scaled picture of the word.
+     * With a `startIcon` it stays in the notch, because the icon is where it
+     * would rest.
+     * @default 'top'
      */
-    label?: React.ReactNode;
+    labelPlacement?: NebaLabelPlacement;
     /** Helper text below the control. */
     description?: React.ReactNode;
     /** Error message below the control. Its presence also turns the field invalid. */

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 l}from"@base-ui/react/input";import{fieldLight as i,fieldSpotlightSlot as s,glowClasses as a}from"../../internal/glow.js";import{SpinnerIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as c,cx as m,disabledClasses as d,fieldFocusTransitionClasses as u,fieldHeightClasses as p,fieldReadOnlyClasses as f,fieldRestClasses as x,fieldRingClasses as h,gapClasses as b,iconClasses as g,metaTextClasses as y,paddingXClasses as $,radiusClasses as w,stackGapClasses as v,surfaceSlots as N,transitionClasses as j}from"../../internal/styles.js";import{keyHandler as z}from"../../internal/keys.js";import{useStyleDefaults as k}from"../../internal/defaults.js";import{useFieldsetDisabled as D}from"../../internal/fieldset.js";const R={xs:`${b.xs} ${w.xs} ${c.xs}`,sm:`${b.sm} ${w.sm} ${c.sm}`,md:`${b.md} ${w.md} ${c.md}`,lg:`${b.lg} ${w.lg} ${c.lg}`,xl:`${b.xl} ${w.xl} ${c.xl}`},T={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]"},F={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},I=["group relative flex w-full","[-webkit-tap-highlight-color:transparent]",j,u,h,g].join(" "),K=x,O=f;export const TextField=/*@__PURE__*/n.forwardRef(function TextField(c,u){const{variant:f="outline",size:x="md",color:h="primary",density:b="default",elevation:g=0,multiline:w=!1,rows:j=3,resize:C="vertical",label:E,description:L,error:P,invalid:W,startIcon:q,endIcon:A,loading:B=!1,fullWidth:G=!1,classNames:H,shortcuts:J,onKeyDown:M,readOnly:Q=!1,disabled:S,type:U="text",className:V,style:X,...Y}=k(c,["size","density","variant"]),Z=D(S),_=!Z&&!Q,ee=null!=P&&!1!==P&&""!==P,te=W??ee,ne=te?"danger":h,re=n.useRef(null),le=n.useCallback(e=>{re.current=e,"function"==typeof u?u(e):u&&(u.current=e)},[u]),ie=m(I,R[x],w?`${T[x]} items-start`:`${p[x]} items-center`,$[b][x],Z?d[f]:Q?O[f]:`${K[f]} ${a}`,Z?"":"cursor-text",H?.shell),se=m("neba-input 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",w?`block ${F[C]}`:"self-stretch",H?.control),ae="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:Z,invalid:te,className:m("flex-col align-top",v[x],G?"flex w-full":"inline-flex",V??""),style:{...N(ne,g),..._?s:void 0,...X},children:[E?e(r.Label,{className:m(y[x],"font-medium",Z?"text-(--neba-disabled-fg)":"text-(--neba-fg)",H?.label),children:E}):null,t("span",{className:ie,...i(_),onPointerDown:e=>{e.target!==e.currentTarget||Z||(e.preventDefault(),re.current?.focus())},children:[q?e("span",{className:ae,children:q}):null,e(l,{ref:le,className:se,disabled:Z,readOnly:Q,"aria-busy":B||void 0,"data-loading":B||void 0,...w?{render:e("textarea",{rows:j})}:{type:U},...Y,onKeyDown:z(J,M)}),B?e("span",{className:ae,children:e(o,{})}):A?e("span",{className:ae,children:A}):null]}),L?e(r.Description,{className:m(y[x],"text-(--neba-muted-fg)",H?.description),children:L}):null,e(r.Error,ee?{match:!0,className:m(y[x],"text-(--n-accent)",H?.error),children:P}:{className:m(y[x],"text-(--n-accent)",H?.error)})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{Input as r}from"@base-ui/react/input";import{fieldLight as a,fieldSpotlightSlot as i,glowClasses as s}from"../../internal/glow.js";import{SpinnerIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as c,cx as m,disabledClasses as d,fieldFocusTransitionClasses as p,fieldHeightClasses as x,fieldReadOnlyClasses as f,fieldRestClasses as u,fieldRingClasses as b,fieldSheetClasses as h,fieldSheetDisabledClasses as g,fieldSheetReadOnlyClasses as y,gapClasses as $,hasContent as v,iconClasses as N,metaTextClasses as w,paddingXClasses as j,radiusClasses as z,readOnlyFilterClasses as k,stackGapClasses as D,surfaceSlots as C,transitionClasses as O}from"../../internal/styles.js";import{keyHandler as P}from"../../internal/keys.js";import{FieldNotch as R,NotchFrame as T}from"../../internal/notch.js";import{useStyleDefaults as F}from"../../internal/defaults.js";import{useFieldsetDisabled as I}from"../../internal/fieldset.js";const K={xs:`${$.xs} ${z.xs} ${c.xs}`,sm:`${$.sm} ${z.sm} ${c.sm}`,md:`${$.md} ${z.md} ${c.md}`,lg:`${$.lg} ${z.lg} ${c.lg}`,xl:`${$.xl} ${z.xl} ${c.xl}`},L={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]"},E={xs:"3px",sm:"4px",md:"5px",lg:"8px",xl:"10px"},W={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},q=["group relative flex w-full","[-webkit-tap-highlight-color:transparent]",O,p,N].join(" "),A=u,B=f;export const TextField=/*@__PURE__*/t.forwardRef(function TextField(c,p){const{variant:f="outline",size:u="md",color:$="primary",density:N="default",elevation:z=0,multiline:O=!1,rows:G=3,resize:H="vertical",label:J,labelPlacement:M="top",description:Q,error:S,invalid:U,startIcon:V,endIcon:X,loading:Y=!1,fullWidth:Z=!1,classNames:_,shortcuts:ee,onKeyDown:le,readOnly:te=!1,disabled:ne,type:re="text",placeholder:ae,className:ie,style:se,...oe}=F(c,["size","density","variant","labelPlacement"]),ce=I(ne),me=!ce&&!te,de=null!=S&&!1!==S&&""!==S,pe=U??de,xe=pe?"danger":$,fe="top"!==M&&v(J),ue=fe&&"float"===M&&!v(V),be=t.useRef(null),he=t.useCallback(e=>{be.current=e,"function"==typeof p?p(e):p&&(p.current=e)},[p]),ge=m(q,K[u],O?`${L[u]} items-start`:`${x[u]} items-center`,j[N][u],fe?"":b,ce?(fe?g:d)[f]:te?fe?`${y[f]} ${k}`:B[f]:`${(fe?h:A)[f]} ${s}`,ce?"":"cursor-text",_?.shell),ye=m("neba-input 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",O?`block ${W[H]}`:"self-stretch",ue?"neba-float-control":"",_?.control),$e="inline-flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)",ve=l("span",{className:ge,...a(me),onPointerDown:e=>{e.target!==e.currentTarget||ce||(e.preventDefault(),be.current?.focus())},children:[V?e("span",{className:$e,children:V}):null,e(r,{ref:he,className:ye,disabled:ce,readOnly:te,"aria-busy":Y||void 0,"data-loading":Y||void 0,placeholder:ue?ae||" ":ae,...O?{render:e("textarea",{rows:G})}:{type:re},...oe,onKeyDown:P(ee,le)}),Y?e("span",{className:$e,children:e(o,{})}):X?e("span",{className:$e,children:X}):null,fe?e(R,{label:J,variant:f,disabled:ce,readOnly:te,rests:ue,labelClassName:_?.label}):null]});return l(n.Root,{disabled:ce,invalid:pe,className:m("flex-col align-top",D[u],Z?"flex w-full":"inline-flex",ie??""),style:{...C(xe,z),...me?i:void 0,...se},children:[J&&!fe?e(n.Label,{className:m(w[u],"font-medium",ce?"text-(--neba-disabled-fg)":"text-(--neba-fg)",_?.label),children:J}):null,fe?e(T,{label:J,size:u,density:N,variant:f,firstLine:O?E[u]:void 0,labelClassName:_?.label,children:ve}):ve,Q?e(n.Description,{className:m(w[u],"text-(--neba-muted-fg)",_?.description),children:Q}):null,e(n.Error,de?{match:!0,className:m(w[u],"text-(--n-accent)",_?.error),children:S}:{className:m(w[u],"text-(--n-accent)",_?.error)})]})});

package/dist/components/time-picker/TimePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Button as t}from"../button/Button.js";import{TimeGrid as l,usePickerLabels as s}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as r}from"../../internal/picker.js";import{displaySamples as c,formatDate as u,clampDate as d,isHour12 as m,isValidDate as p,secondsOfDay as h,startOfDay as f,timeUnitSpan as g,toISOTime as S,withPlaceholder as y,withTime as b}from"../../internal/date.js";import{cx as v}from"../../internal/styles.js";import{useStyleDefaults as j}from"../../internal/defaults.js";export const TimePicker=/*@__PURE__*/o.forwardRef(function TimePicker(x,C){const{value:w,defaultValue:z,onValueChange:k,open:D,defaultOpen:O,onOpenChange:T,referenceDate:M,minTime:V,maxTime:B,shouldDisableTime:H,hour12:I,showSeconds:N=!1,hourStep:P=1,minuteStep:R=1,secondStep:F=1,locale:L,format:q,placeholder:A,clearable:E=!1,showNowButton:G=!0,closeOnSelect:J=!1,labels:K,name:Q,size:U="md",color:W="primary",density:X="default",readOnly:Y=!1,disabled:Z=!1,startIcon:$,..._}=j(x,["size","density","variant","locale"]),ee=s(K,L),ne=I??m(L),[oe,te]=o.useState(z??null),le=void 0!==w?w:oe,[se,ae]=o.useState(O??!1),ie=D??se,[re]=o.useState(()=>M??f(new Date)),ce=e=>{e&&(Y||Z)||(void 0===D&&ae(e),T?.(e))},ue=(e,n)=>p(n)?b(e,{hours:n.getHours(),minutes:n.getMinutes(),seconds:n.getSeconds()}):null,de=e=>{const n=null===e?null:d(e,ue(e,V),ue(e,B));void 0===w&&te(n),k?.(n)},me=o.useCallback((e,n)=>{const[o,t]=g(n,e);return!!(p(V)&&t<h(V))||(!!(p(B)&&o>h(B))||(H?.(e,n)??!1))},[V,B,H]),pe=o.useMemo(()=>q??{hour:"numeric",minute:"2-digit",...N?{second:"2-digit"}:{}},[q,N]),he=new Date,fe=b(M??re,{hours:he.getHours(),minutes:he.getMinutes(),seconds:N?he.getSeconds():0}),ge=G||E||!J,Se=o.useMemo(()=>y(c(L,pe),A),[L,pe,A]);return e(r,{..._,size:U,color:W,density:X,readOnly:Y,disabled:Z,triggerRef:C,startIcon:$??e(a,{}),display:p(le)?u(le,L,pe):A??"",samples:Se,empty:!p(le),clearable:E,onClear:()=>de(null),open:ie,onOpenChange:ce,clearLabel:ee.clear,hiddenValues:Q?[{name:Q,value:p(le)?S(le,N):""}]:void 0,children:n("div",{className:v("flex flex-col",ge&&"gap-1.5"),children:[e(l,{size:U,density:X,locale:L,value:p(le)?le:null,referenceDate:M??re,onChange:e=>{de(e),J&&ce(!1)},hour12:ne,showSeconds:N,hourStep:P,minuteStep:R,secondStep:F,shouldDisableTime:me,labels:ee,autoFocus:!0}),ge?n(i,{size:U,children:[E?e(t,{variant:"text",size:U,color:W,density:"compact",onClick:()=>{de(null),ce(!1)},children:ee.clear}):null,G?e(t,{variant:"text",size:U,color:W,density:"compact",disabled:me(fe,"second"),onClick:()=>{de(fe),ce(!1)},children:ee.now}):null,J?null:e(t,{variant:"solid",size:U,color:W,density:"compact",onClick:()=>ce(!1),children:ee.done})]}):null]})})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{Button as t}from"../button/Button.js";import{TimeGrid as o,usePickerLabels as s}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as r}from"../../internal/picker.js";import{displaySamples as c,formatDate as u,clampDate as d,isHour12 as m,isValidDate as p,secondsOfDay as h,startOfDay as f,timeUnitSpan as g,toISOTime as S,withPlaceholder as b,withTime as y}from"../../internal/date.js";import{cx as v}from"../../internal/styles.js";import{useStyleDefaults as j}from"../../internal/defaults.js";export const TimePicker=/*@__PURE__*/l.forwardRef(function TimePicker(x,C){const{value:w,defaultValue:z,onValueChange:k,open:D,defaultOpen:O,onOpenChange:T,referenceDate:M,minTime:P,maxTime:V,shouldDisableTime:B,hour12:H,showSeconds:I=!1,hourStep:N=1,minuteStep:R=1,secondStep:F=1,locale:L,format:q,placeholder:A,clearable:E=!1,showNowButton:G=!0,closeOnSelect:J=!1,labels:K,name:Q,size:U="md",color:W="primary",density:X="default",readOnly:Y=!1,disabled:Z=!1,startIcon:$,..._}=j(x,["size","density","variant","locale","labelPlacement"]),ee=s(K,L),ne=H??m(L),[le,te]=l.useState(z??null),oe=void 0!==w?w:le,[se,ae]=l.useState(O??!1),ie=D??se,[re]=l.useState(()=>M??f(new Date)),ce=e=>{e&&(Y||Z)||(void 0===D&&ae(e),T?.(e))},ue=(e,n)=>p(n)?y(e,{hours:n.getHours(),minutes:n.getMinutes(),seconds:n.getSeconds()}):null,de=e=>{const n=null===e?null:d(e,ue(e,P),ue(e,V));void 0===w&&te(n),k?.(n)},me=l.useCallback((e,n)=>{const[l,t]=g(n,e);return!!(p(P)&&t<h(P))||(!!(p(V)&&l>h(V))||(B?.(e,n)??!1))},[P,V,B]),pe=l.useMemo(()=>q??{hour:"numeric",minute:"2-digit",...I?{second:"2-digit"}:{}},[q,I]),he=new Date,fe=y(M??re,{hours:he.getHours(),minutes:he.getMinutes(),seconds:I?he.getSeconds():0}),ge=G||E||!J,Se=l.useMemo(()=>b(c(L,pe),A),[L,pe,A]);return e(r,{..._,size:U,color:W,density:X,readOnly:Y,disabled:Z,triggerRef:C,startIcon:$??e(a,{}),display:p(oe)?u(oe,L,pe):A??"",samples:Se,empty:!p(oe),clearable:E,onClear:()=>de(null),open:ie,onOpenChange:ce,clearLabel:ee.clear,hiddenValues:Q?[{name:Q,value:p(oe)?S(oe,I):""}]:void 0,children:n("div",{className:v("flex flex-col",ge&&"gap-1.5"),children:[e(o,{size:U,density:X,locale:L,value:p(oe)?oe:null,referenceDate:M??re,onChange:e=>{de(e),J&&ce(!1)},hour12:ne,showSeconds:I,hourStep:N,minuteStep:R,secondStep:F,shouldDisableTime:me,labels:ee,autoFocus:!0}),ge?n(i,{size:U,children:[E?e(t,{variant:"text",size:U,color:W,density:"compact",onClick:()=>{de(null),ce(!1)},children:ee.clear}):null,G?e(t,{variant:"text",size:U,color:W,density:"compact",disabled:me(fe,"second"),onClick:()=>{de(fe),ce(!1)},children:ee.now}):null,J?null:e(t,{variant:"solid",size:U,color:W,density:"compact",onClick:()=>ce(!1),children:ee.done})]}):null]})})});

package/dist/components/tree-select/TreeSelect.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{TreeItem as n,TreeView as r}from"../tree-view/TreeView.js";import{PickerShell as t}from"../../internal/picker.js";import{searchHaystack as o,searchText as i}from"../../internal/search.js";import{actionMessages as s,commandMessages as c,comboboxMessages as d,useMessages as u}from"../../internal/i18n.js";import{useStyleDefaults as p}from"../../internal/defaults.js";function h(e,l=new Map){for(const a of e)l.set(a.value,a),a.children&&h(a.children,l);return l}function m(e,l=new Map){for(const a of e)l.set(a,o([a.searchLabel??("string"==typeof a.label?a.label:String(a.value))])),a.children&&m(a.children,l);return l}function f(e,l,a){if(""===l)return e;const n=[];for(const r of e){const e=r.children?f(r.children,l,a):void 0,t=(a.get(r)??"").includes(l);(t||e&&e.length>0)&&n.push({...r,children:t?r.children:e})}return n}function g(e,l=[]){for(const a of e)a.children&&a.children.length>0&&(l.push(a.value),g(a.children,l));return l}export const TreeSelect=/*@__PURE__*/a.forwardRef(function TreeSelect(o,b){const{items:v=[],value:x,defaultValue:y,onValueChange:S,multiple:w=!1,selectableBranches:C=!1,defaultExpanded:j,expanded:N,onExpandedChange:M,open:O,defaultOpen:z,onOpenChange:T,placeholder:V,clearable:E=!1,clearLabel:L,closeOnSelect:k,searchable:A=!1,searchPlaceholder:I,locale:R,format:B,name:P,size:$="md",color:q="primary",readOnly:D=!1,disabled:F=!1,classNames:G,...H}=p(o,["size","locale"]),J=u(d,R),K=u(c,R),Q=u(s,R),U=e=>null==e?[]:Array.isArray(e)?e:[e],[W,X]=a.useState(()=>U(y)),Y=void 0!==x?U(x):W,[Z,_]=a.useState(z??!1),ee=O??Z,[le,ae]=a.useState(""),ne=a.useMemo(()=>h(v),[v]),re=a.useMemo(()=>m(v),[v]),te=i(le),oe=a.useMemo(()=>f(v,te,re),[v,te,re]),ie=a.useMemo(()=>""===te?void 0:g(oe),[te,oe]),[se,ce]=a.useState(()=>j??[]),de=ie??N??se,ue=e=>{e&&(D||F)||(void 0===O&&_(e),e||ae(""),T?.(e))},pe=e=>{void 0===x&&X(e),S?.(e)},he=e=>e.selectable??(!(e.children&&e.children.length>0)||C),me=Y.map(e=>ne.get(e)).filter(e=>void 0!==e),fe=0===me.length?V??"":B?B(me):me.map(e=>e.label).reduce((e,l,a)=>0===a?[l]:[...e,", ",l],[]),ge=l=>l.map(l=>e(n,{value:l.value,label:l.label,startIcon:l.startIcon,disabled:l.disabled,selectable:he(l),className:G?.item,children:l.children?ge(l.children):null},l.value));return e(t,{...H,size:$,color:q,readOnly:D,disabled:F,triggerRef:b,display:fe,empty:0===me.length,clearable:E,onClear:()=>pe([]),open:ee,onOpenChange:ue,clearLabel:L??Q.clear,popupClassName:G?.popup,hiddenValues:P?Y.map(e=>({name:P,value:String(e)})):void 0,children:l("div",{className:"flex max-h-80 w-64 flex-col gap-2 overflow-hidden",children:[A?e("input",{type:"text",value:le,placeholder:I??K.search,"aria-label":I??K.search,onChange:e=>ae(e.currentTarget.value),className:"neba-input w-full shrink-0 bg-transparent px-1 py-1 [font:inherit] text-(--neba-fg) [outline:none] placeholder:text-(--neba-muted-fg)"}):null,e("div",{className:"min-h-0 flex-1 overflow-auto",children:0===oe.length?e("p",{className:`px-1 py-2 text-(--neba-muted-fg) ${G?.empty??""}`,children:J.empty}):e(r,{size:$,color:q,multiple:w,selected:Y,onSelectedChange:e=>{const l=e.filter(e=>{const l=ne.get(e);return void 0!==l&&he(l)&&!l.disabled});pe(w?l:l.slice(-1)),(k??!w)&&ue(!1)},expanded:de,onExpandedChange:ie?()=>{}:e=>{void 0===N&&ce(e),M?.(e)},className:G?.tree,children:ge(oe)})})]})})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{TreeItem as n,TreeView as r}from"../tree-view/TreeView.js";import{PickerShell as t}from"../../internal/picker.js";import{searchHaystack as o,searchText as i}from"../../internal/search.js";import{actionMessages as c,commandMessages as s,comboboxMessages as d,useMessages as u}from"../../internal/i18n.js";import{useStyleDefaults as p}from"../../internal/defaults.js";function h(e,l=new Map){for(const a of e)l.set(a.value,a),a.children&&h(a.children,l);return l}function m(e,l=new Map){for(const a of e)l.set(a,o([a.searchLabel??("string"==typeof a.label?a.label:String(a.value))])),a.children&&m(a.children,l);return l}function f(e,l,a){if(""===l)return e;const n=[];for(const r of e){const e=r.children?f(r.children,l,a):void 0,t=(a.get(r)??"").includes(l);(t||e&&e.length>0)&&n.push({...r,children:t?r.children:e})}return n}function g(e,l=[]){for(const a of e)a.children&&a.children.length>0&&(l.push(a.value),g(a.children,l));return l}export const TreeSelect=/*@__PURE__*/a.forwardRef(function TreeSelect(o,b){const{items:v=[],value:x,defaultValue:y,onValueChange:S,multiple:w=!1,selectableBranches:C=!1,defaultExpanded:j,expanded:N,onExpandedChange:M,open:O,defaultOpen:z,onOpenChange:T,placeholder:V,clearable:E=!1,clearLabel:L,closeOnSelect:k,searchable:A=!1,searchPlaceholder:I,locale:P,format:R,name:B,size:$="md",color:q="primary",readOnly:D=!1,disabled:F=!1,classNames:G,...H}=p(o,["size","locale","labelPlacement"]),J=u(d,P),K=u(s,P),Q=u(c,P),U=e=>null==e?[]:Array.isArray(e)?e:[e],[W,X]=a.useState(()=>U(y)),Y=void 0!==x?U(x):W,[Z,_]=a.useState(z??!1),ee=O??Z,[le,ae]=a.useState(""),ne=a.useMemo(()=>h(v),[v]),re=a.useMemo(()=>m(v),[v]),te=i(le),oe=a.useMemo(()=>f(v,te,re),[v,te,re]),ie=a.useMemo(()=>""===te?void 0:g(oe),[te,oe]),[ce,se]=a.useState(()=>j??[]),de=ie??N??ce,ue=e=>{e&&(D||F)||(void 0===O&&_(e),e||ae(""),T?.(e))},pe=e=>{void 0===x&&X(e),S?.(e)},he=e=>e.selectable??(!(e.children&&e.children.length>0)||C),me=Y.map(e=>ne.get(e)).filter(e=>void 0!==e),fe=0===me.length?V??"":R?R(me):me.map(e=>e.label).reduce((e,l,a)=>0===a?[l]:[...e,", ",l],[]),ge=l=>l.map(l=>e(n,{value:l.value,label:l.label,startIcon:l.startIcon,disabled:l.disabled,selectable:he(l),className:G?.item,children:l.children?ge(l.children):null},l.value));return e(t,{...H,size:$,color:q,readOnly:D,disabled:F,triggerRef:b,display:fe,empty:0===me.length,clearable:E,onClear:()=>pe([]),open:ee,onOpenChange:ue,clearLabel:L??Q.clear,popupClassName:G?.popup,hiddenValues:B?Y.map(e=>({name:B,value:String(e)})):void 0,children:l("div",{className:"flex max-h-80 w-64 flex-col gap-2 overflow-hidden",children:[A?e("input",{type:"text",value:le,placeholder:I??K.search,"aria-label":I??K.search,onChange:e=>ae(e.currentTarget.value),className:"neba-input w-full shrink-0 bg-transparent px-1 py-1 [font:inherit] text-(--neba-fg) [outline:none] placeholder:text-(--neba-muted-fg)"}):null,e("div",{className:"min-h-0 flex-1 overflow-auto",children:0===oe.length?e("p",{className:`px-1 py-2 text-(--neba-muted-fg) ${G?.empty??""}`,children:J.empty}):e(r,{size:$,color:q,multiple:w,selected:Y,onSelectedChange:e=>{const l=e.filter(e=>{const l=ne.get(e);return void 0!==l&&he(l)&&!l.disabled});pe(w?l:l.slice(-1)),(k??!w)&&ue(!1)},expanded:de,onExpandedChange:ie?()=>{}:e=>{void 0===N&&se(e),M?.(e)},className:G?.tree,children:ge(oe)})})]})})});

package/dist/internal/defaults.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import type { NebaDensity, NebaSize, NebaVariant } from '../types.js';
+import type { NebaDensity, NebaLabelPlacement, NebaSize, NebaVariant } from '../types.js';
 /**
  * The prop values an application can set once instead of at every call site.
  *
- * Four, and the list is closed on purpose. These are the axes whose right value
+ * Five, and the list is closed on purpose. These are the axes whose right value
  * is a property of the *product* rather than of the control — a dense
- * application is dense everywhere, and a Korean one is Korean everywhere.
+ * application is dense everywhere, a Korean one is Korean everywhere, and a
+ * form whose fields put their labels in two different places looks assembled
+ * rather than designed.
  *
  * `color` is deliberately not among them. A component's colour default is often
  * semantic — an Alert is `info`, a Popconfirm is `danger`, severity carries
@@ -20,8 +22,10 @@ export interface NebaDefaults {
     variant?: NebaVariant;
     /** BCP 47 tag for every component that says a word on its own behalf. */
     locale?: string;
+    /** Where every field-shaped component draws its label. */
+    labelPlacement?: NebaLabelPlacement;
 }
-/** Which of the four a given component actually accepts. */
+/** Which of the five a given component actually accepts. */
 export type DefaultableKey = keyof NebaDefaults;
 /**
  * `null` when there is no provider, which is the common case and the one worth